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

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;;;;"}

package/dist/components/SeverityComponent/SeverityComponent.esm.js

@@ -1,41 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import Chip from '@material-ui/core/Chip';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import { Badge } from '@backstage/ui';
 
-const useStyles = makeStyles((theme) => ({
-  error: {
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText
-  },
-  success: {
-    backgroundColor: theme.palette.success.main,
-    color: theme.palette.success.contrastText
-  },
-  warning: {
-    backgroundColor: theme.palette.warning.main,
-    color: theme.palette.warning.contrastText
-  },
-  info: {
-    backgroundColor: theme.palette.info.main,
-    color: theme.palette.info.contrastText
-  }
-}));
+const severityStyles = {
+  high: { backgroundColor: "var(--bui-bg-danger)" },
+  critical: { backgroundColor: "var(--bui-bg-danger)" },
+  medium: { backgroundColor: "var(--bui-bg-warning)" },
+  low: { backgroundColor: "var(--bui-bg-success)" },
+  info: { backgroundColor: "var(--bui-bg-info)" },
+  unknown: {}
+};
 const SeverityComponent = ({ severity }) => {
-  const classes = useStyles();
-  switch (severity) {
-    case "high":
-      return /* @__PURE__ */ jsx(Chip, { label: severity, className: classes.error });
-    case "low":
-      return /* @__PURE__ */ jsx(Chip, { label: severity, className: classes.success });
-    case "medium":
-      return /* @__PURE__ */ jsx(Chip, { label: severity, className: classes.warning });
-    case "info":
-      return /* @__PURE__ */ jsx(Chip, { label: severity, className: classes.info });
-    case "critical":
-      return /* @__PURE__ */ jsx(Chip, { label: severity, className: classes.error });
-    default:
-      return null;
-  }
+  if (!severity) return null;
+  return /* @__PURE__ */ jsx(Badge, { style: severityStyles[severity], children: severity });
 };
 
 export { SeverityComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"SeverityComponent.esm.js","sources":["../../../src/components/SeverityComponent/SeverityComponent.tsx"],"sourcesContent":["import Chip from '@material-ui/core/Chip';\nimport { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\n\nconst useStyles = makeStyles((theme: any) => ({\n  error: {\n    backgroundColor: theme.palette.error.main,\n    color: theme.palette.error.contrastText,\n  },\n  success: {\n    backgroundColor: theme.palette.success.main,\n    color: theme.palette.success.contrastText,\n  },\n  warning: {\n    backgroundColor: theme.palette.warning.main,\n    color: theme.palette.warning.contrastText,\n  },\n  info: {\n    backgroundColor: theme.palette.info.main,\n    color: theme.palette.info.contrastText,\n  },\n}));\n\ntype SeverityComponentProps = {\n  severity: Severity | null;\n};\n\nexport const SeverityComponent = ({ severity }: SeverityComponentProps) => {\n  const classes = useStyles();\n  switch (severity) {\n    case 'high':\n      return <Chip label={severity} className={classes.error} />;\n    case 'low':\n      return <Chip label={severity} className={classes.success} />;\n    case 'medium':\n      return <Chip label={severity} className={classes.warning} />;\n    case 'info':\n      return <Chip label={severity} className={classes.info} />;\n    case 'critical':\n      return <Chip label={severity} className={classes.error} />;\n    default:\n      return null;\n  }\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAA,GAAY,UAAW,CAAA,CAAC,KAAgB,MAAA;AAAA,EAC5C,KAAO,EAAA;AAAA,IACL,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,IAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA;AAAA,GAC7B;AAAA,EACA,OAAS,EAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,IACvC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA,GAC/B;AAAA,EACA,OAAS,EAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,IACvC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA,GAC/B;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,IAAA;AAAA,IACpC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAE9B,CAAE,CAAA,CAAA;AAMK,MAAM,iBAAoB,GAAA,CAAC,EAAE,QAAA,EAAuC,KAAA;AACzE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,QAAQ,QAAU;AAAA,IAChB,KAAK,MAAA;AACH,MAAA,2BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,QAAQ,KAAO,EAAA,CAAA;AAAA,IAC1D,KAAK,KAAA;AACH,MAAA,2BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,QAAQ,OAAS,EAAA,CAAA;AAAA,IAC5D,KAAK,QAAA;AACH,MAAA,2BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,QAAQ,OAAS,EAAA,CAAA;AAAA,IAC5D,KAAK,MAAA;AACH,MAAA,2BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,CAAA;AAAA,IACzD,KAAK,UAAA;AACH,MAAA,2BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,QAAQ,KAAO,EAAA,CAAA;AAAA,IAC1D;AACE,MAAO,OAAA,IAAA;AAAA;AAEb;;;;"}
+{"version":3,"file":"SeverityComponent.esm.js","sources":["../../../src/components/SeverityComponent/SeverityComponent.tsx"],"sourcesContent":["import { Badge } from '@backstage/ui';\nimport { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';\n\ntype SeverityComponentProps = {\n  severity: Severity | null;\n};\n\nconst severityStyles: Record<string, React.CSSProperties> = {\n  high: { backgroundColor: 'var(--bui-bg-danger)' },\n  critical: { backgroundColor: 'var(--bui-bg-danger)' },\n  medium: { backgroundColor: 'var(--bui-bg-warning)' },\n  low: { backgroundColor: 'var(--bui-bg-success)' },\n  info: { backgroundColor: 'var(--bui-bg-info)' },\n  unknown: {},\n};\n\nexport const SeverityComponent = ({ severity }: SeverityComponentProps) => {\n  if (!severity) return null;\n  return <Badge style={severityStyles[severity]}>{severity}</Badge>;\n};\n"],"names":[],"mappings":";;;AAOA,MAAM,cAAA,GAAsD;AAAA,EAC1D,IAAA,EAAM,EAAE,eAAA,EAAiB,sBAAA,EAAuB;AAAA,EAChD,QAAA,EAAU,EAAE,eAAA,EAAiB,sBAAA,EAAuB;AAAA,EACpD,MAAA,EAAQ,EAAE,eAAA,EAAiB,uBAAA,EAAwB;AAAA,EACnD,GAAA,EAAK,EAAE,eAAA,EAAiB,uBAAA,EAAwB;AAAA,EAChD,IAAA,EAAM,EAAE,eAAA,EAAiB,oBAAA,EAAqB;AAAA,EAC9C,SAAS;AACX,CAAA;AAEO,MAAM,iBAAA,GAAoB,CAAC,EAAE,QAAA,EAAS,KAA8B;AACzE,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BAAQ,KAAA,EAAA,EAAM,KAAA,EAAO,cAAA,CAAe,QAAQ,GAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAC3D;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"StatusComponent.esm.js","sources":["../../../src/components/StatusComponent/StatusComponent.tsx"],"sourcesContent":["import {\n  StatusAborted,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n} from '@backstage/core-components';\nimport type { Status } from '@kyverno/backstage-plugin-policy-reporter-common';\n\ntype StatusComponentProps = {\n  status: Status;\n};\n\nexport const StatusComponent = ({ status }: StatusComponentProps) => {\n  switch (status) {\n    case 'pass':\n      return <StatusOK>PASS</StatusOK>;\n    case 'error':\n      return <StatusError>ERROR</StatusError>;\n    case 'fail':\n      return <StatusError>FAIL</StatusError>;\n    case 'skip':\n      return <StatusAborted>SKIP</StatusAborted>;\n    case 'warn':\n      return <StatusWarning>WARN</StatusWarning>;\n    default:\n      return null;\n  }\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAmC,KAAA;AACnE,EAAA,QAAQ,MAAQ;AAAA,IACd,KAAK,MAAA;AACH,MAAO,uBAAA,GAAA,CAAC,YAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,IACvB,KAAK,OAAA;AACH,MAAO,uBAAA,GAAA,CAAC,eAAY,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,IAC3B,KAAK,MAAA;AACH,MAAO,uBAAA,GAAA,CAAC,eAAY,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,IAC1B,KAAK,MAAA;AACH,MAAO,uBAAA,GAAA,CAAC,iBAAc,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,IAC5B,KAAK,MAAA;AACH,MAAO,uBAAA,GAAA,CAAC,iBAAc,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,IAC5B;AACE,MAAO,OAAA,IAAA;AAAA;AAEb;;;;"}
+{"version":3,"file":"StatusComponent.esm.js","sources":["../../../src/components/StatusComponent/StatusComponent.tsx"],"sourcesContent":["import {\n  StatusAborted,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n} from '@backstage/core-components';\nimport type { Status } from '@kyverno/backstage-plugin-policy-reporter-common';\n\ntype StatusComponentProps = {\n  status: Status;\n};\n\nexport const StatusComponent = ({ status }: StatusComponentProps) => {\n  switch (status) {\n    case 'pass':\n      return <StatusOK>PASS</StatusOK>;\n    case 'error':\n      return <StatusError>ERROR</StatusError>;\n    case 'fail':\n      return <StatusError>FAIL</StatusError>;\n    case 'skip':\n      return <StatusAborted>SKIP</StatusAborted>;\n    case 'warn':\n      return <StatusWarning>WARN</StatusWarning>;\n    default:\n      return null;\n  }\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,eAAA,GAAkB,CAAC,EAAE,MAAA,EAAO,KAA4B;AACnE,EAAA,QAAQ,MAAA;AAAQ,IACd,KAAK,MAAA;AACH,MAAA,uBAAO,GAAA,CAAC,YAAS,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IACvB,KAAK,OAAA;AACH,MAAA,uBAAO,GAAA,CAAC,eAAY,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,IAC3B,KAAK,MAAA;AACH,MAAA,uBAAO,GAAA,CAAC,eAAY,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAC1B,KAAK,MAAA;AACH,MAAA,uBAAO,GAAA,CAAC,iBAAc,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAC5B,KAAK,MAAA;AACH,MAAA,uBAAO,GAAA,CAAC,iBAAc,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAC5B;AACE,MAAA,OAAO,IAAA;AAAA;AAEb;;;;"}

package/dist/hooks/useEntityEnvironment.esm.js

@@ -1,11 +1,9 @@
-import { useState } from 'react';
 import { useAsync } from 'react-use';
 import { catalogApiRef, CATALOG_FILTER_EXISTS } from '@backstage/plugin-catalog-react';
 import { useApi } from '@backstage/core-plugin-api';
 
 const useEntityEnvironment = (entity, annotationsState) => {
   const catalogApi = useApi(catalogApiRef);
-  const [currentEnvironment, setCurrentEnvironment] = useState(void 0);
   const { value: environments, loading: environmentsLoading } = useAsync(async () => {
     if (!annotationsState) return void 0;
     const dependencies = entity.spec?.dependsOn;
@@ -29,15 +27,9 @@ const useEntityEnvironment = (entity, annotationsState) => {
         });
       }
     });
-    setCurrentEnvironment(environmentList[0]);
     return environmentList;
   }, [entity]);
-  return {
-    environments,
-    environmentsLoading,
-    currentEnvironment,
-    setCurrentEnvironment
-  };
+  return { environments, environmentsLoading };
 };
 
 export { useEntityEnvironment };