`CodeBlock`: update to support dynamic content #1853

KristinLBradley · 2023-12-04T22:28:14Z

📌 Summary

If merged, this PR:

updates the CodeBlock component to enable it to render updated dynamic content
addresses an issue where line numbers are misaligned due to an issue with font declaration
suppresses a build warning caused by parsing Ember comments in the component template.

Limitations:

dynamic content does not work with @hasLineNumbers={{true}}; this comes from a limitation with the line-numbers Prism plugin where it can only be instantiated/called once.
@hasLineNumbers={{true}} does not work as expected when used in a Tabs tab that is not visible at render time.

Showcase: https://hds-showcase-git-test-codeblock-with-dynamic-content-hashicorp.vercel.app/components/code-block

📸 Screenshots

Misalignment issue in HCP. The more line there are the more you can see the issue.

Before	After

🔗 External links

Related Jira ticket: HDS-2827

👀 Component checklist

Percy was checked for any visual regression
A11y tests have been run locally (yarn test:a11y --filter="COMPONENT-NAME")
If documenting a new component, an acceptance test that includes the a11yAudit has been added
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

vercel · 2023-12-04T22:28:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jan 16, 2024 0:08am
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 16, 2024 0:08am

KristinLBradley · 2023-12-05T22:12:28Z

packages/components/addon/components/hds/code-block/index.js

+          code,
+          element,
+        });
+      }, 100);


I tried using next to replace this setTimeout and it still functions.

I tried using schedule instead and got errors but maybe I was using it wrong so I'll experiment a bit more.

I pushed up the variation using next

OK, then let's wait for @alex-ju to come back from PTO and we can then decide how to take it from here.

using next sounds like a great idea to me (not sure how I've not thought about it) – do all the examples work as expected with this change, or is it something that prevents us from moving forward with this change?

It seems to work although I can do more testing.

if we could also test this change to make sure it addresses the actual need in boundary (where you identified the issue) that would be even better – let me know if I can be of help

@alex-ju I tried figuring out how to add an integration test but haven't been able to figure out a way to do it.

I can try to test it just in Boundary next though.

cool! I can look into the integration test bit

I tested the CodeBlock updates in Boundary and everything worked as expected. The content updates dynamically.

alex-ju · 2023-12-14T18:33:38Z

packages/components/tests/integration/components/hds/code-block/index-test.js

+      .dom('#test-code-block pre code')
+      .hasText("console.log('Hello world');");
+    this.set('value', "console.log('Lorem ipsum');");
+    await settled();


I initially tried with rerender, but it's too 'quick' (in a sense that it doesn't wait for the whole promise to end) so I ended up using settled.

Ember idiomatic and more deterministic

This was caused by incorrect `font-family` declaration

didoo

Left a couple of comments.

didoo · 2024-01-02T10:20:00Z

packages/components/tests/dummy/app/templates/components/code-block.hbs

+    @value={{this.codeValue}}
+    @language="javascript"
+    @hasCopyButton={{true}}
+    @hasLineNumbers={{false}}


I noticed that if you set this to "true" (and probably we should) when the lines gets updated, the line numbers don't.

oh, no – I'll look and see if I can find a workaround for this – doesn't look great

I looked into this during the first week of January and today again. Unfortunately, I can not see a way in which the @hasLineNumbers feature would work with dynamic content.

For this reason, I suggest the pragmatic approach of fixing the immediate issues (I updated the PR description to highlight what this PR covers and what doesn't) to address current instances in HCP and Boundary then leave the hasLineNumbers issue for future evaluation (it may require us to fork the addon or move away from Prism altogether). If you find this approach acceptable, I can create a ticket to track this use case and update the CodeBlock guidance to call out the current limitations.

packages/components/addon/components/hds/code-block/index.js

didoo

LGTM 👍

hashibot-hds added the packages/components label Dec 4, 2023

vercel bot deployed to Preview – hds-showcase December 4, 2023 22:28 View deployment

vercel bot deployed to Preview – hds-website December 4, 2023 22:30 View deployment

vercel bot deployed to Preview – hds-showcase December 4, 2023 23:32 View deployment

vercel bot deployed to Preview – hds-website December 4, 2023 23:34 View deployment

vercel bot deployed to Preview – hds-showcase December 5, 2023 10:25 View deployment

didoo force-pushed the test-codeblock-with-dynamic-content branch from b93bdf3 to 49306c0 Compare December 5, 2023 10:26

vercel bot deployed to Preview – hds-showcase December 5, 2023 10:28 View deployment

vercel bot deployed to Preview – hds-website December 5, 2023 10:30 View deployment

KristinLBradley commented Dec 5, 2023

View reviewed changes

vercel bot deployed to Preview – hds-showcase December 5, 2023 22:25 View deployment

vercel bot deployed to Preview – hds-website December 5, 2023 22:27 View deployment

vercel bot deployed to Preview – hds-showcase December 11, 2023 18:27 View deployment

vercel bot deployed to Preview – hds-website December 11, 2023 18:28 View deployment

KristinLBradley force-pushed the test-codeblock-with-dynamic-content branch from 6884711 to 5017c1f Compare December 11, 2023 18:58

vercel bot deployed to Preview – hds-showcase December 11, 2023 19:00 View deployment

vercel bot deployed to Preview – hds-website December 11, 2023 19:01 View deployment

KristinLBradley changed the title ~~Test code for CodeBlock dynamic content update~~ CodeBlock: update to support dynamic content Dec 11, 2023

vercel bot deployed to Preview – hds-showcase December 14, 2023 18:23 View deployment

vercel bot deployed to Preview – hds-website December 14, 2023 18:25 View deployment

alex-ju reviewed Dec 14, 2023

View reviewed changes

KristinLBradley and others added 7 commits December 18, 2023 17:40

Test code for CodeBlock dynamic content update

89993c2

Test replacing timeout with next

a6dbb87

Update Showcase to reorganize and uncomment main content

9a48c8c

Add test for @value argument change

1415f99

Remove commented code

2bae1d9

Dispatch resize event using afterRender instead of setTimeout

204f991

Ember idiomatic and more deterministic

Remove whitespace control via handlebars

b7a1e14

alex-ju force-pushed the test-codeblock-with-dynamic-content branch from 9be22d4 to b7a1e14 Compare December 18, 2023 17:41

Fix line number alignment issue

cc377c8

This was caused by incorrect `font-family` declaration

vercel bot deployed to Preview – hds-showcase December 19, 2023 10:04 View deployment

vercel bot deployed to Preview – hds-website December 19, 2023 10:06 View deployment

alex-ju added 2 commits December 20, 2023 10:15

Add example replicating issue with @lineWrapping in a tab

ffa6101

Remove <pre> output

fb501b4

alex-ju force-pushed the test-codeblock-with-dynamic-content branch from 7aff5aa to fb501b4 Compare December 28, 2023 11:52

vercel bot deployed to Preview – hds-showcase December 28, 2023 11:54 View deployment

vercel bot deployed to Preview – hds-website December 28, 2023 11:56 View deployment

alex-ju marked this pull request as ready for review December 28, 2023 12:14

vercel bot deployed to Preview – hds-showcase December 28, 2023 12:15 View deployment

vercel bot deployed to Preview – hds-website December 28, 2023 12:17 View deployment

alex-ju requested a review from didoo December 28, 2023 12:50

alex-ju force-pushed the test-codeblock-with-dynamic-content branch from 7ee9c5e to bba003c Compare December 28, 2023 14:21

vercel bot deployed to Preview – hds-showcase December 28, 2023 14:23 View deployment

vercel bot deployed to Preview – hds-website December 28, 2023 14:25 View deployment

didoo reviewed Jan 2, 2024

View reviewed changes

alex-ju added 2 commits January 15, 2024 15:43

Explain the need for afterRender

664c756

Add changelog entry

5d2cfbd

alex-ju force-pushed the test-codeblock-with-dynamic-content branch from bba003c to 5d2cfbd Compare January 15, 2024 15:44

vercel bot deployed to Preview – hds-showcase January 15, 2024 15:46 View deployment

vercel bot deployed to Preview – hds-website January 15, 2024 15:48 View deployment

didoo approved these changes Jan 16, 2024

View reviewed changes

Call out current CodeBlock limitations

f09a71c

hashibot-hds added the docs-website Content updates to the documentation website label Jan 16, 2024

vercel bot deployed to Preview – hds-showcase January 16, 2024 12:06 View deployment

vercel bot deployed to Preview – hds-website January 16, 2024 12:08 View deployment

alex-ju merged commit 6de9afa into main Jan 16, 2024
15 checks passed

alex-ju deleted the test-codeblock-with-dynamic-content branch January 16, 2024 16:21

hashibot-hds mentioned this pull request Jan 16, 2024

Version Packages #1888

Merged

alex-ju mentioned this pull request Jan 19, 2024

Version Packages #1895

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`CodeBlock`: update to support dynamic content #1853

`CodeBlock`: update to support dynamic content #1853

KristinLBradley commented Dec 4, 2023 •

edited by alex-ju

vercel bot commented Dec 4, 2023 •

edited

KristinLBradley Dec 5, 2023

KristinLBradley Dec 5, 2023

didoo Dec 6, 2023

alex-ju Dec 11, 2023

KristinLBradley Dec 11, 2023

alex-ju Dec 11, 2023

KristinLBradley Dec 11, 2023

alex-ju Dec 11, 2023

KristinLBradley Dec 11, 2023

alex-ju Dec 14, 2023

didoo left a comment

didoo Jan 2, 2024

alex-ju Jan 2, 2024 •

edited

alex-ju Jan 15, 2024 •

edited

didoo left a comment

CodeBlock: update to support dynamic content #1853

CodeBlock: update to support dynamic content #1853

Conversation

KristinLBradley commented Dec 4, 2023 • edited by alex-ju

📌 Summary

📸 Screenshots

🔗 External links

👀 Component checklist

vercel bot commented Dec 4, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

didoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju Jan 2, 2024 • edited

Choose a reason for hiding this comment

alex-ju Jan 15, 2024 • edited

Choose a reason for hiding this comment

didoo left a comment

Choose a reason for hiding this comment

`CodeBlock`: update to support dynamic content #1853

`CodeBlock`: update to support dynamic content #1853

KristinLBradley commented Dec 4, 2023 •

edited by alex-ju

vercel bot commented Dec 4, 2023 •

edited

alex-ju Jan 2, 2024 •

edited

alex-ju Jan 15, 2024 •

edited