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

fix: keep change request type in table (#8849)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-11-25 14:05:54 +01:00 committed by GitHub
parent 0f76a8a5a6
commit dc7c46786a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
View File

@ -38,6 +38,7 @@ export interface IChangeRequestTableProps {
const defaultSort: SortingRule<string> & { const defaultSort: SortingRule<string> & {
columns?: string[]; columns?: string[];
type?: 'open' | 'closed';
} = { id: 'createdAt', desc: true }; } = { id: 'createdAt', desc: true };
const StyledTabContainer = styled('div')({ const StyledTabContainer = styled('div')({
@ -76,6 +77,12 @@ export const ChangeRequestsTabs = ({
const { value: storedParams, setValue: setStoredParams } = const { value: storedParams, setValue: setStoredParams } =
createLocalStorage(`${projectId}:ProjectChangeRequest`, defaultSort); createLocalStorage(`${projectId}:ProjectChangeRequest`, defaultSort);
const initialChangeRequestType =
searchParams.get('type') || storedParams.type;
const [changeRequestType, setChangeRequestType] = useState<
'open' | 'closed'
>(initialChangeRequestType === 'closed' ? 'closed' : 'open');
const [openChangeRequests, closedChangeRequests] = useMemo(() => { const [openChangeRequests, closedChangeRequests] = useMemo(() => {
const open = changeRequests.filter( const open = changeRequests.filter(
(changeRequest) => (changeRequest) =>
@ -97,14 +104,16 @@ export const ChangeRequestsTabs = ({
{ {
title: 'Change requests', title: 'Change requests',
data: openChangeRequests, data: openChangeRequests,
type: 'open' as const,
}, },
{ {
title: 'Closed', title: 'Closed',
data: closedChangeRequests, data: closedChangeRequests,
type: 'closed' as const,
}, },
]; ];
const activeTab =
const [activeTab, setActiveTab] = useState(0); tabs.find((tab) => tab.type === changeRequestType) || tabs[0];
const columns = useMemo( const columns = useMemo(
() => [ () => [
@ -193,7 +202,7 @@ export const ChangeRequestsTabs = ({
data: searchedData, data: searchedData,
getSearchText, getSearchText,
getSearchContext, getSearchContext,
} = useSearch(columns, searchValue, tabs[activeTab]?.data); } = useSearch(columns, searchValue, activeTab?.data);
const data = useMemo( const data = useMemo(
() => (loading ? featuresPlaceholder : searchedData), () => (loading ? featuresPlaceholder : searchedData),
@ -259,6 +268,7 @@ export const ChangeRequestsTabs = ({
if (searchValue) { if (searchValue) {
tableState.search = searchValue; tableState.search = searchValue;
} }
tableState.type = changeRequestType;
setSearchParams(tableState, { setSearchParams(tableState, {
replace: true, replace: true,
@ -267,9 +277,10 @@ export const ChangeRequestsTabs = ({
...params, ...params,
id: sortBy[0].id, id: sortBy[0].id,
desc: sortBy[0].desc || false, desc: sortBy[0].desc || false,
type: changeRequestType,
})); }));
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading, sortBy, searchValue, setSearchParams]); }, [loading, sortBy, searchValue, setSearchParams, changeRequestType]);
return ( return (
<PageContent <PageContent
@ -281,18 +292,20 @@ export const ChangeRequestsTabs = ({
titleElement={ titleElement={
<StyledTabContainer> <StyledTabContainer>
<Tabs <Tabs
value={tabs[activeTab]?.title} value={activeTab?.title}
indicatorColor='primary' indicatorColor='primary'
textColor='primary' textColor='primary'
variant='scrollable' variant='scrollable'
allowScrollButtonsMobile allowScrollButtonsMobile
> >
{tabs.map((tab, index) => ( {tabs.map((tab) => (
<StyledTabButton <StyledTabButton
key={tab.title} key={tab.title}
label={`${tab.title} (${tab.data.length})`} label={`${tab.title} (${tab.data.length})`}
value={tab.title} value={tab.title}
onClick={() => setActiveTab(index)} onClick={() =>
setChangeRequestType(tab.type)
}
/> />
))} ))}
</Tabs> </Tabs>