diff --git a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx index 609b1894b..191162caa 100644 --- a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx +++ b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx @@ -1,6 +1,6 @@ import { Edit } from 'lucide-react'; import _ from 'lodash'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { DatatableHeader } from '@@/datatables/DatatableHeader'; import { Table } from '@@/datatables'; @@ -23,7 +23,7 @@ const store = createPersistedStore(tableKey, undefined, (set) => ({ })); export function AppTemplatesList({ - templates, + templates: initialTemplates, onSelect, selectedId, disabledTypes, @@ -38,11 +38,25 @@ export function AppTemplatesList({ const [page, setPage] = useState(0); const listState = useTableState(store, tableKey); + + const templates = useMemo(() => { + if (!initialTemplates) { + return []; + } + + if (!fixedCategories?.length) { + return initialTemplates; + } + + return initialTemplates.filter((template) => + fixedCategories.some((category) => template.Categories.includes(category)) + ); + }, [fixedCategories, initialTemplates]); + const filteredTemplates = useSortAndFilterTemplates( templates || [], listState, - disabledTypes, - fixedCategories + disabledTypes ); const pagedTemplates = @@ -58,7 +72,7 @@ export function AppTemplatesList({ description={ setPage(0)} disabledTypes={disabledTypes} fixedCategories={fixedCategories} diff --git a/app/react/portainer/templates/app-templates/useSortAndFilter.tsx b/app/react/portainer/templates/app-templates/useSortAndFilter.tsx index 01a02330d..cafe336e9 100644 --- a/app/react/portainer/templates/app-templates/useSortAndFilter.tsx +++ b/app/react/portainer/templates/app-templates/useSortAndFilter.tsx @@ -7,20 +7,19 @@ import { ListState } from './types'; export function useSortAndFilterTemplates( templates: Array, listState: ListState & { search: string }, - disabledTypes: Array = [], - fixedCategories: Array = [] + disabledTypes: Array = [] ) { const filterByCategory = useCallback( (item: TemplateViewModel) => { - if (!listState.category && !fixedCategories.length) { + if (!listState.category) { return true; } - return _.compact([...fixedCategories, listState.category]).every( - (category) => item.Categories.includes(category) + return _.compact([listState.category]).every((category) => + item.Categories.includes(category) ); }, - [fixedCategories, listState.category] + [listState.category] ); const filterBySearch = useCallback(