diff --git a/dashboard/src/api/Tree.tsx b/dashboard/src/api/Tree.tsx index 1f4e68105..7b7773f92 100644 --- a/dashboard/src/api/Tree.tsx +++ b/dashboard/src/api/Tree.tsx @@ -4,11 +4,14 @@ import type { Tree } from '../types/tree/Tree'; import http from './api'; -const fetchTreeCheckoutData = async (): Promise => { - const res = await http.get('/api/tree/'); +const fetchTreeCheckoutData = async (origin: string): Promise => { + const res = await http.get('/api/tree/', { params: { origin } }); return res.data; }; -export const useTreeTable = (): UseQueryResult => { - return useQuery({ queryKey: ['treeData'], queryFn: fetchTreeCheckoutData }); +export const useTreeTable = (origin: string): UseQueryResult => { + return useQuery({ + queryKey: ['treeData', origin], + queryFn: () => fetchTreeCheckoutData(origin), + }); }; diff --git a/dashboard/src/components/Table/TreeTable.tsx b/dashboard/src/components/Table/TreeTable.tsx index d8065f86c..f3e5acc4b 100644 --- a/dashboard/src/components/Table/TreeTable.tsx +++ b/dashboard/src/components/Table/TreeTable.tsx @@ -2,13 +2,13 @@ import { useCallback, useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; -import { useNavigate } from '@tanstack/react-router'; +import { useNavigate, useSearch } from '@tanstack/react-router'; import { MessagesKey } from '@/locales/messages'; import { TableRow, TableCell } from '../ui/table'; -import { TreeTableBody } from '../../types/tree/Tree'; +import { TreeTableBody, zOrigin } from '../../types/tree/Tree'; import BaseTable from './BaseTable'; @@ -25,6 +25,9 @@ const treeTableColumnsLabelId: MessagesKey[] = [ ]; const TreeTableRow = (row: TreeTableBody): JSX.Element => { + const { origin: unsafeOrigin } = useSearch({ strict: false }); + const origin = zOrigin.parse(unsafeOrigin); + const backgroundClassName = 'flex flex-row bg-lightGray w-fit h-fit p-1 rounded-lg'; @@ -36,11 +39,12 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => { params: { treeId: row.id }, search: { tableFilter: 'all', + origin: origin, currentTreeDetailsTab: 'treeDetails.builds', diffFilter: {}, }, }); - }, [navigate, row.id]); + }, [navigate, row.id, origin]); return ( diff --git a/dashboard/src/components/TopBar/TopBar.tsx b/dashboard/src/components/TopBar/TopBar.tsx index 6ce5e1207..70a544a61 100644 --- a/dashboard/src/components/TopBar/TopBar.tsx +++ b/dashboard/src/components/TopBar/TopBar.tsx @@ -1,12 +1,64 @@ import { FormattedMessage } from 'react-intl'; +import { useSearch, useNavigate } from '@tanstack/react-router'; +import { useCallback, useEffect, useMemo } from 'react'; + +import Select, { SelectItem } from '@/components/Select/Select'; +import { zOrigin, zOriginEnum } from '@/types/tree/Tree'; + +const OriginSelect = (): JSX.Element => { + const { origin: unsafeOrigin } = useSearch({ strict: false }); + const origin = zOrigin.parse(unsafeOrigin); + + const navigate = useNavigate({ from: '/' }); + + const onValueChange = useCallback( + (value: string) => { + navigate({ + to: '/', + search: previousSearch => ({ ...previousSearch, origin: value }), + }); + }, + [navigate], + ); + + const selectItems = useMemo( + () => + zOriginEnum.options.map(option => ( + + {option} + + )), + [], + ); + + useEffect(() => { + if (unsafeOrigin === undefined) + navigate({ + search: previousSearch => ({ ...previousSearch, origin: origin }), + }); + }); + + return ( +
+ + + + +
+ ); +}; + const TopBar = (): JSX.Element => { return (
-
- +
+ +
); diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx index 987a694c6..db155862b 100644 --- a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx +++ b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx @@ -1,9 +1,12 @@ import { FormattedMessage } from 'react-intl'; import { MdExpandMore } from 'react-icons/md'; +import { useSearch } from '@tanstack/react-router'; import { useMemo } from 'react'; +import { zOrigin } from '@/types/tree/Tree'; + import { usePagination } from '@/hooks/usePagination'; import TreeTable from '../Table/TreeTable'; @@ -31,7 +34,10 @@ const FilterButton = (): JSX.Element => { }; const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => { - const { data, error } = useTreeTable(); + const { origin: unsafeOrigin } = useSearch({ strict: false }); + const origin = zOrigin.parse(unsafeOrigin); + + const { data, error } = useTreeTable(origin); const listItems: TreeTableBody[] = useMemo(() => { if (!data || error) { diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts index c7b6959fe..8104dfceb 100644 --- a/dashboard/src/locales/messages/index.ts +++ b/dashboard/src/locales/messages/index.ts @@ -75,6 +75,7 @@ export const messages = { 'global.modules': 'Modules', 'global.name': 'Name', 'global.none': 'None', + 'global.origin': 'Origin', 'global.origins': 'Origins', 'global.pass': 'Pass', 'global.placeholderSearch': 'Search by tree, branch or tag', diff --git a/dashboard/src/pages/Trees.tsx b/dashboard/src/pages/Trees.tsx index dca4ed239..a15f8bbe7 100644 --- a/dashboard/src/pages/Trees.tsx +++ b/dashboard/src/pages/Trees.tsx @@ -23,7 +23,7 @@ const Trees = (): JSX.Element => {
-
+