Incorporate Ember Flight Icons

changelog/12976.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds flight icons to UI
+```

ui/.storybook/config.js

@@ -1,6 +1,7 @@
 import { configure, addParameters, addDecorator } from '@storybook/ember';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import theme from './theme.js';
+import flightIconSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite-module';
 
 function loadStories() {
   // automatically import all files ending in *.stories.js
@@ -18,6 +19,9 @@ addParameters({
 addDecorator(storyFn => {
   const { template, context } = storyFn();
 
+  // flight icon sprite must be inserted into dom for icon lookup via use element
+  document.getElementById('root').insertAdjacentHTML('afterbegin', flightIconSprite.trim());
+
   // This adds styling to the Canvas tab.
   const styles = {
     style: {

ui/app/components/regex-validator.hbs

@@ -57,7 +57,7 @@
         <AlertInline @type="danger" @message="Your regex doesn't match the subject string" />
       {{else}}
         <div class="message-inline">
-          <Icon @glyph="check-circle-fill" class="has-text-success" aria-hidden="true" />
+          <Icon @name="check-circle-fill" class="has-text-success" />
           <p data-test-inline-success-message>Your regex matches the subject string</p>
         </div>
       {{/if}}

ui/app/components/status-menu.js

@@ -11,10 +11,9 @@ export default Component.extend({
   type: 'cluster',
   itemTag: null,
   glyphName: computed('type', function() {
-    const glyphs = {
-      cluster: 'status-indicator',
-      user: 'user-square-outline',
-    };
-    return glyphs[this.type];
+    return {
+      cluster: 'circle-dot',
+      user: 'user',
+    }[this.type];
   }),
 });

ui/app/components/toolbar-secret-link.js

@@ -23,7 +23,7 @@ import { computed } from '@ember/object';
 export default OuterHTML.extend({
   glyph: computed('type', function() {
     if (this.type == 'add') {
-      return 'plus-plain';
+      return 'plus';
     } else {
       return 'chevron-right';
     }

ui/app/models/transit-key.js

@@ -8,12 +8,12 @@ const ACTION_VALUES = {
   encrypt: {
     isSupported: 'supportsEncryption',
     description: 'Looks up wrapping properties for the given token',
-    glyph: 'lock-closed',
+    glyph: 'lock-fill',
   },
   decrypt: {
     isSupported: 'supportsDecryption',
     description: 'Decrypts the provided ciphertext using this key',
-    glyph: 'envelope-unsealed--outline',
+    glyph: 'mail-open',
   },
   datakey: {
     isSupported: 'supportsEncryption',
@@ -23,20 +23,28 @@ const ACTION_VALUES = {
   rewrap: {
     isSupported: 'supportsEncryption',
     description: 'Rewraps the ciphertext using the latest version of the named key',
-    glyph: 'refresh-default',
+    glyph: 'reload',
   },
   sign: {
     isSupported: 'supportsSigning',
     description: 'Get the cryptographic signature of the given data',
-    glyph: 'edit',
+    glyph: 'pencil-tool',
+  },
+  hmac: {
+    isSupported: true,
+    description: 'Generate a data digest using a hash algorithm',
+    glyph: 'shuffle',
   },
-  hmac: { isSupported: true, description: 'Generate a data digest using a hash algorithm', glyph: 'remix' },
   verify: {
     isSupported: true,
     description: 'Validate the provided signature for the given data',
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle',
+  },
+  export: {
+    isSupported: 'exportable',
+    description: 'Get the named key',
+    glyph: 'external-link',
   },
-  export: { isSupported: 'exportable', description: 'Get the named key', glyph: 'exit' },
 };
 
 export default Model.extend({

ui/app/styles/components/console-ui-panel.scss

@@ -106,7 +106,7 @@
   margin-left: calc(#{$console-spacing} - 0.33rem);
   position: relative;
 
-  .hs-icon {
+  svg {
     position: absolute;
     left: 0;
     top: 0;

ui/app/styles/components/flight-icon.scss

@@ -0,0 +1,36 @@
+.flight-icon {
+  &.flight-icon-display-inline {
+    vertical-align: middle;
+    margin: 2px 4px;
+  }
+  /**
+    * FlightIcon currently supports 16 or 24 px icon sizes
+    * the following hs-icon class overrides have been created to map the existing size classes
+  */
+  // use @size="16"
+  &.hs-icon-s {
+    width: 10px;
+    height: 10px;
+  }
+  &.hs-icon-m {
+    width: 13px;
+    height: 13px;
+  }
+  &.hs-icon-l {
+    width: 16px;
+    height: 16px;
+  }
+  // use @size="24" on component
+  &.hs-icon-xlm {
+    width: 21px;
+    height: 21px;
+  }
+  &.hs-icon-xl {
+    width: 24px;
+    height: 24px;
+  }
+  &.hs-icon-xxl {
+    width: 28px;
+    height: 28px;
+  }
+}

ui/app/styles/core.scss

@@ -120,3 +120,4 @@
 
 // bulma-free-zone
 @import './components/hs-icon';
+@import './components/flight-icon';

ui/app/templates/components/alert-popup.hbs

@@ -3,16 +3,13 @@
     <div class="column is-narrow message-icon">
       <Icon
         aria-hidden="true"
-        @size="l"
-        @glyph="{{type.glyph}}"
+        @sizeClass="l"
+        @name={{type.glyph}}
       />
     </div>
     <div class="column">
       <button type="button" class="close-button" {{action close}}>
-        <Icon
-          @glyph="cancel-plain"
-          @aria-label="Close"
-        />
+        <Icon @name="x" aria-label="Close" />
       </button>
       <div class="message-title">
         {{type.text}}

ui/app/templates/components/cluster-info.hbs

@@ -27,7 +27,7 @@
                     <LinkTo @route="vault.cluster.replication" @invokeAction={{@onLinkClick}}>
                       <div class="level is-mobile">
                         <span class="level-left">Enable</span>
-                        <Icon @glyph="plus-circle-outline" @class="has-text-grey-light level-right" />
+                        <Icon @name="plus-circle" class="has-text-grey-light level-right" />
                       </div>
                     </LinkTo>
                   </li>
@@ -66,22 +66,22 @@
                 <LinkTo @route="vault.cluster.settings.seal" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
-                    <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
+                    <Icon @name="check-circle" class="has-text-success level-right" />
                   </div>
                 </LinkTo>
               {{else}}
                 <span class="menu-item">
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
-                    <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
+                    <Icon @name="check-circle" class="has-text-success level-right" />
                   </div>
                 </span>
               {{/if}}
             {{else}}
               <span class="menu-item">
                 <div class="level is-mobile">
                   <span class="level-left has-text-danger">Sealed</span>
-                  <Icon @glyph="cancel-circle-outline" class="has-text-danger level-right" />
+                  <Icon @name="x-circle" class="has-text-danger level-right" />
                 </div>
               </span>
             {{/if}}

ui/app/templates/components/console/command-input.hbs

@@ -7,7 +7,11 @@
   <input onkeyup={{action 'handleKeyUp'}} value={{value}} autocomplete="off" spellcheck="false" />
   <ToolTip @horizontalPosition="auto-right" @verticalPosition={{if isFullscreen "above" "below"}} as |d|>
     <d.trigger @tagName="button" @type="button" @class={{concat "button is-compact" (if isFullscreen " active")}} @click={{action "fullscreen"}} @data-test-tool-tip-trigger={{true}}>
-    <Icon @size="l" @glyph={{if isFullscreen "expand-less" "expand-more"}} aria-label={{if isFullscreen "Minimize" "Maximize"}} />
+    <Icon
+      @name={{if isFullscreen "minimize" "maximize"}}
+      @sizeClass="l"
+      aria-label={{if isFullscreen "Minimize" "Maximize"}}
+    />
     </d.trigger>
     <d.content @class="tool-tip">
       <div class="box">

ui/app/templates/components/console/log-command.hbs

@@ -1,2 +1,2 @@
 {{!-- using Icon here instead of Chevron because two nested tagless components results in a rendered line break between the tags breaking the layout in the <pre> --}}
-<pre class="console-ui-command"><Icon @glyph="chevron-right" aria-hidden="true" />{{content}}</pre>
+<pre class="console-ui-command"><Icon @name="chevron-right" />{{content}}</pre>

ui/app/templates/components/console/log-error-with-html.hbs

@@ -1,5 +1,5 @@
 {{! template-lint-disable no-triple-curlies}}
 <div class="console-ui-alert has-text-danger">
-  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
+  <Icon @name="x-circle-fill" />
   <pre>{{{content}}}</pre>
 </div>

ui/app/templates/components/console/log-error.hbs

@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-danger">
-  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
+  <Icon @name="x-circle-fill" />
   <pre>{{content}}</pre>
 </div>

ui/app/templates/components/console/log-help.hbs

@@ -1,5 +1,5 @@
 <div class="console-ui-alert has-text-grey">
-<Icon @glyph="info-circle-fill" aria-hidden="true" />
+<Icon @name="info" />
 <pre>Usage: vault &lt;command&gt; [args]
 
 Commands:

ui/app/templates/components/console/log-success.hbs

@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-success">
-  <Icon @glyph="check-circle-fill" aria-hidden="true" />
+  <Icon @name="check-circle-fill" />
   <pre>{{content}}</pre>
 </div>

ui/app/templates/components/console/ui-panel.hbs

@@ -1,5 +1,5 @@
 <button type="button" class="button is-ghost console-close-button" {{action "closeConsole"}}>
-  <Icon @glyph="cancel-plain" aria-label="Close console" />
+  <Icon @name="x" aria-label="Close console" />
 </button>
 <div class="console-ui-panel-content">
   <div class="content">

ui/app/templates/components/control-group.hbs

@@ -2,7 +2,7 @@
   <MessageError @model={{model}} />
   <div class="control-group-header {{if isSuccess 'is-success'}}">
     <p>
-      <Icon @glyph={{if isSuccess "check-circle-fill" "lock-closed"}} />
+      <Icon @name={{if isSuccess "check-circle-fill" "lock-fill"}} />
       <strong data-test-banner-prefix>{{bannerPrefix}}</strong>
       <span data-test-banner-text>{{bannerText}}</span>
     </p>
@@ -42,7 +42,7 @@
       <div class="authorizations" data-test-authorizations>
         {{#if (gt model.authorizations.length 0)}}
         <span class="has-text-success">
-          <Icon @glyph="check-circle-outline" />
+          <Icon @name="check-circle" />
         </span>
           Already approved by
           {{#each model.authorizations as |authorization index|}}
@@ -54,7 +54,7 @@
           {{/each}}
         {{else}}
           <span class="has-text-grey">
-            <Icon @glyph="check-circle-outline" />
+            <Icon @name="check-circle" />
           </span>
           Awaiting authorization.
         {{/if}}

ui/app/templates/components/database-connection.hbs

@@ -296,7 +296,7 @@
   <EmptyState
     @title="Database type unavailable"
     @subTitle="Not supported in the UI"
-    @icon="disabled"
+    @icon="skip"
     @message="This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here."
     @bottomBorder={{true}}
   >

ui/app/templates/components/file-to-array-buffer.hbs

@@ -9,15 +9,15 @@
       <label class="file-label">
         <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input>
         <span class="file-cta button">
-          <Icon @glyph="upload" class="has-light-grey-text" />
+          <Icon @name="upload" class="has-light-grey-text" />
           Choose a file…
         </span>
         <span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
           {{or this.fileName "No file chosen"}}
         </span>
         {{#if this.fileName}}
           <button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear>
-            <Icon @glyph="cancel-circle-outline" />
+            <Icon @name="x-circle" />
           </button>
         {{/if}}
       </label>

ui/app/templates/components/generate-credentials-database.hbs

@@ -24,7 +24,7 @@
     <EmptyState
       @title={{errorTitle}}
       @subTitle="Error {{@model.errorHttpStatus}}"
-      @icon="alert-circle-outline"
+      @icon="alert-circle"
       @bottomBorder={{true}}
       @message={{@model.errorMessage}}
     >

ui/app/templates/components/generated-item-list.hbs

@@ -68,7 +68,7 @@
     <ListItem @linkParams={{array "vault.cluster.access.method.item.show"
       itemType list.item.id}} as |Item|>
       <Item.content>
-        <Icon @glyph="folder-outline" class="has-text-grey-light" @size="l" />{{list.item.id}}
+        <Icon @name="folder" @sizeClass="l" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
       <Item.menu as |Menu|>
         <li class="action">

ui/app/templates/components/hover-copy-button.hbs

@@ -6,7 +6,7 @@
       @clipboardText={{copyValue}}
       @success={{action (mut tooltipText) "Copied!"}}
     >
-      <Icon @glyph="copy-action" aria-label="Copy" />
+      <Icon @name="clipboard-copy" aria-label="Copy" />
     </CopyButton>
   </T.trigger>
   <T.content @class="tool-tip">

ui/app/templates/components/identity/item-aliases.hbs

@@ -7,10 +7,10 @@
   }}
     <div class="columns is-mobile">
       <div class="column is-10">
-        <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="has-text-black has-text-weight-semibold"><Icon
-              @glyph="user-square-outline"
-              class="has-text-grey-light"
-            /><span class="has-text-weight-semibold">{{item.name}}</span></LinkTo>
+        <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="has-text-black has-text-weight-semibold">
+          <Icon @name="user" class="has-text-grey-light" />
+          <span class="has-text-weight-semibold">{{item.name}}</span>
+        </LinkTo>
         <div class="has-text-grey">
           {{item.id}}
         </div>

ui/app/templates/components/identity/item-groups.hbs

@@ -2,7 +2,7 @@
   {{#each @model.directGroupIds as |gid|}}
     <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="list-item-row">
       <Icon
-        @glyph="folder-outline"
+        @name="folder"
         class="has-text-grey-light"
       />{{gid}}
     </LinkTo>
@@ -14,7 +14,7 @@
     }}
       <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="has-text-black">
         <Icon
-          @glyph="folder-outline"
+          @name="folder"
           class="has-text-grey-light"
         />{{gid}}
       </LinkTo>