Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Align all flyout components to be overlay kind and add close button X in header #373

Merged
merged 10 commits into from
Dec 6, 2022
Merged

Align all flyout components to be overlay kind and add close button X in header #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5b25146
align all flyout components to overlay
djindjic Nov 30, 2022
fc6b881
simplify if statement
djindjic Nov 30, 2022
ad532bc
fix snapshot
djindjic Dec 1, 2022
0feaf38
add close button to flyout header, remove footer
djindjic Dec 1, 2022
e4c7dc2
simplify flex layout
djindjic Dec 2, 2022
f513a59
update snapshot
djindjic Dec 2, 2022
b87a874
add data-test-subject on flyout header title
djindjic Dec 2, 2022
de66fc4
fix cypress tests, overflow on flyout title
djindjic Dec 2, 2022
c913383
fix snapshot
djindjic Dec 2, 2022
983f7d2
eui-textTruncate on flyout titles
djindjic Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
36 changes: 21 additions & 15 deletions public/components/Flyout/flyouts/alertsDashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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} />,
};
};
Expand Down
2 changes: 1 addition & 1 deletion public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

Expand Down
1 change: 0 additions & 1 deletion public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,6 @@ export default class AcknowledgeAlertsModal extends Component {
getAlertsFindingColumn(
httpClient,
history,
false,
location,
notifications,
flyoutIsOpen,
Expand Down
43 changes: 25 additions & 18 deletions public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -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 });
Expand Down
2 changes: 0 additions & 2 deletions public/pages/Dashboard/components/FindingsDashboard/findingsUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export const ALERTS_FINDING_COLUMN = {
export const getAlertsFindingColumn = (
httpClient,
history,
isAlertsFlyout = false,
location,
notifications,
flyoutIsOpen,
Expand All @@ -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}
Expand Down
1 change: 0 additions & 1 deletion public/pages/Dashboard/containers/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,6 @@ export default class Dashboard extends Component {
getAlertsFindingColumn(
httpClient,
history,
false,
location,
notifications,
flyoutIsOpen,
Expand Down
4 changes: 4 additions & 0 deletions public/pages/MonitorDetails/containers/MonitorDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -277,6 +278,7 @@ export default class MonitorDetails extends Component {
monitorType={monitor.monitor_type}
perAlertView={true}
groupBy={groupBy}
setFlyout={setFlyout}
/>
);
};
Expand Down Expand Up @@ -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;
Expand All @@ -365,6 +368,7 @@ export default class MonitorDetails extends Component {
monitorToEdit={monitor}
detectorId={detectorId}
notifications={notifications}
setFlyout={setFlyout}
{...this.props}
/>
);
Expand Down