Merge pull request #3 from ryankeairns/feature/removePanelsFromUrl

Design tweaks for Dashboard 'pending changes' callout
ThomThomson · Jan 19, 2021 · 976b40d · 976b40d
2 parents 9503272 + 809199a
commit 976b40d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/src/plugins/dashboard/public/application/_dashboard_app.scss b/src/plugins/dashboard/public/application/_dashboard_app.scss
@@ -34,10 +34,18 @@
   text-align: center;
 }
 
-.dshUnsavedListingItemTitle {
+.dshUnsavedListingItem {
+  margin-top: $euiSizeM;
+}
+
+.dshUnsavedListingItem__icon {
+  margin-right: $euiSizeM;
+}
+
+.dshUnsavedListingItem__title {
   margin-bottom: 0 !important;
 }
 
-.dshUnsavedListingButtons {
-  margin-left: 15px;
+.dshUnsavedListingItem__actions {
+  margin-left: $euiSizeL + $euiSizeXS;
 }
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx b/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx
@@ -46,17 +46,28 @@ const DashboardUnsavedItem = ({
 }) => {
   const title = dashboard?.title ?? getNewDashboardTitle();
   return (
-    <>
-      <EuiTitle size="xxs" className="dshUnsavedListingItemTitle">
-        <h3 className="dshUnsavedListingItemTitle">
-          <EuiIcon type="pencil" /> {dashboard?.title ?? getNewDashboardTitle()}
-        </h3>
-      </EuiTitle>
-      <EuiFlexGroup gutterSize="s" alignItems="flexStart" className="dshUnsavedListingButtons">
+    <div className="dshUnsavedListingItem">
+      <EuiFlexGroup alignItems="center" gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiIcon color="text" className="dshUnsavedListingItem__icon" type="dashboardApp" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xxs">
+            <h4 className="dshUnsavedListingItem__title">
+              {dashboard?.title ?? getNewDashboardTitle()}
+            </h4>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup
+        gutterSize="none"
+        alignItems="flexStart"
+        className="dshUnsavedListingItem__actions"
+      >
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
             flush="left"
-            size="xs"
+            size="s"
             color="primary"
             onClick={onOpenClick}
             data-test-subj={`edit-unsaved-${dashboard?.id ?? DASHBOARD_PANELS_UNSAVED_ID}`}
@@ -67,7 +78,7 @@ const DashboardUnsavedItem = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
-            size="xs"
+            size="s"
             color="danger"
             onClick={onDiscardClick}
             data-test-subj={`discard-unsaved-${dashboard?.id ?? DASHBOARD_PANELS_UNSAVED_ID}`}
@@ -77,7 +88,7 @@ const DashboardUnsavedItem = ({
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </>
+    </div>
   );
 };
 
@@ -149,7 +160,10 @@ export const DashboardUnsavedListing = ({ redirectTo }: { redirectTo: DashboardR
 
   return items.length === 0 ? null : (
     <>
-      <EuiCallOut title={dashboardUnsavedListingStrings.getUnsavedChangesTitle(items.length > 1)}>
+      <EuiCallOut
+        heading="h3"
+        title={dashboardUnsavedListingStrings.getUnsavedChangesTitle(items.length > 1)}
+      >
         {items}
       </EuiCallOut>
       <EuiSpacer size="m" />

diff --git a/src/plugins/dashboard/public/dashboard_strings.ts b/src/plugins/dashboard/public/dashboard_strings.ts
@@ -358,7 +358,7 @@ export const dashboardListingTable = {
 export const dashboardUnsavedListingStrings = {
   getUnsavedChangesTitle: (plural = false) =>
     i18n.translate('dashboard.listing.unsaved.unsavedChangesTitle', {
-      defaultMessage: 'You have unsaved changes in the following {dash}',
+      defaultMessage: 'You have unsaved changes in the following {dash}.',
       values: {
         dash: plural
           ? dashboardListingTable.getEntityNamePlural()