UI: Update flight icons (#24823)

hashicorp · Jan 11, 2024 · e09fd3f · e09fd3f
1 parent a1c2e49
commit e09fd3f
Show file tree

Hide file tree

Showing 60 changed files with 163 additions and 160 deletions.
diff --git a/changelog/24823.txt b/changelog/24823.txt
@@ -0,0 +1,3 @@
+```release-note:change
+ui: Update icons to use Flight icons where available.
+```
diff --git a/ui/app/components/mount-backend/type-form.hbs b/ui/app/components/mount-backend/type-form.hbs
@@ -16,7 +16,7 @@
         @disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}}
         data-test-mount-type={{type.type}}
       >
-        <Icon @name={{or type.glyph type.type}} @size="24" class="has-bottom-margin-xs" />
+        <Icon @name={{type.glyph}} @size="24" class="has-bottom-margin-xs" />
         <Hds::Text::Body @tag="h3" @size="300">
           {{type.displayName}}
         </Hds::Text::Body>

diff --git a/ui/app/controllers/vault/cluster/access/mfa/methods/create.js b/ui/app/controllers/vault/cluster/access/mfa/methods/create.js
@@ -16,7 +16,12 @@ export default class MfaMethodCreateController extends Controller {
   @service router;
 
   queryParams = ['type'];
-  methodNames = ['TOTP', 'Duo', 'Okta', 'PingID'];
+  methods = [
+    { name: 'TOTP', icon: 'history' },
+    { name: 'Duo', icon: 'duo' },
+    { name: 'Okta', icon: 'okta-color' },
+    { name: 'PingID', icon: 'pingid' },
+  ];
 
   @tracked type = null;
   @tracked method = null;

diff --git a/ui/app/helpers/mountable-auth-methods.js b/ui/app/helpers/mountable-auth-methods.js
@@ -28,6 +28,7 @@ const MOUNTABLE_AUTH_METHODS = [
     value: 'approle',
     type: 'approle',
     category: 'generic',
+    glyph: 'cpu',
   },
   {
     displayName: 'AWS',
@@ -61,14 +62,14 @@ const MOUNTABLE_AUTH_METHODS = [
     displayName: 'JWT',
     value: 'jwt',
     type: 'jwt',
-    glyph: 'auth',
+    glyph: 'jwt',
     category: 'generic',
   },
   {
     displayName: 'OIDC',
     value: 'oidc',
     type: 'oidc',
-    glyph: 'auth',
+    glyph: 'openid-color',
     category: 'generic',
   },
   {
@@ -82,7 +83,7 @@ const MOUNTABLE_AUTH_METHODS = [
     displayName: 'LDAP',
     value: 'ldap',
     type: 'ldap',
-    glyph: 'auth',
+    glyph: 'folder-users',
     category: 'infra',
   },
   {
@@ -96,14 +97,15 @@ const MOUNTABLE_AUTH_METHODS = [
     displayName: 'RADIUS',
     value: 'radius',
     type: 'radius',
-    glyph: 'auth',
+    glyph: 'mainframe',
     category: 'infra',
   },
   {
     displayName: 'TLS Certificates',
     value: 'cert',
     type: 'cert',
     category: 'generic',
+    glyph: 'certificate',
   },
   {
     displayName: 'Username & Password',

diff --git a/ui/app/helpers/mountable-secret-engines.js b/ui/app/helpers/mountable-secret-engines.js
@@ -19,6 +19,7 @@ const ENTERPRISE_SECRET_ENGINES = [
     type: 'transform',
     category: 'generic',
     requiredFeature: 'Transform Secrets Engine',
+    glyph: 'transform-data',
   },
   {
     displayName: 'Key Management',
@@ -59,6 +60,7 @@ const MOUNTABLE_SECRET_ENGINES = [
     displayName: 'Databases',
     type: 'database',
     category: 'infra',
+    glyph: 'database',
   },
   {
     displayName: 'Google Cloud',
@@ -95,6 +97,7 @@ const MOUNTABLE_SECRET_ENGINES = [
   {
     displayName: 'RabbitMQ',
     type: 'rabbitmq',
+    glyph: 'rabbitmq-color',
     category: 'infra',
   },
   {

diff --git a/ui/app/models/auth-method.js b/ui/app/models/auth-method.js
@@ -11,6 +11,7 @@ import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 import apiPath from 'vault/utils/api-path';
 import attachCapabilities from 'vault/lib/attach-capabilities';
 import { withModelValidations } from 'vault/decorators/model-validations';
+import { allMethods } from 'vault/helpers/mountable-auth-methods';
 
 const validations = {
   path: [
@@ -42,6 +43,11 @@ const ModelExport = AuthMethodModel.extend({
   methodType: computed('type', function () {
     return this.type.replace(/^ns_/, '');
   }),
+  icon: computed('methodType', function () {
+    const authMethods = allMethods().find((backend) => backend.type === this.methodType);
+
+    return authMethods?.glyph || 'users';
+  }),
   description: attr('string', {
     editType: 'textarea',
   }),

diff --git a/ui/app/models/mfa-method.js b/ui/app/models/mfa-method.js
@@ -168,6 +168,15 @@ export default class MfaMethod extends Model {
     return this.type === 'totp' ? this.type.toUpperCase() : capitalize(this.type);
   }
 
+  get icon() {
+    switch (this.type) {
+      case 'totp':
+        return 'history';
+      default:
+        return this.type;
+    }
+  }
+
   get formFields() {
     return [...METHOD_PROPS.common, ...METHOD_PROPS[this.type]];
   }

diff --git a/ui/app/models/role-jwt.js b/ui/app/models/role-jwt.js
@@ -15,7 +15,13 @@ const DOMAIN_STRINGS = {
   'auth0.com': 'Auth0',
 };
 
-const PROVIDER_WITH_LOGO = ['GitHub', 'GitLab', 'Google', 'Okta', 'Auth0'];
+const PROVIDER_WITH_LOGO = {
+  GitHub: 'github',
+  GitLab: 'gitlab',
+  Google: 'google',
+  Okta: 'okta',
+  Auth0: 'auth0',
+};
 
 export { DOMAIN_STRINGS, PROVIDER_WITH_LOGO };
 
@@ -30,6 +36,6 @@ export default class RoleJwtModel extends Model {
 
   get providerIcon() {
     const { providerName } = this;
-    return PROVIDER_WITH_LOGO.includes(providerName) ? providerName.toLowerCase() : null;
+    return PROVIDER_WITH_LOGO[providerName] || null;
   }
 }
diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
@@ -123,14 +123,9 @@ export default class SecretEngineModel extends Model {
   }
 
   get icon() {
-    const defaultIcon = this.engineType || 'secrets';
-    return (
-      {
-        keymgmt: 'key',
-        kmip: 'secrets',
-        ldap: 'folder-users',
-      }[this.engineType] || defaultIcon
-    );
+    const engineData = allEngines().find((engine) => engine.type === this.engineType);
+
+    return engineData?.glyph || 'lock';
   }
 
   get engineType() {

diff --git a/ui/app/templates/components/mfa/method-list-item.hbs b/ui/app/templates/components/mfa/method-list-item.hbs
@@ -11,7 +11,7 @@
   <div class="level is-mobile">
     <div class="level-left">
       <div class="is-flex-row">
-        <Icon @size="24" @name={{@model.type}} class="has-text-grey" data-test-mfa-method-list-icon={{@model.type}} />
+        <Icon @size="24" @name={{@model.icon}} class="has-text-grey" data-test-mfa-method-list-icon={{@model.type}} />
         <div>
           <span class="has-text-weight-semibold has-text-black">
             {{@model.name}}

diff --git a/ui/app/templates/components/mount-backend-form.hbs b/ui/app/templates/components/mount-backend-form.hbs
@@ -8,7 +8,7 @@
     <h1 class="title is-3 title-with-icon" data-test-mount-form-header="true">
       {{#if this.showEnable}}
         {{#let (find-by "type" @mountModel.type @mountTypes) as |typeInfo|}}
-          <Icon @name={{or typeInfo.glyph typeInfo.type}} @size="24" class="has-text-grey-light" />
+          <Icon @name={{typeInfo.glyph}} @size="24" class="has-text-grey-light" />
           {{#if (eq @mountType "secret")}}
             {{concat "Enable " typeInfo.displayName " Secrets Engine"}}
           {{else}}

diff --git a/ui/app/templates/components/wizard/features-selection.hbs b/ui/app/templates/components/wizard/features-selection.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Vault Web UI" @glyph="tour" @selectProgress={{this.selectProgress}}>
+<WizardContent @headerText="Vault Web UI" @glyph="guide" @selectProgress={{this.selectProgress}}>
   <h2 class="title is-6">
     Choosing where to go
   </h2>

diff --git a/ui/app/templates/components/wizard/init-login.hbs b/ui/app/templates/components/wizard/init-login.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Authentication" @glyph="tour">
+<WizardContent @headerText="Authentication" @glyph="guide">
   <WizardSection @headerText="Authenticate to Vault" @docText="Learn: Initialization" @docPath="/docs/concepts/tokens.html">
     <p>
       Vault is unsealed, but we still need to authenticate using the Initial Root Token that was generated. We recommend

diff --git a/ui/app/templates/components/wizard/init-save-keys.hbs b/ui/app/templates/components/wizard/init-save-keys.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Initialization" @glyph="tour">
+<WizardContent @headerText="Initialization" @glyph="guide">
   <WizardSection
     @headerText="Saving your keys"
     @docText="Learn: Initialization"

diff --git a/ui/app/templates/components/wizard/init-setup.hbs b/ui/app/templates/components/wizard/init-setup.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Initialization" @glyph="tour">
+<WizardContent @headerText="Initialization" @glyph="guide">
   <WizardSection
     @headerText="Setting up your root keys"
     @docText="Learn: Initialization"

diff --git a/ui/app/templates/components/wizard/init-unseal.hbs b/ui/app/templates/components/wizard/init-unseal.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Initialization" @glyph="tour">
+<WizardContent @headerText="Initialization" @glyph="guide">
   <WizardSection
     @headerText="Unsealing your vault"
     @docText="Learn: Initialization"

diff --git a/ui/app/templates/components/wizard/mounts-wizard.hbs b/ui/app/templates/components/wizard/mounts-wizard.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText={{capitalize this.currentMachine}} @glyph="tour">
+<WizardContent @headerText={{capitalize this.currentMachine}} @glyph="guide">
   {{component
     this.stepComponent
     mountSubtype=this.mountSubtype

diff --git a/ui/app/templates/components/wizard/policies-create.hbs b/ui/app/templates/components/wizard/policies-create.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Policies" @glyph="tour">
+<WizardContent @headerText="Policies" @glyph="guide">
   <WizardSection
     @headerText="Creating a policy"
     @docText="Docs: Policies"

diff --git a/ui/app/templates/components/wizard/policies-delete.hbs b/ui/app/templates/components/wizard/policies-delete.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Policies" @glyph="tour">
+<WizardContent @headerText="Policies" @glyph="guide">
   <WizardSection
     @headerText="Deleting your policy"
     @docText="Docs: Policies"

diff --git a/ui/app/templates/components/wizard/policies-details.hbs b/ui/app/templates/components/wizard/policies-details.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Policies" @glyph="tour">
+<WizardContent @headerText="Policies" @glyph="guide">
   <WizardSection
     @headerText="Your new policy"
     @docText="Docs: Policies"

diff --git a/ui/app/templates/components/wizard/policies-intro.hbs b/ui/app/templates/components/wizard/policies-intro.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Policies" @glyph="tour">
+<WizardContent @headerText="Policies" @glyph="guide">
   <WizardSection
     @headerText="Choosing a policy type"
     @docText="Docs: Policies"

diff --git a/ui/app/templates/components/wizard/policies-others.hbs b/ui/app/templates/components/wizard/policies-others.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Policies" @glyph="tour">
+<WizardContent @headerText="Policies" @glyph="guide">
   <WizardSection @headerText="Other kinds of policies" @docText="Docs: Policies" @docPath="/docs/concepts/policies.html">
     <p>
       Good! Now you're ready to go writing your own policies. We only explored ACL policies, but there are two other types of

diff --git a/ui/app/templates/components/wizard/replication-setup.hbs b/ui/app/templates/components/wizard/replication-setup.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Replication" @glyph="tour">
+<WizardContent @headerText="Replication" @glyph="guide">
   <WizardSection
     @headerText="Setting up Replication"
     @docText="Docs: Replication"

diff --git a/ui/app/templates/components/wizard/tools-info.hbs b/ui/app/templates/components/wizard/tools-info.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Information about your data"
     @docText="API: Lookup Data"

diff --git a/ui/app/templates/components/wizard/tools-lookup.hbs b/ui/app/templates/components/wizard/tools-lookup.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Lookup wrapped data"
     @docText="API: Lookup Data"

diff --git a/ui/app/templates/components/wizard/tools-rewrap.hbs b/ui/app/templates/components/wizard/tools-rewrap.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Rewrapping your data"
     @docText="API: Rewrap Data"

diff --git a/ui/app/templates/components/wizard/tools-rewrapped.hbs b/ui/app/templates/components/wizard/tools-rewrapped.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Your rewrapped data"
     @docText="API: Rewrap Data"

diff --git a/ui/app/templates/components/wizard/tools-unwrap.hbs b/ui/app/templates/components/wizard/tools-unwrap.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Unwrapping your data"
     @docText="API: Unwrap Data"

diff --git a/ui/app/templates/components/wizard/tools-unwrapped.hbs b/ui/app/templates/components/wizard/tools-unwrapped.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection @headerText="Your unwrapped data" @docText="API: Unwrap Data" @docPath="/api/system/wrapping-unwrap.html">
     <p>
       Here you can see that your data survived intact. These tools are mostly handy for applications to use, but if you ever

diff --git a/ui/app/templates/components/wizard/tools-wrap.hbs b/ui/app/templates/components/wizard/tools-wrap.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Wrapping data"
     @docText="API: Wrap Data"

diff --git a/ui/app/templates/components/wizard/tools-wrapped.hbs b/ui/app/templates/components/wizard/tools-wrapped.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{! template-lint-disable quotes }}
-<WizardContent @headerText="Tools" @glyph="tour">
+<WizardContent @headerText="Tools" @glyph="guide">
   <WizardSection
     @headerText="Copying your wrapped token"
     @docText="API: Wrap Data"

diff --git a/ui/app/templates/components/wizard/tutorial-complete.hbs b/ui/app/templates/components/wizard/tutorial-complete.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Thanks for taking the tour!" @glyph="tour" @class="collapsed">
+<WizardContent @headerText="Thanks for taking the tour!" @glyph="guide" @class="collapsed">
   <p>
     We hope you enjoyed using Vault. You can get back to the guide in the user menu in the upper right.
   </p>

diff --git a/ui/app/templates/components/wizard/tutorial-idle.hbs b/ui/app/templates/components/wizard/tutorial-idle.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<WizardContent @headerText="Welcome to Vault" @glyph="tour" @class="collapsed" @hidePopup={{true}}>
+<WizardContent @headerText="Welcome to Vault" @glyph="guide" @class="collapsed" @hidePopup={{true}}>
   <Hds::Button @text="Close" @icon="x" @isIconOnly={{true}} @color="secondary" {{on "click" (action @onDismiss)}} />
   <p>Want a tour? Our helpful guide will introduce you to the Vault Web UI.</p>
   <div class="box wizard-divider-box">