feat: update notification to use hds toast component (#16519)

hashicorp · Mar 6, 2023 · 63204b5 · 63204b5
1 parent 7ea2bd6
commit 63204b5
Show file tree

Hide file tree

Showing 59 changed files with 428 additions and 847 deletions.
diff --git a/.changelog/16519.txt b/.changelog/16519.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update to use Hds::Toast component to show notifications
+```
diff --git a/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/index.hbs b/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/index.hbs
@@ -1,37 +1,27 @@
 {{#if (eq @type 'remove')}}
   {{#if @error}}
-    <Notice
-      class="notification-delete"
-      @type="error"
+    <Hds::Toast
+      @color='critical'
       ...attributes
-    as |notice|>
-      <notice.Header>
-        <strong>Error!</strong>
-      </notice.Header>
-      <notice.Body>
-        <p>
-          There was an error invalidating the Lock Session.
-      {{#if (and @error.status @error.detail)}}
+      as |T|>
+      <T.Title>Error!</T.Title>
+      <T.Description>
+        There was an error invalidating the Lock Session.
+        {{#if (and @error.status @error.detail)}}
           <br />{{@error.status}}: {{@error.detail}}
-      {{/if}}
-        </p>
-      </notice.Body>
-    </Notice>
+        {{/if}}
+      </T.Description>
+    </Hds::Toast>
   {{else}}
-    <Notice
-      class="notification-delete"
-      @type="success"
+    <Hds::Toast
+      @color='success'
       ...attributes
-    as |notice|>
-      <notice.Header>
-        <strong>Success!</strong>
-      </notice.Header>
-      <notice.Body>
-        <p>
-          Your Lock Session has been invalidated.
-        </p>
-      </notice.Body>
-    </Notice>
+      as |T|>
+      <T.Title>Success!</T.Title>
+      <T.Description>
+        Your Lock Session has been invalidated.
+      </T.Description>
+    </Hds::Toast>
   {{/if}}
 {{else if (eq @type 'kv')}}
   <Hds::Alert @type='inline' @color='warning' class='mb-3' data-test-session-warning as |A|>

diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/notifications/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/notifications/index.hbs
@@ -1,16 +1,8 @@
 {{#if (eq @type 'remove')}}
-  <Notice
-    class="notification-delete"
-    @type="success"
-    ...attributes
-  as |notice|>
-    <notice.Header>
-      <strong>Success!</strong>
-    </notice.Header>
-    <notice.Body>
-      <p>
-        Your Namespace has been marked for deletion.
-      </p>
-    </notice.Body>
-  </Notice>
+  <Hds::Toast @color='success'
+              ...attributes
+              as |T|>
+    <T.Title>Success!</T.Title>
+    <T.Description>Your Namespace has been marked for deletion.</T.Description>
+  </Hds::Toast>
 {{/if}}
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/notifications/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/notifications/index.hbs
@@ -1,16 +1,11 @@
 {{#if (eq @type 'remove')}}
-  <Notice
-    class="notification-delete"
-    @type="success"
+  <Hds::Toast
+    @color='success'
     ...attributes
-  as |notice|>
-    <notice.Header>
-      <strong>Success!</strong>
-    </notice.Header>
-    <notice.Body>
-      <p>
-        Your Partition has been marked for deletion.
-      </p>
-    </notice.Body>
-  </Notice>
+    as |T|>
+    <T.Title>Success!</T.Title>
+    <T.Description>
+      Your Partition has been marked for deletion.
+    </T.Description>
+  </Hds::Toast>
 {{/if}}
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/notifications/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/notifications/index.hbs
@@ -1,16 +1,11 @@
 {{#if (eq @type 'remove')}}
-  <Notice
-    class="notification-delete"
-    @type="success"
+  <Hds::Toast
+    @color='success'
     ...attributes
-  as |notice|>
-    <notice.Header>
-      <strong>Success!</strong>
-    </notice.Header>
-    <notice.Body>
-      <p>
-        Your Peer has been marked for deletion.
-      </p>
-    </notice.Body>
-  </Notice>
+    as |T|>
+    <T.Title>Success!</T.Title>
+    <T.Description>
+      Your Peer has been marked for deletion.
+    </T.Description>
+  </Hds::Toast>
 {{/if}}
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
@@ -5,14 +5,10 @@
   @extend %app-notifications;
 }
 %app-notifications {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
   position: fixed;
-  z-index: 50;
-  top: -45px;
-  left: 0;
+  z-index: 100;
+  bottom: 2rem;
+  left: 1.5rem;
 
   pointer-events: none;
 }
@@ -125,7 +121,6 @@ main {
   %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
     left: calc(var(--chrome-width, 280px) * -1);
   }
-  %main-nav-horizontal-toggle ~ main .notifications,
   %main-nav-horizontal-toggle ~ main {
     margin-left: var(--chrome-width, 280px);
   }

diff --git a/ui/packages/consul-ui/app/components/app/notification/index.hbs b/ui/packages/consul-ui/app/components/app/notification/index.hbs
@@ -1,5 +1,5 @@
 <div
-  class="app-notification"
+  class='app-notification'
   ...attributes
   {{style
     (array

diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
@@ -16,42 +16,32 @@ as |api|>
 
     <BlockSlot @name="error" as |after|>
 {{#if (string-starts-with api.error.detail 'duplicate intention found:')}}
-      <Notice
-        {{notification
-          after=(action after)
-        }}
-        class="notification-update"
-        @type="error"
-      as |notice|>
-        <notice.Header>
-          <strong>Intention exists!</strong>
-        </notice.Header>
-        <notice.Body>
-          <p>
-            An intention already exists for this Source-Destination pair. Please enter a different combination of Services, or search the intentions to edit an existing intention.
-          </p>
-        </notice.Body>
-      </Notice>
+  <Hds::Toast
+    @color='critical'
+    {{notification
+      after=(action after)
+    }}
+    as |T|>
+    <T.Title>Intention exists!</T.Title>
+    <T.Description>
+      An intention already exists for this Source-Destination pair. Please enter a different combination of Services, or search the intentions to edit an existing intention.
+    </T.Description>
+  </Hds::Toast>
 {{else}}
-      <Notice
-        {{notification
-          after=(action after)
-        }}
-        class="notification-update"
-        @type="error"
-      as |notice|>
-        <notice.Header>
-          <strong>Error!</strong>
-        </notice.Header>
-        <notice.Body>
-          <p>
-            There was an error saving your intention.
-          {{#if (and api.error.status api.error.detail)}}
-            <br />{{api.error.status}}: {{api.error.detail}}
-          {{/if}}
-          </p>
-        </notice.Body>
-      </Notice>
+  <Hds::Toast
+    @color='critical'
+    {{notification
+      after=(action after)
+    }}
+    as |T|>
+    <T.Title>Error!</T.Title>
+    <T.Description>
+      There was an error saving your intention.
+      {{#if (and api.error.status api.error.detail)}}
+        <br />{{api.error.status}}: {{api.error.detail}}
+      {{/if}}
+    </T.Description>
+  </Hds::Toast>
   {{/if}}
     </BlockSlot>
 

diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
@@ -15,13 +15,4 @@
   td.intent- strong {
     @extend %pill-l7;
   }
-  .notice.allow {
-    @extend %notice-success;
-  }
-  .notice.deny {
-    @extend %notice-error;
-  }
-  .notice.permissions {
-    @extend %notice-info;
-  }
 }
diff --git a/ui/packages/consul-ui/app/components/data-loader/index.hbs b/ui/packages/consul-ui/app/components/data-loader/index.hbs
@@ -56,22 +56,13 @@
         {{#yield-slot name="disconnected" params=(block-params (action dispatch "RESET"))}}
             {{yield api}}
         {{else}}
-          <Notice
+          <Hds::Toast @color='warning'
             {{notification
               sticky=true
-            }}
-            class="notification-update"
-            @type="warning"
-          as |notice|>
-            <notice.Header>
-              <strong>Warning!</strong>
-            </notice.Header>
-            <notice.Body>
-              <p>
-                An error was returned whilst loading this data, refresh to try again.
-              </p>
-            </notice.Body>
-          </Notice>
+            }} as |T|>
+            <T.Title>Warning!</T.Title>
+            <T.Description>An error was returned whilst loading this data, refresh to try again.</T.Description>
+          </Hds::Toast>
         {{/yield-slot}}
       {{/if}}
     </State>

diff --git a/ui/packages/consul-ui/app/components/data-writer/index.hbs b/ui/packages/consul-ui/app/components/data-writer/index.hbs
@@ -39,22 +39,14 @@ as |after|}}
     {{#yield-slot name="removed" params=(block-params after)}}
       {{yield api}}
     {{else}}
-    <Notice
-      {{notification
-        after=(action after)
-      }}
-      class="notification-delete"
-      @type="success"
-    as |notice|>
-      <notice.Header>
-        <strong>Success!</strong>
-      </notice.Header>
-      <notice.Body>
-        <p>
-          Your {{or label type}} has been deleted.
-        </p>
-      </notice.Body>
-    </Notice>
+      <Hds::Toast
+        @color='success'
+        {{notification
+          after=(action after)
+        }} as |T|>
+        <T.Title>Success!</T.Title>
+        <T.Description>Your {{or label type}} has been deleted.</T.Description>
+      </Hds::Toast>
     {{/yield-slot}}
 {{/let}}
   </State>
@@ -66,22 +58,14 @@ as |after|}}
     {{#yield-slot name="persisted" params=(block-params after)}}
       {{yield api}}
     {{else}}
-      <Notice
+      <Hds::Toast
+        @color='success'
         {{notification
           after=(action after)
-        }}
-        class="notification-update"
-        @type="success"
-      as |notice|>
-        <notice.Header>
-          <strong>Success!</strong>
-        </notice.Header>
-        <notice.Body>
-          <p>
-            Your {{or label type}} has been saved.
-          </p>
-        </notice.Body>
-      </Notice>
+        }} as |T|>
+        <T.Title>Success!</T.Title>
+        <T.Description>Your {{or label type}} has been saved.</T.Description>
+      </Hds::Toast>
     {{/yield-slot}}
 {{/let}}
   </State>
@@ -93,27 +77,20 @@ as |after|}}
     {{#yield-slot name="error" params=(block-params after api.error)}}
       {{yield api}}
     {{else}}
-      <Notice
+      <Hds::Toast
+        @color='critical'
         {{notification
           after=(action after)
-        }}
-        class="notification-update"
-        @type="error"
-      as |notice|>
-        <notice.Header>
-          <strong>Error!</strong>
-        </notice.Header>
-        <notice.Body>
-          <p>
-            There was an error saving your {{or label type}}.
-        {{#if (and api.error.status api.error.detail)}}
+        }} as |T|>
+        <T.Title>Error!</T.Title>
+        <T.Description>There was an error saving your {{or label type}}.
+          {{#if (and api.error.status api.error.detail)}}
             <br />{{api.error.status}}: {{api.error.detail}}
-        {{else if api.error.message}}
+          {{else if api.error.message}}
             <br />{{api.error.message}}
-        {{/if}}
-          </p>
-        </notice.Body>
-      </Notice>
+          {{/if}}
+        </T.Description>
+      </Hds::Toast>
     {{/yield-slot}}
 {{/let}}
   </State>