Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Update flight icons #24823

Merged
merged 16 commits into from
Jan 11, 2024
Merged

UI: Update flight icons #24823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
aef0f3f
Bump HDS
hashishaw Jan 10, 2024
a494519
calculate auth & secret icon with updated glyphs
hashishaw Jan 11, 2024
ec18306
Use model icon values on mount secret/auth form
hashishaw Jan 11, 2024
bf8ebad
use mfa method icon calculated on the model
hashishaw Jan 11, 2024
28cc750
refactor mfa/methods/create to get explicit icon names
hashishaw Jan 11, 2024
927edfe
update icon names in KMIP, and make the operation field display more …
hashishaw Jan 11, 2024
61f1f57
update kv page header icon & test for replication
hashishaw Jan 11, 2024
30a8313
explicitly define jwt role icon
hashishaw Jan 11, 2024
e80db97
fix icon in pki tidy, update jsdoc on icon, don't default to type on …
hashishaw Jan 11, 2024
f7bb3ef
use guide instead of tour icon in wizard components
hashishaw Jan 11, 2024
32d6ac8
update tests
hashishaw Jan 11, 2024
f52c445
fix more tests
hashishaw Jan 11, 2024
4f919ce
fix confirm-action test
hashishaw Jan 11, 2024
d6c3512
remove structure-icons dep
hashishaw Jan 11, 2024
a3bef57
Merge branch 'main' into ui/VAULT-15244/update-flight-icons
hashishaw Jan 11, 2024
fe8f6ce
add changelog
hashishaw Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/24823.txt
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not totally sure this PR needs a changelog, open to suggestions

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a changelog is a good idea. It's a visual enough change that some customers may notice and look for the cause.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:change
ui: Update icons to use Flight icons where available.
```
2 changes: 1 addition & 1 deletion ui/app/components/mount-backend/type-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion ui/app/controllers/vault/cluster/access/mfa/methods/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 6 additions & 4 deletions ui/app/helpers/mountable-auth-methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const MOUNTABLE_AUTH_METHODS = [
value: 'approle',
type: 'approle',
category: 'generic',
glyph: 'cpu',
},
{
displayName: 'AWS',
Expand Down Expand Up @@ -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',
},
{
Expand All @@ -82,7 +83,7 @@ const MOUNTABLE_AUTH_METHODS = [
displayName: 'LDAP',
value: 'ldap',
type: 'ldap',
glyph: 'auth',
glyph: 'folder-users',
category: 'infra',
},
{
Expand All @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions ui/app/helpers/mountable-secret-engines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const ENTERPRISE_SECRET_ENGINES = [
type: 'transform',
category: 'generic',
requiredFeature: 'Transform Secrets Engine',
glyph: 'transform-data',
},
{
displayName: 'Key Management',
Expand Down Expand Up @@ -59,6 +60,7 @@ const MOUNTABLE_SECRET_ENGINES = [
displayName: 'Databases',
type: 'database',
category: 'infra',
glyph: 'database',
},
{
displayName: 'Google Cloud',
Expand Down Expand Up @@ -95,6 +97,7 @@ const MOUNTABLE_SECRET_ENGINES = [
{
displayName: 'RabbitMQ',
type: 'rabbitmq',
glyph: 'rabbitmq-color',
category: 'infra',
},
{
Expand Down
6 changes: 6 additions & 0 deletions ui/app/models/auth-method.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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',
}),
Expand Down
9 changes: 9 additions & 0 deletions ui/app/models/mfa-method.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]];
}
Expand Down
10 changes: 8 additions & 2 deletions ui/app/models/role-jwt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };

Expand All @@ -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;
}
}
11 changes: 3 additions & 8 deletions ui/app/models/secret-engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/mfa/method-list-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/mount-backend-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/features-selection.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/init-login.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/init-save-keys.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/init-setup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/init-unseal.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/mounts-wizard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/policies-create.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/policies-delete.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/policies-details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/policies-intro.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/policies-others.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/replication-setup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-info.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-lookup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-rewrap.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-rewrapped.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-unwrap.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-unwrapped.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-wrap.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tools-wrapped.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tutorial-complete.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/wizard/tutorial-idle.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading
Loading