Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00
Code Issues Projects Releases Wiki Activity

feat: update flags overview status column (#9961)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
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,36 +41,30 @@ 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 <Box
? Object.values(feature.environments) sx={(theme) => ({
: []; display: 'flex',
justifyContent: expanded ? 'flex-start' : 'center',
return ( padding: theme.spacing(0, expanded ? 2 : 0),
<Box })}
sx={(theme) => ({ >
display: 'flex', <FeatureLifecycle
justifyContent: 'center', onArchive={onArchive}
padding: theme.spacing(0, expanded ? 1 : 0), onComplete={onComplete}
})} onUncomplete={onUncomplete}
> feature={feature}
<FeatureLifecycle expanded={expanded}
onArchive={onArchive} />
onComplete={onComplete} </Box>
onUncomplete={onUncomplete} );
feature={feature}
expanded={expanded}
/>
</Box>
);
};
export const MemoizedFeatureEnvironmentSeenCell = React.memo( export const MemoizedFeatureEnvironmentSeenCell = React.memo(
FeatureEnvironmentSeenCell, FeatureEnvironmentSeenCell,

24
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
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,15 +187,19 @@ export const FeatureToggleListTable: FC = () => {
size: 50, size: 50,
meta: { width: '1%' }, meta: { width: '1%' },
}), }),
columnHelper.accessor('environments', { ...(!isOss()
id: 'status', ? [
header: 'Status', columnHelper.accessor('environments', {
cell: ({ row: { original } }) => ( id: 'status',
<StatusCell {...original} /> header: 'Status',
), cell: ({ row: { original } }) => (
enableSorting: false, <StatusCell {...original} />
size: 350, ),
}), enableSorting: false,
size: 350,
}),
]
: []),
columnHelper.accessor('project', { columnHelper.accessor('project', {
header: 'Project', header: 'Project',
cell: ({ getValue }) => { cell: ({ getValue }) => {