Skip to content

Commit

Permalink
refactor: experimental table column visibility handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tymek
Tymek committed Dec 11, 2023
1 parent cc16743 commit 4d72eb5
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 18 deletions.
1 change: 0 additions & 1 deletion ...src/component/project/Project/ExperimentalProjectFeatures/ExperimentalProjectFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const PaginatedProjectOverview = () => {
<StyledContentContainer>
<StyledProjectToggles>
<ExperimentalProjectFeatureToggles
style={{ width: '100%', margin: 0 }}
environments={environments}
storageKey='project-features'
/>
Expand Down
97 changes: 91 additions & 6 deletions ...Project/ExperimentalProjectFeatures/ExperimentalProjectTable/ExperimentalProjectTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,18 +89,84 @@ import { FeatureToggleCell } from './FeatureToggleCell/FeatureToggleCell';

interface IExperimentalProjectFeatureTogglesProps {
environments: IProject['environments'];
style?: CSSProperties;
refreshInterval?: number;
storageKey?: string;
}

const staticColumns = ['Select', 'Actions', 'name', 'favorite'];
const staticColumns = ['select', 'actions', 'name', 'favorite'];

const useColumnVisibility = (allColumnIds: string[], state?: string[]) => {
const theme = useTheme();
const isTinyScreen = useMediaQuery(theme.breakpoints.down('sm'));
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));

const allColumns = useMemo(
() =>
allColumnIds.reduce(
(acc, columnId) => ({
...acc,
[columnId]: staticColumns.includes(columnId),
}),
{},
),
[allColumnIds],
);

const showEnvironments = useCallback(
(environmentsToShow: number = 0) => {
const visibleEnvColumns = allColumnIds
.filter((id) => id.startsWith('environment:') !== false)
.slice(0, environmentsToShow);
return visibleEnvColumns.reduce(
(acc, columnId) => ({
...acc,
[columnId]: true,
}),
{},
);
},
[allColumnIds],
);

if (isTinyScreen) {
return {
...allColumns,
createdAt: true,
};
}
if (isSmallScreen) {
return {
...allColumns,
createdAt: true,
...showEnvironments(1),
};
}
if (isMediumScreen) {
return {
...allColumns,
createdAt: true,
type: true,
...showEnvironments(1),
};
}

return {
...allColumns,
lastSeenAt: true,
createdAt: true,
type: true,
...showEnvironments(2),
};
};

const formatEnvironmentColumnId = (environment: string) =>
`environment:${environment}`;

const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();

export const ExperimentalProjectFeatureToggles = ({
environments,
style,
refreshInterval = 15 * 1000,
storageKey = 'project-feature-toggles',
}: IExperimentalProjectFeatureTogglesProps) => {
Expand Down Expand Up @@ -146,7 +212,7 @@ export const ExperimentalProjectFeatureToggles = ({
const columns = useMemo(
() => [
columnHelper.display({
id: 'Select',
id: 'select',
header: ({ table }) => (
<MemoizedRowSelectCell
noPadding
Expand All @@ -165,6 +231,7 @@ export const ExperimentalProjectFeatureToggles = ({
),
}),
columnHelper.accessor('favorite', {
id: 'favorite',
header: () => (
<FavoriteIconHeader
isActive={tableState.favoritesFirst}
Expand All @@ -184,10 +251,10 @@ export const ExperimentalProjectFeatureToggles = ({
enableSorting: false,
meta: {
align: 'center',
// hideInMenu: true,
},
}),
columnHelper.accessor('lastSeenAt', {
id: 'lastSeenAt',
header: 'Last seen',
cell: ({ row: { original } }) => (
<MemoizedFeatureEnvironmentSeenCell
Expand All @@ -201,20 +268,23 @@ export const ExperimentalProjectFeatureToggles = ({
},
}),
columnHelper.accessor('type', {
id: 'type',
header: 'Type',
cell: FeatureTypeCell,
meta: {
align: 'center',
},
}),
columnHelper.accessor('name', {
// id: 'name',
header: 'Name',
cell: FeatureNameCell,
meta: {
width: '50%',
},
}),
columnHelper.accessor('createdAt', {
id: 'createdAt',
header: 'Created',
cell: DateCell,
}),
Expand All @@ -240,7 +310,7 @@ export const ExperimentalProjectFeatureToggles = ({
) || false,
}),
{
id: `environment:${name}`,
id: formatEnvironmentColumnId(name),
header: loading ? '' : name,
meta: {
align: 'center',
Expand Down Expand Up @@ -308,16 +378,31 @@ export const ExperimentalProjectFeatureToggles = ({
return features;
}, [loading, features]);

const allColumnIds = useMemo(
() => columns.map((column) => column.id).filter(Boolean) as string[],
[columns],
);

const defaultVisibleColumns = useColumnVisibility(allColumnIds);

const columnVisibility = defaultVisibleColumns;

const table = useReactTable(
withTableState(tableState, setTableState, {
columns,
data,
enableRowSelection: true,
state: {
columnVisibility,
},
}),
);

return (
<>
<button type='button' onClick={() => {}}>
test
</button>
<PageContent
disableLoading
disablePadding
Expand Down
15 changes: 4 additions & 11 deletions ...ures/ExperimentalProjectTable/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { VFC, useState } from 'react';
import { ReactNode, VFC, useState } from 'react';
import {
Box,
IconButton,
Expand Down Expand Up @@ -28,6 +28,7 @@ interface IProjectFeatureTogglesHeaderProps {
onChangeSearchQuery?: (query: string) => void;
dataToExport?: Pick<FeatureSchema, 'name'>[];
environmentsToExport?: string[];
actions?: ReactNode;
}

const StyledResponsiveButton = styled(ResponsiveButton)(() => ({
Expand All @@ -43,6 +44,7 @@ export const ProjectFeatureTogglesHeader: VFC<
onChangeSearchQuery,
dataToExport,
environmentsToExport,
actions,
}) => {
const projectId = useRequiredPathParam('projectId');
const headerLoadingRef = useLoading(isLoading || false);
Expand Down Expand Up @@ -91,16 +93,7 @@ export const ProjectFeatureTogglesHeader: VFC<
/>
}
/>
{/* FIXME: columns menu */}
{/* <ColumnsMenu
allColumns={allColumns}
staticColumns={staticColumns}
dividerAfter={['createdAt']}
dividerBefore={['Actions']}
isCustomized={isCustomColumns}
setHiddenColumns={setHiddenColumns}
onCustomize={() => setIsCustomColumns(true)}
/> */}
{actions}
<PageHeader.Divider sx={{ marginLeft: 0 }} />
<ConditionallyRender
condition={featuresExportImportFlag}
Expand Down

0 comments on commit 4d72eb5

Please sign in to comment.