Fit and Finish UX Fixes (#1092) (#1093)

* remove horizontal line below search bar



* space between header and panel 16px and space around table 16px



* fix 16px around table and search bar



* remove pagination from top of table



* add button to create monitor



* add tooltip to delete



* remove space on trash icon



* fix gutter size



* move edit under actions



* fix notifications breadcrumb redirect



* spacing from title to panel 16 for view monitor



* fix some padding and remove horiz rule for findings section



* change update monitor to edit monitor



* change update to save and fix padding for create monitor



* change monitor details padding and fix link to new page in alerts card



* remove boarder when empty state



* fix search bar spacing above



* make create and edit monitor panels 16px padding



* rename



* fix original tabs



* fix spacing on original monitor page



* add pagination back to the alerts page



* fix spacing for alerts dashboard flyout



* cleanup



* fix unit tests and run yarn test:jest -u



* fix cypress tests



---------


(cherry picked from commit 4a2b603)

Signed-off-by: Joanne Wang <jowg@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: opensearch-trigger-bot[bot]

cypress/integration/bucket_level_monitor_spec.js

@@ -338,8 +338,8 @@ describe('Bucket-Level Monitors', () => {
         // Add a trigger
         addTriggerToVisualEditorMonitor(SAMPLE_TRIGGER, 0, SAMPLE_ACTION, true);
 
-        // Click update button to save monitor changes
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click save to save monitor changes
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we can see only one row in the trigger list by checking <caption> element
         cy.contains('This table contains 1 row');
@@ -375,8 +375,8 @@ describe('Bucket-Level Monitors', () => {
           timeout: 25000,
         });
 
-        // Click the update button
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click the save button
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we're on the Monitor Details page by searching for the History element
         cy.contains('History', { timeout: 20000 });

cypress/integration/cluster_metrics_monitor_spec.js

@@ -369,8 +369,8 @@ describe('ClusterMetricsMonitor', () => {
           'ctx.results[0].number_of_pending_tasks >= 0'
         );
 
-        // Click update button to save monitor changes
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click save button to save monitor changes
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we can see only one row in the trigger list by checking <caption> element
         cy.contains('This table contains 1 row');

cypress/integration/composite_level_monitor_spec.js

@@ -130,6 +130,7 @@ describe('CompositeLevelMonitor', () => {
 
     it('by visual editor', () => {
       // Verify edit page
+      cy.contains('Edit').click({ force: true });
       cy.contains('Edit monitor', { timeout: 20000 });
       cy.get('input[name="name"]').type('_edited');
 
@@ -150,7 +151,7 @@ describe('CompositeLevelMonitor', () => {
         .type('{enter}');
 
       cy.intercept('api/alerting/workflows/*').as('updateMonitorRequest');
-      cy.get('button').contains('Update').click({ force: true });
+      cy.get('button').contains('Save').click({ force: true });
 
       // Wait for monitor to be created
       cy.wait('@updateMonitorRequest').then(() => {

cypress/integration/document_level_monitor_spec.js

@@ -380,8 +380,8 @@ describe('DocumentLevelMonitor', () => {
 
         // TODO: Test with Notifications plugin
 
-        // Click the update button
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click the save button
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we can see only one row in the trigger list by checking <caption> element
         cy.contains('This table contains 2 rows');
@@ -446,8 +446,8 @@ describe('DocumentLevelMonitor', () => {
 
         // TODO: Test with Notifications plugin
 
-        // Click the create button
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click the save button
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we can see only one row in the trigger list by checking <caption> element
         cy.contains('This table contains 1 row');
@@ -489,8 +489,8 @@ describe('DocumentLevelMonitor', () => {
         cy.get('[data-test-subj="indicesComboBox"]').should('not.have.text', TESTING_INDEX_A);
         cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_B, { timeout: 20000 });
 
-        // Click the update button
-        cy.get('button').contains('Update').last().click({ force: true });
+        // Click the save button
+        cy.get('button').contains('Save').last().click({ force: true });
 
         // Confirm we're on the Monitor Details page by searching for the History element
         cy.contains('History', { timeout: 20000 });

cypress/integration/query_level_monitor_spec.js

@@ -178,8 +178,8 @@ describe('Query-Level Monitors', () => {
         .clear()
         .type(UPDATED_MONITOR, { force: true });
 
-      // Click Update button
-      cy.get('button').contains('Update').last().click({ force: true });
+      // Click save button
+      cy.get('button').contains('Save').last().click({ force: true });
 
       // Confirm the update process is done and the page loaded
       cy.contains('Edit monitor');
@@ -222,8 +222,8 @@ describe('Query-Level Monitors', () => {
         timeout: 25000,
       });
 
-      // Click the update button
-      cy.get('button').contains('Update').last().click();
+      // Click the save button
+      cy.get('button').contains('Save').last().click();
 
       // Confirm we're on the Monitor Details page by searching for the History element
       cy.contains('History', { timeout: 25000 });
@@ -339,8 +339,8 @@ describe('Query-Level Monitors', () => {
         addVisualQueryLevelTrigger(trigger.name, i, true, `IS ${trigger.enum}`, `${i}`);
       }
 
-      // Click Update button
-      cy.get('button').contains('Update').last().click({ force: true });
+      // Click save button
+      cy.get('button').contains('Save').last().click({ force: true });
 
       // Confirm we can see the correct number of rows in the trigger list by checking <caption> element
       cy.contains(`This table contains ${triggers.length} rows`, { timeout: 25000 });

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"