From 8fc1801a19e1d97ded97d10e33e91ef80db9e7dc Mon Sep 17 00:00:00 2001 From: Aleksandar Djindjic Date: Tue, 6 Dec 2022 01:37:09 +0100 Subject: [PATCH] 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 * simplify if statement Signed-off-by: Aleksandar Djindjic * fix snapshot Signed-off-by: Aleksandar Djindjic * add close button to flyout header, remove footer Signed-off-by: Aleksandar Djindjic * simplify flex layout Signed-off-by: Aleksandar Djindjic * update snapshot Signed-off-by: Aleksandar Djindjic * add data-test-subject on flyout header title Signed-off-by: Aleksandar Djindjic * fix cypress tests, overflow on flyout title Signed-off-by: Aleksandar Djindjic * fix snapshot Signed-off-by: Aleksandar Djindjic * eui-textTruncate on flyout titles Signed-off-by: Aleksandar Djindjic Signed-off-by: Aleksandar Djindjic (cherry picked from commit bcfe1193f2689142cdf8c10bd64da04321fe146a) --- .../__snapshots__/flyouts.test.js.snap | 47 +++++++++++-------- .../Flyout/flyouts/alertsDashboard.js | 36 ++++++++------ .../AlertsDashboardFlyoutComponent.js | 2 +- .../containers/CreateMonitor/CreateMonitor.js | 1 + .../AcknowledgeAlertsModal.js | 1 - .../FindingsDashboard/FindingFlyout.js | 43 ++++++++++------- .../FindingsDashboard/findingsUtils.js | 2 - .../pages/Dashboard/containers/Dashboard.js | 1 - .../containers/MonitorDetails.js | 4 ++ 9 files changed, 79 insertions(+), 58 deletions(-) diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap index 03a9157ec..e48f56595 100644 --- 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": - Close - , "footerProps": Object { "style": Object { "backgroundColor": "#F5F7FA", }, }, - "header": -

- Alerts by undefined -

- , + + +

+ Alerts by undefined +

+ + + + + + , "headerProps": Object { "hasBorder": true, }, diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js index 18dc41a1f..db99eb150 100644 --- 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: ( - -

{`Alerts by ${trigger_name}`}

- + + + +

{`Alerts by ${trigger_name}`}

+ + + + + + ), footerProps: { style: { backgroundColor: '#F5F7FA' } }, - footer: ( - closeFlyout()} - style={{ paddingLeft: '0px', marginLeft: '0px' }} - data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`} - > - Close - - ), body: , }; }; diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js index b2c861527..759cd231a 100644 --- 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 index 36dbe7468..bee4ae8a2 100644 --- 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} /> diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js index 7bfd9e7e9..18324b7c8 100644 --- 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 index ef15234d0..b773523f7 100644 --- 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 = ( - -

Document finding

- + + + +

Document finding

+ + + + + + @@ -157,16 +174,6 @@ export default class FindingFlyout extends Component { {JSON.stringify(documentDisplay, null, 3)} - - - - Close - - ); this.setState({ flyout: flyout }); diff --git a/public/pages/Dashboard/components/FindingsDashboard/findingsUtils.js b/public/pages/Dashboard/components/FindingsDashboard/findingsUtils.js index 8237210d4..98fa5345f 100644 --- 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 ( ); }; @@ -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} /> );