Merge pull request #5227 from hashicorp/ui-wizards-updates

Ui: Guide style updates

ui/app/components/wizard-section.js

@@ -5,4 +5,5 @@ export default outerHTMLComponent.extend({
   headerIcon: null,
   docText: null,
   docPath: null,
+  instructions: null,
 });

ui/app/helpers/mountable-secret-engines.js

@@ -5,7 +5,6 @@ const MOUNTABLE_SECRET_ENGINES = [
     displayName: 'Active Directory',
     value: 'ad',
     type: 'ad',
-    glyph: 'azure',
     category: 'cloud',
   },
   {

ui/app/styles/components/ui-wizard.scss

@@ -8,6 +8,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  transition: padding $speed;
+  will-change: padding;
 }
 
 .ui-wizard-container .app-content.wizard-open {
@@ -32,7 +34,7 @@
   overflow: auto;
 
   p {
-    line-height: 1.2;
+    line-height: 1.33;
   }
 
   .dismiss-collapsed {
@@ -64,23 +66,32 @@
 }
 
 .wizard-header {
-  margin-bottom: $size-5;
+  border-bottom: $light-border;
+  padding: $size-8 $size-4 $size-8 2rem;
+  margin: $size-4 0;
   position: relative;
 
-  .icon {
+  @include until($tablet) {
-    margin-right: $size-11;
+    margin-top: 0;
-    vertical-align: -0.33rem;
+    padding-top: 0;
+  }
+
+  .title .icon {
+    left: 0;
+    position: absolute;
+    top: 0.7rem;
   }
 }
 
 .wizard-dismiss-menu {
   position: absolute;
-  right: $size-6;
+  right: 0;
-  top: $size-6;
+  top: -$size-11;
   z-index: 10;
 }
 
 .ui-wizard.collapsed {
+  animation: drop-fade-above $speed-slow;
   color: $white;
   background: $black;
   bottom: auto;
@@ -103,10 +114,25 @@
 
   .title {
     color: $white;
+
+    .icon {
+      top: -0.1rem;
+    }
   }
 
   .wizard-header {
-    margin-bottom: $size-10;
+    margin: 0 0 $size-10;
+    padding-top: 0;
+  }
+
+  .wizard-dismiss-menu {
+    svg {
+      color: $white;
+    }
+
+    &:hover svg {
+      color: $black;
+    }
   }
 }
 
@@ -142,3 +168,7 @@
   margin-top: $size-4;
   border-top: 1px solid $grey-light;
 }
+
+.wizard-instructions {
+  margin: $size-4 0;
+}

ui/app/styles/utils/_bulma_variables.scss

@@ -69,9 +69,8 @@ $menu-item-hover-color: $white;
 
 $progress-bar-background-color: lighten($grey-light, 15%);
 
-$base-border: 1px solid $grey-light;
+$base-border: 1px solid $ui-gray-300;
-$component-border: 1px solid $grey;
+$light-border: 1px solid $ui-gray-200;
-$layout-border: $base-border;
 
 //menu
 $menu-item-hover-color: $text;

ui/app/templates/components/wizard-content.hbs

@@ -1,3 +1,4 @@
+<div class="wizard-header">
   <PopupMenu @class="wizard-dismiss-menu">
     <nav class="menu">
       <ul class="menu-list">
@@ -9,7 +10,6 @@
       </ul>
     </nav>
   </PopupMenu>
-<div class="wizard-header">
   <h1 class="title is-5">
     <ICon @glyph={{glyph}} @size="21" /> {{headerText}}
   </h1>

ui/app/templates/components/wizard-section.hbs

@@ -6,6 +6,12 @@
     {{headerText}}
   </h2>
   {{yield}}
+  {{#if instructions}}
+    <div class="wizard-instructions">
+      <h2 class="title is-6">What to do</h2>
+      <p>{{instructions}}</p>
+    </div>
+  {{/if}}
   {{#if docText}}
     <DocLink @path={{docPath}}>
       <ICon @glyph='learn' @size=16 /> {{docText}}

ui/app/templates/components/wizard/auth-edit.hbs

@@ -2,8 +2,9 @@
   @headerText="Editing Your Auth Method"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Click the "View method" link to see its details.'
 >
   <p>
-    You can update your new auth method configuration here. Click the "View method" link to see its details.
+    You can update your new auth method configuration here.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/auth-enable.hbs

@@ -2,6 +2,7 @@
   @headerText="Entering Auth Method details"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Customize your new method and click "Enable Method".'
 >
   <p>
     Great! Now you can customize this method with a name and description that makes sense for your team, and fill out any options that are specific to this method.

ui/app/templates/components/wizard/auth-idle.hbs

@@ -2,8 +2,9 @@
   @headerText="Enabling an Auth Method"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Choose an authentication method and click "Next" to get started.'
 >
   <p>
-    Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later. Choose an authentication method to get started.
+    Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/auth-list.hbs

@@ -2,8 +2,9 @@
   @headerText="Auth Method List"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Click the ellipsis menu for your method and then click "View Configuration" to see its details.'
 >
   <p>
-    Awesome! Now you can see your new auth method in the list. Click the ellipsis menu for your method and then click "View Configuration" to see its details.
+    Awesome! Now you can see your new auth method in the list.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/policies-create.hbs

@@ -3,6 +3,7 @@
     @headerText="Creating a policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Fill in your policy details and click "Create Policy".'
   >
     <p>
       Let's use "<code>my-new-policy</code>" for your policy name. Copy the policy below to try it out:

ui/app/templates/components/wizard/policies-delete.hbs

@@ -3,9 +3,10 @@
     @headerText="Deleting your policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Click on "Delete" to remove the policy that you created.'
   >
     <p>
-      You can delete your test policy by clicking the "..." icon to the right of the policy name. Click on "Delete" to remove it.
+      You can delete your test policy by clicking the "..." icon to the right of the policy name.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/policies-details.hbs

@@ -3,9 +3,10 @@
     @headerText="Your new policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Click on "ACL Policies" in the sidebar to go back to the list of policies.'
   >
     <p>
-      Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle. Let's go back to the list of policies by clicking on "ACL Policies" in the sidebar.
+      Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/policies-intro.hbs

@@ -3,9 +3,10 @@
     @headerText="Choosing a policy type"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='To get started with something simple, click on "Create ACL policy".'
   >
     <p>
-      Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features. To get started with something simple, click on "Create ACL policy"
+      Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/replication-setup.hbs

@@ -3,9 +3,10 @@
     @headerText="Setting up Replication"
     @docText="Docs: Replication"
     @docPath="/docs/internals/replication.html"
+    @instructions='Choose the one that is right for your needs and click "Enable Replication"'
   >
     <p>
-      Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access? Choose the one that is right for your needs.
+      Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access?
     </p>
   </WizardSection>
   <WizardSection @headerText="Cluster mode" @class="wizard-details">

ui/app/templates/components/wizard/secrets-details.hbs

@@ -1,11 +1,12 @@
 <WizardSection
   @headerText="Your Secrets Engine"
+  @instructions='Click on the link to add a {{nextStep}} in the page header'
 >
   <p>
     {{#if needsEncryption}}
       The Transit Secrets Engine uses encryption keys to provide "encryption as a service". Click on "Create Encryption Key" at the top to create one.
     {{else}}
-      Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}. Click on the link in the page header.
+      Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}.
     {{/if}}
   </p>
 </WizardSection>

ui/app/templates/components/wizard/secrets-enable.hbs

@@ -2,6 +2,7 @@
   @headerText="Entering Secrets Engine details"
   @docText="Docs: Secrets Engines"
   @docPath="/docs/secrets/index.html"
+  @instructions='Fill in the details for your engine and click "Enable Engine"'
 >
   <p>
     Good choice! Now you can customize your engine with a name and description that makes sense for your team, as well as options for replication and caching.

ui/app/templates/components/wizard/secrets-idle.hbs

@@ -2,6 +2,7 @@
   @headerText="Enabling a Secrets Engine"
   @docText="Docs: Secrets Engines"
   @docPath="/docs/secrets/index.html"
+  @instructions='Select an engine and click "Next"'
 >
   <p>
     Vault is all about managing secrets, so let's set up your first secrets engine. You can use a static engine to store your secrets locally in Vault, or connect to a cloud backend with one of the dynamic engines.

ui/app/templates/components/wizard/secrets-list.hbs

@@ -1,7 +1,8 @@
 <WizardSection
   @headerText="Viewing engine configuration"
+  @instructions='Find the engine in the list and click on "View Configuration" in the menu on the right.'
 >
   <p>
-    This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-ine. Find the engine in the list and click on "View Configuration" in the menu on the right. 
+    This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-line.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/secrets-role.hbs

@@ -1,7 +1,8 @@
 <WizardSection
   @headerText="Adding a role"
+  @instructions='Enter your role details and click "Save"'
 >
   <p>
-    A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions. Enter your role details and save it.
+    A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/secrets-secret.hbs

@@ -1,7 +1,8 @@
 <WizardSection
   @headerText="Adding a secret"
+  @instructions='Enter the details of your secret and click "Save"'
 >
   <p>
-    Enter the details of your secret and save it.
+    Here you can specify the path of your secret and include the key/value pairs to include.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/tools-info.hbs

@@ -3,9 +3,10 @@
     @headerText="Information about your data"
     @docText="API: Lookup Data"
     @docPath="/api/system/wrapping-lookup.html"
+    @instructions='Click on "Rewrap" in the sidebar.'
   >
     <p>
-      Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time. Click on "Rewrap" in the sidebar.
+      Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/tools-lookup.hbs

@@ -3,6 +3,7 @@
     @headerText="Lookup wrapped data"
     @docText="API: Lookup Data"
     @docPath="/api/system/wrapping-lookup.html"
+    @instructions='Paste the token that you copied and click "Lookup Token".'
   >
     <p>
       Lookup lets you see information about your token without unwrapping it or changing it. Paste your token here and click "Lookup". If you find that your data didn't copy for some reason, you can always go back and do it again.

ui/app/templates/components/wizard/tools-rewrap.hbs

@@ -3,9 +3,10 @@
     @headerText="Rewrapping your data"
     @docText="API: Rewrap Data"
     @docPath="/api/system/wrapping-rewrap.html"
+    @instructions='Paste your token into the input and click "Rewrap Token" to transform your token into a new one.'
   >
     <p>
-      Paste your token into the input and click "Rewrap Token" to transform your token into a new one. Don't worry though, it will still have the same data.
+      You can rewrap your data to rotate the token, but it will still have the same creation time and TTL. Don't worry, the new token will still have the same data.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/tools-rewrapped.hbs

@@ -3,9 +3,10 @@
     @headerText="Your rewrapped data"
     @docText="API: Rewrap Data"
     @docPath="/api/system/wrapping-rewrap.html"
+    @instructions='Copy this token and then click on "Unwrap" in the sidebar to verify the data is still in there.'
   >
     <p>
-      It's a subtle transformation, but your old token has been revoked and this new one has taken its place. Copy this one and then click on "Unwrap" in the sidebar to make sure the data is still in there.
+      It's a subtle transformation, but your old token has been revoked and this new one has taken its place.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/tools-unwrap.hbs

@@ -3,9 +3,10 @@
     @headerText="Unwrapping your data"
     @docText="API: Unwrap Data"
     @docPath="/api/system/wrapping-unwrap.html"
+    @instructions='Paste your token into the input and click "Unwrap Data".'
   >
     <p>
-      We saved this step for the end because unwrapping the token will revoke it, so we can only do this once. Paste your token into the input and click "Unwrap Data"
+      We saved this step for the end because unwrapping the token will revoke it, so we can only do this once.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/components/wizard/tools-wrap.hbs

@@ -3,6 +3,7 @@
     @headerText="Wrapping data"
     @docText="API: Wrap Data"
     @docPath="/api/system/wrapping-wrap.html"
+    @instructions='Enter some data in JSON format and click "Wrap Data".'
   >
     <p>
       Vault provides several ways to create or wrap data, and manage it from there. Here you can wrap a token (or anything you like) in JSON format. Give it a try.

ui/app/templates/components/wizard/tools-wrapped.hbs

@@ -3,9 +3,10 @@
     @headerText="Copying your wrapped token"
     @docText="API: Wrap Data"
     @docPath="/api/system/wrapping-wrap.html"
+    @instructions='Copy the token and then click on "Lookup" in the sidebar.'
   >
     <p>
-      Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps, so copy the token and then click on "Lookup" in the sidebar.
+      Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps.
     </p>
   </WizardSection>
 </WizardContent>

ui/app/templates/svg/icons/enable/ad.hbs

@@ -0,0 +1 @@
+<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.68l16.347-2.225.007 15.768-16.34.092L4 9.681zm16.34 15.36l.012 15.78-16.34-2.246v-13.64l16.327.105zm1.98-17.877L43.996 4v19.022l-21.674.172V7.164zM44 25.187l-.005 18.937-21.675-3.06-.03-15.912 21.71.035z" fill="#00ADEF" fill-rule="nonzero"/></svg>

ui/app/templates/svg/icons/enable/alicloud.hbs

@@ -0,0 +1 @@
+<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="#373C41"><path d="M47.6,14.5c-0.6-1.6-1.7-3.1-3.1-4c-2-1.4-2.1-1.4-9.9-1.4c-5.7-0.1-7-0.1-7,0.1c0,0.3,1,4.3,1.1,4.4 c0,0.1,2.5,0.6,5.5,1.2s5.6,1.3,5.8,1.4c0.3,0.2,0.6,0.4,0.8,0.8c0.3,0.5,0.3,1,0.3,6.8c0,5.8,0,6.3-0.3,6.8 c-0.2,0.3-0.5,0.6-0.8,0.8c-0.2,0.1-2.8,0.8-5.8,1.4s-5.4,1.2-5.5,1.3c-0.1,0.1-1.1,4.1-1.1,4.4c0,0.2,1.3,0.2,7,0.2 c7.8-0.1,7.9-0.1,9.9-1.4c1.4-1,2.5-2.4,3.1-4.1c0.4-1.2,0.4-1.3,0.4-9.3C48,15.8,48,15.7,47.6,14.5z"/><path d="M13.8,32.9c-2.9-0.6-5.6-1.3-5.8-1.4c-0.3-0.2-0.6-0.4-0.8-0.8c-0.3-0.5-0.3-1-0.3-6.8s0-6.3,0.3-6.8 c0.2-0.3,0.5-0.6,0.8-0.8c0.2-0.1,2.8-0.8,5.8-1.4s5.4-1.2,5.5-1.3c0.1-0.1,1.1-4.1,1.1-4.4c0-0.2-1.3-0.2-7-0.2 c-7.8,0.1-7.9,0.1-9.9,1.4c-1.4,1-2.5,2.4-3.1,4.1C0,15.7,0,15.8,0,23.8s0,8.1,0.4,9.3c0.6,1.6,1.7,3.1,3.1,4 c2,1.4,2.1,1.4,9.9,1.4c5.7,0.1,7,0.1,7-0.1c0-0.3-1-4.3-1.1-4.4C19.3,34,16.8,33.5,13.8,32.9z"/><rect x="19" y="23" class="st0" width="10" height="2"/></g></svg>

ui/app/templates/svg/icons/enable/auth.hbs

@@ -1 +1 @@
-<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M35 40c0-6.904-6.716-12.5-15-12.5-8.284 0-15 5.596-15 12.5H0V0h40v40h-5zM20 25a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15z" id="a"/></defs><g transform="translate(4 4)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" xlink:href="#a"/></g></svg>
+<svg width="{{size}}" height="{{size}}" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M35 40c0-6.904-6.716-12.5-15-12.5-8.284 0-15 5.596-15 12.5H0V0h40v40h-5zM20 25a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15z" fill="#919FA8"/></svg>

ui/app/templates/svg/icons/enable/azure.hbs

@@ -1 +1 @@
-<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.68l16.347-2.225.007 15.768-16.34.092L4 9.681zm16.34 15.36l.012 15.78-16.34-2.246v-13.64l16.327.105zm1.98-17.877L43.996 4v19.022l-21.674.172V7.164zM44 25.187l-.005 18.937-21.675-3.06-.03-15.912 21.71.035z" fill="#00ADEF" fill-rule="nonzero"/></svg>
+<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="#0089D6"><path d="M22.2108636,36.8615685 C27.2682515,35.96817 31.445365,35.2288828 31.4933399,35.2187089 L31.5805679,35.2002102 L26.8058952,29.5208869 C24.1798272,26.3972586 22.0312248,23.8294516 22.0312248,23.8146494 C22.0312248,23.7866245 26.9614777,10.2097737 26.9891939,10.1614718 C26.9984608,10.1453226 30.3536476,15.9379606 35.1223869,24.203209 C39.586968,31.9412827 43.2677986,38.3213522 43.3020108,38.3811384 L43.3642174,38.4898424 L28.1899137,38.4878851 L13.0156128,38.4859358 L22.2108636,36.8615741 L22.2108636,36.8615685 Z"></path><path d="M4,35.1296486 C4,35.1216524 6.24980265,31.2161715 8.99956136,26.450799 L13.9991219,17.7864861 L19.8255318,12.8969511 C23.0300572,10.2077074 25.6605713,8.00412926 25.6711175,8.00011047 C25.6816638,7.99609247 25.639509,8.10219072 25.57744,8.23588586 C25.5153711,8.369581 22.6683736,14.4760908 19.2507789,21.8059071 L13.0369718,35.1328455 L8.51848592,35.1385105 C6.03331922,35.1416294 4,35.1376352 4,35.1296454 L4,35.1296486 Z"></path></g></svg>

ui/app/templates/svg/icons/enable/userpass.hbs

@@ -1 +1 @@
-<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M14 16c0-2.761-2.686-5-6-5s-6 2.239-6 5H0V0h16v16h-2zm-6-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" id="a"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(4 17)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" xlink:href="#a"/><g mask="url(#b)" fill="#7C8797"><path d="M0 0h16v16H0z"/></g></g><path fill="#919FA8" d="M24 21h20v2H24z"/><rect fill="#919FA8" x="21" y="13" width="6" height="2" rx="1"/><path fill="#919FA8" d="M24 27h20v2H24z"/><path d="M1 10v30h46V10H28V8h-8v2H1zM0 9h19V7h10v2h19v32H0V9z" fill="#919FA8" fill-rule="nonzero"/></g></svg>
+<svg width="{{size}}" height="{{size}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd"><g transform="translate(4 17)"><mask id="b" fill="#fff"><path d="M14 16c0-2.761-2.686-5-6-5s-6 2.239-6 5H0V0h16v16h-2zm-6-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" id="a"/></mask><g mask="url(#b)" fill="#7C8797"><path d="M0 0h16v16H0z"/></g></g><path fill="#919FA8" d="M24 21h20v2H24z"/><rect fill="#919FA8" x="21" y="13" width="6" height="2" rx="1"/><path fill="#919FA8" d="M24 27h20v2H24z"/><path d="M1 10v30h46V10H28V8h-8v2H1zM0 9h19V7h10v2h19v32H0V9z" fill="#919FA8" fill-rule="nonzero"/></g></svg>