@kyverno/backstage-plugin-policy-reporter 2.6.0 → 2.8.0

package/dist/components/PolicyReportsTable/PolicyReportsTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyReportsTable.esm.js","sources":["../../../src/components/PolicyReportsTable/PolicyReportsTable.tsx"],"sourcesContent":["import {\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport { useMemo, useState } from 'react';\nimport {\n  Filter,\n  ListResult,\n  Pagination,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Drawer, makeStyles } from '@material-ui/core';\nimport Chip from '@material-ui/core/Chip';\nimport { StatusComponent } from '../StatusComponent';\nimport { SeverityComponent } from '../SeverityComponent';\nimport Launch from '@material-ui/icons/Launch';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { usePaginatedPolicies } from '../../hooks/usePaginatedPolicies';\nimport { PolicyReportsDrawerComponent } from '../PolicyReportsDrawerComponent';\n\ninterface PolicyReportsTableProps {\n  currentEnvironment: Environment;\n  filter: Filter;\n  title: string;\n  emptyContentText: string;\n  policyDocumentationUrl?: string;\n  enableSearch?: boolean;\n  pagination?: Partial<Pagination>;\n  pageSizeOptions?: number[];\n}\n\nexport const PolicyReportsTable = ({\n  title,\n  emptyContentText,\n  currentEnvironment,\n  filter,\n  policyDocumentationUrl,\n  enableSearch,\n  pagination,\n  pageSizeOptions,\n}: PolicyReportsTableProps) => {\n  const useStyles = makeStyles(theme => ({\n    empty: {\n      padding: theme.spacing(2),\n      display: 'flex',\n      justifyContent: 'center',\n    },\n  }));\n\n  const [search, setSearch] = useState<string | undefined>(undefined);\n  const mergedFilter = useMemo(\n    () => ({\n      ...filter,\n      search: search ?? filter.search, // override search if search state is defined\n    }),\n    [filter, search],\n  );\n\n  const [showDrawer, setShowDrawer] = useState<boolean>(false);\n  const [drawerContent, setDrawerContent] = useState<ListResult | undefined>(\n    undefined,\n  );\n  const classes = useStyles();\n\n  const columns: TableColumn<ListResult>[] = [\n    {\n      title: 'name',\n      field: 'name',\n    },\n    {\n      title: 'namespace',\n      field: 'namespace',\n    },\n    {\n      title: 'kind',\n      field: 'kind',\n    },\n    {\n      title: 'policy',\n      field: 'policy',\n      render: (listResult: ListResult) => {\n        // When policyDocumentationUrl is provided create link to the Policy section\n        if (policyDocumentationUrl)\n          return (\n            <Chip\n              label={listResult.policy}\n              component=\"a\"\n              target=\"_blank\"\n              href={`${policyDocumentationUrl}#${listResult.policy}`}\n              clickable\n              icon={<Launch fontSize=\"small\" />}\n            />\n          );\n\n        return <Chip label={listResult.policy} />;\n      },\n    },\n    {\n      title: 'rule',\n      field: 'rule',\n      render: (listResult: ListResult) => {\n        return <Chip label={listResult.rule} />;\n      },\n    },\n    {\n      title: 'status',\n      field: 'status',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <StatusComponent status={listResult.status} />;\n      },\n    },\n    {\n      title: 'severity',\n      field: 'severity',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <SeverityComponent severity={listResult.severity} />;\n      },\n    },\n  ];\n\n  const {\n    policies,\n    policiesError,\n    currentPage,\n    currentOffset,\n    setCurrentPage,\n    setCurrentOffset,\n    initialLoading,\n  } = usePaginatedPolicies(currentEnvironment, mergedFilter, pagination);\n\n  if (policiesError) return <ResponseErrorPanel error={policiesError} />;\n\n  // Return loading table\n  if (initialLoading)\n    return (\n      <Table\n        options={{ paging: false, padding: 'dense' }}\n        data={[]}\n        columns={columns}\n        isLoading\n        title={title}\n      />\n    );\n\n  return (\n    <>\n      <Drawer\n        anchor=\"right\"\n        open={showDrawer}\n        onClose={() => setShowDrawer(false)}\n      >\n        <PolicyReportsDrawerComponent content={drawerContent} />\n      </Drawer>\n      <Table\n        options={{\n          sorting: true,\n          padding: 'dense',\n          search: enableSearch,\n          pageSize: currentOffset,\n          pageSizeOptions: pageSizeOptions,\n        }}\n        onRowClick={(\n          event?: React.MouseEvent<Element, MouseEvent>,\n          rowData?: ListResult,\n        ) => {\n          event?.preventDefault();\n          setShowDrawer(true);\n          setDrawerContent(rowData);\n        }}\n        data={policies?.items ?? []}\n        columns={columns}\n        title={title}\n        totalCount={policies?.count}\n        page={currentPage}\n        onRowsPerPageChange={page => setCurrentOffset(page)}\n        onPageChange={page => setCurrentPage(page)}\n        emptyContent={<div className={classes.empty}>{emptyContentText}</div>}\n        onSearchChange={searchText => setSearch(searchText)}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PolicyReportsTable.esm.js","sources":["../../../src/components/PolicyReportsTable/PolicyReportsTable.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ListResult } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Drawer } from '@material-ui/core';\nimport { StatusComponent } from '../StatusComponent';\nimport { SeverityComponent } from '../SeverityComponent';\nimport { PolicyReportsDrawerComponent } from '../PolicyReportsDrawerComponent';\nimport {\n  CellText,\n  ColumnConfig,\n  Text,\n  useTable,\n  Table,\n  Cell,\n  Link,\n} from '@backstage/ui';\nimport { useApi } from '@backstage/frontend-plugin-api';\nimport { policyReporterApiRef } from '../../api';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\n\ninterface PolicyReportsTableProps {\n  emptyContentText: string;\n  policyDocumentationUrl?: string;\n}\n\nexport const PolicyReportsTable = ({\n  emptyContentText,\n  policyDocumentationUrl,\n}: PolicyReportsTableProps) => {\n  const policyReporterApi = useApi(policyReporterApiRef);\n  const { filter, environment } = usePolicyReportsFilters();\n  const search = filter.search;\n\n  const [drawerContent, setDrawerContent] = useState<ListResult | undefined>(\n    undefined,\n  );\n\n  const { tableProps } = useTable({\n    filter,\n    mode: 'offset',\n    search: search,\n    getData: async ({\n      offset,\n      pageSize,\n      filter: fetchFilter,\n      search: searchParam,\n    }) => {\n      // useTable provides:\n      // - offset: absolute record position (0, 20, 40, 60...)\n      // - pageSize: number of records per page (20)\n      //\n      // Policy Reporter API expects:\n      // - page: page number starting from 1 (1, 2, 3, 4...)\n      // - offset: number of results per page (this is actually pageSize)\n      //\n      // Example calculations:\n      // useTable offset=0,  pageSize=20 → page=1 (first 20 records)\n      // useTable offset=20, pageSize=20 → page=2 (records 21-40)\n      // useTable offset=40, pageSize=20 → page=3 (records 41-60)\n\n      // Convert useTable's absolute offset to 1-indexed page number\n      // Math.floor(0/20) + 1 = 1, Math.floor(20/20) + 1 = 2, etc.\n      const page = Math.floor(offset / pageSize) + 1;\n\n      const response = await policyReporterApi.getNamespacedResults({\n        query: {\n          environment: encodeURI(environment),\n          page: page,\n          offset: pageSize,\n          ...fetchFilter,\n          search: searchParam === '' ? undefined : searchParam,\n        },\n      });\n\n      const result = await response.json();\n\n      return {\n        data: result.items,\n        totalCount: result.count,\n      };\n    },\n  });\n\n  const columns: ColumnConfig<ListResult>[] = [\n    {\n      id: 'name',\n      label: 'Name',\n      isRowHeader: true,\n      cell: item => <CellText title={item.name} />,\n    },\n    {\n      id: 'namespace',\n      label: 'Namespace',\n      isRowHeader: true,\n      cell: item => <CellText title={item.namespace} />,\n    },\n    {\n      id: 'kind',\n      label: 'Kind',\n      isRowHeader: true,\n      cell: item => <CellText title={item.kind} />,\n    },\n    {\n      id: 'policy',\n      label: 'Policy',\n      isRowHeader: true,\n      cell: item => {\n        if (policyDocumentationUrl) {\n          return (\n            <Cell>\n              <Link\n                target=\"_blank\"\n                href={`${policyDocumentationUrl}#${item.policy}`}\n              >\n                {item.policy}\n              </Link>\n            </Cell>\n          );\n        }\n        return <CellText title={item.policy} />;\n      },\n    },\n    {\n      id: 'rule',\n      label: 'Rule',\n      isRowHeader: true,\n      cell: item => <CellText title={item.rule} />,\n    },\n    {\n      id: 'status',\n      label: 'Status',\n      isRowHeader: true,\n      cell: item => (\n        <Cell>\n          <StatusComponent status={item.status} />\n        </Cell>\n      ),\n    },\n    {\n      id: 'severity',\n      label: 'Severity',\n      isRowHeader: true,\n      cell: item => (\n        <Cell>\n          <SeverityComponent severity={item.severity} />\n        </Cell>\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <Drawer\n        anchor=\"right\"\n        open={Boolean(drawerContent)}\n        onClose={() => setDrawerContent(undefined)}\n      >\n        <PolicyReportsDrawerComponent content={drawerContent} />\n      </Drawer>\n      <Table\n        rowConfig={{\n          onClick: item => setDrawerContent(item),\n        }}\n        emptyState={\n          search ? (\n            <Text>No results match \"{search}\"</Text>\n          ) : (\n            <Text>{emptyContentText}</Text>\n          )\n        }\n        columnConfig={columns}\n        {...tableProps}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SearchField/SearchField.esm.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useDebounce } from 'react-use';
+import { SearchField as SearchField$1 } from '@backstage/ui';
+import { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters.esm.js';
+
+const SearchField = () => {
+  const { filter, updateFilter } = usePolicyReportsFilters();
+  const [inputValue, setInputValue] = useState(filter.search ?? "");
+  useEffect(() => {
+    setInputValue(filter.search ?? "");
+  }, [filter.search]);
+  useDebounce(
+    () => {
+      updateFilter({ search: inputValue || void 0 });
+    },
+    300,
+    [inputValue]
+  );
+  return /* @__PURE__ */ jsx(
+    SearchField$1,
+    {
+      "aria-label": "Search",
+      label: "Search",
+      value: inputValue,
+      onChange: setInputValue,
+      style: { width: "350px" }
+    }
+  );
+};
+
+export { SearchField };
+//# sourceMappingURL=SearchField.esm.js.map

package/dist/components/SearchField/SearchField.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDebounce } from 'react-use';\nimport { SearchField as BackstageSearchField } from '@backstage/ui';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\n\nexport const SearchField = () => {\n  const { filter, updateFilter } = usePolicyReportsFilters();\n  const [inputValue, setInputValue] = useState(filter.search ?? '');\n\n  // Sync input value when filter.search changes externally (back/forward nav).\n  useEffect(() => {\n    setInputValue(filter.search ?? '');\n  }, [filter.search]);\n\n  useDebounce(\n    () => {\n      updateFilter({ search: inputValue || undefined });\n    },\n    300,\n    [inputValue],\n  );\n\n  return (\n    <BackstageSearchField\n      aria-label=\"Search\"\n      label=\"Search\"\n      value={inputValue}\n      onChange={setInputValue}\n      style={{ width: '350px' }}\n    />\n  );\n};\n"],"names":["BackstageSearchField"],"mappings":";;;;;;AAKO,MAAM,cAAc,MAAM;AAC/B,EAAA,MAAM,EAAE,MAAA,EAAQ,YAAA,EAAa,GAAI,uBAAA,EAAwB;AACzD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,IAAI,QAAA,CAAS,MAAA,CAAO,UAAU,EAAE,CAAA;AAGhE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,MAAA,CAAO,UAAU,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,MAAA,CAAO,MAAM,CAAC,CAAA;AAElB,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,YAAA,CAAa,EAAE,MAAA,EAAQ,UAAA,IAAc,MAAA,EAAW,CAAA;AAAA,IAClD,CAAA;AAAA,IACA,GAAA;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,QAAA;AAAA,MACX,KAAA,EAAM,QAAA;AAAA,MACN,KAAA,EAAO,UAAA;AAAA,MACP,QAAA,EAAU,aAAA;AAAA,MACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ;AAAA,GAC1B;AAEJ;;;;"}

package/dist/components/SelectEnvironment/SelectEnvironment.esm.js

@@ -1,46 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import { makeStyles } from '@material-ui/core/styles';
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '@backstage/ui';
+import { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters.esm.js';
 
-const useStyles = makeStyles({
-  formControl: {
-    margin: 8,
-    minWidth: 150
-  },
-  hideDropdownArrow: {
-    "& .MuiSelect-icon-196.Mui-disabled": {
-      display: "none"
-    }
-  }
-});
-const SelectEnvironment = ({
-  environments,
-  currentEnvironment,
-  setCurrentEnvironment
-}) => {
-  const classes = useStyles();
-  const handleChange = (event) => {
-    setCurrentEnvironment(environments[Number(event.target.value)]);
+const SelectEnvironment = ({ environments }) => {
+  const { environment, setEnvironment } = usePolicyReportsFilters();
+  const options = environments.map((env) => ({
+    value: env.entityRef,
+    label: env.name
+  }));
+  const handleChange = (key) => {
+    if (key === null || Array.isArray(key)) return;
+    setEnvironment(key);
   };
-  const isSingleEnvironment = environments.length === 1;
-  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
-    /* @__PURE__ */ jsx(InputLabel, { id: "select-environment-label", children: "Environment" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        labelId: "select-environment-label",
-        id: "select-environment",
-        value: String(currentEnvironment.id),
-        onChange: handleChange,
-        disabled: isSingleEnvironment,
-        className: isSingleEnvironment ? classes.hideDropdownArrow : "",
-        children: environments.map((env) => /* @__PURE__ */ jsx(MenuItem, { value: env.id, children: env.name }, env.name))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Environment",
+      selectionMode: "single",
+      options,
+      value: environment,
+      onChange: handleChange
+    }
+  );
 };
 
 export { SelectEnvironment };

package/dist/components/SelectEnvironment/SelectEnvironment.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectEnvironment.esm.js","sources":["../../../src/components/SelectEnvironment/SelectEnvironment.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n  hideDropdownArrow: {\n    '& .MuiSelect-icon-196.Mui-disabled': {\n      display: 'none',\n    },\n  },\n});\n\ntype SelectEnvironmentProps = {\n  environments: Environment[];\n  currentEnvironment: Environment;\n  setCurrentEnvironment: (environment: Environment) => void;\n};\n\nexport const SelectEnvironment = ({\n  environments,\n  currentEnvironment,\n  setCurrentEnvironment,\n}: SelectEnvironmentProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: any) => {\n    setCurrentEnvironment(environments[Number(event.target.value)]);\n  };\n\n  // Check if there is more then 1 environment\n  const isSingleEnvironment = environments.length === 1;\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-environment-label\">Environment</InputLabel>\n      <Select\n        labelId=\"select-environment-label\"\n        id=\"select-environment\"\n        value={String(currentEnvironment.id)}\n        onChange={handleChange}\n        disabled={isSingleEnvironment}\n        className={isSingleEnvironment ? classes.hideDropdownArrow : ''}\n      >\n        {environments.map(env => (\n          <MenuItem key={env.name} value={env.id}>\n            {env.name}\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,oCAAsC,EAAA;AAAA,MACpC,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAQM,MAAM,oBAAoB,CAAC;AAAA,EAChC,YAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,IAAA,qBAAA,CAAsB,aAAa,MAAO,CAAA,KAAA,CAAM,MAAO,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,GAChE;AAGA,EAAM,MAAA,mBAAA,GAAsB,aAAa,MAAW,KAAA,CAAA;AAEpD,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,0BAAA,EAA2B,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBACrD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,0BAAA;AAAA,QACR,EAAG,EAAA,oBAAA;AAAA,QACH,KAAA,EAAO,MAAO,CAAA,kBAAA,CAAmB,EAAE,CAAA;AAAA,QACnC,QAAU,EAAA,YAAA;AAAA,QACV,QAAU,EAAA,mBAAA;AAAA,QACV,SAAA,EAAW,mBAAsB,GAAA,OAAA,CAAQ,iBAAoB,GAAA,EAAA;AAAA,QAE5D,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAChB,GAAA,qBAAA,GAAA,CAAC,QAAwB,EAAA,EAAA,KAAA,EAAO,GAAI,CAAA,EAAA,EACjC,QAAI,EAAA,GAAA,CAAA,IAAA,EAAA,EADQ,GAAI,CAAA,IAEnB,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectEnvironment.esm.js","sources":["../../../src/components/SelectEnvironment/SelectEnvironment.tsx"],"sourcesContent":["import { Select } from '@backstage/ui';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Key } from 'react';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\n\ntype SelectEnvironmentProps = {\n  environments: Environment[];\n};\n\nexport const SelectEnvironment = ({ environments }: SelectEnvironmentProps) => {\n  const { environment, setEnvironment } = usePolicyReportsFilters();\n\n  const options = environments.map(env => ({\n    value: env.entityRef,\n    label: env.name,\n  }));\n\n  const handleChange = (key: Key | Key[] | null) => {\n    if (key === null || Array.isArray(key)) return;\n    setEnvironment(key as string);\n  };\n\n  return (\n    <Select\n      label=\"Environment\"\n      selectionMode=\"single\"\n      options={options}\n      value={environment}\n      onChange={handleChange}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AASO,MAAM,iBAAA,GAAoB,CAAC,EAAE,YAAA,EAAa,KAA8B;AAC7E,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAe,GAAI,uBAAA,EAAwB;AAEhE,EAAA,MAAM,OAAA,GAAU,YAAA,CAAa,GAAA,CAAI,CAAA,GAAA,MAAQ;AAAA,IACvC,OAAO,GAAA,CAAI,SAAA;AAAA,IACX,OAAO,GAAA,CAAI;AAAA,GACb,CAAE,CAAA;AAEF,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,KAA4B;AAChD,IAAA,IAAI,GAAA,KAAQ,IAAA,IAAQ,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AACxC,IAAA,cAAA,CAAe,GAAa,CAAA;AAAA,EAC9B,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,aAAA;AAAA,MACN,aAAA,EAAc,QAAA;AAAA,MACd,OAAA;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACP,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/dist/components/SelectNamespace/SelectNamespace.esm.js

@@ -1,50 +1,40 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import { makeStyles } from '@material-ui/core/styles';
-import { Checkbox, ListItemText } from '@material-ui/core';
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '@backstage/ui';
+import { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters.esm.js';
+import { useNamespaces } from '../../hooks/useNamespaces.esm.js';
 
-const useStyles = makeStyles({
-  formControl: {
-    margin: 8,
-    minWidth: 150
-  }
-});
-const SelectNamespace = ({
-  currentNamespaces,
-  setNamespaces,
-  availableNamespaces
-}) => {
-  const classes = useStyles();
-  const handleChange = (event) => {
-    setNamespaces(event.target.value);
+const SelectNamespace = () => {
+  const { filter, updateFilter, environment } = usePolicyReportsFilters();
+  const { namespaces: availableNamespaces } = useNamespaces(environment);
+  const options = availableNamespaces.map((ns) => ({ value: ns, label: ns }));
+  const handleChange = (key) => {
+    if (key === null) {
+      updateFilter({ namespaces: [] });
+      return;
+    }
+    if (!Array.isArray(key)) {
+      updateFilter({
+        namespaces: availableNamespaces.includes(key) ? [key] : []
+      });
+      return;
+    }
+    const filtered = key.filter(
+      (item) => availableNamespaces.includes(item)
+    );
+    updateFilter({ namespaces: filtered });
   };
-  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
-    /* @__PURE__ */ jsx(InputLabel, { id: "select-namespace-label", shrink: true, children: "Namespaces" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        labelId: "select-namespace-label",
-        id: "select-namespace",
-        multiple: true,
-        displayEmpty: true,
-        value: currentNamespaces,
-        renderValue: (selected) => {
-          if (selected.length === 0) {
-            return "All";
-          }
-          return selected.join(", ");
-        },
-        onChange: handleChange,
-        children: availableNamespaces.map((namespace) => /* @__PURE__ */ jsxs(MenuItem, { value: namespace, children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: currentNamespaces.includes(namespace) }),
-          /* @__PURE__ */ jsx(ListItemText, { primary: namespace })
-        ] }, namespace))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Namespace",
+      selectionMode: "multiple",
+      options,
+      value: filter.namespaces ?? [],
+      onChange: handleChange,
+      placeholder: "All",
+      style: { width: 200 }
+    }
+  );
 };
 
 export { SelectNamespace };

package/dist/components/SelectNamespace/SelectNamespace.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNamespace.esm.js","sources":["../../../src/components/SelectNamespace/SelectNamespace.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Checkbox, ListItemText } from '@material-ui/core';\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n});\n\nexport type SelectNamespaceProps = {\n  currentNamespaces: string[];\n  setNamespaces: (namespaces: string[]) => void;\n  availableNamespaces: string[];\n};\n\nexport const SelectNamespace = ({\n  currentNamespaces,\n  setNamespaces,\n  availableNamespaces,\n}: SelectNamespaceProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: any) => {\n    setNamespaces(event.target.value);\n  };\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-namespace-label\" shrink>\n        Namespaces\n      </InputLabel>\n      <Select\n        labelId=\"select-namespace-label\"\n        id=\"select-namespace\"\n        multiple\n        displayEmpty\n        value={currentNamespaces}\n        renderValue={selected => {\n          if ((selected as string[]).length === 0) {\n            return 'All';\n          }\n\n          return (selected as string[]).join(', ');\n        }}\n        onChange={handleChange}\n      >\n        {availableNamespaces.map(namespace => (\n          <MenuItem key={namespace} value={namespace}>\n            <Checkbox checked={currentNamespaces.includes(namespace)} />\n            <ListItemText primary={namespace} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAQM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,iBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAClC;AAEA,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,wBAAyB,EAAA,MAAA,EAAM,MAAC,QAE/C,EAAA,YAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,wBAAA;AAAA,QACR,EAAG,EAAA,kBAAA;AAAA,QACH,QAAQ,EAAA,IAAA;AAAA,QACR,YAAY,EAAA,IAAA;AAAA,QACZ,KAAO,EAAA,iBAAA;AAAA,QACP,aAAa,CAAY,QAAA,KAAA;AACvB,UAAK,IAAA,QAAA,CAAsB,WAAW,CAAG,EAAA;AACvC,YAAO,OAAA,KAAA;AAAA;AAGT,UAAQ,OAAA,QAAA,CAAsB,KAAK,IAAI,CAAA;AAAA,SACzC;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QAET,8BAAoB,GAAI,CAAA,CAAA,SAAA,qBACtB,IAAA,CAAA,QAAA,EAAA,EAAyB,OAAO,SAC/B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,iBAAkB,CAAA,QAAA,CAAS,SAAS,CAAG,EAAA,CAAA;AAAA,0BAC1D,GAAA,CAAC,YAAa,EAAA,EAAA,OAAA,EAAS,SAAW,EAAA;AAAA,SAAA,EAAA,EAFrB,SAGf,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectNamespace.esm.js","sources":["../../../src/components/SelectNamespace/SelectNamespace.tsx"],"sourcesContent":["import { Select } from '@backstage/ui';\nimport { Key } from 'react';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\nimport { useNamespaces } from '../../hooks/useNamespaces';\n\nexport const SelectNamespace = () => {\n  const { filter, updateFilter, environment } = usePolicyReportsFilters();\n  const { namespaces: availableNamespaces } = useNamespaces(environment);\n\n  const options = availableNamespaces.map(ns => ({ value: ns, label: ns }));\n\n  const handleChange = (key: Key | Key[] | null) => {\n    if (key === null) {\n      updateFilter({ namespaces: [] });\n      return;\n    }\n\n    if (!Array.isArray(key)) {\n      updateFilter({\n        namespaces: availableNamespaces.includes(key as string)\n          ? [key as string]\n          : [],\n      });\n      return;\n    }\n\n    const filtered = key.filter((item): item is string =>\n      availableNamespaces.includes(item as string),\n    );\n    updateFilter({ namespaces: filtered });\n  };\n\n  return (\n    <Select\n      label=\"Namespace\"\n      selectionMode=\"multiple\"\n      options={options}\n      value={filter.namespaces ?? []}\n      onChange={handleChange}\n      placeholder=\"All\"\n      style={{ width: 200 }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,EAAE,MAAA,EAAQ,YAAA,EAAc,WAAA,KAAgB,uBAAA,EAAwB;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,mBAAA,EAAoB,GAAI,cAAc,WAAW,CAAA;AAErE,EAAA,MAAM,OAAA,GAAU,oBAAoB,GAAA,CAAI,CAAA,EAAA,MAAO,EAAE,KAAA,EAAO,EAAA,EAAI,KAAA,EAAO,EAAA,EAAG,CAAE,CAAA;AAExE,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,KAA4B;AAChD,IAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,MAAA,YAAA,CAAa,EAAE,UAAA,EAAY,EAAC,EAAG,CAAA;AAC/B,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AACvB,MAAA,YAAA,CAAa;AAAA,QACX,UAAA,EAAY,oBAAoB,QAAA,CAAS,GAAa,IAClD,CAAC,GAAa,IACd;AAAC,OACN,CAAA;AACD,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WAAW,GAAA,CAAI,MAAA;AAAA,MAAO,CAAC,IAAA,KAC3B,mBAAA,CAAoB,QAAA,CAAS,IAAc;AAAA,KAC7C;AACA,IAAA,YAAA,CAAa,EAAE,UAAA,EAAY,QAAA,EAAU,CAAA;AAAA,EACvC,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,WAAA;AAAA,MACN,aAAA,EAAc,UAAA;AAAA,MACd,OAAA;AAAA,MACA,KAAA,EAAO,MAAA,CAAO,UAAA,IAAc,EAAC;AAAA,MAC7B,QAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,EAAE,KAAA,EAAO,GAAA;AAAI;AAAA,GACtB;AAEJ;;;;"}

package/dist/components/SelectSeverity/SelectSeverity.esm.js

@@ -1,57 +1,46 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import { makeStyles } from '@material-ui/core/styles';
-import { Checkbox, ListItemText } from '@material-ui/core';
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '@backstage/ui';
+import { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters.esm.js';
 
-const SEVERITY_VALUES = [
-  "unknown",
-  "low",
-  "medium",
-  "high",
-  "critical",
-  "info"
+const SEVERITY_OPTIONS = [
+  { value: "unknown", label: "Unknown" },
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
+  { value: "critical", label: "Critical" },
+  { value: "info", label: "Info" }
 ];
-const useStyles = makeStyles({
-  formControl: {
-    margin: 8,
-    minWidth: 150
-  }
-});
-const SelectSeverity = ({
-  currentSeverity,
-  setSeverity
-}) => {
-  const classes = useStyles();
-  const handleChange = (event) => {
-    setSeverity(event.target.value);
+const validSeverities = SEVERITY_OPTIONS.map((option) => option.value);
+const SelectSeverity = () => {
+  const { filter, updateFilter } = usePolicyReportsFilters();
+  const handleChange = (key) => {
+    if (key === null) {
+      updateFilter({ severities: [] });
+      return;
+    }
+    if (!Array.isArray(key)) {
+      updateFilter({
+        severities: validSeverities.includes(key) ? [key] : []
+      });
+      return;
+    }
+    const filteredSeverities = key.filter(
+      (item) => validSeverities.includes(item)
+    );
+    updateFilter({ severities: filteredSeverities });
   };
-  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
-    /* @__PURE__ */ jsx(InputLabel, { id: "select-severity-label", shrink: true, children: "Severity" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        labelId: "select-severity-label",
-        id: "select-severity",
-        multiple: true,
-        displayEmpty: true,
-        value: currentSeverity,
-        renderValue: (selected) => {
-          if (selected.length === 0) {
-            return "All";
-          }
-          return selected.join(", ");
-        },
-        onChange: handleChange,
-        children: SEVERITY_VALUES.map((severity) => /* @__PURE__ */ jsxs(MenuItem, { value: severity, children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: currentSeverity.includes(severity) }),
-          /* @__PURE__ */ jsx(ListItemText, { primary: severity })
-        ] }, severity))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Severity",
+      selectionMode: "multiple",
+      options: SEVERITY_OPTIONS,
+      value: filter.severities ?? [],
+      onChange: handleChange,
+      placeholder: "All",
+      style: { width: 200 }
+    }
+  );
 };
 
 export { SelectSeverity };

package/dist/components/SelectSeverity/SelectSeverity.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSeverity.esm.js","sources":["../../../src/components/SelectSeverity/SelectSeverity.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Checkbox, ListItemText } from '@material-ui/core';\n\n// This could be moved into the common package if needed in multiple places\nconst SEVERITY_VALUES: Severity[] = [\n  'unknown',\n  'low',\n  'medium',\n  'high',\n  'critical',\n  'info',\n];\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n});\n\nexport type SelectSeverityProps = {\n  currentSeverity: Severity[];\n  setSeverity: (Status: Severity[]) => void;\n};\n\nexport const SelectSeverity = ({\n  currentSeverity: currentSeverity,\n  setSeverity: setSeverity,\n}: SelectSeverityProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setSeverity(event.target.value as Severity[]);\n  };\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-severity-label\" shrink>\n        Severity\n      </InputLabel>\n      <Select\n        labelId=\"select-severity-label\"\n        id=\"select-severity\"\n        multiple\n        displayEmpty\n        value={currentSeverity}\n        renderValue={selected => {\n          if ((selected as Severity[]).length === 0) {\n            return 'All';\n          }\n\n          return (selected as Severity[]).join(', ');\n        }}\n        onChange={handleChange}\n      >\n        {SEVERITY_VALUES.map(severity => (\n          <MenuItem key={severity} value={severity}>\n            <Checkbox checked={currentSeverity.includes(severity)} />\n            <ListItemText primary={severity} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,eAA8B,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOM,MAAM,iBAAiB,CAAC;AAAA,EAC7B,eAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiD,KAAA;AACrE,IAAY,WAAA,CAAA,KAAA,CAAM,OAAO,KAAmB,CAAA;AAAA,GAC9C;AAEA,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,uBAAwB,EAAA,MAAA,EAAM,MAAC,QAE9C,EAAA,UAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,uBAAA;AAAA,QACR,EAAG,EAAA,iBAAA;AAAA,QACH,QAAQ,EAAA,IAAA;AAAA,QACR,YAAY,EAAA,IAAA;AAAA,QACZ,KAAO,EAAA,eAAA;AAAA,QACP,aAAa,CAAY,QAAA,KAAA;AACvB,UAAK,IAAA,QAAA,CAAwB,WAAW,CAAG,EAAA;AACzC,YAAO,OAAA,KAAA;AAAA;AAGT,UAAQ,OAAA,QAAA,CAAwB,KAAK,IAAI,CAAA;AAAA,SAC3C;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QAET,0BAAgB,GAAI,CAAA,CAAA,QAAA,qBAClB,IAAA,CAAA,QAAA,EAAA,EAAwB,OAAO,QAC9B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,eAAgB,CAAA,QAAA,CAAS,QAAQ,CAAG,EAAA,CAAA;AAAA,0BACvD,GAAA,CAAC,YAAa,EAAA,EAAA,OAAA,EAAS,QAAU,EAAA;AAAA,SAAA,EAAA,EAFpB,QAGf,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectSeverity.esm.js","sources":["../../../src/components/SelectSeverity/SelectSeverity.tsx"],"sourcesContent":["import { Select } from '@backstage/ui';\nimport { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Key } from 'react';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\n\nconst SEVERITY_OPTIONS: { value: Severity; label: string }[] = [\n  { value: 'unknown', label: 'Unknown' },\n  { value: 'low', label: 'Low' },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high', label: 'High' },\n  { value: 'critical', label: 'Critical' },\n  { value: 'info', label: 'Info' },\n];\n\nconst validSeverities = SEVERITY_OPTIONS.map(option => option.value);\n\nexport const SelectSeverity = () => {\n  const { filter, updateFilter } = usePolicyReportsFilters();\n\n  const handleChange = (key: Key | Key[] | null) => {\n    if (key === null) {\n      updateFilter({ severities: [] });\n      return;\n    }\n\n    if (!Array.isArray(key)) {\n      updateFilter({\n        severities: validSeverities.includes(key as Severity)\n          ? [key as Severity]\n          : [],\n      });\n      return;\n    }\n\n    const filteredSeverities = key.filter((item): item is Severity =>\n      validSeverities.includes(item as Severity),\n    );\n    updateFilter({ severities: filteredSeverities });\n  };\n\n  return (\n    <Select\n      label=\"Severity\"\n      selectionMode=\"multiple\"\n      options={SEVERITY_OPTIONS}\n      value={filter.severities ?? []}\n      onChange={handleChange}\n      placeholder=\"All\"\n      style={{ width: 200 }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,gBAAA,GAAyD;AAAA,EAC7D,EAAE,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU;AAAA,EACrC,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAM;AAAA,EAC7B,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,QAAA,EAAS;AAAA,EACnC,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAO;AAAA,EAC/B,EAAE,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,UAAA,EAAW;AAAA,EACvC,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA;AAC1B,CAAA;AAEA,MAAM,eAAA,GAAkB,gBAAA,CAAiB,GAAA,CAAI,CAAA,MAAA,KAAU,OAAO,KAAK,CAAA;AAE5D,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,MAAA,EAAQ,YAAA,EAAa,GAAI,uBAAA,EAAwB;AAEzD,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,KAA4B;AAChD,IAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,MAAA,YAAA,CAAa,EAAE,UAAA,EAAY,EAAC,EAAG,CAAA;AAC/B,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AACvB,MAAA,YAAA,CAAa;AAAA,QACX,UAAA,EAAY,gBAAgB,QAAA,CAAS,GAAe,IAChD,CAAC,GAAe,IAChB;AAAC,OACN,CAAA;AACD,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,qBAAqB,GAAA,CAAI,MAAA;AAAA,MAAO,CAAC,IAAA,KACrC,eAAA,CAAgB,QAAA,CAAS,IAAgB;AAAA,KAC3C;AACA,IAAA,YAAA,CAAa,EAAE,UAAA,EAAY,kBAAA,EAAoB,CAAA;AAAA,EACjD,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,UAAA;AAAA,MACN,aAAA,EAAc,UAAA;AAAA,MACd,OAAA,EAAS,gBAAA;AAAA,MACT,KAAA,EAAO,MAAA,CAAO,UAAA,IAAc,EAAC;AAAA,MAC7B,QAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,EAAE,KAAA,EAAO,GAAA;AAAI;AAAA,GACtB;AAEJ;;;;"}

package/dist/components/SelectStatus/SelectStatus.esm.js

@@ -1,57 +1,46 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import { makeStyles } from '@material-ui/core/styles';
-import { Checkbox, ListItemText } from '@material-ui/core';
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '@backstage/ui';
+import { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters.esm.js';
 
-const STATUS_VALUES = [
-  "fail",
-  "skip",
-  "pass",
-  "warn",
-  "error",
-  "summary"
+const STATUS_OPTIONS = [
+  { value: "fail", label: "Fail" },
+  { value: "skip", label: "Skip" },
+  { value: "pass", label: "Pass" },
+  { value: "warn", label: "Warn" },
+  { value: "error", label: "Error" },
+  { value: "summary", label: "Summary" }
 ];
-const useStyles = makeStyles({
-  formControl: {
-    margin: 8,
-    minWidth: 150
-  }
-});
-const SelectStatus = ({
-  currentStatus,
-  setStatus
-}) => {
-  const classes = useStyles();
-  const handleChange = (event) => {
-    setStatus(event.target.value);
+const validStatuses = STATUS_OPTIONS.map((option) => option.value);
+const SelectStatus = () => {
+  const { filter, updateFilter } = usePolicyReportsFilters();
+  const handleChange = (key) => {
+    if (key === null) {
+      updateFilter({ status: [] });
+      return;
+    }
+    if (!Array.isArray(key)) {
+      updateFilter({
+        status: validStatuses.includes(key) ? [key] : []
+      });
+      return;
+    }
+    const filteredStatuses = key.filter(
+      (item) => validStatuses.includes(item)
+    );
+    updateFilter({ status: filteredStatuses });
   };
-  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
-    /* @__PURE__ */ jsx(InputLabel, { id: "select-status-label", shrink: true, children: "Status" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        labelId: "select-status-label",
-        id: "select-status",
-        multiple: true,
-        displayEmpty: true,
-        value: currentStatus,
-        renderValue: (selected) => {
-          if (selected.length === 0) {
-            return "All";
-          }
-          return selected.join(", ");
-        },
-        onChange: handleChange,
-        children: STATUS_VALUES.map((status) => /* @__PURE__ */ jsxs(MenuItem, { value: status, children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: currentStatus.includes(status) }),
-          /* @__PURE__ */ jsx(ListItemText, { primary: status })
-        ] }, status))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Status",
+      selectionMode: "multiple",
+      options: STATUS_OPTIONS,
+      value: filter.status ?? [],
+      onChange: handleChange,
+      placeholder: "All",
+      style: { width: 200 }
+    }
+  );
 };
 
 export { SelectStatus };

package/dist/components/SelectStatus/SelectStatus.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.esm.js","sources":["../../../src/components/SelectStatus/SelectStatus.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { Status } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Checkbox, ListItemText } from '@material-ui/core';\n\n// This could be moved into the common package if needed in multiple places\nconst STATUS_VALUES: Status[] = [\n  'fail',\n  'skip',\n  'pass',\n  'warn',\n  'error',\n  'summary',\n];\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n});\n\nexport type SelectStatusProps = {\n  currentStatus: Status[];\n  setStatus: (Status: Status[]) => void;\n};\n\nexport const SelectStatus = ({\n  currentStatus,\n  setStatus,\n}: SelectStatusProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setStatus(event.target.value as Status[]);\n  };\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-status-label\" shrink>\n        Status\n      </InputLabel>\n      <Select\n        labelId=\"select-status-label\"\n        id=\"select-status\"\n        multiple\n        displayEmpty\n        value={currentStatus}\n        renderValue={selected => {\n          if ((selected as Status[]).length === 0) {\n            return 'All';\n          }\n\n          return (selected as Status[]).join(', ');\n        }}\n        onChange={handleChange}\n      >\n        {STATUS_VALUES.map(status => (\n          <MenuItem key={status} value={status}>\n            <Checkbox checked={currentStatus.includes(status)} />\n            <ListItemText primary={status} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,aAA0B,GAAA;AAAA,EAC9B,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOM,MAAM,eAAe,CAAC;AAAA,EAC3B,aAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiD,KAAA;AACrE,IAAU,SAAA,CAAA,KAAA,CAAM,OAAO,KAAiB,CAAA;AAAA,GAC1C;AAEA,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,qBAAsB,EAAA,MAAA,EAAM,MAAC,QAE5C,EAAA,QAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,qBAAA;AAAA,QACR,EAAG,EAAA,eAAA;AAAA,QACH,QAAQ,EAAA,IAAA;AAAA,QACR,YAAY,EAAA,IAAA;AAAA,QACZ,KAAO,EAAA,aAAA;AAAA,QACP,aAAa,CAAY,QAAA,KAAA;AACvB,UAAK,IAAA,QAAA,CAAsB,WAAW,CAAG,EAAA;AACvC,YAAO,OAAA,KAAA;AAAA;AAGT,UAAQ,OAAA,QAAA,CAAsB,KAAK,IAAI,CAAA;AAAA,SACzC;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QAET,wBAAc,GAAI,CAAA,CAAA,MAAA,qBAChB,IAAA,CAAA,QAAA,EAAA,EAAsB,OAAO,MAC5B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,aAAc,CAAA,QAAA,CAAS,MAAM,CAAG,EAAA,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAa,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA;AAAA,SAAA,EAAA,EAFlB,MAGf,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectStatus.esm.js","sources":["../../../src/components/SelectStatus/SelectStatus.tsx"],"sourcesContent":["import { Status } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Select } from '@backstage/ui';\nimport { Key } from 'react';\nimport { usePolicyReportsFilters } from '../../hooks/usePolicyReportsFilters';\n\nconst STATUS_OPTIONS: { value: Status; label: string }[] = [\n  { value: 'fail', label: 'Fail' },\n  { value: 'skip', label: 'Skip' },\n  { value: 'pass', label: 'Pass' },\n  { value: 'warn', label: 'Warn' },\n  { value: 'error', label: 'Error' },\n  { value: 'summary', label: 'Summary' },\n];\n\nconst validStatuses = STATUS_OPTIONS.map(option => option.value);\n\nexport const SelectStatus = () => {\n  const { filter, updateFilter } = usePolicyReportsFilters();\n\n  const handleChange = (key: Key | Key[] | null) => {\n    if (key === null) {\n      updateFilter({ status: [] });\n      return;\n    }\n\n    if (!Array.isArray(key)) {\n      updateFilter({\n        status: validStatuses.includes(key as Status) ? [key as Status] : [],\n      });\n      return;\n    }\n\n    const filteredStatuses = key.filter((item): item is Status =>\n      validStatuses.includes(item as Status),\n    );\n    updateFilter({ status: filteredStatuses });\n  };\n\n  return (\n    <Select\n      label=\"Status\"\n      selectionMode=\"multiple\"\n      options={STATUS_OPTIONS}\n      value={filter.status ?? []}\n      onChange={handleChange}\n      placeholder=\"All\"\n      style={{ width: 200 }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,cAAA,GAAqD;AAAA,EACzD,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAO;AAAA,EAC/B,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAO;AAAA,EAC/B,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAO;AAAA,EAC/B,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAO;AAAA,EAC/B,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,OAAA,EAAQ;AAAA,EACjC,EAAE,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,SAAA;AAC7B,CAAA;AAEA,MAAM,aAAA,GAAgB,cAAA,CAAe,GAAA,CAAI,CAAA,MAAA,KAAU,OAAO,KAAK,CAAA;AAExD,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,MAAA,EAAQ,YAAA,EAAa,GAAI,uBAAA,EAAwB;AAEzD,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,KAA4B;AAChD,IAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,MAAA,YAAA,CAAa,EAAE,MAAA,EAAQ,EAAC,EAAG,CAAA;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AACvB,MAAA,YAAA,CAAa;AAAA,QACX,MAAA,EAAQ,cAAc,QAAA,CAAS,GAAa,IAAI,CAAC,GAAa,IAAI;AAAC,OACpE,CAAA;AACD,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,GAAA,CAAI,MAAA;AAAA,MAAO,CAAC,IAAA,KACnC,aAAA,CAAc,QAAA,CAAS,IAAc;AAAA,KACvC;AACA,IAAA,YAAA,CAAa,EAAE,MAAA,EAAQ,gBAAA,EAAkB,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,aAAA,EAAc,UAAA;AAAA,MACd,OAAA,EAAS,cAAA;AAAA,MACT,KAAA,EAAO,MAAA,CAAO,MAAA,IAAU,EAAC;AAAA,MACzB,QAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,EAAE,KAAA,EAAO,GAAA;AAAI;AAAA,GACtB;AAEJ;;;;"}