UI: HDS adoption update <AlertInline> component to use Hds::Alert

ui/app/components/auth-saml.hbs

@@ -22,8 +22,7 @@
         />
       </div>
       <AlertInline
-        @sizeSmall={{true}}
-        @paddingTop={{true}}
+        class="has-top-padding-s"
         @type="info"
         @message="Leave blank to sign in with the default role if one is configured."
       />

ui/app/templates/components/auth-form-options.hbs

@@ -23,8 +23,7 @@
           />
         </div>
         <AlertInline
-          @sizeSmall={{true}}
-          @paddingTop={{true}}
+          class="has-top-padding-s"
           @type="info"
           @message="If this backend was mounted using a non-default path, enter it here."
         />

ui/app/templates/components/auth-form.hbs

@@ -191,8 +191,7 @@
           />
           {{#if (and this.delayAuthMessageReminder.isIdle this.showLoading)}}
             <AlertInline
-              @paddingTop={{true}}
-              @sizeSmall={{true}}
+              class="has-top-padding-s"
               @type="info"
               @message="If login takes longer than usual, you may need to check your device for an MFA notification, or contact your administrator if login times out."
               data-test-auth-message="push"

ui/app/templates/components/auth-jwt.hbs

@@ -21,8 +21,7 @@
       />
     </div>
     <AlertInline
-      @sizeSmall={{true}}
-      @paddingTop={{true}}
+      class="has-top-padding-s"
       @type="info"
       @message="Leave blank to sign in with the default role if one is configured"
     />

ui/app/templates/components/date-dropdown.hbs

@@ -34,5 +34,5 @@
   />
 </Hds::SegmentedGroup>
 {{#if this.invalidDate}}
-  <AlertInline @type="danger" @message={{this.invalidDate}} @paddingTop={{true}} @mimicRefresh={{true}} />
+  <AlertInline @type="danger" @message={{this.invalidDate}} class="has-top-padding-s" />
 {{/if}}

ui/app/templates/components/keymgmt/distribute.hbs

@@ -28,7 +28,7 @@
           @disallowNewItems={{false}}
         >
           {{#if (and this.validMatchError.key (not this.isNewKey))}}
-            <AlertInline @paddingTop={{true}} @sizeSmall={{true}} @type="danger" data-test-keymgmt-error="key">
+            <AlertInline class="has-top-padding-s" @type="danger" data-test-keymgmt-error="key">
               {{this.validMatchError.key}}
               To check compatibility,
               <DocLink class="doc-link-subtle" @path="/vault/docs/secrets/key-management#compatibility">refer to this table</DocLink>.
@@ -62,7 +62,7 @@
             </select>
           </div>
           {{#if this.validMatchError.key}}
-            <AlertInline @paddingTop={{true}} @sizeSmall={{true}} @type="danger" data-test-keymgmt-error="new-key">
+            <AlertInline class="has-top-padding-s" @type="danger" data-test-keymgmt-error="new-key">
               {{this.validMatchError.key}}
               To check compatibility,
               <DocLink class="doc-link-subtle" @path="/vault/docs/secrets/key-management#compatibility">refer to this table</DocLink>.
@@ -89,7 +89,7 @@
           data-test-keymgmt-dist-provider
         >
           {{#if this.validMatchError.provider}}
-            <AlertInline @paddingTop={{true}} @sizeSmall={{true}} @type="danger" data-test-keymgmt-error="provider">
+            <AlertInline class="has-top-padding-s" @type="danger" data-test-keymgmt-error="provider">
               {{this.validMatchError.provider}}
               To check compatibility,
               <DocLink class="doc-link-subtle" @path="/vault/docs/secrets/key-management#compatibility">refer to this table</DocLink>.

ui/app/templates/components/mfa/mfa-form.hbs

@@ -58,7 +58,7 @@
       </div>
       {{#if this.newCodeDelay.isRunning}}
         <div>
-          <AlertInline @type="danger" @sizeSmall={{true}} @message={{this.codeDelayMessage}} />
+          <AlertInline @type="danger" @message={{this.codeDelayMessage}} />
         </div>
       {{/if}}
       <Hds::Button

ui/app/templates/components/mount-backend-form.hbs

@@ -52,7 +52,7 @@
         </div>
         {{#if this.invalidFormAlert}}
           <div class="control">
-            <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+            <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
           </div>
         {{/if}}
       </div>

ui/app/templates/components/oidc/assignment-form.hbs

@@ -63,7 +63,7 @@
       data-test-oidc-assignment-cancel
     />
     {{#if this.modelValidations.targets.errors}}
-      <AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} @paddingTop={{true}} />
+      <AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} class="has-top-padding-s" />
     {{/if}}
   </div>
 </form>

ui/app/templates/components/oidc/client-form.hbs

@@ -97,7 +97,7 @@
     </div>
     {{#if this.invalidFormAlert}}
       <div class="control">
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
       </div>
     {{/if}}
   </div>

ui/app/templates/components/oidc/key-form.hbs

@@ -98,7 +98,7 @@
     </div>
     {{#if this.invalidFormAlert}}
       <div class="control">
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
       </div>
     {{/if}}
   </div>

ui/app/templates/components/oidc/provider-form.hbs

@@ -125,7 +125,7 @@
     </div>
     {{#if this.invalidFormAlert}}
       <div class="control">
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
       </div>
     {{/if}}
   </div>

ui/app/templates/components/oidc/scope-form.hbs

@@ -73,7 +73,7 @@
   </div>
   {{#if this.invalidFormAlert}}
     <div class="control">
-      <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+      <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
     </div>
   {{/if}}
 </form>

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

@@ -26,12 +26,7 @@
         />
       </p>
       {{#if (get this.validationMessages "path")}}
-        <AlertInline
-          @type="danger"
-          @message={{get this.validationMessages "path"}}
-          @paddingTop={{true}}
-          @isMarginless={{true}}
-        />
+        <AlertInline @type="danger" @message={{get this.validationMessages "path"}} class="has-top-padding-s" />
       {{/if}}
       {{#if @modelForData.isFolder}}
         <p class="help has-text-danger">
@@ -104,12 +99,7 @@
             </div>
           </div>
           {{#if this.validationMessages.key}}
-            <AlertInline
-              @type="danger"
-              @message={{this.validationMessages.key}}
-              @paddingTop={{true}}
-              @isMarginless={{true}}
-            />
+            <AlertInline @type="danger" @message={{this.validationMessages.key}} class="has-top-padding-s" />
           {{/if}}
         {{/each}}
       </div>

ui/lib/core/addon/components/alert-inline.hbs

@@ -3,22 +3,16 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div
+<Hds::Alert
   {{did-update this.refresh @message}}
-  class={{concat "is-flex-center" this.paddingTop this.isMarginless this.sizeSmall}}
+  @type="compact"
+  @color={{this.color}}
+  @icon={{if this.isRefreshing "loading"}}
   data-test-inline-alert
   ...attributes
+  as |A|
 >
-  {{#if this.isRefreshing}}
-    <Icon @name="loading" class="loading" />
-  {{else}}
-    <Icon @name={{this.alertType.glyph}} class={{this.alertType.glyphClass}} />
-    <p class={{this.textClass}} data-test-inline-error-message>
-      {{#if (has-block)}}
-        {{yield}}
-      {{else}}
-        {{@message}}
-      {{/if}}
-    </p>
-  {{/if}}
-</div>
+  {{#unless this.isRefreshing}}
+    <A.Description data-test-inline-error-message>{{@message}}</A.Description>
+  {{/unless}}
+</Hds::Alert>

ui/lib/core/addon/components/alert-inline.js

@@ -7,62 +7,62 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
-import { messageTypes } from 'core/helpers/message-types';
+import { assert } from '@ember/debug';
 
 /**
  * @module AlertInline
- * `AlertInline` components are used to inform users of important messages.
+ * * Use Hds::Alert @type="compact" for displaying alert messages.
+ * This component is specifically for rendering messages that may update while a user is viewing the page
+ * because it displays a loading icon when the @message arg changes before rendering the updated @message text.
+ * (Example: submitting a form and displaying the number of errors because on re-submit the number may change)
  *
  * @example
- * ```js
- * <AlertInline @type="danger" @message="{{model.keyId}} is not a valid lease ID"/>
+ * ```
+ * <AlertInline @type="danger" @message="There are 2 errors with this form."/>
  * ```
  *
- * @param {string} type=null - The alert type passed to the message-types helper.
- * @param {string} [message=null] - The message to display within the alert.
- * @param {boolean} [paddingTop=false] - Whether or not to add padding above component.
- * @param {boolean} [isMarginless=false] - Whether or not to remove margin bottom below component.
- * @param {boolean} [sizeSmall=false] - Whether or not to display a small font with padding below of alert message.
- * @param {boolean} [mimicRefresh=false] - If true will display a loading icon when attributes change (e.g. when a form submits and the alert message changes).
+ * @deprecated {string} type - color getter maps type to the Hds::Alert @color
+ * @param {string} color - Styles alert color and icon, can be one of: critical, warning, success, highlight, neutral
+ * @param {string} message - The message to display within the alert.
  */
 
 export default class AlertInlineComponent extends Component {
   @tracked isRefreshing = false;
 
-  get mimicRefresh() {
-    return this.args.mimicRefresh || false;
-  }
-
-  get paddingTop() {
-    return this.args.paddingTop ? ' padding-top' : '';
-  }
-
-  get isMarginless() {
-    return this.args.isMarginless ? ' is-marginless' : '';
-  }
-
-  get sizeSmall() {
-    return this.args.sizeSmall ? ' size-small' : '';
-  }
-
-  get textClass() {
-    if (this.args.type === 'danger') {
-      return this.alertType.glyphClass;
+  constructor() {
+    super(...arguments);
+    assert('@type arg is deprecated, pass @color="critical" instead', this.args.type !== 'critical');
+    if (this.args.color) {
+      const possibleColors = ['critical', 'warning', 'success', 'highlight', 'neutral'];
+      assert(
+        `${this.args.color} is not a valid color. @color arg must be one of: ${possibleColors.join(', ')}`,
+        possibleColors.includes(this.args.color)
+      );
     }
-    return null;
   }
 
-  get alertType() {
-    return messageTypes([this.args.type]);
+  get color() {
+    if (this.args.color) return this.args.color;
+    // @type arg is deprecated, this is for backward compatibility of old implementation
+    switch (this.args.type) {
+      case 'danger':
+        return 'critical';
+      case 'success':
+        return 'success';
+      case 'warning':
+        return 'warning';
+      case 'info':
+        return 'highlight';
+      default:
+        return 'neutral';
+    }
   }
 
   @action
   refresh() {
-    if (this.mimicRefresh) {
-      this.isRefreshing = true;
-      later(() => {
-        this.isRefreshing = false;
-      }, 200);
-    }
+    this.isRefreshing = true;
+    later(() => {
+      this.isRefreshing = false;
+    }, 200);
   }
 }

ui/lib/core/addon/components/kv-object-editor.hbs

@@ -13,7 +13,7 @@
   />
   {{#if @validationError}}
     <div>
-      <AlertInline @type="danger" @message={{@validationError}} @paddingTop={{true}} />
+      <AlertInline @type="danger" @message={{@validationError}} class="has-top-padding-s" />
     </div>
   {{/if}}
   {{#if this.kvData}}

ui/lib/core/addon/components/string-list.hbs

@@ -58,10 +58,6 @@
     </div>
   {{/each}}
   {{#if this.indicesWithComma}}
-    <AlertInline
-      @type="warning"
-      @message="Input contains a comma. Please separate values into individual rows."
-      @isMarginless={{true}}
-    />
+    <AlertInline @type="warning" @message="Input contains a comma. Please separate values into individual rows." />
   {{/if}}
 </div>

ui/lib/core/addon/components/text-file.hbs

@@ -57,7 +57,7 @@
       <AlertInline
         @type="danger"
         @message={{or @validationError this.uploadError}}
-        @paddingTop={{true}}
+        class="has-top-padding-s"
         data-test-field-validation="text-file"
       />
     {{/if}}

ui/lib/core/addon/templates/components/edit-form.hbs

@@ -30,7 +30,7 @@
   >
     <:error>
       {{#if this.invalidFormAlert}}
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
       {{/if}}
     </:error>
   </FormSaveButtons>

ui/lib/kubernetes/addon/components/page/configure.hbs

@@ -89,7 +89,7 @@
     {{on "click" this.cancel}}
   />
   {{#if this.alert}}
-    <AlertInline @type="danger" @paddingTop={{true}} @message={{this.alert}} @mimicRefresh={{true}} data-test-alert />
+    <AlertInline @type="danger" class="has-top-padding-s" @message={{this.alert}} data-test-alert />
   {{/if}}
 </div>
 

ui/lib/kubernetes/addon/components/page/role/create-and-edit.hbs

@@ -130,7 +130,7 @@
     {{/if}}
     {{#if this.invalidFormAlert}}
       <div class="control" data-test-invalid-form-alert>
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
       </div>
     {{/if}}
   </form>

ui/lib/kv/addon/components/kv-data-fields.hbs

@@ -19,7 +19,7 @@
     @valueUpdated={{this.handleJson}}
   />
   {{#if (or @modelValidations.secretData.errors this.lintingErrors)}}
-    <AlertInline @type={{if this.lintingErrors "warning" "danger"}} @paddingTop={{true}}>
+    <AlertInline @type={{if this.lintingErrors "warning" "danger"}} class="has-top-padding-s">
       {{#if @modelValidations.secretData.errors}}
         {{@modelValidations.secretData.errors}}
       {{else}}

ui/lib/kv/addon/components/page/secret/edit.hbs

@@ -94,7 +94,6 @@
         class="has-top-padding-s"
         @type="danger"
         @message={{this.invalidFormAlert}}
-        @mimicRefresh={{true}}
       />
     {{/if}}
   </div>

ui/lib/kv/addon/components/page/secret/metadata/edit.hbs

@@ -38,9 +38,8 @@
             <AlertInline
               data-test-invalid-form-alert
               @type="danger"
-              @paddingTop={{true}}
+              class="has-top-padding-s"
               @message={{this.invalidFormAlert}}
-              @mimicRefresh={{true}}
             />
           </div>
         {{/if}}

ui/lib/kv/addon/components/page/secrets/create.hbs

@@ -61,7 +61,6 @@
         class="has-top-padding-s"
         @type="danger"
         @message={{this.invalidFormAlert}}
-        @mimicRefresh={{true}}
       />
     {{/if}}
   </div>