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, useProjectFeatureSearchActions,
} from './useProjectFeatureSearch.ts'; } from './useProjectFeatureSearch.ts';
import { AvatarCell } from './AvatarCell.tsx'; 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 useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog.tsx'; import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog.tsx';
import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding.tsx'; import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding.tsx';
@ -76,7 +76,6 @@ const Container = styled('div')(({ theme }) => ({
const FilterRow = styled('div')(({ theme }) => ({ const FilterRow = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexFlow: 'row wrap', flexFlow: 'row wrap',
gap: theme.spacing(2),
justifyContent: 'space-between', justifyContent: 'space-between',
})); }));
@ -578,14 +577,12 @@ export const ProjectFeatureToggles = ({
onChange={setTableState} onChange={setTableState}
state={filterState} state={filterState}
/> />
<Box sx={{ marginRight: 'auto' }} data-test> <ProjectLifecycleFilters
<ProjectLifecycleFilters projectId={projectId}
projectId={projectId} state={filterState}
state={filterState} onChange={setTableState}
onChange={setTableState} total={loading ? undefined : total}
total={loading ? undefined : total} />
/>
</Box>
<ButtonGroup> <ButtonGroup>
<PermissionIconButton <PermissionIconButton
permission={UPDATE_FEATURE} 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 type { FilterItemParamHolder } from '../../../filter/Filters/Filters.tsx';
import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus'; import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
import { LifecycleFilters } from '../../../common/LifecycleFilters/LifecycleFilters.tsx'; import { LifecycleFilters } from '../../../common/LifecycleFilters/LifecycleFilters.tsx';
import { Box, useMediaQuery, useTheme } from '@mui/material';
interface IProjectLifecycleFiltersProps { interface IProjectLifecycleFiltersProps {
projectId: string; projectId: string;
@ -20,6 +21,8 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
children, children,
}) => { }) => {
const { data } = useProjectStatus(projectId); const { data } = useProjectStatus(projectId);
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const lifecycleSummary = Object.entries( const lifecycleSummary = Object.entries(
data?.lifecycleSummary || {}, data?.lifecycleSummary || {},
).reduce( ).reduce(
@ -42,13 +45,20 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
} }
return ( return (
<LifecycleFilters <Box
state={state} sx={{
onChange={onChange} marginRight: 'auto',
total={total} margin: isSmallScreen ? theme.spacing(0, 2) : '0 auto 0 0',
countData={lifecycleSummary} }}
> >
{children} <LifecycleFilters
</LifecycleFilters> state={state}
onChange={onChange}
total={total}
countData={lifecycleSummary}
>
{children}
</LifecycleFilters>
</Box>
); );
}; };