Skip to content

Commit

Permalink
Sticky batch actions bar (#3366)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tymek
Tymek committed Mar 22, 2023
1 parent e03307e commit 5585a9b
Show file tree
Hide file tree
Showing 7 changed files with 266 additions and 238 deletions.
4 changes: 2 additions & 2 deletions frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FC, useState } from 'react';
import { Button } from '@mui/material';
import { Undo } from '@mui/icons-material';
import { Delete, Undo } from '@mui/icons-material';
import {
DELETE_FEATURE,
UPDATE_FEATURE,
Expand Down Expand Up @@ -69,7 +69,7 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
{({ hasAccess }) => (
<Button
disabled={!hasAccess}
startIcon={<Undo />}
startIcon={<Delete />}
variant="outlined"
size="small"
onClick={onDelete}
Expand Down
107 changes: 55 additions & 52 deletions frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,64 +294,67 @@ export const ArchiveTable = ({
}, [loading, sortBy, searchValue]); // eslint-disable-line react-hooks/exhaustive-deps

return (
<PageContent
isLoading={loading}
header={
<PageHeader
titleElement={`${title} (${
rows.length < data.length
? `${rows.length} of ${data.length}`
: data.length
})`}
actions={
<Search
initialValue={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
<>
<PageContent
isLoading={loading}
header={
<PageHeader
titleElement={`${title} (${
rows.length < data.length
? `${rows.length} of ${data.length}`
: data.length
})`}
actions={
<Search
initialValue={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
/>
}
/>
}
>
<SearchHighlightProvider value={getSearchText(searchValue)}>
<VirtualizedTable
rows={rows}
headerGroups={headerGroups}
prepareRow={prepareRow}
/>
</SearchHighlightProvider>
<ConditionallyRender
condition={rows.length === 0}
show={() => (
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<TablePlaceholder>
No feature toggles found matching &ldquo;
{searchValue}&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
None of the feature toggles were archived
yet.
</TablePlaceholder>
}
/>
}
)}
/>
}
>
<SearchHighlightProvider value={getSearchText(searchValue)}>
<VirtualizedTable
rows={rows}
headerGroups={headerGroups}
prepareRow={prepareRow}
<ArchivedFeatureDeleteConfirm
deletedFeatures={[deletedFeature?.name!]}
projectId={projectId!}
open={deleteModalOpen}
setOpen={setDeleteModalOpen}
refetch={refetch}
/>
</SearchHighlightProvider>
<ConditionallyRender
condition={rows.length === 0}
show={() => (
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<TablePlaceholder>
No feature toggles found matching &ldquo;
{searchValue}&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
None of the feature toggles were archived yet.
</TablePlaceholder>
}
/>
)}
/>
<ArchivedFeatureDeleteConfirm
deletedFeatures={[deletedFeature?.name!]}
projectId={projectId!}
open={deleteModalOpen}
setOpen={setDeleteModalOpen}
refetch={refetch}
/>
</PageContent>
<ConditionallyRender
condition={Boolean(projectId)}
show={
<BatchSelectionActionsBar
selectedIds={Object.keys(selectedRowIds)}
count={Object.keys(selectedRowIds).length}
>
<ArchiveBatchActions
selectedIds={Object.keys(selectedRowIds)}
Expand All @@ -360,6 +363,6 @@ export const ArchiveTable = ({
</BatchSelectionActionsBar>
}
/>
</PageContent>
</>
);
};
35 changes: 22 additions & 13 deletions frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,21 @@ import { FC } from 'react';
import { Box, Paper, styled, Typography } from '@mui/material';

interface IBatchSelectionActionsBarProps {
selectedIds: string[];
count: number;
}

const StyledContainer = styled(Box)(() => ({
const StyledStickyContainer = styled('div')(() => ({
position: 'sticky',
marginTop: 'auto',
bottom: 0,
}));

const StyledContainer = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
width: '100%',
flexWrap: 'wrap',
paddingBottom: theme.spacing(2),
}));

const StyledBar = styled(Paper)(({ theme }) => ({
Expand Down Expand Up @@ -40,22 +47,24 @@ const StyledText = styled(Typography)(({ theme }) => ({
}));

export const BatchSelectionActionsBar: FC<IBatchSelectionActionsBarProps> = ({
selectedIds,
count,
children,
}) => {
if (selectedIds.length === 0) {
if (count === 0) {
return null;
}

return (
<StyledContainer>
<StyledBar elevation={4}>
<StyledText>
<StyledCount>{selectedIds.length}</StyledCount>
&ensp;selected
</StyledText>
{children}
</StyledBar>
</StyledContainer>
<StyledStickyContainer>
<StyledContainer>
<StyledBar elevation={4}>
<StyledText>
<StyledCount>{count}</StyledCount>
&ensp;selected
</StyledText>
{children}
</StyledBar>
</StyledContainer>
</StyledStickyContainer>
);
};
10 changes: 2 additions & 8 deletions frontend/src/component/common/InstanceStatus/InstanceStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ export const InstanceStatus: FC = ({ children }) => {
useInstanceStatus();
const { extendTrial } = useInstanceStatusApi();
const { setToastApiError } = useToast();
const theme = useTheme();

const onExtendTrial = async () => {
try {
Expand All @@ -103,12 +102,7 @@ export const InstanceStatus: FC = ({ children }) => {
};

return (
<div
style={{
height: '100%',
backgroundColor: theme.palette.background.paper,
}}
>
<>
<ConditionallyRender
condition={isBilling && Boolean(instanceStatus)}
show={() => (
Expand All @@ -124,7 +118,7 @@ export const InstanceStatus: FC = ({ children }) => {
)}
/>
{children}
</div>
</>
);
};

Expand Down
7 changes: 5 additions & 2 deletions frontend/src/component/layout/MainLayout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,15 @@ interface IMainLayoutProps {
const MainLayoutContainer = styled(Grid)(() => ({
height: '100%',
justifyContent: 'space-between',
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
position: 'relative',
}));

const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
margin: theme.spacing(0, 'auto'),
overflow: 'auto', // prevent margin collapsing
flex: 1,
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.application,
position: 'relative',
Expand Down

0 comments on commit 5585a9b

Please sign in to comment.