Add possibility to add and remove multiple categories

headlamp-k8s · Apr 30, 2024 · 4d21afc · 4d21afc
1 parent cdf19f7
commit 4d21afc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/frontend/src/components/common/CRDCategoriesList.tsx b/frontend/src/components/common/CRDCategoriesList.tsx
@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import CRD from '../../lib/k8s/crd';
-import { removeCategoryFilter,setCategoryFilter } from '../../redux/filterSlice'; // Import the action to set the category filter
+import { removeCategoryFilter, setCategoryFilter } from '../../redux/filterSlice'; // Import the action to set the category filter
 import { useTypedSelector } from '../../redux/reducers/reducers'; // Import the hook to access the Redux store's state
 
 // Define CRDCategoriesList component
@@ -57,9 +57,6 @@ export function CRDCategoriesList() {
  options={categories}
  isOptionEqualToValue={(option, value) => value.includes(option)}
  getOptionLabel={option => option.toString()}
- /*
- isOptionEqualToValue={filter.categories.some(shit => filteredCategories.includes(shit))}
-*/
  renderOption={(props, option, { selected }) => (
  <li {...props}>
  <Checkbox checked={selected} />

diff --git a/frontend/src/components/common/SectionFilterHeader.tsx b/frontend/src/components/common/SectionFilterHeader.tsx
@@ -18,13 +18,15 @@ import SectionHeader, { SectionHeaderProps } from './SectionHeader';
 
 export interface SectionFilterHeaderProps extends SectionHeaderProps {
  noNamespaceFilter?: boolean;
+ noCategoriesFilter?: boolean;
  noSearch?: boolean;
  preRenderFromFilterActions?: React.ReactNode[];
 }
 
 export default function SectionFilterHeader(props: SectionFilterHeaderProps) {
  const {
  noNamespaceFilter = false,
+ noCategoriesFilter = true,
  noSearch = false,
  actions: propsActions = [],
  preRenderFromFilterActions,
@@ -35,6 +37,7 @@ export default function SectionFilterHeader(props: SectionFilterHeaderProps) {
  const location = useLocation();
  const history = useHistory();
  const hasNamespaceFilters = !noNamespaceFilter && filter.namespaces.size > 0;
+ const hasCategoriesFilters = !noCategoriesFilter && filter.categories.length > 0;
  const hasSearch = !noSearch && !!filter.search;
  const { t } = useTranslation();
 
@@ -48,7 +51,7 @@ export default function SectionFilterHeader(props: SectionFilterHeaderProps) {
  // To solve this, we keep track of whether the filter has been shown by the user, in which case we
  // don't hide it even when the search is empty.
  const [showFilters, setShowFilters] = React.useState<{ show: boolean; userTriggered: boolean }>({
- show: hasNamespaceFilters || hasSearch,
+ show: hasNamespaceFilters || hasSearch || hasCategoriesFilters,
  userTriggered: false,
  });
 
@@ -130,9 +133,12 @@ export default function SectionFilterHeader(props: SectionFilterHeaderProps) {
  <NamespacesAutocomplete />
  </Grid>
  )}
- <Grid item>
- <CRDCategoriesList />
- </Grid>
+ {!noCategoriesFilter && (
+ <Grid item>
+ <CRDCategoriesList />
+ </Grid>
+ )}
+
  <Grid item>
  <TextField
  id="standard-search"

diff --git a/frontend/src/components/crd/List.tsx b/frontend/src/components/crd/List.tsx
@@ -10,7 +10,8 @@ export default function CustomResourceDefinitionList() {
  <ResourceListView
  title={t('glossary|Custom Resources')}
  headerProps={{
- noNamespaceFilter: false,
+ noNamespaceFilter: true,
+ noCategoriesFilter: false,
  }}
  resourceClass={CRD}
  columns={[