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 type { FeatureSearchEnvironmentSchema } from 'openapi';
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,
...rest
}) => {
@ -41,36 +41,30 @@ interface IFeatureLifecycleProps {
expanded?: boolean;
}
export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
export const FeatureLifecycleCell: FC<IFeatureLifecycleProps> = ({
feature,
onComplete,
onUncomplete,
onArchive,
expanded,
...rest
}) => {
const environments = feature.environments
? Object.values(feature.environments)
: [];
return (
<Box
sx={(theme) => ({
display: 'flex',
justifyContent: 'center',
padding: theme.spacing(0, expanded ? 1 : 0),
})}
>
<FeatureLifecycle
onArchive={onArchive}
onComplete={onComplete}
onUncomplete={onUncomplete}
feature={feature}
expanded={expanded}
/>
</Box>
);
};
}) => (
<Box
sx={(theme) => ({
display: 'flex',
justifyContent: expanded ? 'flex-start' : 'center',
padding: theme.spacing(0, expanded ? 2 : 0),
})}
>
<FeatureLifecycle
onArchive={onArchive}
onComplete={onComplete}
onUncomplete={onUncomplete}
feature={feature}
expanded={expanded}
/>
</Box>
);
export const MemoizedFeatureEnvironmentSeenCell = React.memo(
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 { ExportDialog } from './ExportDialog';
import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { focusable } from 'themes/themeStyles';
import {
FeatureEnvironmentSeenCell,
@ -68,6 +69,7 @@ const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();
export const FeatureToggleListTable: FC = () => {
const theme = useTheme();
const { isOss } = useUiConfig();
const { trackEvent } = usePlausibleTracker();
const { environments } = useEnvironments();
const enabledEnvironments = environments
@ -185,15 +187,19 @@ export const FeatureToggleListTable: FC = () => {
size: 50,
meta: { width: '1%' },
}),
columnHelper.accessor('environments', {
id: 'status',
header: 'Status',
cell: ({ row: { original } }) => (
<StatusCell {...original} />
),
enableSorting: false,
size: 350,
}),
...(!isOss()
? [
columnHelper.accessor('environments', {
id: 'status',
header: 'Status',
cell: ({ row: { original } }) => (
<StatusCell {...original} />
),
enableSorting: false,
size: 350,
}),
]
: []),
columnHelper.accessor('project', {
header: 'Project',
cell: ({ getValue }) => {