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.

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

[Cases] Fix bulk actions alignment #142830

Merged
merged 5 commits into from
Oct 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions x-pack/plugins/cases/public/components/all_cases/table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
<EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
</Div>
) : (
<Div data-test-subj={isCasesLoading ? 'cases-table-loading' : null}>
<>
<CasesTableUtilityBar
isSelectorView={isSelectorView}
totalCases={data.total ?? 0}
Expand Down Expand Up @@ -127,7 +127,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
sorting={sorting}
hasActions={false}
/>
</Div>
</>
);
};
CasesTable.displayName = 'CasesTable';
126 changes: 81 additions & 45 deletions x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
*/

import React, { FunctionComponent, useCallback, useState } from 'react';
import { EuiContextMenu } from '@elastic/eui';
import {
UtilityBar,
UtilityBarAction,
UtilityBarGroup,
UtilityBarSection,
UtilityBarText,
} from '../utility_bar';
EuiButtonEmpty,
EuiContextMenu,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiText,
useEuiTheme,
} from '@elastic/eui';
import * as i18n from './translations';
import { Case } from '../../../common/ui/types';
import { useRefreshCases } from './use_on_refresh_cases';
import { UtilityBarBulkActions } from '../utility_bar/utility_bar_bulk_actions';
import { useBulkActions } from './use_bulk_actions';
import { useCasesContext } from '../cases_context/use_cases_context';

Expand All @@ -30,6 +30,7 @@ interface Props {

export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
({ isSelectorView, totalCases, selectedCases, deselectCases }) => {
const { euiTheme } = useEuiTheme();
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
const closePopover = useCallback(() => setIsPopoverOpen(false), []);
Expand All @@ -56,47 +57,82 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(

return (
<>
<UtilityBar border>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText data-test-subj="case-table-case-count">
{i18n.SHOWING_CASES(totalCases)}
</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup data-test-subj="case-table-utility-bar-actions">
<EuiFlexGroup
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed the code to use the Eui library and I removed the UtilityBar helpers.

alignItems="center"
justifyContent="flexStart"
gutterSize="s"
css={{
borderBottom: euiTheme.border.thin,
marginTop: 0,
marginBottom: 0,
paddingTop: euiTheme.size.s,
paddingBottom: euiTheme.size.s,
}}
>
<EuiFlexItem
data-test-subj="case-table-case-count"
grow={false}
css={{
borderRight: euiTheme.border.thin,
paddingRight: euiTheme.size.s,
}}
>
<EuiText size="xs" color="subdued">
{i18n.SHOWING_CASES(totalCases)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem data-test-subj="case-table-utility-bar-actions" grow={false}>
<EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
{!isSelectorView && showBulkActions && (
<>
<UtilityBarText data-test-subj="case-table-selected-case-count">
{i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
</UtilityBarText>
<UtilityBarBulkActions
dataTestSubj="case-table-bulk-actions"
iconSide="right"
iconType="arrowDown"
buttonTitle={i18n.BULK_ACTIONS}
isPopoverOpen={isPopoverOpen}
closePopover={closePopover}
onButtonClick={togglePopover}
>
<EuiContextMenu
panels={panels}
initialPanelId={0}
data-test-subj="case-table-bulk-actions-context-menu"
/>
</UtilityBarBulkActions>
<EuiFlexItem data-test-subj="case-table-selected-case-count" grow={false}>
<EuiText size="xs" color="subdued">
{i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPopover
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
data-test-subj="case-table-bulk-actions-popover"
button={
<EuiButtonEmpty
onClick={togglePopover}
size="xs"
iconSide="right"
iconType="arrowDown"
flush="left"
data-test-subj="case-table-bulk-actions-link-icon"
>
{i18n.BULK_ACTIONS}
</EuiButtonEmpty>
}
>
<EuiContextMenu
panels={panels}
initialPanelId={0}
data-test-subj="case-table-bulk-actions-context-menu"
/>
</EuiPopover>
</EuiFlexItem>
</>
)}
<UtilityBarAction
iconSide="left"
iconType="refresh"
onClick={onRefresh}
dataTestSubj="all-cases-refresh"
>
{i18n.REFRESH}
</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={onRefresh}
size="xs"
iconSide="left"
iconType="refresh"
flush="left"
data-test-subj="all-cases-refresh-link-icon"
>
{i18n.REFRESH}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
{modals}
</>
);
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

13 changes: 0 additions & 13 deletions x-pack/plugins/cases/public/components/utility_bar/index.ts

This file was deleted.

144 changes: 0 additions & 144 deletions x-pack/plugins/cases/public/components/utility_bar/styles.tsx

This file was deleted.

Loading