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

refactor: simplify project filters

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-04-17 16:27:05 +02:00
parent c6e3d2a105
commit 3033653784
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/cypress/integration/projects/list.spec.ts
View File

@ -1,8 +1,5 @@
///<reference path="../../global.d.ts" />
import {
SEARCH_INPUT,
//@ts-ignore
} from '../../../src/utils/testIds';
import { SEARCH_INPUT } from '../../../src/utils/testIds';
describe('project overview', () => {
const randomId = String(Math.random()).split('.')[1];

55
frontend/src/component/project/ProjectList/ProjectList.tsx
View File

@ -1,6 +1,6 @@
import { useContext, useMemo, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { BooleanParam, StringParam, withDefault } from 'use-query-params';
import { StringParam, withDefault } from 'use-query-params';
import { mutate } from 'swr';
import { getProjectFetcher } from 'hooks/api/getters/useProject/getProjectFetcher';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
@ -125,6 +125,19 @@ function resolveCreateButtonData(
}
}
const filterOptions = [
{
label: 'All projects',
value: 'all',
},
{
label: 'My projects',
value: 'my_projects',
},
] as const;
// type FilterOptions = (typeof filterOptions)[number]['value'];
export const ProjectListNew = () => {
const { hasAccess } = useContext(AccessContext);
const navigate = useNavigate();
@ -135,30 +148,18 @@ export const ProjectListNew = () => {
const showProjectFilterButtons = useUiFlag('projectListFilterMyProjects');
const myProjects = new Set(useProfile().profile?.projects || []);
const filterOptions = [
{
label: 'All projects',
value: false,
},
{
label: 'My projects',
value: true,
},
];
const stateConfig = {
myProjects: withDefault(BooleanParam, false),
search: withDefault(StringParam, ''),
};
const [filterState, setFilterState] = usePersistentTableState(
`projects-list`,
stateConfig,
{
filter: withDefault(StringParam, 'all'),
search: withDefault(StringParam, ''),
},
);
const searchValue = filterState.search;
const filteredProjects = useMemo(() => {
const preFilteredProjects =
showProjectFilterButtons && filterState.myProjects
showProjectFilterButtons && filterState.filter === 'my_projects'
? projects.filter(shouldDisplayInMyProjects(myProjects))
: projects;
@ -181,7 +182,7 @@ export const ProjectListNew = () => {
}, [
projects,
searchValue,
filterState.myProjects,
filterState.filter,
myProjects,
showProjectFilterButtons,
]);
@ -226,23 +227,23 @@ export const ProjectListNew = () => {
aria-label='project list filter'
size='small'
color='primary'
value={filterState.myProjects}
value={filterState.filter}
exclusive
onChange={(event, value) => {
if (value !== null) {
onChange={(event, filter) => {
if (filter !== null) {
setFilterState({
myProjects: value,
filter,
});
}
}}
>
{filterOptions.map((filter) => {
{filterOptions.map((option) => {
return (
<ToggleButton
key={`${filter.value}`}
value={filter.value}
key={`${option.value}`}
value={option.value}
>
{filter.label}
{option.label}
</ToggleButton>
);
})}