Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

refactor: streamline ProjectLifecycleFilters layout and improve responsiveness

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-09-11 12:10:51 +02:00
parent ca86a4e428
commit c9e99fca1e
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -42,7 +42,7 @@ import {
useProjectFeatureSearchActions,
} from './useProjectFeatureSearch.ts';
import { AvatarCell } from './AvatarCell.tsx';
import { Box, styled } from '@mui/material';
import { styled } from '@mui/material';
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog.tsx';
import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding.tsx';
@ -76,7 +76,6 @@ const Container = styled('div')(({ theme }) => ({
const FilterRow = styled('div')(({ theme }) => ({
display: 'flex',
flexFlow: 'row wrap',
gap: theme.spacing(2),
justifyContent: 'space-between',
}));
@ -578,14 +577,12 @@ export const ProjectFeatureToggles = ({
onChange={setTableState}
state={filterState}
/>
<Box sx={{ marginRight: 'auto' }} data-test>
<ProjectLifecycleFilters
projectId={projectId}
state={filterState}
onChange={setTableState}
total={loading ? undefined : total}
/>
</Box>
<ProjectLifecycleFilters
projectId={projectId}
state={filterState}
onChange={setTableState}
total={loading ? undefined : total}
/>
<ButtonGroup>
<PermissionIconButton
permission={UPDATE_FEATURE}

24
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx
View File

@ -3,6 +3,7 @@ import { useEffect } from 'react';
import type { FilterItemParamHolder } from '../../../filter/Filters/Filters.tsx';
import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
import { LifecycleFilters } from '../../../common/LifecycleFilters/LifecycleFilters.tsx';
import { Box, useMediaQuery, useTheme } from '@mui/material';
interface IProjectLifecycleFiltersProps {
projectId: string;
@ -20,6 +21,8 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
children,
}) => {
const { data } = useProjectStatus(projectId);
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const lifecycleSummary = Object.entries(
data?.lifecycleSummary || {},
).reduce(
@ -42,13 +45,20 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
}
return (
<LifecycleFilters
state={state}
onChange={onChange}
total={total}
countData={lifecycleSummary}
<Box
sx={{
marginRight: 'auto',
margin: isSmallScreen ? theme.spacing(0, 2) : '0 auto 0 0',
}}
>
{children}
</LifecycleFilters>
<LifecycleFilters
state={state}
onChange={onChange}
total={total}
countData={lifecycleSummary}
>
{children}
</LifecycleFilters>
</Box>
);
};