Fit and Finish UX Fixes

public/components/Breadcrumbs/Breadcrumbs.js

@@ -82,8 +82,8 @@ export async function getBreadcrumb(route, routeState, httpClient) {
           console.error(err);
         }
         const breadcrumbs = [{ text: monitorName, href: `/monitors/${base}` }];
-        if (action === MONITOR_ACTIONS.UPDATE_MONITOR)
-          breadcrumbs.push({ text: 'Update monitor', href: '/' });
+        if (action === MONITOR_ACTIONS.EDIT_MONITOR)
+          breadcrumbs.push({ text: 'Edit monitor', href: '/' });
         if (action === TRIGGER_ACTIONS.CREATE_TRIGGER)
           breadcrumbs.push({ text: 'Create trigger', href: '/' });
         if (action === TRIGGER_ACTIONS.UPDATE_TRIGGER)

public/components/Breadcrumbs/Breadcrumbs.test.js

@@ -102,7 +102,7 @@ describe('getBreadcrumb', () => {
       httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } });
       expect(
         await getBreadcrumb(
-          `${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`,
+          `${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`,
           {},
           httpClientMock
         )

public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap

@@ -70,7 +70,7 @@ Array [
   },
   Object {
     "href": "/",
-    "text": "Update monitor",
+    "text": "Edit monitor",
   },
 ]
 `;

public/components/ContentPanel/ContentPanel.js

@@ -19,7 +19,7 @@ const ContentPanel = ({
   children,
   panelOptions = {},
 }) => (
-  <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
+  <EuiPanel style={{ padding: '16px', ...panelStyles }}>
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem>
         <EuiText size={titleSize}>

public/components/ContentPanel/__snapshots__/ContentPanel.test.js.snap

@@ -3,7 +3,7 @@
 exports[`ContentPanel renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:0px;padding-right:0px"
+  style="padding:16px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx

@@ -27,13 +27,13 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
 
   useEffect(() => {
     setLoading(true);
-    getClient().get('../api/alerting/alerts', { 
+    getClient().get('../api/alerting/alerts', {
       query: {
         size: 25,
         sortField: 'start_time',
         dataSourceId: dataSource?.id || '',
         sortDirection: 'desc'
-      } 
+      }
     }).then(res => {
       if (res.ok) {
         setAlerts(res.alerts);
@@ -53,7 +53,7 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
   const createAlertDetailsHeader = useCallback((alert) => {
     const severityColor = getSeverityColor(alert.severity);
     const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA;
-    
+
     return (
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
@@ -147,9 +147,9 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })} target="_blank"><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
+          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })}><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
   )
-};
+};

public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js

@@ -455,8 +455,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
           onPageChange={this.onPageClick}
           isAlertsFlyout={true}
           monitorType={monitorType}
+          panelStyles={{ padding: '8px 0px 16px' }}
         />
-        <EuiHorizontalRule margin="xs" />
         <EuiBasicTable
           items={loading ? [] : trimmedAlerts}
           /*

public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap

@@ -202,13 +202,15 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
       onSearchChange={[Function]}
       onStateChange={[Function]}
       pageCount={1}
+      panelStyles={
+        Object {
+          "padding": "8px 0px 16px",
+        }
+      }
       search=""
       severity="ALL"
       state="ALL"
     />
-    <EuiHorizontalRule
-      margin="xs"
-    />
     <EuiBasicTable
       columns={
         Array [

public/pages/CreateMonitor/components/QueryPerformance/__snapshots__/QueryPerformance.test.js.snap

@@ -3,7 +3,7 @@
 exports[`QueryPerformance renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:10px"
+  style="padding:16px;padding-left:10px;padding-right:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

public/pages/CreateMonitor/components/VisualGraph/__snapshots__/VisualGraph.test.js.snap

@@ -3,7 +3,7 @@
 exports[`VisualGraph renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:0px"
+  style="padding:16px;padding-left:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -544,7 +544,7 @@ exports[`VisualGraph renders 1`] = `
 exports[`VisualGraph renders with bucket level monitor 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:0px"
+  style="padding:16px;padding-left:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js

@@ -177,7 +177,7 @@ export default class CreateMonitor extends Component {
     } = this.props;
     const { createModalOpen, initialValues, plugins } = this.state;
     return (
-      <div style={{ padding: '25px 50px' }}>
+      <div style={{ padding: '16px' }}>
         <Formik
           initialValues={initialValues}
           onSubmit={this.evaluateSubmission}
@@ -268,7 +268,7 @@ export default class CreateMonitor extends Component {
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
                         <EuiSmallButton fill onClick={handleSubmit} isLoading={isSubmitting}>
-                          {edit ? 'Update' : 'Create'}
+                          {edit ? 'Save' : 'Create'}
                         </EuiSmallButton>
                       </EuiFlexItem>
                     </EuiFlexGroup>

public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap

@@ -4,7 +4,7 @@ exports[`CreateMonitor renders 1`] = `
 <div
   style={
     Object {
-      "padding": "25px 50px",
+      "padding": "16px",
     }
   }
 >

public/pages/CreateMonitor/containers/DataSource/DataSource.js

@@ -65,7 +65,6 @@ class DataSource extends Component {
       <ContentPanel
         title="Select data"
         titleSize="s"
-        panelStyles={{ paddingLeft: '10px', paddingRight: '10px' }}
         bodyStyles={{ padding: 'initial' }}
       >
         {monitorIndexDisplay}

public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap

@@ -7,12 +7,6 @@ exports[`DataSource renders 1`] = `
       "padding": "initial",
     }
   }
-  panelStyles={
-    Object {
-      "paddingLeft": "10px",
-      "paddingRight": "10px",
-    }
-  }
   title="Select data"
   titleSize="s"
 >

public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js

@@ -702,10 +702,6 @@ class DefineMonitor extends Component {
         <PanelComponent
           title="Query"
           titleSize="s"
-          panelStyles={{
-            paddingLeft: '10px',
-            paddingRight: '10px',
-          }}
           bodyStyles={{ padding: 'initial' }}
           actions={monitorContent.actions}
         >

public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap

@@ -91,12 +91,6 @@ exports[`DefineMonitor renders 1`] = `
         "padding": "initial",
       }
     }
-    panelStyles={
-      Object {
-        "paddingLeft": "10px",
-        "paddingRight": "10px",
-      }
-    }
     title="Query"
     titleSize="s"
   >
@@ -144,12 +138,6 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n
         "padding": "initial",
       }
     }
-    panelStyles={
-      Object {
-        "paddingLeft": "10px",
-        "paddingRight": "10px",
-      }
-    }
     title="Query"
     titleSize="s"
   >

public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js

@@ -63,12 +63,7 @@ const MonitorDetails = ({
     <Container
       title="Monitor details"
       titleSize="s"
-      panelStyles={{
-        paddingBottom: '20px',
-        paddingLeft: '10px',
-        paddingRight: '10px',
-        paddingTop: '20px',
-      }}
+      panelStyles={{ padding: '16px' }}
       actions={anomalyDetectorContent.actions}
     >
       {!flyoutMode && <EuiSpacer size="s" />}

public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap

@@ -3,7 +3,7 @@
 exports[`WorkflowDetails renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:10px;padding-bottom:20px;padding-top:20px"
+  style="padding:16px;padding-bottom:20px;padding-left:10px;padding-right:10px;padding-top:20px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js

@@ -453,7 +453,7 @@ class ConfigureTriggers extends React.Component {
             ? 'Triggers define the conditions that determine when a composite monitor should generate its own alert.'
             : undefined
         }
-        panelStyles={{ paddingBottom: '0px', paddingLeft: '20px', paddingRight: '20px' }}
+        panelStyles={{ padding: '16px' }}
         bodyStyles={{ paddingLeft: '0px', padding: '10px' }}
         horizontalRuleClassName={'accordion-horizontal-rule'}
       >

public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js

@@ -227,7 +227,7 @@ export default class AcknowledgeAlertsModal extends Component {
   onCreateTrigger = () => {
     const { history, monitorId, onClose } = this.props;
     onClose();
-    history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`);
+    history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`);
   };
 
   render() {

public/pages/Dashboard/components/DashboardControls/DashboardControls.js

@@ -45,6 +45,7 @@ const DashboardControls = ({
   isAlertsFlyout = false,
   monitorType,
   alertActions = [],
+  panelStyles = {},
 }) => {
   let supportedStateOptions = stateOptions;
   switch (monitorType) {
@@ -56,7 +57,7 @@ const DashboardControls = ({
       break;
   }
   return (
-    <EuiFlexGroup style={{ padding: '0px 5px' }} gutterSize="s">
+    <EuiFlexGroup style={{ padding: '0px 0px 16px', ...panelStyles }} gutterSize="s">
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           fullWidth={true}
@@ -87,9 +88,6 @@ const DashboardControls = ({
       {alertActions.map((action, idx) => (
         <EuiFlexItem grow={false}>{action}</EuiFlexItem>
       ))}
-      <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
-        <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageChange} />
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap

@@ -3,7 +3,7 @@
 exports[`DashboardControls renders 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="padding:0px 5px"
+  style="padding:0px 0px 16px"
 >
   <div
     class="euiFlexItem"
@@ -151,81 +151,5 @@ exports[`DashboardControls renders 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-    style="justify-content:center"
-  >
-    <nav
-      class="euiPagination"
-    >
-      <button
-        aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-        data-test-subj="pagination-button-previous"
-        type="button"
-      >
-        <div>
-          EuiIconMock
-        </div>
-      </button>
-      <ul
-        class="euiPagination__list"
-      >
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-label="Page 1 of 2"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
-            data-test-subj="pagination-button-0"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                1
-              </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="euiPagination__item"
-        >
-          <button
-            aria-current="true"
-            aria-label="Page 2 of 2"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-            data-test-subj="pagination-button-1"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                2
-              </span>
-            </span>
-          </button>
-        </li>
-      </ul>
-      <button
-        aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-        data-test-subj="pagination-button-next"
-        disabled=""
-        type="button"
-      >
-        <div>
-          EuiIconMock
-        </div>
-      </button>
-    </nav>
-  </div>
 </div>
 `;