Migrate FlightIcon to Hds::Icon (#28979)

* Migrate `FlightIcon` to `Hds::Icon`

* Update getter name for Icon component

ui/app/components/dashboard/replication-state-text.hbs

@@ -23,8 +23,9 @@
     >
       {{or @state "not set up"}}
 
-      <FlightIcon
+      <Hds::Icon
         @name={{or @clusterStates.glyph "x-circle"}}
+        @isInline={{true}}
         class={{if @clusterStates.isOk "has-text-success" "has-text-danger"}}
       />
     </T.Trigger>

ui/app/styles/components/empty-state-component.scss

@@ -57,7 +57,7 @@
 }
 
 .empty-state-icon > .hs-icon,
-.empty-state-icon > .flight-icon {
+.empty-state-icon > .hds-icon {
   float: left;
   margin-right: $spacing-8;
 }

ui/app/styles/components/icon.scss

@@ -20,8 +20,8 @@
   color: $blue;
 }
 
-.flight-icon {
-  &.flight-icon-display-inline {
+.hds-icon {
+  &.hds-icon--is-inline {
     vertical-align: middle;
     margin-left: $spacing-4;
     margin-right: $spacing-4;

ui/app/templates/components/okta-number-challenge.hbs

@@ -20,7 +20,7 @@
       </h1>
     {{else}}
       <div class="has-top-margin-l has-bottom-margin-m is-flex-row">
-        <FlightIcon @name="loading" />
+        <Hds::Icon @name="loading" @isInline={{true}} />
         <p class="has-left-margin-xs" data-test-loading>Please wait...</p>
       </div>
     {{/if}}

ui/ember-cli-build.js

@@ -50,7 +50,6 @@ const appConfig = {
     precision: 4,
     includePaths: [
       './node_modules/@hashicorp/design-system-components/dist/styles',
-      './node_modules/@hashicorp/ember-flight-icons/dist/styles',
       './node_modules/@hashicorp/design-system-tokens/dist/products/css',
     ],
   },

ui/lib/core/addon/components/form-field.hbs

@@ -43,7 +43,7 @@
                 {{or val.label val.value val}}
                 {{#if val.helpText}}
                   <Hds::TooltipButton @text={{val.helpText}} aria-label="More information">
-                    <FlightIcon @name="info" />
+                    <Hds::Icon @name="info" @isInline={{true}} />
                   </Hds::TooltipButton>
                 {{/if}}
                 {{#if this.hasRadioSubText}}

ui/lib/core/addon/components/icon.hbs

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-{{#if this.isFlightIcon}}
-  <FlightIcon @name={{@name}} @size={{this.size}} @stretched={{@stretched}} ...attributes />
+{{#if this.isHdsIcon}}
+  <Hds::Icon @name={{@name}} @size={{this.size}} @stretched={{@stretched}} @isInline={{true}} ...attributes />
 {{else}}
   <span class="hs-icon {{this.hsIconClass}}" aria-hidden="true" ...attributes>
     {{svg-jar @name}}

ui/lib/core/addon/components/icon.js

@@ -34,8 +34,8 @@ export default class IconComponent extends Component {
     return this.args.size || '16';
   }
 
-  // favor flight icon set and fall back to structure icons if not found
-  get isFlightIcon() {
+  // favor HDS icon set and fall back to structure icons if not found
+  get isHdsIcon() {
     return this.args.name ? flightIconNames.includes(this.args.name) : false;
   }
 

ui/lib/core/addon/components/stat-text.hbs

@@ -12,7 +12,7 @@
     {{@label}}
     {{#if @tooltipText}}
       <Hds::TooltipButton @text={{@tooltipText}} aria-label="more information about {{@label}}">
-        <FlightIcon @name="info" />
+        <Hds::Icon @name="info" @isInline={{true}} />
       </Hds::TooltipButton>
     {{/if}}
   </div>

ui/lib/core/addon/components/string-list.hbs

@@ -53,7 +53,7 @@
         {{/if}}
       </div>
       {{#if (includes index this.indicesWithComma)}}
-        <FlightIcon @name="alert-triangle" @color="var(--token-color-foreground-warning)" @size="24" />
+        <Hds::Icon @name="alert-triangle" @color="var(--token-color-foreground-warning)" @size="24" @isInline={{true}} />
       {{/if}}
     </div>
   {{/each}}

ui/lib/core/package.json

@@ -24,7 +24,6 @@
     "ember-svg-jar": "*",
     "ember-truth-helpers": "*",
     "escape-string-regexp": "*",
-    "@hashicorp/ember-flight-icons": "*",
     "@hashicorp/flight-icons": "*",
     "@hashicorp/design-system-components": "*",
     "codemirror": "*",

ui/lib/sync/addon/components/secrets/page/overview.hbs

@@ -99,7 +99,7 @@
                   aria-label="More information"
                   class="is-v-centered"
                 >
-                  <FlightIcon @name="info" />
+                  <Hds::Icon @name="info" @isInline={{true}} />
                 </Hds::TooltipButton>
               </H.Th>
               <H.Th @align="right">Last updated</H.Th>

ui/package.json

@@ -234,7 +234,6 @@
   "dependencies": {
     "@babel/core": "^7.24.0",
     "@hashicorp/design-system-components": "~4.13.0",
-    "@hashicorp/ember-flight-icons": "^5.1.3",
     "ember-auto-import": "^2.7.2",
     "handlebars": "4.7.7",
     "highlight.js": "^10.4.1",

ui/tests/acceptance/mfa-login-enforcement-test.js

@@ -106,7 +106,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
     assert.dom('[data-test-list-item]').exists({ count: enforcements.length }, 'Enforcements list renders');
     assert
       .dom(`[data-test-list-item="${item.name}"] svg`)
-      .hasClass('flight-icon-lock', 'Lock icon renders for list item');
+      .hasClass('hds-icon-lock', 'Lock icon renders for list item');
     assert.dom(`[data-test-list-item-title="${item.name}"]`).hasText(item.name, 'Enforcement name renders');
 
     await click('[data-test-popup-menu-trigger]');
@@ -132,7 +132,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
     await click(`[data-test-list-item="${enforcement.name}"]`);
     // heading
     assert.dom('h1').includesText(enforcement.name, 'Name renders in title');
-    assert.dom('h1 svg').hasClass('flight-icon-lock', 'Lock icon renders in title');
+    assert.dom('h1 svg').hasClass('hds-icon-lock', 'Lock icon renders in title');
     assert.dom('[data-test-tab="targets"]').hasClass('active', 'Targets tab is active by default');
     await waitFor('[data-test-target]', { timeout: 5000 });
     assert.dom('[data-test-target]').exists({ count: 4 }, 'Targets render in list');

ui/tests/integration/components/chevron-test.js

@@ -17,13 +17,13 @@ module('Integration | Component | chevron', function (hooks) {
     // Handle any actions with this.set('myAction', function(val) { ... });
 
     await render(hbs`<Chevron />`);
-    assert.dom('.flight-icon').exists('renders');
+    assert.dom('.hds-icon').exists('renders');
 
     await render(hbs`<Chevron @isButton={{true}} />`);
-    assert.dom('.flight-icon').hasClass('hs-icon-button-right', 'renders');
+    assert.dom('.hds-icon').hasClass('hs-icon-button-right', 'renders');
 
     await render(hbs`<Chevron @direction='left' @isButton={{true}} />`);
-    assert.dom('.flight-icon').doesNotHaveClass('hs-icon-button-right', 'renders');
+    assert.dom('.hds-icon').doesNotHaveClass('hs-icon-button-right', 'renders');
 
     const promise = waitForError();
     render(hbs`<Chevron @direction='lol' />`);

ui/tests/integration/components/icon-test.js

@@ -54,14 +54,14 @@ module('Integration | Component | icon', function (hooks) {
     );
   });
 
-  test('it should render FlightIcon', async function (assert) {
+  test('it should render Hds::Icon', async function (assert) {
     assert.expect(3);
 
     await render(hbs`<Icon @name="x" />`);
-    assert.dom('.flight-icon').exists('FlightIcon renders when provided name of icon in set');
-    assert.dom('.flight-icon').hasAttribute('width', '16', 'Default size applied svg');
+    assert.dom('.hds-icon').exists('Hds::Icon renders when provided name of icon in set');
+    assert.dom('.hds-icon').hasAttribute('width', '16', 'Default size applied svg');
 
     await render(hbs`<Icon @name="x" @size="24" />`);
-    assert.dom('.flight-icon').hasAttribute('width', '24', 'Size applied to svg');
+    assert.dom('.hds-icon').hasAttribute('width', '24', 'Size applied to svg');
   });
 });

ui/tests/integration/components/info-table-row-test.js

@@ -133,25 +133,25 @@ module('Integration | Component | InfoTableRow', function (hooks) {
       @defaultShown={{this.default}}
     />`);
 
-    assert.dom('div.column.is-one-quarter .flight-icon').exists('Renders a dash (-) for the label');
+    assert.dom('div.column.is-one-quarter .hds-icon').exists('Renders a dash (-) for the label');
 
     this.set('value', '');
     this.set('label', LABEL);
-    assert.dom('div.column.is-flex-center .flight-icon').exists('Renders a dash (-) for empty string value');
+    assert.dom('div.column.is-flex-center .hds-icon').exists('Renders a dash (-) for empty string value');
 
     this.set('value', null);
-    assert.dom('div.column.is-flex-center .flight-icon').exists('Renders a dash (-) for null value');
+    assert.dom('div.column.is-flex-center .hds-icon').exists('Renders a dash (-) for null value');
 
     this.set('value', undefined);
-    assert.dom('div.column.is-flex-center .flight-icon').exists('Renders a dash (-) for undefined value');
+    assert.dom('div.column.is-flex-center .hds-icon').exists('Renders a dash (-) for undefined value');
 
     this.set('default', DEFAULT);
     assert.dom('[data-test-value-div]').hasText(DEFAULT, 'Renders default text if value is empty');
 
     this.set('value', '');
     this.set('label', '');
     this.set('default', '');
-    const dashCount = document.querySelectorAll('.flight-icon').length;
+    const dashCount = document.querySelectorAll('.hds-icon').length;
     assert.strictEqual(
       dashCount,
       2,

ui/tests/integration/components/kubernetes/page/configuration-test.js

@@ -58,7 +58,7 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
 
   test('it should render tab page header, config cta and mount config', async function (assert) {
     await this.renderComponent();
-    assert.dom('.title svg').hasClass('flight-icon-kubernetes-color', 'Kubernetes icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-kubernetes-color', 'Kubernetes icon renders in title');
     assert.dom('.title').hasText('kubernetes-test', 'Mount path renders in title');
     assert
       .dom('[data-test-toolbar-config-action]')
@@ -72,7 +72,7 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
     await this.renderComponent();
     assert
       .dom('[data-test-inferred-message] svg')
-      .hasClass('flight-icon-check-circle-fill', 'Inferred message icon renders');
+      .hasClass('hds-icon-check-circle-fill', 'Inferred message icon renders');
     const message =
       'These details were successfully inferred from Vault’s kubernetes environment and were not explicity set in this config.';
     assert.dom('[data-test-inferred-message]').hasText(message, 'Inferred message renders');
@@ -91,9 +91,7 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
 
     assert.dom('[data-test-row-label="Certificate"]').exists('Certificate label renders');
     assert.dom('[data-test-certificate-card]').exists('Certificate card component renders');
-    assert
-      .dom('[data-test-certificate-icon]')
-      .hasClass('flight-icon-certificate', 'Certificate icon renders');
+    assert.dom('[data-test-certificate-icon]').hasClass('hds-icon-certificate', 'Certificate icon renders');
     assert
       .dom('[data-test-certificate-card] [data-test-copy-button]')
       .exists('Certificate copy button renders');

ui/tests/integration/components/kubernetes/page/roles-test.js

@@ -53,7 +53,7 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
   test('it should render tab page header and config cta', async function (assert) {
     this.promptConfig = true;
     await this.renderComponent();
-    assert.dom('.title svg').hasClass('flight-icon-kubernetes-color', 'Kubernetes icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-kubernetes-color', 'Kubernetes icon renders in title');
     assert.dom('.title').hasText('kubernetes-test', 'Mount path renders in title');
     assert
       .dom('[data-test-toolbar-roles-action]')
@@ -70,7 +70,7 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
     assert.dom('[data-test-toolbar-roles-action]').hasText('Create role', 'Toolbar action has correct text');
     assert
       .dom('[data-test-toolbar-roles-action] svg')
-      .hasClass('flight-icon-plus', 'Toolbar action has correct icon');
+      .hasClass('hds-icon-plus', 'Toolbar action has correct icon');
     assert.dom(GENERAL.filterInputExplicit).exists('Roles filter input renders');
     assert.dom('[data-test-empty-state-title]').hasText('No roles yet', 'Title renders');
     assert
@@ -92,7 +92,7 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
 
   test('it should render roles list', async function (assert) {
     await this.renderComponent();
-    assert.dom('[data-test-list-item-content] svg').hasClass('flight-icon-user', 'List item icon renders');
+    assert.dom('[data-test-list-item-content] svg').hasClass('hds-icon-user', 'List item icon renders');
     assert.dom('[data-test-list-item-content]').hasText(this.roles[0].name, 'List item name renders');
     await click('[data-test-popup-menu-trigger]');
     assert.dom('[data-test-details]').hasText('Details', 'Details link renders in menu');

ui/tests/integration/components/kubernetes/tab-page-header-test.js

@@ -58,7 +58,7 @@ module('Integration | Component | kubernetes | TabPageHeader', function (hooks)
     );
     assert
       .dom('[data-test-header-title] svg')
-      .hasClass('flight-icon-kubernetes-color', 'Correct icon renders in title');
+      .hasClass('hds-icon-kubernetes-color', 'Correct icon renders in title');
     assert.dom('[data-test-header-title]').hasText(this.mount, 'Mount path renders in title');
   });
 

ui/tests/integration/components/ldap/page/configuration-test.js

@@ -68,7 +68,7 @@ module('Integration | Component | ldap | Page::Configuration', function (hooks)
 
     await this.renderComponent();
 
-    assert.dom('.title svg').hasClass('flight-icon-folder-users', 'LDAP icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-folder-users', 'LDAP icon renders in title');
     assert.dom('.title').hasText('ldap-test', 'Mount path renders in title');
     assert
       .dom(selectors.rotateAction)

ui/tests/integration/components/ldap/page/libraries-test.js

@@ -58,7 +58,7 @@ module('Integration | Component | ldap | Page::Libraries', function (hooks) {
 
     await this.renderComponent();
 
-    assert.dom('.title svg').hasClass('flight-icon-folder-users', 'LDAP icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-folder-users', 'LDAP icon renders in title');
     assert.dom('.title').hasText('ldap-test', 'Mount path renders in title');
     assert
       .dom('[data-test-toolbar-action="config"]')
@@ -76,7 +76,7 @@ module('Integration | Component | ldap | Page::Libraries', function (hooks) {
       .hasText('Create library', 'Toolbar action has correct text');
     assert
       .dom('[data-test-toolbar-action="library"] svg')
-      .hasClass('flight-icon-plus', 'Toolbar action has correct icon');
+      .hasClass('hds-icon-plus', 'Toolbar action has correct icon');
     assert
       .dom('[data-test-filter-input]')
       .doesNotExist('Libraries filter input is hidden when libraries have not been created');
@@ -92,7 +92,7 @@ module('Integration | Component | ldap | Page::Libraries', function (hooks) {
   test('it should render libraries list', async function (assert) {
     await this.renderComponent();
 
-    assert.dom('[data-test-list-item-content] svg').hasClass('flight-icon-folder', 'List item icon renders');
+    assert.dom('[data-test-list-item-content] svg').hasClass('hds-icon-folder', 'List item icon renders');
     assert.dom('[data-test-library]').hasText(this.libraries[0].name, 'List item name renders');
 
     await click('[data-test-popup-menu-trigger]');

ui/tests/integration/components/ldap/page/library/check-out-test.js

@@ -76,7 +76,7 @@ module('Integration | Component | ldap | Page::Library::CheckOut', function (hoo
       .hasText('ldap/library/test/check-out/123', 'Lease ID renders');
     assert
       .dom('[data-test-value-div="Lease renewable"] svg')
-      .hasClass('flight-icon-check-circle', 'Lease renewable true icon renders');
+      .hasClass('hds-icon-check-circle', 'Lease renewable true icon renders');
     assert
       .dom('[data-test-value-div="Lease renewable"] svg')
       .hasClass('has-text-success', 'Lease renewable true icon color renders');
@@ -86,7 +86,7 @@ module('Integration | Component | ldap | Page::Library::CheckOut', function (hoo
     await this.renderComponent();
     assert
       .dom('[data-test-value-div="Lease renewable"] svg')
-      .hasClass('flight-icon-x-circle', 'Lease renewable false icon renders');
+      .hasClass('hds-icon-x-circle', 'Lease renewable false icon renders');
     assert
       .dom('[data-test-value-div="Lease renewable"] svg')
       .hasClass('has-text-danger', 'Lease renewable false icon color renders');

ui/tests/integration/components/ldap/page/library/details/configuration-test.js

@@ -52,7 +52,7 @@ module('Integration | Component | ldap | Page::Library::Details::Configuration',
 
     assert
       .dom('[data-test-check-in-icon]')
-      .hasClass('flight-icon-check-circle', 'Correct icon renders for enabled check in enforcement');
+      .hasClass('hds-icon-check-circle', 'Correct icon renders for enabled check in enforcement');
     assert
       .dom('[data-test-check-in-icon]')
       .hasClass('icon-true', 'Correct class renders for enabled check in enforcement');
@@ -62,7 +62,7 @@ module('Integration | Component | ldap | Page::Library::Details::Configuration',
 
     assert
       .dom('[data-test-check-in-icon]')
-      .hasClass('flight-icon-x-square', 'Correct icon renders for disabled check in enforcement');
+      .hasClass('hds-icon-x-square', 'Correct icon renders for disabled check in enforcement');
     assert
       .dom('[data-test-check-in-icon]')
       .hasClass('icon-false', 'Correct class renders for disabled check in enforcement');

ui/tests/integration/components/ldap/page/overview-test.js

@@ -70,7 +70,7 @@ module('Integration | Component | ldap | Page::Overview', function (hooks) {
 
     await this.renderComponent();
 
-    assert.dom('.title svg').hasClass('flight-icon-folder-users', 'LDAP icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-folder-users', 'LDAP icon renders in title');
     assert.dom('.title').hasText('ldap-test', 'Mount path renders in title');
     assert.dom('[data-test-toolbar-action="config"]').hasText('Configure LDAP', 'Toolbar action renders');
     assert.dom('[data-test-config-cta]').exists('Config cta renders');

ui/tests/integration/components/ldap/page/roles-test.js

@@ -63,7 +63,7 @@ module('Integration | Component | ldap | Page::Roles', function (hooks) {
 
     await this.renderComponent();
 
-    assert.dom('.title svg').hasClass('flight-icon-folder-users', 'LDAP icon renders in title');
+    assert.dom('.title svg').hasClass('hds-icon-folder-users', 'LDAP icon renders in title');
     assert.dom('.title').hasText('ldap-test', 'Mount path renders in title');
     assert
       .dom('[data-test-toolbar-action="config"]')
@@ -79,7 +79,7 @@ module('Integration | Component | ldap | Page::Roles', function (hooks) {
     assert.dom('[data-test-toolbar-action="role"]').hasText('Create role', 'Toolbar action has correct text');
     assert
       .dom('[data-test-toolbar-action="role"] svg')
-      .hasClass('flight-icon-plus', 'Toolbar action has correct icon');
+      .hasClass('hds-icon-plus', 'Toolbar action has correct icon');
     assert
       .dom('[data-test-filter-input]')
       .doesNotExist('Roles filter input is hidden when roles have not been created');
@@ -95,7 +95,7 @@ module('Integration | Component | ldap | Page::Roles', function (hooks) {
   test('it should render roles list', async function (assert) {
     await this.renderComponent();
 
-    assert.dom('[data-test-list-item-content] svg').hasClass('flight-icon-user', 'List item icon renders');
+    assert.dom('[data-test-list-item-content] svg').hasClass('hds-icon-user', 'List item icon renders');
     assert
       .dom(LDAP_SELECTORS.roleItem('static', 'static-test'))
       .hasText(this.roles[0].name, 'List item name renders');

ui/tests/integration/components/ldap/tab-page-header-test.js

@@ -47,7 +47,7 @@ module('Integration | Component | ldap | TabPageHeader', function (hooks) {
     });
     assert
       .dom('[data-test-header-title] svg')
-      .hasClass('flight-icon-folder-users', 'Correct icon renders in title');
+      .hasClass('hds-icon-folder-users', 'Correct icon renders in title');
     assert.dom('[data-test-header-title]').hasText(this.mount, 'Mount path renders in title');
   });
 

ui/tests/integration/components/mfa-login-enforcement-header-test.js

@@ -32,7 +32,7 @@ module('Integration | Component | mfa-login-enforcement-header', function (hooks
     await render(hbs`<Mfa::MfaLoginEnforcementHeader @heading="New enforcement" />`);
 
     assert.dom('[data-test-mleh-title]').includesText('New enforcement');
-    assert.dom('[data-test-mleh-title] svg').hasClass('flight-icon-lock', 'Lock icon renders');
+    assert.dom('[data-test-mleh-title] svg').hasClass('hds-icon-lock', 'Lock icon renders');
     assert
       .dom('[data-test-mleh-description]')
       .includesText('An enforcement will define which auth types', 'Description renders');