Align all flyout components to be overlay kind and add close button X…

… in header (#373) * align all flyout components to overlay Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * simplify if statement Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * fix snapshot Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * add close button to flyout header, remove footer Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * simplify flex layout Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * update snapshot Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * add data-test-subject on flyout header title Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * fix cypress tests, overflow on flyout title Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * fix snapshot Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> * eui-textTruncate on flyout titles Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com> Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com>
opensearch-project · Dec 6, 2022 · bcfe119 · bcfe119
1 parent c117f3f
commit bcfe119
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 58 deletions.
diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
@@ -8,33 +8,40 @@ Object {
     "data-test-subj": "alertsDashboardFlyout_undefined",
     "hideCloseButton": true,
     "size": "m",
-    "type": "push",
   },
-  "footer": <EuiButtonEmpty
-    data-test-subj="alertsDashboardFlyout_closeButton_undefined"
-    iconType="cross"
-    onClick={[Function]}
-    style={
-      Object {
-        "marginLeft": "0px",
-        "paddingLeft": "0px",
-      }
-    }
-  >
-    Close
-  </EuiButtonEmpty>,
   "footerProps": Object {
     "style": Object {
       "backgroundColor": "#F5F7FA",
     },
   },
-  "header": <EuiText
-    data-test-subj="alertsDashboardFlyout_header_undefined"
+  "header": <EuiFlexGroup
+    alignItems="center"
+    justifyContent="flexStart"
   >
-    <h2>
-      Alerts by undefined
-    </h2>
-  </EuiText>,
+    <EuiFlexItem
+      className="eui-textTruncate"
+    >
+      <EuiTitle
+        className="eui-textTruncate"
+        data-test-subj="alertsDashboardFlyout_header_undefined"
+        size="m"
+      >
+        <h3>
+          Alerts by undefined
+        </h3>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButtonIcon
+        data-test-subj="alertsDashboardFlyout_closeButton_undefined"
+        display="empty"
+        iconSize="m"
+        iconType="cross"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>,
   "headerProps": Object {
     "hasBorder": true,
   },

diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiButtonIcon, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import AlertsDashboardFlyoutComponent from './components/AlertsDashboardFlyoutComponent';
 
 const alertsDashboard = (payload) => {
@@ -15,25 +15,31 @@ const alertsDashboard = (payload) => {
       size: 'm',
       hideCloseButton: true,
       'data-test-subj': `alertsDashboardFlyout_${trigger_name}`,
-      type: 'push',
     },
     headerProps: { hasBorder: true },
     header: (
-      <EuiText data-test-subj={`alertsDashboardFlyout_header_${trigger_name}`}>
-        <h2>{`Alerts by ${trigger_name}`}</h2>
-      </EuiText>
+      <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+        <EuiFlexItem className="eui-textTruncate">
+          <EuiTitle
+            className="eui-textTruncate"
+            size={'m'}
+            data-test-subj={`alertsDashboardFlyout_header_${trigger_name}`}
+          >
+            <h3>{`Alerts by ${trigger_name}`}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
+            iconType="cross"
+            display="empty"
+            iconSize="m"
+            onClick={closeFlyout}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     ),
     footerProps: { style: { backgroundColor: '#F5F7FA' } },
-    footer: (
-      <EuiButtonEmpty
-        iconType={'cross'}
-        onClick={() => closeFlyout()}
-        style={{ paddingLeft: '0px', marginLeft: '0px' }}
-        data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
-      >
-        Close
-      </EuiButtonEmpty>
-    ),
     body: <AlertsDashboardFlyoutComponent {...payload} />,
   };
 };

diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -361,7 +361,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
           columns.splice(
             0,
             0,
-            getAlertsFindingColumn(httpClient, history, true, location, notifications)
+            getAlertsFindingColumn(httpClient, history, location, notifications)
           );
           break;
         default:

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -286,6 +286,7 @@ export default class CreateMonitor extends Component {
                 plugins={plugins}
                 isAd={values.searchType === SEARCH_TYPE.AD}
                 detectorId={this.props.detectorId}
+                setFlyout={this.props.setFlyout}
               />
               <EuiSpacer />
 

diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
@@ -352,7 +352,6 @@ export default class AcknowledgeAlertsModal extends Component {
             getAlertsFindingColumn(
               httpClient,
               history,
-              false,
               location,
               notifications,
               flyoutIsOpen,

diff --git a/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js b/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js
@@ -6,18 +6,18 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import {
-  EuiButtonEmpty,
   EuiCodeBlock,
   EuiFlexGrid,
   EuiFlexItem,
   EuiFlyout,
   EuiFlyoutBody,
-  EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiHorizontalRule,
   EuiLink,
   EuiText,
   EuiTitle,
+  EuiFlexGroup,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { getFindings } from './findingsUtils';
 import { DEFAULT_GET_FINDINGS_PARAMS } from '../../../../../server/services/FindingService';
@@ -70,10 +70,16 @@ export default class FindingFlyout extends Component {
 
   closeFlyout = () => {
     this.setState({ isFlyoutOpen: false });
+
+    const { dashboardFlyoutIsOpen = false, closeFlyout } = this.props;
+
+    if (typeof closeFlyout === 'function' && dashboardFlyoutIsOpen) {
+      closeFlyout();
+    }
   };
 
   async renderFlyout() {
-    const { alert, isAlertsFlyout = false } = this.props;
+    const { alert } = this.props;
     if (!_.isEmpty(alert)) await this.getFinding();
 
     const { docList, finding } = this.state;
@@ -93,17 +99,28 @@ export default class FindingFlyout extends Component {
 
     const flyout = (
       <EuiFlyout
-        type={isAlertsFlyout ? 'overlay' : 'push'}
         onClose={this.closeFlyout}
-        ownFocus={false}
+        ownFocus={true}
         hideCloseButton={true}
         side={'right'}
         size={'m'}
       >
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size={'m'}>
-            <h2 id={findingId || `temp_finding_${docId}`}>Document finding</h2>
-          </EuiTitle>
+          <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+            <EuiFlexItem className="eui-textTruncate">
+              <EuiTitle size={'m'} className="eui-textTruncate">
+                <h3 id={findingId || `temp_finding_${docId}`}>Document finding</h3>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                iconType="cross"
+                display="empty"
+                iconSize="m"
+                onClick={this.closeFlyout}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody>
@@ -157,16 +174,6 @@ export default class FindingFlyout extends Component {
             {JSON.stringify(documentDisplay, null, 3)}
           </EuiCodeBlock>
         </EuiFlyoutBody>
-
-        <EuiFlyoutFooter>
-          <EuiButtonEmpty
-            iconType={'cross'}
-            onClick={this.closeFlyout}
-            style={{ paddingLeft: '0px', marginLeft: '0px' }}
-          >
-            Close
-          </EuiButtonEmpty>
-        </EuiFlyoutFooter>
       </EuiFlyout>
     );
     this.setState({ flyout: flyout });

diff --git a/public/pages/Dashboard/components/FindingsDashboard/findingsUtils.js b/public/pages/Dashboard/components/FindingsDashboard/findingsUtils.js
@@ -41,7 +41,6 @@ export const ALERTS_FINDING_COLUMN = {
 export const getAlertsFindingColumn = (
   httpClient,
   history,
-  isAlertsFlyout = false,
   location,
   notifications,
   flyoutIsOpen,
@@ -58,7 +57,6 @@ export const getAlertsFindingColumn = (
         console.log('Alerts index contains an entry with 0 related document IDs:', alert);
       return (
         <FindingFlyout
-          isAlertsFlyout={isAlertsFlyout}
           alert={alert}
           httpClient={httpClient}
           history={history}

diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js
@@ -392,7 +392,6 @@ export default class Dashboard extends Component {
             getAlertsFindingColumn(
               httpClient,
               history,
-              false,
               location,
               notifications,
               flyoutIsOpen,

diff --git a/public/pages/MonitorDetails/containers/MonitorDetails.js b/public/pages/MonitorDetails/containers/MonitorDetails.js
@@ -262,6 +262,7 @@ export default class MonitorDetails extends Component {
       history,
       httpClient,
       notifications,
+      setFlyout,
     } = this.props;
     const detectorId = _.get(monitor, MONITOR_INPUT_DETECTOR_ID, undefined);
     const groupBy = _.get(monitor, MONITOR_GROUP_BY);
@@ -277,6 +278,7 @@ export default class MonitorDetails extends Component {
         monitorType={monitor.monitor_type}
         perAlertView={true}
         groupBy={groupBy}
+        setFlyout={setFlyout}
       />
     );
   };
@@ -344,6 +346,7 @@ export default class MonitorDetails extends Component {
       httpClient,
       notifications,
       isDarkMode,
+      setFlyout,
     } = this.props;
     const { action } = queryString.parse(location.search);
     const updatingMonitor = action === MONITOR_ACTIONS.UPDATE_MONITOR;
@@ -365,6 +368,7 @@ export default class MonitorDetails extends Component {
           monitorToEdit={monitor}
           detectorId={detectorId}
           notifications={notifications}
+          setFlyout={setFlyout}
           {...this.props}
         />
       );