From e09fd3fbbeba6ee3d0bdf3eb9082c337a2c3b342 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:19:16 -0600 Subject: [PATCH] UI: Update flight icons (#24823) --- changelog/24823.txt | 3 ++ ui/app/components/mount-backend/type-form.hbs | 2 +- .../cluster/access/mfa/methods/create.js | 7 +++- ui/app/helpers/mountable-auth-methods.js | 10 +++-- ui/app/helpers/mountable-secret-engines.js | 3 ++ ui/app/models/auth-method.js | 6 +++ ui/app/models/mfa-method.js | 9 +++++ ui/app/models/role-jwt.js | 10 ++++- ui/app/models/secret-engine.js | 11 ++--- .../components/mfa/method-list-item.hbs | 2 +- .../components/mount-backend-form.hbs | 2 +- .../components/wizard/features-selection.hbs | 2 +- .../components/wizard/init-login.hbs | 2 +- .../components/wizard/init-save-keys.hbs | 2 +- .../components/wizard/init-setup.hbs | 2 +- .../components/wizard/init-unseal.hbs | 2 +- .../components/wizard/mounts-wizard.hbs | 2 +- .../components/wizard/policies-create.hbs | 2 +- .../components/wizard/policies-delete.hbs | 2 +- .../components/wizard/policies-details.hbs | 2 +- .../components/wizard/policies-intro.hbs | 2 +- .../components/wizard/policies-others.hbs | 2 +- .../components/wizard/replication-setup.hbs | 2 +- .../components/wizard/tools-info.hbs | 2 +- .../components/wizard/tools-lookup.hbs | 2 +- .../components/wizard/tools-rewrap.hbs | 2 +- .../components/wizard/tools-rewrapped.hbs | 2 +- .../components/wizard/tools-unwrap.hbs | 2 +- .../components/wizard/tools-unwrapped.hbs | 2 +- .../components/wizard/tools-wrap.hbs | 2 +- .../components/wizard/tools-wrapped.hbs | 2 +- .../components/wizard/tutorial-complete.hbs | 2 +- .../components/wizard/tutorial-idle.hbs | 2 +- .../components/wizard/tutorial-paused.hbs | 2 +- .../vault/cluster/access/methods.hbs | 9 +---- .../cluster/access/mfa/methods/create.hbs | 19 +++++---- .../access/mfa/methods/method/index.hbs | 2 +- ui/ember-cli-build.js | 5 +-- ui/lib/core/addon/components/icon.hbs | 4 +- ui/lib/core/addon/components/icon.js | 16 ++++---- .../components/operation-field-display.js | 7 +++- .../templates/components/header-scope.hbs | 2 +- .../components/operation-field-display.hbs | 2 +- ui/lib/kmip/addon/templates/configure.hbs | 2 +- ui/lib/kv/addon/components/kv-page-header.hbs | 2 +- .../page/pki-tidy-auto-configure.hbs | 2 +- .../addon/components/page/pki-tidy-manual.hbs | 2 +- ui/package.json | 5 +-- .../components/confirm-action-test.js | 25 ++---------- .../dashboard/secrets-engines-card-test.js | 2 +- ui/tests/integration/components/icon-test.js | 34 +++++++++------- .../kubernetes/page/configuration-test.js | 2 +- .../components/kubernetes/page/roles-test.js | 2 +- .../kubernetes/tab-page-header-test.js | 2 +- .../components/kv/kv-page-header-test.js | 4 +- .../components/pki/pki-page-header-test.js | 4 +- .../replication-secondary-card-test.js | 4 +- ui/tests/unit/models/role-jwt-test.js | 2 +- ui/tests/unit/models/secret-engine-test.js | 12 +++--- ui/yarn.lock | 40 ++++++++----------- 60 files changed, 163 insertions(+), 160 deletions(-) create mode 100644 changelog/24823.txt diff --git a/changelog/24823.txt b/changelog/24823.txt new file mode 100644 index 0000000000..a15c8c7f15 --- /dev/null +++ b/changelog/24823.txt @@ -0,0 +1,3 @@ +```release-note:change +ui: Update icons to use Flight icons where available. +``` \ No newline at end of file diff --git a/ui/app/components/mount-backend/type-form.hbs b/ui/app/components/mount-backend/type-form.hbs index 14cfb21ecf..48fbd4bd91 100644 --- 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}} > - + {{type.displayName}} diff --git a/ui/app/controllers/vault/cluster/access/mfa/methods/create.js b/ui/app/controllers/vault/cluster/access/mfa/methods/create.js index 03471884fc..591e3aaf84 100644 --- 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 index 805ce38636..7871d19b86 100644 --- 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,7 +97,7 @@ const MOUNTABLE_AUTH_METHODS = [ displayName: 'RADIUS', value: 'radius', type: 'radius', - glyph: 'auth', + glyph: 'mainframe', category: 'infra', }, { @@ -104,6 +105,7 @@ const MOUNTABLE_AUTH_METHODS = [ 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 index e87ffb89e3..e20f563254 100644 --- 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 index 6797d5f180..4543a977ff 100644 --- 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 index d3b58c30b2..806a87dfd0 100644 --- 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 index 0d8e2ec1a2..965364848f 100644 --- 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 index 40171df359..b11b379af0 100644 --- 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 index 99965bdfaa..baff7ab01e 100644 --- a/ui/app/templates/components/mfa/method-list-item.hbs +++ b/ui/app/templates/components/mfa/method-list-item.hbs @@ -11,7 +11,7 @@
- +
{{@model.name}} diff --git a/ui/app/templates/components/mount-backend-form.hbs b/ui/app/templates/components/mount-backend-form.hbs index 026d4f7954..71818856b6 100644 --- a/ui/app/templates/components/mount-backend-form.hbs +++ b/ui/app/templates/components/mount-backend-form.hbs @@ -8,7 +8,7 @@

{{#if this.showEnable}} {{#let (find-by "type" @mountModel.type @mountTypes) as |typeInfo|}} - + {{#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 index 0ebb3f7798..4d9f030c65 100644 --- 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 ~}} - +

Choosing where to go

diff --git a/ui/app/templates/components/wizard/init-login.hbs b/ui/app/templates/components/wizard/init-login.hbs index c408f2a260..66cf830931 100644 --- 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 ~}} - +

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 index b10335d70b..2d13ae76b8 100644 --- 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 ~}} - + + + + {{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 index 2329d899eb..d7b6c94bd4 100644 --- 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 }} - + + + + +

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 index d6a39d83af..71185ad2b4 100644 --- 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 }} - + + + + + + +

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 index 56e20da06d..5615af98bc 100644 --- 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 }} - + + +

We hope you enjoyed using Vault. You can get back to the guide in the user menu in the upper right.

diff --git a/ui/app/templates/components/wizard/tutorial-idle.hbs b/ui/app/templates/components/wizard/tutorial-idle.hbs index 40e9d365e8..5b3c89be69 100644 --- 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 ~}} - +

Want a tour? Our helpful guide will introduce you to the Vault Web UI.

diff --git a/ui/app/templates/components/wizard/tutorial-paused.hbs b/ui/app/templates/components/wizard/tutorial-paused.hbs index b27d0dfc90..a3b00ad993 100644 --- a/ui/app/templates/components/wizard/tutorial-paused.hbs +++ b/ui/app/templates/components/wizard/tutorial-paused.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 ~}} - +

Feel free to explore Vault. Click below to get back to the guide or close this window.

diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs index d3720f0bfe..b03a63afd0 100644 --- a/ui/app/templates/vault/cluster/access/methods.hbs +++ b/ui/app/templates/vault/cluster/access/methods.hbs @@ -56,14 +56,7 @@
- + {{method.path}} diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs index c086047be0..18288f850f 100644 --- a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs +++ b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs @@ -51,22 +51,21 @@ Learn more.

- {{#each this.methodNames as |methodName|}} + {{#each this.methods as |method|}}
- -

- {{methodName}} + +

+ {{method.name}}

diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs index a29f43e2cc..e4eade3363 100644 --- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs +++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs @@ -12,7 +12,7 @@

- + {{this.model.method.name}}

diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js index b93f4215ca..0ea736613d 100644 --- a/ui/ember-cli-build.js +++ b/ui/ember-cli-build.js @@ -23,7 +23,7 @@ const appConfig = { //optimize: false, //paths: [], optimizer: {}, - sourceDirs: ['node_modules/@hashicorp/structure-icons/dist', 'public'], + sourceDirs: ['public'], rootURL: '/ui/', }, fingerprint: { @@ -91,8 +91,5 @@ module.exports = function (defaults) { app.import('app/styles/bulma/bulma-radio-checkbox.css'); - app.import('node_modules/@hashicorp/structure-icons/dist/loading.css'); - app.import('node_modules/@hashicorp/structure-icons/dist/run.css'); - return app.toTree(); }; diff --git a/ui/lib/core/addon/components/icon.hbs b/ui/lib/core/addon/components/icon.hbs index 400ca075ed..62dd19dfbf 100644 --- a/ui/lib/core/addon/components/icon.hbs +++ b/ui/lib/core/addon/components/icon.hbs @@ -4,9 +4,9 @@ ~}} {{#if this.isFlightIcon}} - + {{else}} {{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/components/icon.js b/ui/lib/core/addon/components/icon.js index 673d45b11c..aeb25045fd 100644 --- a/ui/lib/core/addon/components/icon.js +++ b/ui/lib/core/addon/components/icon.js @@ -10,15 +10,16 @@ const flightIconNames = flightIconMap.assets.mapBy('iconName').uniq(); /** * @module Icon - * `Icon` components are glyphs used to indicate important information. + * `Icon` components are used to display an icon. * - * Flight icon documentation at https://flight-hashicorp.vercel.app/ + * Flight icon documentation at https://helios.hashicorp.design/icons/usage-guidelines?tab=code#how-to-use-icons + * Flight icon library at https://helios.hashicorp.design/icons/library * * @example * ```js - * + * * ``` - * @param {string} name=null - The name of the SVG to render inline. + * @param {string} name - The name of the SVG to render inline. Required. * @param {string} [size=16] - size for flight icon, can be 16 or 24 * */ @@ -27,19 +28,16 @@ export default class Icon extends Component { constructor(owner, args) { super(owner, args); assert('Icon component size argument must be either "16" or "24"', ['16', '24'].includes(this.size)); + assert('Icon name argument must be provided', this.args.name); } get size() { return this.args.size || '16'; } - get name() { - return this.args.name || null; - } - // favor flight icon set and fall back to structure icons if not found get isFlightIcon() { - return this.name ? flightIconNames.includes(this.name) : false; + return this.args.name ? flightIconNames.includes(this.args.name) : false; } get hsIconClass() { diff --git a/ui/lib/kmip/addon/components/operation-field-display.js b/ui/lib/kmip/addon/components/operation-field-display.js index 50e8e15988..19adc7cf77 100644 --- a/ui/lib/kmip/addon/components/operation-field-display.js +++ b/ui/lib/kmip/addon/components/operation-field-display.js @@ -35,10 +35,13 @@ export default Component.extend({ actions: { iconClass(model, field) { - return this.trueOrFalseString(model, field, 'icon-true', 'icon-false'); + return this.trueOrFalseString(model, field, 'hds-foreground-success', 'hds-foreground-faint'); }, iconGlyph(model, field) { - return this.trueOrFalseString(model, field, 'check-circle-outline', 'cancel-square-outline'); + return this.trueOrFalseString(model, field, 'check-circle', 'x-square'); + }, + operationEnabled(model, field) { + return this.trueOrFalseString(model, field, 'Enabled', 'Disabled'); }, }, }); diff --git a/ui/lib/kmip/addon/templates/components/header-scope.hbs b/ui/lib/kmip/addon/templates/components/header-scope.hbs index 37c5544fe3..b3cd94a086 100644 --- a/ui/lib/kmip/addon/templates/components/header-scope.hbs +++ b/ui/lib/kmip/addon/templates/components/header-scope.hbs @@ -9,7 +9,7 @@

- + {{this.secretMountPath.currentPath}}

diff --git a/ui/lib/kmip/addon/templates/components/operation-field-display.hbs b/ui/lib/kmip/addon/templates/components/operation-field-display.hbs index 8be4d2fad7..34d9d01ffc 100644 --- a/ui/lib/kmip/addon/templates/components/operation-field-display.hbs +++ b/ui/lib/kmip/addon/templates/components/operation-field-display.hbs @@ -12,7 +12,7 @@
{{#each fieldsInGroup as |field|}}