Upgrade HDS dependency to 4.13 & migrate FlightIcon to Hds::Icon (#…

…24305) * upgraded to hds 4.13.0 and migrated FlightIcon instances to Hds::Icon * updated test selectors * fixing percy regression * Vertically align flyout dismiss button and remove unused hasDivider prop
hashicorp · Oct 30, 2024 · 00b88bd · 00b88bd
1 parent 202baa1
commit 00b88bd
Show file tree

Hide file tree

Showing 28 changed files with 102 additions and 105 deletions.
diff --git a/ui/app/components/actions-flyout.hbs b/ui/app/components/actions-flyout.hbs
@@ -33,7 +33,7 @@
           <Hds::ApplicationState as |A|>
             <A.Header @title="No actions in queue" />
             <A.Body @text="Your actions have been manually cleared. To run more, head to a Job or Task page with actions in its Jobspec, and an Actions dropdown will automatically populate." />
-            <A.Footer @hasDivider={{true}} as |F|>
+            <A.Footer as |F|>
               <F.LinkStandalone @icon="docs-link" @text="Learn more about Actions" @href="https://developer.hashicorp.com/nomad/docs/job-specification/action" @iconPosition="trailing" />
             </A.Footer>
           </Hds::ApplicationState>

diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs
@@ -18,15 +18,15 @@
         {{#if (not-eq @service.provider "consul")}}
           <span class="aggregate-status">
             {{#if (eq this.aggregateStatus 'Unhealthy')}}
-              <FlightIcon @name="x-square-fill" @color="#c84034" />
+              <Hds::Icon @name="x-square-fill" @color="#c84034" @isInline={{true}} />
               Unhealthy
             {{else if (eq this.aggregateStatus 'Unknown')}}
             <Tooltip @text="The parent allocation for this service is not running" @isFullText={{true}}>
-              <FlightIcon @name="help" @color="#999999" />
+              <Hds::Icon @name="help" @color="#999999" @isInline={{true}} />
               Health Unknown
             </Tooltip>
             {{else}}
-              <FlightIcon @name="check-square-fill" @color="#25ba81" />
+              <Hds::Icon @name="check-square-fill" @color="#25ba81" @isInline={{true}} />
               Healthy
             {{/if}}
           </span>
@@ -133,10 +133,10 @@
             <td class="status">
               <span>
                 {{#if (eq row.model.Status "success")}}
-                  <FlightIcon @name="check-square-fill" @color="#25ba81" />
+                  <Hds::Icon @name="check-square-fill" @color="#25ba81" @isInline={{true}} />
                   Healthy
                 {{else if (eq row.model.Status "failure")}}
-                  <FlightIcon @name="x-square-fill" @color="#c84034" />
+                  <Hds::Icon @name="x-square-fill" @color="#c84034" @isInline={{true}} />
                   Unhealthy
                 {{else if (eq row.model.Status "pending")}}
                   Pending

diff --git a/ui/app/components/job-status/allocation-status-block.hbs b/ui/app/components/job-status/allocation-status-block.hbs
@@ -45,11 +45,11 @@
         {{#if (eq @status "running")}}
           <span class="alloc-health-indicator">
             {{#if (eq @health "healthy")}}
-              <FlightIcon @name="check" @color="#25ba81" />
+              <Hds::Icon @name="check" @color="#25ba81" @isInline={{true}} />
             {{else if (eq @health "unhealthy")}}
-              <FlightIcon @name="x" @color="#c84034" />
+              <Hds::Icon @name="x" @color="#c84034" @isInline={{true}} />
             {{else}}
-              <FlightIcon @name="running" @color="black" />
+              <Hds::Icon @name="running" @color="black" @isInline={{true}} />
             {{/if}}
           </span>
         {{/if}}

diff --git a/ui/app/components/job-status/failed-or-lost.hbs b/ui/app/components/job-status/failed-or-lost.hbs
@@ -9,7 +9,7 @@
     {{#if @supportsRescheduling}}
       <span>
         <Hds::TooltipButton @text="Allocations that have been rescheduled, on another node if possible, due to failure or manual restart" aria-label="Info">
-          <FlightIcon @name="info" />
+          <Hds::Icon @name="info" @isInline={{true}} />
         </Hds::TooltipButton>
         <ConditionalLinkTo
           @condition={{@rescheduledAllocs.length}}
@@ -25,7 +25,7 @@
 
     <span>
       <Hds::TooltipButton @text="Allocations that have been restarted in-place due to a task failure or manual restart" aria-label="Info">
-        <FlightIcon @name="info" />
+        <Hds::Icon @name="info" @isInline={{true}} />
       </Hds::TooltipButton>
       <ConditionalLinkTo
         @condition={{@restartedAllocs.length}}

diff --git a/ui/app/components/job-status/individual-allocation.hbs b/ui/app/components/job-status/individual-allocation.hbs
@@ -23,11 +23,11 @@
     {{#if (eq @status "running")}}
       <span class="alloc-health-indicator">
         {{#if (eq @health "healthy")}}
-          <FlightIcon @name="check" @color="white" />
+          <Hds::Icon @name="check" @color="white" @isInline={{true}} />
         {{else if (eq @health "unhealthy")}}
-          <FlightIcon @name="x" @color="white" />
+          <Hds::Icon @name="x" @color="white" @isInline={{true}} />
         {{else}}
-          <FlightIcon @name="running" @color="white" />
+          <Hds::Icon @name="running" @color="white" @isInline={{true}} />
         {{/if}}
       </span>
     {{/if}}

diff --git a/ui/app/components/job-status/latest-deployment.hbs b/ui/app/components/job-status/latest-deployment.hbs
@@ -7,7 +7,7 @@
   <LinkTo @route="jobs.job.deployments" @model={{@job}}>
     <h4>
       Latest Deployment
-      <FlightIcon @name="arrow-right" />
+      <Hds::Icon @name="arrow-right" @isInline={{true}} />
     </h4>
   </LinkTo>
   <Hds::Badge @text={{capitalize this.status}} @size="small" @color={{this.statusColor}} @type="filled" />

diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
@@ -140,11 +140,11 @@
               <span class="represented-allocation legend-example {{health}}">
                 <span class="alloc-health-indicator">
                   {{#if (eq health "healthy")}}
-                    <FlightIcon @name="check" @color="#25ba81" />
+                    <Hds::Icon @name="check" @color="#25ba81" @isInline={{true}} />
                   {{else if (eq health "unhealthy")}}
-                    <FlightIcon @name="x" @color="#c84034" />
+                    <Hds::Icon @name="x" @color="#c84034" @isInline={{true}} />
                   {{else}}
-                    <FlightIcon @name="running" @color="black" class="not-animated" />
+                    <Hds::Icon @name="running" @color="black" class="not-animated" @isInline={{true}} />
                   {{/if}}
                 </span>
               </span>

diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs
@@ -13,7 +13,7 @@
 		<div class="name-grid">
 			<LinkTo title={{this.task.name}} class="task-name" @route="allocations.allocation.task" @models={{array this.task.allocation this.task}}>{{this.task.name}}</LinkTo>
 			<button type="button" class="logs-sidebar-trigger button is-borderless is-inline is-compact" onclick={{action "handleTaskLogsClick" this.task}}>
-				<FlightIcon @name="logs" />View Logs
+				<Hds::Icon @name="logs" @isInline={{true}} />View Logs
 			</button>
 		</div>
 	</td>

diff --git a/ui/app/components/variable-paths.hbs b/ui/app/components/variable-paths.hbs
@@ -27,7 +27,7 @@
           }}
         >
           <span>
-            <FlightIcon @name="folder" />
+            <Hds::Icon @name="folder" @isInline={{true}} />
             <LinkTo @route="variables.path" @model={{folder.data.absolutePath}} @query={{hash namespace="*"}}>
               {{trim-path folder.name}}
             </LinkTo>
@@ -48,7 +48,7 @@
         }}
       >
         <B.Td>
-          <FlightIcon @name="file-text" />
+          <Hds::Icon @name="file-text" @isInline={{true}} />
           {{#if (can "read variable" path=file.absoluteFilePath namespace=file.variable.namespace)}}
           <LinkTo
             @route="variables.variable"

diff --git a/ui/app/styles/components/actions.scss b/ui/app/styles/components/actions.scss
@@ -60,18 +60,24 @@
     animation-fill-mode: both;
   }
 
-  & > .hds-flyout__header {
+  & .hds-flyout__header {
     position: relative;
     z-index: $z-base;
-    .hds-flyout__title {
+
+    .hds-flyout__title .hds-text {
       display: flex;
       align-items: center;
       gap: 1rem;
       justify-content: space-between;
+
       h3 {
         flex-grow: 1;
       }
     }
+
+    .hds-dismiss-button {
+      align-self: center;
+    }
   }
 
   .hds-application-state {

diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -423,7 +423,7 @@
     }
   }
 
-  .legend-item .represented-allocation .flight-icon {
+  .legend-item .represented-allocation .hds-icon {
     animation: none;
   }
 

diff --git a/ui/app/templates/administration/policies/policy.hbs b/ui/app/templates/administration/policies/policy.hbs
@@ -58,7 +58,7 @@
             <h3>Create Tokens from the Nomad CLI</h3>
           </div>
           <div class="boxed-section-body">
-            <p>When you're ready to create more tokens, you can do so via the <a class="external-link" href="https://developer.hashicorp.com/nomad/docs/commands" target="_blank" rel="noopener noreferrer">Nomad CLI <FlightIcon @name="external-link" /></a> with the following:
+            <p>When you're ready to create more tokens, you can do so via the <a class="external-link" href="https://developer.hashicorp.com/nomad/docs/commands" target="_blank" rel="noopener noreferrer">Nomad CLI <Hds::Icon @name="external-link" @isInline={{true}} /></a> with the following:
               <pre>
                 <code>{{this.newTokenString}}</code>
                 <CopyButton

diff --git a/ui/app/templates/administration/roles/role.hbs b/ui/app/templates/administration/roles/role.hbs
@@ -59,7 +59,7 @@
             <h3>Create Tokens from the Nomad CLI</h3>
           </div>
           <div class="boxed-section-body">
-            <p>When you're ready to create more tokens, you can do so via the <a class="external-link" href="https://developer.hashicorp.com/nomad/docs/commands" target="_blank" rel="noopener noreferrer">Nomad CLI <FlightIcon @name="external-link" /></a> with the following:
+            <p>When you're ready to create more tokens, you can do so via the <a class="external-link" href="https://developer.hashicorp.com/nomad/docs/commands" target="_blank" rel="noopener noreferrer">Nomad CLI <Hds::Icon @name="external-link" @isInline={{true}} /></a> with the following:
               <pre>
                 <code>{{this.newTokenString}}</code>
                 <CopyButton

diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -311,11 +311,11 @@
             >
               <td class="is-narrow">
                 {{#if (eq row.model.provider "nomad")}}
-                  <FlightIcon @name="nomad-color" />
+                  <Hds::Icon @name="nomad-color" @isInline={{true}} />
                 {{else}}
-                  <FlightIcon @name="consul-color" />
+                  <Hds::Icon @name="consul-color" @isInline={{true}} />
                   {{#if row.model.connect}}
-                    <FlightIcon @name="mesh" @color="#444444" />
+                    <Hds::Icon @name="mesh" @color="#444444" @isInline={{true}} />
                   {{/if}}
                 {{/if}}
               </td>

diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
@@ -186,7 +186,7 @@
           aria-label="More information"
           class="is-faded"
         >
-          <FlightIcon @name="info" />
+          <Hds::Icon @name="info" @isInline={{true}} />
         </Hds::TooltipButton>
         <span
           data-test-node-id
@@ -440,7 +440,7 @@
         aria-label="More information"
         class="is-faded"
       >
-        <FlightIcon @name="info" />
+        <Hds::Icon @name="info" @isInline={{true}} />
       </Hds::TooltipButton>
 
     </div>

diff --git a/ui/app/templates/components/job-service-row.hbs b/ui/app/templates/components/job-service-row.hbs
@@ -19,10 +19,10 @@
     }}
   >
     {{#if (eq @service.provider "nomad")}}
-      <FlightIcon @name="nomad-color" />
+      <Hds::Icon @name="nomad-color" @isInline={{true}} />
       <LinkTo class="is-primary" @route="jobs.job.services.service" @model={{@service}} @query={{hash level=@service.level}}>{{@service.name}}</LinkTo>
     {{else}}
-      <FlightIcon @name="consul-color" />
+      <Hds::Icon @name="consul-color" @isInline={{true}} />
       {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}}
         <a class="is-primary" href={{this.consulRedirectLink}} target="_blank" rel="noopener noreferrer">
           {{@service.name}}
@@ -31,7 +31,7 @@
         {{@service.name}}
       {{/if}}
       {{#if @service.connect}}
-        <FlightIcon @name="mesh" @color="#444444" />
+        <Hds::Icon @name="mesh" @color="#444444" @isInline={{true}} />
       {{/if}}
     {{/if}}
   </td>

diff --git a/ui/app/templates/components/scale-events-accordion.hbs b/ui/app/templates/components/scale-events-accordion.hbs
@@ -33,9 +33,9 @@
                to
               {{a.item.count}}" aria-label="More information">
             {{#if a.item.increased}}
-              <FlightIcon @name="arrow-up" />
+              <Hds::Icon @name="arrow-up" @isInline={{true}} />
             {{else}}
-              <FlightIcon @name="arrow-down" />
+              <Hds::Icon @name="arrow-down" @isInline={{true}} />
             {{/if}}
           </Hds::TooltipButton>
           <span data-test-count>

diff --git a/ui/app/templates/components/task-row.hbs b/ui/app/templates/components/task-row.hbs
@@ -6,7 +6,7 @@
 <td class="is-narrow">
   {{#unless this.task.driverStatus.healthy}}
     <Hds::TooltipButton data-test-icon="unhealthy-driver" @text="{{this.task.driver}} is unhealthy" aria-label="More information">
-      <FlightIcon @name="alert-triangle" />
+      <Hds::Icon @name="alert-triangle" @isInline={{true}} />
     </Hds::TooltipButton>
   {{/unless}}
 </td>

diff --git a/ui/app/templates/components/topo-viz/node.hbs b/ui/app/templates/components/topo-viz/node.hbs
@@ -12,15 +12,15 @@
           @text="Client is draining"
           aria-label="Client is draining"
         >
-          <FlightIcon @name="clock" />
+          <Hds::Icon @name="clock" @isInline={{true}} />
         </Hds::TooltipButton>
       {{else if (not @node.node.isEligible)}}
         <Hds::TooltipButton
           data-test-status-icon
           @text="Client is ineligible"
           aria-label="Client is ineligible"
         >
-          <FlightIcon @name="lock" />
+          <Hds::Icon @name="lock" @isInline={{true}} />
         </Hds::TooltipButton>
       {{/if}}
       <LinkTo @route="clients.client" @model={{@node.node.id}} {{hds-tooltip "Node Name"}}>{{@node.node.name}}</LinkTo>

diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
@@ -342,7 +342,7 @@
             />
           {{/if}}
         </A.Body>
-        <A.Footer @hasDivider={{true}} as |F|>
+        <A.Footer as |F|>
           <Hds::Button
             @text="Reset Filters"
             @color="tertiary"
@@ -353,7 +353,7 @@
 
           <F.LinkStandalone @icon="docs" @text="Learn more about Filter Expressions" @href="https://developer.hashicorp.com/nomad/api-docs#creating-expressions" @iconPosition="trailing" />
 
-          <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
+          <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run"
             @iconPosition="trailing" />
 
         </A.Footer>
@@ -362,8 +362,8 @@
         <A.Body
           @text="No jobs found."
         />
-        <A.Footer @hasDivider={{true}} as |F|>
-          <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
+        <A.Footer as |F|>
+          <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run"
             @iconPosition="trailing" />
         </A.Footer>
       {{/if}}

diff --git a/ui/app/templates/jobs/job/services/service.hbs b/ui/app/templates/jobs/job/services/service.hbs
@@ -6,7 +6,7 @@
 <section class="section service-list">
   <h1 class="title">
     <LinkTo class="back-link" @route="jobs.job.services">
-      <FlightIcon @name="chevron-left" @title="Back to services" @size="24" />
+      <Hds::Icon @name="chevron-left" @title="Back to services" @size="24" @isInline={{true}} />
     </LinkTo>
     {{this.model.name}}
   </h1>

diff --git a/ui/app/templates/variables/variable/index.hbs b/ui/app/templates/variables/variable/index.hbs
@@ -125,10 +125,7 @@
               }}
 
             >
-              <FlightIcon
-                @name={{if B.data.isVisible "eye" "eye-off"}}
-                @title={{if B.data.isVisible "Hide Value" "Show Value"}}
-              />
+              <Hds::Icon @name={{if B.data.isVisible "eye" "eye-off"}} @title={{if B.data.isVisible "Hide Value" "Show Value"}} @isInline={{true}} />
             </button>
 
             {{#if B.data.isVisible}}

diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
@@ -40,7 +40,6 @@ module.exports = function (defaults) {
       precision: 4,
       includePaths: [
         './node_modules/@hashicorp/design-system-tokens/dist/products/css',
-        './node_modules/@hashicorp/ember-flight-icons/dist/styles',
         './node_modules/@hashicorp/design-system-components/dist/styles',
       ],
     },

diff --git a/ui/package.json b/ui/package.json
@@ -167,8 +167,7 @@
   },
   "dependencies": {
     "@babel/helper-string-parser": "^7.19.4",
-    "@hashicorp/design-system-components": "^4.3.0",
-    "@hashicorp/ember-flight-icons": "^5.0.2",
+    "@hashicorp/design-system-components": "^4.13.0",
     "@percy/cli": "^1.30.0",
     "@percy/ember": "^4.2.0",
     "curved-arrows": "^0.1.0",

diff --git a/ui/tests/acceptance/variables-test.js b/ui/tests/acceptance/variables-test.js
@@ -410,9 +410,7 @@ module('Acceptance | variables', function (hooks) {
       await typeIn('[data-test-path-input]', 'foo/bar');
       await clickToggle('[data-test-variable-namespace-filter]');
       assert
-        .dom(
-          '[data-test-variable-namespace-filter] .hds-menu-primitive__content'
-        )
+        .dom('[data-test-variable-namespace-filter] .hds-dropdown__content')
         .exists('Namespace can be edited.');
       assert
         .dom('[data-test-variable-namespace-filter]')

diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js
@@ -22,7 +22,7 @@ const heliosFacet = (scope) => ({
   scope,
   toggle: clickable('button'),
   options: collection(
-    '.hds-menu-primitive__content .hds-dropdown__content .hds-dropdown__list .hds-dropdown-list-item--variant-checkbox',
+    '.hds-dropdown__content .hds-dropdown__list .hds-dropdown-list-item--variant-checkbox',
     {
       toggle: clickable('label'),
       count: text('label .hds-dropdown-list-item__count'),

diff --git a/ui/tests/pages/components/topo-viz/node.js b/ui/tests/pages/components/topo-viz/node.js
@@ -31,7 +31,7 @@ export default (scope) => ({
 
   label: text('[data-test-label]'),
   labelIsPresent: isPresent('[data-test-label]'),
-  statusIcon: attribute('class', '[data-test-status-icon] .flight-icon'),
+  statusIcon: attribute('class', '[data-test-status-icon] .hds-icon'),
   statusIconLabel: attribute('aria-label', '[data-test-status-icon]'),
 
   selectNode: clickable('[data-test-node-background]'),