1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-28 17:55:15 +02:00

feat: update flags overview status column (#9961)

Improved spacing in the flag overview columns.
This commit is contained in:
Tymoteusz Czech 2025-05-13 09:37:22 +02:00 committed by GitHub
parent 31a23db05e
commit 82dddb2eef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 35 deletions

View File

@ -1,4 +1,4 @@
import React, { type VFC } from 'react'; import React, { type FC } from 'react';
import { FeatureEnvironmentSeen } from 'component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen'; import { FeatureEnvironmentSeen } from 'component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen';
import type { FeatureSearchEnvironmentSchema } from 'openapi'; import type { FeatureSearchEnvironmentSchema } from 'openapi';
import { FeatureLifecycle } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle'; import { FeatureLifecycle } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle';
@ -11,7 +11,7 @@ interface IFeatureSeenCellProps {
}; };
} }
export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({ export const FeatureEnvironmentSeenCell: FC<IFeatureSeenCellProps> = ({
feature, feature,
...rest ...rest
}) => { }) => {
@ -41,24 +41,19 @@ interface IFeatureLifecycleProps {
expanded?: boolean; expanded?: boolean;
} }
export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({ export const FeatureLifecycleCell: FC<IFeatureLifecycleProps> = ({
feature, feature,
onComplete, onComplete,
onUncomplete, onUncomplete,
onArchive, onArchive,
expanded, expanded,
...rest ...rest
}) => { }) => (
const environments = feature.environments
? Object.values(feature.environments)
: [];
return (
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: expanded ? 'flex-start' : 'center',
padding: theme.spacing(0, expanded ? 1 : 0), padding: theme.spacing(0, expanded ? 2 : 0),
})} })}
> >
<FeatureLifecycle <FeatureLifecycle
@ -70,7 +65,6 @@ export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
/> />
</Box> </Box>
); );
};
export const MemoizedFeatureEnvironmentSeenCell = React.memo( export const MemoizedFeatureEnvironmentSeenCell = React.memo(
FeatureEnvironmentSeenCell, FeatureEnvironmentSeenCell,

View File

@ -19,6 +19,7 @@ import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/Fa
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import { ExportDialog } from './ExportDialog'; import { ExportDialog } from './ExportDialog';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { focusable } from 'themes/themeStyles'; import { focusable } from 'themes/themeStyles';
import { import {
FeatureEnvironmentSeenCell, FeatureEnvironmentSeenCell,
@ -68,6 +69,7 @@ const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();
export const FeatureToggleListTable: FC = () => { export const FeatureToggleListTable: FC = () => {
const theme = useTheme(); const theme = useTheme();
const { isOss } = useUiConfig();
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const { environments } = useEnvironments(); const { environments } = useEnvironments();
const enabledEnvironments = environments const enabledEnvironments = environments
@ -185,6 +187,8 @@ export const FeatureToggleListTable: FC = () => {
size: 50, size: 50,
meta: { width: '1%' }, meta: { width: '1%' },
}), }),
...(!isOss()
? [
columnHelper.accessor('environments', { columnHelper.accessor('environments', {
id: 'status', id: 'status',
header: 'Status', header: 'Status',
@ -194,6 +198,8 @@ export const FeatureToggleListTable: FC = () => {
enableSorting: false, enableSorting: false,
size: 350, size: 350,
}), }),
]
: []),
columnHelper.accessor('project', { columnHelper.accessor('project', {
header: 'Project', header: 'Project',
cell: ({ getValue }) => { cell: ({ getValue }) => {