[RAC] [Cases] Fix responsiveness in Cases UI (#103766)
This commit is contained in:
parent
9414262558
commit
305df3ab37
|
@ -28,7 +28,7 @@ export const Count: FunctionComponent<CountProps> = ({ refresh }) => {
|
|||
}
|
||||
}, [fetchCasesStatus, refresh]);
|
||||
return (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Stats
|
||||
dataTestSubj="openStatsHeader"
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
import React, { FunctionComponent } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { CaseHeaderPage } from '../case_header_page';
|
||||
import { HeaderPage } from '../header_page';
|
||||
import * as i18n from './translations';
|
||||
import { Count } from './count';
|
||||
import { CasesNavigation } from '../links';
|
||||
|
@ -32,6 +32,11 @@ const FlexItemDivider = styled(EuiFlexItem)`
|
|||
border-right: ${theme.eui.euiBorderThin};
|
||||
padding-right: ${theme.eui.euiSize};
|
||||
margin-right: ${theme.eui.euiSize};
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.l}) {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
@ -44,21 +49,15 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
|
|||
showTitle = true,
|
||||
userCanCrud,
|
||||
}) => (
|
||||
<CaseHeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="m"
|
||||
responsive={false}
|
||||
wrap={true}
|
||||
data-test-subj="all-cases-header"
|
||||
>
|
||||
<HeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="m" wrap={true} data-test-subj="all-cases-header">
|
||||
{userCanCrud ? (
|
||||
<>
|
||||
<FlexItemDivider grow={false}>
|
||||
<FlexItemDivider>
|
||||
<Count refresh={refresh} />
|
||||
</FlexItemDivider>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexItem>
|
||||
<NavButtons
|
||||
actionsErrors={actionsErrors}
|
||||
configureCasesNavigation={configureCasesNavigation}
|
||||
|
@ -74,5 +73,5 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
|
|||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</CaseHeaderPage>
|
||||
</HeaderPage>
|
||||
);
|
||||
|
|
|
@ -8,11 +8,22 @@
|
|||
import React, { FunctionComponent } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { isEmpty } from 'lodash/fp';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { ConfigureCaseButton } from '../configure_cases/button';
|
||||
import * as i18n from './translations';
|
||||
import { CasesNavigation, LinkButton } from '../links';
|
||||
import { ErrorMessage } from '../use_push_to_service/callout/types';
|
||||
|
||||
const ButtonFlexGroup = styled(EuiFlexGroup)`
|
||||
${({ theme }) => css`
|
||||
& {
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
interface OwnProps {
|
||||
actionsErrors: ErrorMessage[];
|
||||
configureCasesNavigation: CasesNavigation;
|
||||
|
@ -26,7 +37,7 @@ export const NavButtons: FunctionComponent<Props> = ({
|
|||
configureCasesNavigation,
|
||||
createCaseNavigation,
|
||||
}) => (
|
||||
<EuiFlexGroup>
|
||||
<ButtonFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ConfigureCaseButton
|
||||
configureCasesNavigation={configureCasesNavigation}
|
||||
|
@ -37,7 +48,7 @@ export const NavButtons: FunctionComponent<Props> = ({
|
|||
titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexItem>
|
||||
<LinkButton
|
||||
fill
|
||||
onClick={createCaseNavigation.onClick}
|
||||
|
@ -48,5 +59,5 @@ export const NavButtons: FunctionComponent<Props> = ({
|
|||
{i18n.CREATE_TITLE}
|
||||
</LinkButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</ButtonFlexGroup>
|
||||
);
|
||||
|
|
|
@ -29,9 +29,11 @@ const StatusFilterComponent: React.FC<Props> = ({
|
|||
.map((status) => ({
|
||||
value: status,
|
||||
inputDisplay: (
|
||||
<EuiFlexGroup gutterSize="xs" alignItems={'center'}>
|
||||
<EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Status type={status} />
|
||||
<span>
|
||||
<Status type={status} />
|
||||
</span>
|
||||
</EuiFlexItem>
|
||||
{status !== StatusAll && <EuiFlexItem grow={false}>{` (${stats[status]})`}</EuiFlexItem>}
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -32,6 +32,10 @@ const MyDescriptionList = styled(EuiDescriptionList)`
|
|||
& {
|
||||
padding-right: ${theme.eui.euiSizeL};
|
||||
border-right: ${theme.eui.euiBorderThin};
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
@ -80,9 +84,9 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
|
|||
<EuiFlexGroup gutterSize="l" justifyContent="flexEnd" data-test-subj="case-action-bar-wrapper">
|
||||
<EuiFlexItem grow={false}>
|
||||
<MyDescriptionList compressed>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexGroup responsive={false} justifyContent="spaceBetween">
|
||||
{caseData.type !== CaseType.collection && (
|
||||
<EuiFlexItem grow={false} data-test-subj="case-view-status">
|
||||
<EuiFlexItem data-test-subj="case-view-status">
|
||||
<EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>
|
||||
<StatusContextMenu
|
||||
|
@ -107,11 +111,21 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiDescriptionList compressed>
|
||||
<EuiFlexGroup gutterSize="l" alignItems="center">
|
||||
<EuiFlexGroup
|
||||
gutterSize="l"
|
||||
alignItems="center"
|
||||
responsive={false}
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
{userCanCrud && !disableAlerting && (
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiDescriptionListTitle>
|
||||
<EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
|
||||
<EuiFlexGroup
|
||||
component="span"
|
||||
alignItems="center"
|
||||
gutterSize="xs"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<span>{i18n.SYNC_ALERTS}</span>
|
||||
</EuiFlexItem>
|
||||
|
@ -129,10 +143,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
|
|||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
<EuiFlexItem>
|
||||
<EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
|
||||
{i18n.CASE_REFRESH}
|
||||
</EuiButtonEmpty>
|
||||
<EuiFlexItem grow={false}>
|
||||
<span>
|
||||
<EuiButtonEmpty
|
||||
data-test-subj="case-refresh"
|
||||
flush="left"
|
||||
iconType="refresh"
|
||||
onClick={onRefresh}
|
||||
>
|
||||
{i18n.CASE_REFRESH}
|
||||
</EuiButtonEmpty>
|
||||
</span>
|
||||
</EuiFlexItem>
|
||||
{userCanCrud && (
|
||||
<EuiFlexItem grow={false} data-test-subj="case-view-actions">
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { HeaderPage, HeaderPageProps } from '../header_page';
|
||||
|
||||
const CaseHeaderPageComponent: React.FC<HeaderPageProps> = (props) => <HeaderPage {...props} />;
|
||||
|
||||
export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);
|
|
@ -26,7 +26,7 @@ import { UserActionTree } from '../user_action_tree';
|
|||
import { UserList } from '../user_list';
|
||||
import { useUpdateCase } from '../../containers/use_update_case';
|
||||
import { getTypedPayload } from '../../containers/utils';
|
||||
import { WhitePageWrapper, HeaderWrapper } from '../wrappers';
|
||||
import { ContentWrapper, WhitePageWrapper, HeaderWrapper } from '../wrappers';
|
||||
import { CaseActionBar } from '../case_action_bar';
|
||||
import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
|
||||
import { EditConnector } from '../edit_connector';
|
||||
|
@ -41,8 +41,6 @@ import { OwnerProvider } from '../owner_context';
|
|||
import { getConnectorById } from '../utils';
|
||||
import { DoesNotExist } from './does_not_exist';
|
||||
|
||||
const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
|
||||
|
||||
export interface CaseViewComponentProps {
|
||||
allCasesNavigation: CasesNavigation;
|
||||
caseDetailsNavigation: CasesNavigation;
|
||||
|
@ -75,11 +73,6 @@ export interface OnUpdateFields {
|
|||
onError?: () => void;
|
||||
}
|
||||
|
||||
const MyWrapper = styled.div`
|
||||
padding: ${({ theme }) =>
|
||||
`${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l}`};
|
||||
`;
|
||||
|
||||
const MyEuiFlexGroup = styled(EuiFlexGroup)`
|
||||
height: 100%;
|
||||
`;
|
||||
|
@ -404,7 +397,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
|
|||
</HeaderPage>
|
||||
</HeaderWrapper>
|
||||
<WhitePageWrapper>
|
||||
<MyWrapper>
|
||||
<ContentWrapper>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={6}>
|
||||
{initLoadingData && (
|
||||
|
@ -491,7 +484,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</MyWrapper>
|
||||
</ContentWrapper>
|
||||
</WhitePageWrapper>
|
||||
{timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null}
|
||||
</>
|
||||
|
|
|
@ -68,6 +68,9 @@ const DisappearingFlexItem = styled(EuiFlexItem)`
|
|||
$isHidden &&
|
||||
`
|
||||
margin: 0 !important;
|
||||
& .euiFlexItem {
|
||||
margin: 0 !important;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -244,7 +247,12 @@ export const EditConnector = React.memo(
|
|||
|
||||
return (
|
||||
<EuiText>
|
||||
<MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
|
||||
<MyFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="xs"
|
||||
justifyContent="spaceBetween"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<h4>{i18n.CONNECTORS}</h4>
|
||||
</EuiFlexItem>
|
||||
|
@ -304,7 +312,7 @@ export const EditConnector = React.memo(
|
|||
</EuiFlexItem>
|
||||
{editConnector && (
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
color="secondary"
|
||||
|
|
|
@ -4,6 +4,7 @@ exports[`EditableTitle it renders 1`] = `
|
|||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="none"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
|
|
|
@ -100,7 +100,7 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({
|
|||
<EuiFlexItem />
|
||||
</EuiFlexGroup>
|
||||
) : (
|
||||
<EuiFlexGroup alignItems="center" gutterSize="none">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Title title={title} />
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -22,9 +22,9 @@ const ComponentId = 'property-actions';
|
|||
const PropertyActionButton = React.memo<PropertyActionButtonProps>(
|
||||
({ disabled = false, onClick, iconType, label }) => (
|
||||
<EuiButtonEmpty
|
||||
data-test-subj={`${ComponentId}-${iconType}`}
|
||||
aria-label={label}
|
||||
color="text"
|
||||
data-test-subj={`${ComponentId}-${iconType}`}
|
||||
iconSide="left"
|
||||
iconType={iconType}
|
||||
isDisabled={disabled}
|
||||
|
@ -56,44 +56,43 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="flexStart" data-test-subj={ComponentId} gutterSize="none">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiPopover
|
||||
anchorPosition="downRight"
|
||||
ownFocus
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
data-test-subj={`${ComponentId}-ellipses`}
|
||||
aria-label={i18n.ACTIONS_ARIA}
|
||||
iconType="boxesHorizontal"
|
||||
onClick={onButtonClick}
|
||||
/>
|
||||
}
|
||||
id="settingsPopover"
|
||||
isOpen={showActions}
|
||||
closePopover={onClosePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexStart"
|
||||
data-test-subj={`${ComponentId}-group`}
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
{propertyActions.map((action, key) => (
|
||||
<EuiFlexItem grow={false} key={`${action.label}${key}`}>
|
||||
<PropertyActionButton
|
||||
disabled={action.disabled}
|
||||
iconType={action.iconType}
|
||||
label={action.label}
|
||||
onClick={() => onClosePopover(action.onClick)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiPopover>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiPopover
|
||||
anchorPosition="downRight"
|
||||
data-test-subj={ComponentId}
|
||||
ownFocus
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
data-test-subj={`${ComponentId}-ellipses`}
|
||||
aria-label={i18n.ACTIONS_ARIA}
|
||||
iconType="boxesHorizontal"
|
||||
onClick={onButtonClick}
|
||||
/>
|
||||
}
|
||||
id="settingsPopover"
|
||||
isOpen={showActions}
|
||||
closePopover={onClosePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexStart"
|
||||
data-test-subj={`${ComponentId}-group`}
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
{propertyActions.map((action, key) => (
|
||||
<EuiFlexItem grow={false} key={`${action.label}${key}`}>
|
||||
<span>
|
||||
<PropertyActionButton
|
||||
disabled={action.disabled}
|
||||
iconType={action.iconType}
|
||||
label={action.label}
|
||||
onClick={() => onClosePopover(action.onClick)}
|
||||
/>
|
||||
</span>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiPopover>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@ export interface TagListProps {
|
|||
|
||||
const MyFlexGroup = styled(EuiFlexGroup)`
|
||||
${({ theme }) => css`
|
||||
width: 100%;
|
||||
margin-top: ${theme.eui.euiSizeM};
|
||||
p {
|
||||
font-size: ${theme.eui.euiSizeM};
|
||||
|
@ -43,6 +44,17 @@ const MyFlexGroup = styled(EuiFlexGroup)`
|
|||
`}
|
||||
`;
|
||||
|
||||
const ColumnFlexGroup = styled(EuiFlexGroup)`
|
||||
${({ theme }) => css`
|
||||
& {
|
||||
max-width: 100%;
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const TagList = React.memo(
|
||||
({ userCanCrud = true, isLoading, onSubmit, tags }: TagListProps) => {
|
||||
const initialState = { tags };
|
||||
|
@ -80,7 +92,12 @@ export const TagList = React.memo(
|
|||
);
|
||||
return (
|
||||
<EuiText>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="xs"
|
||||
justifyContent="spaceBetween"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<h4>{i18n.TAGS}</h4>
|
||||
</EuiFlexItem>
|
||||
|
@ -99,9 +116,13 @@ export const TagList = React.memo(
|
|||
<EuiHorizontalRule margin="xs" />
|
||||
<MyFlexGroup gutterSize="none" data-test-subj="case-tags">
|
||||
{tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
|
||||
{!isEditTags && <Tags tags={tags} color="hollow" />}
|
||||
{!isEditTags && (
|
||||
<EuiFlexItem>
|
||||
<Tags tags={tags} color="hollow" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{isEditTags && (
|
||||
<EuiFlexGroup data-test-subj="edit-tags" direction="column">
|
||||
<ColumnFlexGroup data-test-subj="edit-tags" direction="column">
|
||||
<EuiFlexItem>
|
||||
<Form form={form}>
|
||||
<CommonUseField
|
||||
|
@ -139,7 +160,7 @@ export const TagList = React.memo(
|
|||
</Form>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
color="secondary"
|
||||
|
@ -164,7 +185,7 @@ export const TagList = React.memo(
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</ColumnFlexGroup>
|
||||
)}
|
||||
</MyFlexGroup>
|
||||
</EuiText>
|
||||
|
|
|
@ -7,21 +7,24 @@
|
|||
|
||||
import React, { memo } from 'react';
|
||||
import { EuiBadgeGroup, EuiBadge, EuiBadgeGroupProps } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface TagsProps {
|
||||
tags: string[];
|
||||
color?: string;
|
||||
gutterSize?: EuiBadgeGroupProps['gutterSize'];
|
||||
}
|
||||
|
||||
const MyEuiBadge = styled(EuiBadge)`
|
||||
max-width: 200px;
|
||||
`;
|
||||
const TagsComponent: React.FC<TagsProps> = ({ tags, color = 'default', gutterSize }) => (
|
||||
<>
|
||||
{tags.length > 0 && (
|
||||
<EuiBadgeGroup gutterSize={gutterSize}>
|
||||
{tags.map((tag) => (
|
||||
<EuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}>
|
||||
<MyEuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}>
|
||||
{tag}
|
||||
</EuiBadge>
|
||||
</MyEuiBadge>
|
||||
))}
|
||||
</EuiBadgeGroup>
|
||||
)}
|
||||
|
|
|
@ -44,8 +44,9 @@ export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
|
|||
const getStatusTitle = (id: string, status: CaseStatuses) => (
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
alignItems={'center'}
|
||||
alignItems="center"
|
||||
data-test-subj={`${id}-user-action-status-title`}
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>{i18n.MARKED_CASE_AS}</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
|
@ -110,7 +111,7 @@ const getTagsLabelTitle = (action: CaseUserActions) => {
|
|||
const tags = action.newValue != null ? action.newValue.split(',') : [];
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span" responsive={false}>
|
||||
<EuiFlexItem data-test-subj="ua-tags-label" grow={false}>
|
||||
{action.action === 'add' && i18n.ADDED_FIELD}
|
||||
{action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()}
|
||||
|
@ -125,7 +126,12 @@ const getTagsLabelTitle = (action: CaseUserActions) => {
|
|||
export const getPushedServiceLabelTitle = (action: CaseUserActions, firstPush: boolean) => {
|
||||
const pushedVal = JSON.parse(action.newValue ?? '') as CaseFullExternalService;
|
||||
return (
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="xs" data-test-subj="pushed-service-label-title">
|
||||
<EuiFlexGroup
|
||||
alignItems="baseline"
|
||||
gutterSize="xs"
|
||||
data-test-subj="pushed-service-label-title"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem data-test-subj="pushed-label">
|
||||
{`${firstPush ? i18n.PUSHED_NEW_INCIDENT : i18n.UPDATE_INCIDENT} ${
|
||||
pushedVal?.connector_name
|
||||
|
@ -190,15 +196,15 @@ export const getUpdateAction = ({
|
|||
timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
|
||||
timelineIcon: getUpdateActionIcon(action.actionField[0]),
|
||||
actions: (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionCopyLink
|
||||
getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
|
||||
id={action.actionId}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
{action.action === 'update' && action.commentId != null && (
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionMoveToReference id={action.commentId} outlineComment={handleOutlineComment} />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
|
@ -252,14 +258,14 @@ export const getAlertAttachment = ({
|
|||
timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
|
||||
timelineIcon: 'bell',
|
||||
actions: (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionCopyLink
|
||||
id={action.actionId}
|
||||
getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionShowAlert
|
||||
id={action.actionId}
|
||||
alertId={alertId}
|
||||
|
@ -343,15 +349,17 @@ export const getGeneratedAlertsAttachment = ({
|
|||
timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
|
||||
timelineIcon: 'bell',
|
||||
actions: (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionCopyLink
|
||||
getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
|
||||
id={action.actionId}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
{renderInvestigateInTimelineActionComponent ? (
|
||||
<EuiFlexItem>{renderInvestigateInTimelineActionComponent(alertIds)}</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
{renderInvestigateInTimelineActionComponent(alertIds)}
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
</EuiFlexGroup>
|
||||
),
|
||||
|
|
|
@ -32,12 +32,12 @@ const UserActionContentToolbarComponent = ({
|
|||
onQuote,
|
||||
userCanCrud,
|
||||
}: UserActionContentToolbarProps) => (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup responsive={false} alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionCopyLink id={id} getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} />
|
||||
</EuiFlexItem>
|
||||
{userCanCrud && (
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserActionPropertyActions
|
||||
id={id}
|
||||
editLabel={editLabel}
|
||||
|
|
|
@ -56,7 +56,7 @@ export const UserActionMarkdown = ({
|
|||
|
||||
const renderButtons = useCallback(
|
||||
({ cancelAction, saveAction }) => (
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
data-test-subj="user-action-cancel-markdown"
|
||||
|
|
|
@ -49,13 +49,13 @@ const renderUsers = (
|
|||
handleSendEmail: (emailAddress: string | undefined | null) => void
|
||||
) =>
|
||||
users.map(({ fullName, username, email }, key) => (
|
||||
<MyFlexGroup key={key} justifyContent="spaceBetween">
|
||||
<MyFlexGroup key={key} justifyContent="spaceBetween" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup gutterSize="xs">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="xs" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<MyAvatar name={fullName ? fullName : username ?? ''} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}>
|
||||
<p>
|
||||
<strong>
|
||||
|
|
|
@ -21,6 +21,23 @@ export const SectionWrapper = styled.div`
|
|||
`;
|
||||
|
||||
export const HeaderWrapper = styled.div`
|
||||
padding: ${({ theme }) =>
|
||||
`${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l}`};
|
||||
${({ theme }) =>
|
||||
`
|
||||
padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l};
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
|
||||
padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} 0
|
||||
${theme.eui.paddingSizes.s};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
|
||||
export const ContentWrapper = styled.div`
|
||||
${({ theme }) =>
|
||||
`
|
||||
padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l};
|
||||
@media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
|
||||
padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${gutterTimeline}
|
||||
${theme.eui.paddingSizes.s};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
|
|
@ -22,11 +22,6 @@ import { UNTITLED_TIMELINE, UNTITLED_TEMPLATE } from '../../timeline/properties/
|
|||
import { timelineActions } from '../../../store/timeline';
|
||||
import * as i18n from './translations';
|
||||
|
||||
const ButtonWrapper = styled(EuiFlexItem)`
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const EuiHealthStyled = styled(EuiHealth)`
|
||||
display: block;
|
||||
`;
|
||||
|
@ -83,35 +78,36 @@ const ActiveTimelinesComponent: React.FC<ActiveTimelinesProps> = ({
|
|||
}, [timelineStatus, updated]);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup gutterSize="none">
|
||||
<ButtonWrapper grow={false}>
|
||||
<StyledEuiButtonEmpty
|
||||
aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })}
|
||||
className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME}
|
||||
flush="both"
|
||||
data-test-subj="flyoutOverlay"
|
||||
size="s"
|
||||
isSelected={isOpen}
|
||||
onClick={handleToggleOpen}
|
||||
>
|
||||
<EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexStart">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiToolTip position="top" content={tooltipContent}>
|
||||
<EuiHealthStyled
|
||||
color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>{title}</EuiFlexItem>
|
||||
{!isOpen && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<TimelineEventsCountBadge />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</StyledEuiButtonEmpty>
|
||||
</ButtonWrapper>
|
||||
</EuiFlexGroup>
|
||||
<StyledEuiButtonEmpty
|
||||
aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })}
|
||||
className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME}
|
||||
flush="both"
|
||||
data-test-subj="flyoutOverlay"
|
||||
size="s"
|
||||
isSelected={isOpen}
|
||||
onClick={handleToggleOpen}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
gutterSize="none"
|
||||
alignItems="center"
|
||||
justifyContent="flexStart"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiToolTip position="top" content={tooltipContent}>
|
||||
<EuiHealthStyled
|
||||
color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>{title}</EuiFlexItem>
|
||||
{!isOpen && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<TimelineEventsCountBadge />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</StyledEuiButtonEmpty>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -143,9 +143,9 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
|
|||
hasShadow={false}
|
||||
data-test-subj="timeline-flyout-header-panel"
|
||||
>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
|
||||
<AddTimelineButton timelineId={timelineId} />
|
||||
<EuiFlexItem grow>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ActiveTimelines
|
||||
timelineId={timelineId}
|
||||
timelineType={timelineType}
|
||||
|
@ -156,8 +156,8 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
{show && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
|
||||
{(activeTab === TimelineTabs.query || activeTab === TimelineTabs.eql) && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<InspectButton
|
||||
|
|
Loading…
Reference in a new issue