updates LinkTo disabled attributes to args and fixes toolbar secret link disabled styling (#15106)

ui/app/styles/components/toolbar.scss

@@ -111,6 +111,15 @@
     }
   }
 }
+a.disabled.toolbar-link {
+  color: $black;
+  background-color: $white;
+  cursor: not-allowed;
+  &:hover {
+    background-color: $ui-gray-100;
+    color: $blue;
+  }
+}
 
 .toolbar-separator {
   border-right: $light-border;

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

@@ -11,7 +11,7 @@
                   <li>
                     <LinkTo
                       @route="vault.cluster.replication-dr-promote.details"
-                      disabled={{not this.auth.currentToken}}
+                      @disabled={{not this.auth.currentToken}}
                       {{on "click" @onLinkClick}}
                     >
                       <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
@@ -32,7 +32,7 @@
                     <LinkTo
                       @route="vault.cluster.replication.mode.index"
                       @model="dr"
-                      disabled={{not this.auth.currentToken}}
+                      @disabled={{not this.auth.currentToken}}
                       {{on "click" @onLinkClick}}
                     >
                       <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
@@ -43,7 +43,7 @@
                       <LinkTo
                         @route="vault.cluster.replication.mode.index"
                         @model="performance"
-                        disabled={{not this.auth.currentToken}}
+                        @disabled={{not this.auth.currentToken}}
                         {{on "click" @onLinkClick}}
                       >
                         <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{@cluster}} @tagName="span" />

ui/app/templates/components/keymgmt/provider-edit.hbs

@@ -154,7 +154,7 @@
             @title="No keys for this provider"
             @message="Keys for this provider will be listed here. Add a key to get started."
           >
-            <SecretLink @mode="create" @secret="" @queryParams={{query-params itemType="key"}} @class="link">
+            <SecretLink @mode="create" @secret="" @queryParams={{query-params itemType="key"}} class="link">
               Create key
             </SecretLink>
           </EmptyState>

ui/app/templates/components/secret-create-or-update.hbs

@@ -251,8 +251,8 @@
           <SecretLink
             @mode="show"
             @secret={{@model.id}}
-            @class="button"
             @queryParams={{query-params version=@modelForData.version}}
+            class="button"
           >
             Cancel
           </SecretLink>

ui/app/templates/components/secret-link.hbs

@@ -2,6 +2,7 @@
   @route={{this.link.route}}
   @models={{this.link.models}}
   @query={{this.query}}
+  @disabled={{@disabled}}
   {{on "click" this.onLinkClick}}
   ...attributes
 >

ui/app/templates/components/toolbar-secret-link.hbs

@@ -3,6 +3,7 @@
   @secret={{@secret}}
   @replace={{@replace}}
   @queryParams={{@queryParams}}
+  @disabled={{@disabled}}
   class="toolbar-link"
   ...attributes
 >

ui/app/templates/vault/cluster/init.hbs

@@ -82,8 +82,8 @@
               <LinkTo
                 @route="vault.cluster.auth"
                 @model={{this.model.name}}
+                @disabled={{this.model.sealed}}
                 class={{concat (if this.model.sealed "is-loading " "") "button is-primary"}}
-                disabled={{this.model.sealed}}
               >
                 Continue to Authenticate
               </LinkTo>

ui/scripts/codemods/transform-deprecated-args.js

@@ -14,7 +14,7 @@ module.exports = () => {
     '@name',
     '@autocomplete',
     '@spellcheck',
-    '@disabled',
+    '@disabled', // not deprecated for LinkTo
     '@class',
     '@placeholder',
     '@wrap',
@@ -26,11 +26,22 @@ module.exports = () => {
   ];
   return {
     ElementNode(node) {
-      if (['Textarea', 'Input', 'LinkTo'].includes(node.tag)) {
+      if (['Textarea', 'Input', 'LinkTo', 'ToolbarSecretLink', 'SecretLink'].includes(node.tag)) {
         const attrs = node.attributes;
         let i = 0;
         while (i < attrs.length) {
-          const arg = deprecatedArgs.find((name) => name === attrs[i].name);
+          // LinkTo uses disabled as named arg
+          // ensure that it is not present as attribute since link will still work
+          // since ToolbarSecretLink wraps SecretLink and SecretLink wraps LinkTo include them as well
+          const disabledAsArg = ['LinkTo', 'SecretLink', 'ToolbarSecretLink'].includes(node.tag);
+          if (disabledAsArg && attrs[i].name === 'disabled') {
+            attrs[i].name = '@disabled';
+          }
+          const arg = deprecatedArgs.find((name) => {
+            return node.tag.includes('SecretLink') || (node.tag === 'LinkTo' && name === '@disabled')
+              ? false
+              : name === attrs[i].name;
+          });
           if (arg) {
             attrs[i].name = arg.slice(1);
           }