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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kyverno/backstage-plugin-policy-reporter
 
+## 2.9.0
+
+### Minor Changes
+
+- 836f939: Add `FilterLayout` component with responsive sidebar filters. On large screens filters render as a sidebar, on smaller screens they collapse into a dialog triggered by a filter icon button. Updated `EntityCustomPoliciesContent`, `EntityKyvernoPoliciesContent`, and `PolicyReportsPage` to use the new layout.
+
 ## 2.8.0
 
 ### Minor Changes

package/dist/components/EntityCustomPoliciesContent/EntityCustomPoliciesContent.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Content, Progress } from '@backstage/core-components';
 import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
-import { Container, Header, Grid, Flex } from '@backstage/ui';
+import { Container, Header } from '@backstage/ui';
 import { PolicyReportsTable } from '../PolicyReportsTable/PolicyReportsTable.esm.js';
 import { SelectEnvironment } from '../SelectEnvironment/SelectEnvironment.esm.js';
 import { isPolicyReporterAvailable, getResourceName, getKinds, getNamespaces } from '../../utils/annotations.esm.js';
@@ -11,6 +11,7 @@ import { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilter
 import { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';
 import { SelectStatus } from '../SelectStatus/SelectStatus.esm.js';
 import { SelectSeverity } from '../SelectSeverity/SelectSeverity.esm.js';
+import { FilterLayout } from '../FilterLayout/FilterLayout.esm.js';
 
 const EntityCustomPoliciesContent = ({
   annotationsDocumentationUrl,
@@ -54,18 +55,18 @@ const EntityCustomPoliciesContent = ({
             customActions: /* @__PURE__ */ jsx(SelectEnvironment, { environments })
           }
         ),
-        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid.Root, { columns: "1", gap: "4", children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "4", children: [
+        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(FilterLayout, { children: [
+          /* @__PURE__ */ jsxs(FilterLayout.Filters, { children: [
             /* @__PURE__ */ jsx(SelectStatus, {}),
             /* @__PURE__ */ jsx(SelectSeverity, {})
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FilterLayout.Content, { children: /* @__PURE__ */ jsx(
             PolicyReportsTable,
             {
               emptyContentText: "No policies",
               policyDocumentationUrl
             }
-          )
+          ) })
         ] }) })
       ] })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"EntityCustomPoliciesContent.esm.js","sources":["../../../src/components/EntityCustomPoliciesContent/EntityCustomPoliciesContent.tsx"],"sourcesContent":["import { Content, Progress } from '@backstage/core-components';\nimport {\n  MissingAnnotationEmptyState,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { Container, Flex, Grid, Header } from '@backstage/ui';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport {\n  getKinds,\n  getNamespaces,\n  getResourceName,\n  isPolicyReporterAvailable,\n} from '../../utils/annotations';\nimport { MissingEnvironmentsEmptyState } from '../MissingEnvironmentsEmptyState';\nimport { useEntityEnvironment } from '../../hooks/useEntityEnvironment';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { SelectStatus } from '../SelectStatus';\nimport { SelectSeverity } from '../SelectSeverity';\n\ntype EntityCustomPoliciesContentProps = {\n  annotationsDocumentationUrl?: string;\n  policyDocumentationUrl?: string;\n  sources: string[];\n  title: string;\n};\n\nexport const EntityCustomPoliciesContent = ({\n  annotationsDocumentationUrl,\n  policyDocumentationUrl,\n  sources,\n  title,\n}: EntityCustomPoliciesContentProps) => {\n  const { entity } = useEntity();\n  const annotations = entity.metadata.annotations;\n\n  const annotationsState = isPolicyReporterAvailable(entity);\n\n  const { environments, environmentsLoading } = useEntityEnvironment(\n    entity,\n    annotationsState,\n  );\n\n  // Annotations missing\n  if (!annotationsState)\n    return (\n      <Container>\n        <Content>\n          <MissingAnnotationEmptyState\n            readMoreUrl={annotationsDocumentationUrl}\n            annotation={KYVERNO_RESOURCE_NAME_ANNOTATION}\n          />\n        </Content>\n      </Container>\n    );\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Content>\n          <MissingEnvironmentsEmptyState entity={entity} />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={{\n        namespaces: getNamespaces(annotations),\n        kinds: getKinds(annotations),\n        sources: sources,\n        search: getResourceName(annotations),\n      }}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title={title}\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <Grid.Root columns=\"1\" gap=\"4\">\n            <Flex align=\"end\" gap=\"4\">\n              <SelectStatus />\n              <SelectSeverity />\n            </Flex>\n            <PolicyReportsTable\n              emptyContentText=\"No policies\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid.Root>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BO,MAAM,8BAA8B,CAAC;AAAA,EAC1C,2BAAA;AAAA,EACA,sBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAwC;AACtC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,WAAA,GAAc,OAAO,QAAA,CAAS,WAAA;AAEpC,EAAA,MAAM,gBAAA,GAAmB,0BAA0B,MAAM,CAAA;AAEzD,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,oBAAA;AAAA,IAC5C,MAAA;AAAA,IACA;AAAA,GACF;AAGA,EAAA,IAAI,CAAC,gBAAA;AACH,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,2BAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,2BAAA;AAAA,QACb,UAAA,EAAY;AAAA;AAAA,OAEhB,CAAA,EACF,CAAA;AAIJ,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,uBACE,GAAA,CAAC,aACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,8BAAC,6BAAA,EAAA,EAA8B,MAAA,EAAgB,GACjD,CAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB;AAAA,QACd,UAAA,EAAY,cAAc,WAAW,CAAA;AAAA,QACrC,KAAA,EAAO,SAAS,WAAW,CAAA;AAAA,QAC3B,OAAA;AAAA,QACA,MAAA,EAAQ,gBAAgB,WAAW;AAAA,OACrC;AAAA,MACA,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,WACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,MAAL,EAAU,OAAA,EAAQ,GAAA,EAAI,GAAA,EAAI,GAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,KAAA,EAAM,GAAA,EAAI,GAAA,EACpB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe;AAAA,WAAA,EAClB,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAiB,aAAA;AAAA,cACjB;AAAA;AAAA;AACF,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"EntityCustomPoliciesContent.esm.js","sources":["../../../src/components/EntityCustomPoliciesContent/EntityCustomPoliciesContent.tsx"],"sourcesContent":["import { Content, Progress } from '@backstage/core-components';\nimport {\n  MissingAnnotationEmptyState,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { Container, Header } from '@backstage/ui';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport {\n  getKinds,\n  getNamespaces,\n  getResourceName,\n  isPolicyReporterAvailable,\n} from '../../utils/annotations';\nimport { MissingEnvironmentsEmptyState } from '../MissingEnvironmentsEmptyState';\nimport { useEntityEnvironment } from '../../hooks/useEntityEnvironment';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { SelectStatus } from '../SelectStatus';\nimport { SelectSeverity } from '../SelectSeverity';\nimport { FilterLayout } from '../FilterLayout';\n\ntype EntityCustomPoliciesContentProps = {\n  annotationsDocumentationUrl?: string;\n  policyDocumentationUrl?: string;\n  sources: string[];\n  title: string;\n};\n\nexport const EntityCustomPoliciesContent = ({\n  annotationsDocumentationUrl,\n  policyDocumentationUrl,\n  sources,\n  title,\n}: EntityCustomPoliciesContentProps) => {\n  const { entity } = useEntity();\n  const annotations = entity.metadata.annotations;\n\n  const annotationsState = isPolicyReporterAvailable(entity);\n\n  const { environments, environmentsLoading } = useEntityEnvironment(\n    entity,\n    annotationsState,\n  );\n\n  // Annotations missing\n  if (!annotationsState)\n    return (\n      <Container>\n        <Content>\n          <MissingAnnotationEmptyState\n            readMoreUrl={annotationsDocumentationUrl}\n            annotation={KYVERNO_RESOURCE_NAME_ANNOTATION}\n          />\n        </Content>\n      </Container>\n    );\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Content>\n          <MissingEnvironmentsEmptyState entity={entity} />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={{\n        namespaces: getNamespaces(annotations),\n        kinds: getKinds(annotations),\n        sources: sources,\n        search: getResourceName(annotations),\n      }}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title={title}\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <FilterLayout>\n            <FilterLayout.Filters>\n              <SelectStatus />\n              <SelectSeverity />\n            </FilterLayout.Filters>\n            <FilterLayout.Content>\n              <PolicyReportsTable\n                emptyContentText=\"No policies\"\n                policyDocumentationUrl={policyDocumentationUrl}\n              />\n            </FilterLayout.Content>\n          </FilterLayout>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,MAAM,8BAA8B,CAAC;AAAA,EAC1C,2BAAA;AAAA,EACA,sBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAwC;AACtC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,WAAA,GAAc,OAAO,QAAA,CAAS,WAAA;AAEpC,EAAA,MAAM,gBAAA,GAAmB,0BAA0B,MAAM,CAAA;AAEzD,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,oBAAA;AAAA,IAC5C,MAAA;AAAA,IACA;AAAA,GACF;AAGA,EAAA,IAAI,CAAC,gBAAA;AACH,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,2BAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,2BAAA;AAAA,QACb,UAAA,EAAY;AAAA;AAAA,OAEhB,CAAA,EACF,CAAA;AAIJ,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,uBACE,GAAA,CAAC,aACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,8BAAC,6BAAA,EAAA,EAA8B,MAAA,EAAgB,GACjD,CAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB;AAAA,QACd,UAAA,EAAY,cAAc,WAAW,CAAA;AAAA,QACrC,KAAA,EAAO,SAAS,WAAW,CAAA;AAAA,QAC3B,OAAA;AAAA,QACA,MAAA,EAAQ,gBAAgB,WAAW;AAAA,OACrC;AAAA,MACA,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,YAAA,CAAa,SAAb,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe;AAAA,WAAA,EAClB,CAAA;AAAA,0BACA,GAAA,CAAC,YAAA,CAAa,OAAA,EAAb,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAiB,aAAA;AAAA,cACjB;AAAA;AAAA,WACF,EACF;AAAA,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/EntityKyvernoPoliciesContent/EntityKyvernoPoliciesContent.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Content, Progress } from '@backstage/core-components';
 import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
-import { Container, Header, Grid, Flex } from '@backstage/ui';
+import { Container, Header } from '@backstage/ui';
 import { PolicyReportsTable } from '../PolicyReportsTable/PolicyReportsTable.esm.js';
 import { SelectEnvironment } from '../SelectEnvironment/SelectEnvironment.esm.js';
 import { isPolicyReporterAvailable, getResourceName, getKinds, getNamespaces } from '../../utils/annotations.esm.js';
@@ -11,6 +11,7 @@ import { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilter
 import { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';
 import { SelectSeverity } from '../SelectSeverity/SelectSeverity.esm.js';
 import { SelectStatus } from '../SelectStatus/SelectStatus.esm.js';
+import { FilterLayout } from '../FilterLayout/FilterLayout.esm.js';
 
 const EntityKyvernoPoliciesContent = ({
   annotationsDocumentationUrl,
@@ -52,18 +53,18 @@ const EntityKyvernoPoliciesContent = ({
             customActions: /* @__PURE__ */ jsx(SelectEnvironment, { environments })
           }
         ),
-        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid.Root, { columns: "1", gap: "4", children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "4", children: [
+        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(FilterLayout, { children: [
+          /* @__PURE__ */ jsxs(FilterLayout.Filters, { children: [
             /* @__PURE__ */ jsx(SelectStatus, {}),
             /* @__PURE__ */ jsx(SelectSeverity, {})
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FilterLayout.Content, { children: /* @__PURE__ */ jsx(
             PolicyReportsTable,
             {
               emptyContentText: "No policies found",
               policyDocumentationUrl
             }
-          )
+          ) })
         ] }) })
       ] })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"EntityKyvernoPoliciesContent.esm.js","sources":["../../../src/components/EntityKyvernoPoliciesContent/EntityKyvernoPoliciesContent.tsx"],"sourcesContent":["import { Content, Progress } from '@backstage/core-components';\nimport {\n  MissingAnnotationEmptyState,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { Container, Flex, Grid, Header } from '@backstage/ui';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport {\n  getKinds,\n  getNamespaces,\n  getResourceName,\n  isPolicyReporterAvailable,\n} from '../../utils/annotations';\nimport { MissingEnvironmentsEmptyState } from '../MissingEnvironmentsEmptyState';\nimport { useEntityEnvironment } from '../../hooks/useEntityEnvironment';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { SelectSeverity } from '../SelectSeverity';\nimport { SelectStatus } from '../SelectStatus';\n\ntype KyvernoPoliciesContentProps = {\n  annotationsDocumentationUrl?: string;\n  policyDocumentationUrl?: string;\n};\n\nexport const EntityKyvernoPoliciesContent = ({\n  annotationsDocumentationUrl,\n  policyDocumentationUrl,\n}: KyvernoPoliciesContentProps) => {\n  const { entity } = useEntity();\n  const annotations = entity.metadata.annotations;\n\n  const annotationsState = isPolicyReporterAvailable(entity);\n\n  const { environments, environmentsLoading } = useEntityEnvironment(\n    entity,\n    annotationsState,\n  );\n\n  // Annotations missing\n  if (!annotationsState)\n    return (\n      <Container>\n        <Content>\n          <MissingAnnotationEmptyState\n            readMoreUrl={annotationsDocumentationUrl}\n            annotation={KYVERNO_RESOURCE_NAME_ANNOTATION}\n          />\n        </Content>\n      </Container>\n    );\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Content>\n          <MissingEnvironmentsEmptyState entity={entity} />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={{\n        namespaces: getNamespaces(annotations),\n        kinds: getKinds(annotations),\n        sources: ['kyverno'],\n        search: getResourceName(annotations),\n      }}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title=\"Kyverno Policy Reports\"\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <Grid.Root columns=\"1\" gap=\"4\">\n            <Flex align=\"end\" gap=\"4\">\n              <SelectStatus />\n              <SelectSeverity />\n            </Flex>\n            <PolicyReportsTable\n              emptyContentText=\"No policies found\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid.Root>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,2BAAA;AAAA,EACA;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,WAAA,GAAc,OAAO,QAAA,CAAS,WAAA;AAEpC,EAAA,MAAM,gBAAA,GAAmB,0BAA0B,MAAM,CAAA;AAEzD,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,oBAAA;AAAA,IAC5C,MAAA;AAAA,IACA;AAAA,GACF;AAGA,EAAA,IAAI,CAAC,gBAAA;AACH,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,2BAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,2BAAA;AAAA,QACb,UAAA,EAAY;AAAA;AAAA,OAEhB,CAAA,EACF,CAAA;AAIJ,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,uBACE,GAAA,CAAC,aACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,8BAAC,6BAAA,EAAA,EAA8B,MAAA,EAAgB,GACjD,CAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB;AAAA,QACd,UAAA,EAAY,cAAc,WAAW,CAAA;AAAA,QACrC,KAAA,EAAO,SAAS,WAAW,CAAA;AAAA,QAC3B,OAAA,EAAS,CAAC,SAAS,CAAA;AAAA,QACnB,MAAA,EAAQ,gBAAgB,WAAW;AAAA,OACrC;AAAA,MACA,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,wBAAA;AAAA,YACN,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,WACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,MAAL,EAAU,OAAA,EAAQ,GAAA,EAAI,GAAA,EAAI,GAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,KAAA,EAAM,GAAA,EAAI,GAAA,EACpB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe;AAAA,WAAA,EAClB,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAiB,mBAAA;AAAA,cACjB;AAAA;AAAA;AACF,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"EntityKyvernoPoliciesContent.esm.js","sources":["../../../src/components/EntityKyvernoPoliciesContent/EntityKyvernoPoliciesContent.tsx"],"sourcesContent":["import { Content, Progress } from '@backstage/core-components';\nimport {\n  MissingAnnotationEmptyState,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { Container, Header } from '@backstage/ui';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport {\n  getKinds,\n  getNamespaces,\n  getResourceName,\n  isPolicyReporterAvailable,\n} from '../../utils/annotations';\nimport { MissingEnvironmentsEmptyState } from '../MissingEnvironmentsEmptyState';\nimport { useEntityEnvironment } from '../../hooks/useEntityEnvironment';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { KYVERNO_RESOURCE_NAME_ANNOTATION } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { SelectSeverity } from '../SelectSeverity';\nimport { SelectStatus } from '../SelectStatus';\nimport { FilterLayout } from '../FilterLayout';\n\ntype KyvernoPoliciesContentProps = {\n  annotationsDocumentationUrl?: string;\n  policyDocumentationUrl?: string;\n};\n\nexport const EntityKyvernoPoliciesContent = ({\n  annotationsDocumentationUrl,\n  policyDocumentationUrl,\n}: KyvernoPoliciesContentProps) => {\n  const { entity } = useEntity();\n  const annotations = entity.metadata.annotations;\n\n  const annotationsState = isPolicyReporterAvailable(entity);\n\n  const { environments, environmentsLoading } = useEntityEnvironment(\n    entity,\n    annotationsState,\n  );\n\n  // Annotations missing\n  if (!annotationsState)\n    return (\n      <Container>\n        <Content>\n          <MissingAnnotationEmptyState\n            readMoreUrl={annotationsDocumentationUrl}\n            annotation={KYVERNO_RESOURCE_NAME_ANNOTATION}\n          />\n        </Content>\n      </Container>\n    );\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Content>\n          <MissingEnvironmentsEmptyState entity={entity} />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={{\n        namespaces: getNamespaces(annotations),\n        kinds: getKinds(annotations),\n        sources: ['kyverno'],\n        search: getResourceName(annotations),\n      }}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title=\"Kyverno Policy Reports\"\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <FilterLayout>\n            <FilterLayout.Filters>\n              <SelectStatus />\n              <SelectSeverity />\n            </FilterLayout.Filters>\n            <FilterLayout.Content>\n              <PolicyReportsTable\n                emptyContentText=\"No policies found\"\n                policyDocumentationUrl={policyDocumentationUrl}\n              />\n            </FilterLayout.Content>\n          </FilterLayout>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,2BAAA;AAAA,EACA;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,WAAA,GAAc,OAAO,QAAA,CAAS,WAAA;AAEpC,EAAA,MAAM,gBAAA,GAAmB,0BAA0B,MAAM,CAAA;AAEzD,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,oBAAA;AAAA,IAC5C,MAAA;AAAA,IACA;AAAA,GACF;AAGA,EAAA,IAAI,CAAC,gBAAA;AACH,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,2BAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,2BAAA;AAAA,QACb,UAAA,EAAY;AAAA;AAAA,OAEhB,CAAA,EACF,CAAA;AAIJ,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,uBACE,GAAA,CAAC,aACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,8BAAC,6BAAA,EAAA,EAA8B,MAAA,EAAgB,GACjD,CAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB;AAAA,QACd,UAAA,EAAY,cAAc,WAAW,CAAA;AAAA,QACrC,KAAA,EAAO,SAAS,WAAW,CAAA;AAAA,QAC3B,OAAA,EAAS,CAAC,SAAS,CAAA;AAAA,QACnB,MAAA,EAAQ,gBAAgB,WAAW;AAAA,OACrC;AAAA,MACA,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,wBAAA;AAAA,YACN,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,YAAA,CAAa,SAAb,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe;AAAA,WAAA,EAClB,CAAA;AAAA,0BACA,GAAA,CAAC,YAAA,CAAa,OAAA,EAAb,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAiB,mBAAA;AAAA,cACjB;AAAA;AAAA,WACF,EACF;AAAA,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/FilterLayout/FilterLayout.esm.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Grid, DialogTrigger, ButtonIcon, Dialog, DialogHeader, DialogBody, Flex, Text } from '@backstage/ui';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { RiFilter3Fill } from '@remixicon/react';
+
+const Filters = ({ children, title = "Filters" }) => {
+  const isSmallScreen = useMediaQuery(
+    (theme) => theme.breakpoints.down("md"),
+    { noSsr: true }
+  );
+  const [open, setOpen] = useState(false);
+  if (isSmallScreen) {
+    return /* @__PURE__ */ jsx(Grid.Item, { colSpan: "12", children: /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          "aria-label": title,
+          icon: /* @__PURE__ */ jsx(RiFilter3Fill, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs(Dialog, { children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: title }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children }) })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Grid.Item, { colSpan: { initial: "12", lg: "2" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ jsx(Text, { variant: "title-x-small", children: title }),
+    children
+  ] }) });
+};
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsx(Grid.Item, { colSpan: { initial: "12", lg: "10" }, children });
+};
+const FilterLayout = ({ children }) => {
+  return /* @__PURE__ */ jsx(Grid.Root, { columns: "12", gap: "6", children });
+};
+FilterLayout.Filters = Filters;
+FilterLayout.Content = Content;
+
+export { FilterLayout };
+//# sourceMappingURL=FilterLayout.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterLayout.esm.js","sources":["../../../src/components/FilterLayout/FilterLayout.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport {\n  ButtonIcon,\n  Dialog,\n  DialogBody,\n  DialogHeader,\n  DialogTrigger,\n  Flex,\n  Grid,\n  Text,\n} from '@backstage/ui';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { Theme } from '@material-ui/core/styles';\nimport { RiFilter3Fill } from '@remixicon/react';\n\n/** Props for the Filters sub-component */\ninterface FiltersProps {\n  children: ReactNode;\n  /** Label shown in the dialog header on small screens */\n  title?: string;\n}\n\n/** Renders filter children as a sidebar on large screens, or inside a Dialog on smaller screens */\nconst Filters = ({ children, title = 'Filters' }: FiltersProps) => {\n  // TODO: Migrate to BUI useBreakpoint once the performance warning is resolved\n  const isSmallScreen = useMediaQuery(\n    (theme: Theme) => theme.breakpoints.down('md'),\n    { noSsr: true },\n  );\n  const [open, setOpen] = useState(false);\n\n  if (isSmallScreen) {\n    return (\n      <Grid.Item colSpan=\"12\">\n        <DialogTrigger isOpen={open} onOpenChange={setOpen}>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={title}\n            icon={<RiFilter3Fill />}\n          />\n          <Dialog>\n            <DialogHeader>{title}</DialogHeader>\n            <DialogBody>\n              <Flex direction=\"column\" gap=\"4\">\n                {children}\n              </Flex>\n            </DialogBody>\n          </Dialog>\n        </DialogTrigger>\n      </Grid.Item>\n    );\n  }\n\n  return (\n    <Grid.Item colSpan={{ initial: '12', lg: '2' }}>\n      <Flex direction=\"column\" gap=\"4\">\n        <Text variant=\"title-x-small\">{title}</Text>\n        {children}\n      </Flex>\n    </Grid.Item>\n  );\n};\n\n/** Props for the Content sub-component */\ninterface ContentProps {\n  children: ReactNode;\n}\n\n/** Main content area that fills remaining grid space */\nconst Content = ({ children }: ContentProps) => {\n  return (\n    <Grid.Item colSpan={{ initial: '12', lg: '10' }}>{children}</Grid.Item>\n  );\n};\n\n/** Props for the FilterLayout root */\ninterface FilterLayoutProps {\n  children: ReactNode;\n}\n\n/** A responsive layout with a filter sidebar that collapses into a dialog on smaller screens */\nexport const FilterLayout = ({ children }: FilterLayoutProps) => {\n  return (\n    <Grid.Root columns=\"12\" gap=\"6\">\n      {children}\n    </Grid.Root>\n  );\n};\n\nFilterLayout.Filters = Filters;\nFilterLayout.Content = Content;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,UAAU,CAAC,EAAE,QAAA,EAAU,KAAA,GAAQ,WAAU,KAAoB;AAEjE,EAAA,MAAM,aAAA,GAAgB,aAAA;AAAA,IACpB,CAAC,KAAA,KAAiB,KAAA,CAAM,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,IAC7C,EAAE,OAAO,IAAA;AAAK,GAChB;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,uBACE,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,OAAA,EAAQ,IAAA,EACjB,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EAAc,MAAA,EAAQ,IAAA,EAAM,YAAA,EAAc,OAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,WAAA;AAAA,UACR,YAAA,EAAY,KAAA;AAAA,UACZ,IAAA,sBAAO,aAAA,EAAA,EAAc;AAAA;AAAA,OACvB;AAAA,2BACC,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAc,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACrB,GAAA,CAAC,cACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,QAAA,EAAS,GAAA,EAAI,GAAA,EAC1B,QAAA,EACH,CAAA,EACF;AAAA,OAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,2BACG,IAAA,CAAK,IAAA,EAAL,EAAU,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,EAAA,EAAI,GAAA,IACvC,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,eAAA,EAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACpC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AAQA,MAAM,OAAA,GAAU,CAAC,EAAE,QAAA,EAAS,KAAoB;AAC9C,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,EAAA,EAAI,IAAA,EAAK,EAAI,QAAA,EAAS,CAAA;AAE/D,CAAA;AAQO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAyB;AAC/D,EAAA,uBACE,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,SAAQ,IAAA,EAAK,GAAA,EAAI,KACzB,QAAA,EACH,CAAA;AAEJ;AAEA,YAAA,CAAa,OAAA,GAAU,OAAA;AACvB,YAAA,CAAa,OAAA,GAAU,OAAA;;;;"}

package/dist/components/PolicyReportsPage/PolicyReportsPage.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Progress, Content, EmptyState } from '@backstage/core-components';
-import { Container, Header, ButtonLink, Grid, Flex, Box } from '@backstage/ui';
+import { Container, Header, ButtonLink, Flex } from '@backstage/ui';
 import { useEnvironments } from '../../hooks/useEnvironments.esm.js';
 import { SelectEnvironment } from '../SelectEnvironment/SelectEnvironment.esm.js';
 import { PolicyReportsTable } from '../PolicyReportsTable/PolicyReportsTable.esm.js';
@@ -9,6 +9,7 @@ import { SelectSeverity } from '../SelectSeverity/SelectSeverity.esm.js';
 import { SelectNamespace } from '../SelectNamespace/SelectNamespace.esm.js';
 import { SearchField } from '../SearchField/SearchField.esm.js';
 import { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters.esm.js';
+import { FilterLayout } from '../FilterLayout/FilterLayout.esm.js';
 
 const PolicyReportsPage = ({
   title = "Policy Reports",
@@ -56,20 +57,22 @@ const PolicyReportsPage = ({
             customActions: /* @__PURE__ */ jsx(SelectEnvironment, { environments })
           }
         ),
-        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid.Root, { columns: "1", gap: "4", children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "4", children: [
+        /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(FilterLayout, { children: [
+          /* @__PURE__ */ jsxs(FilterLayout.Filters, { children: [
             /* @__PURE__ */ jsx(SelectStatus, {}),
             /* @__PURE__ */ jsx(SelectSeverity, {}),
-            /* @__PURE__ */ jsx(SelectNamespace, {}),
-            /* @__PURE__ */ jsx(Box, { width: "300px", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(SearchField, {}) })
+            /* @__PURE__ */ jsx(SelectNamespace, {})
           ] }),
-          /* @__PURE__ */ jsx(
-            PolicyReportsTable,
-            {
-              emptyContentText: "No policies found",
-              policyDocumentationUrl
-            }
-          )
+          /* @__PURE__ */ jsx(FilterLayout.Content, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", children: [
+            /* @__PURE__ */ jsx(SearchField, {}),
+            /* @__PURE__ */ jsx(
+              PolicyReportsTable,
+              {
+                emptyContentText: "No policies found",
+                policyDocumentationUrl
+              }
+            )
+          ] }) })
         ] }) })
       ] })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"PolicyReportsPage.esm.js","sources":["../../../src/components/PolicyReportsPage/PolicyReportsPage.tsx"],"sourcesContent":["import { Content, EmptyState, Progress } from '@backstage/core-components';\nimport { Box, Container, Flex, Grid, Header, ButtonLink } from '@backstage/ui';\nimport { useEnvironments } from '../../hooks/useEnvironments';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectStatus } from '../SelectStatus';\nimport { SelectSeverity } from '../SelectSeverity';\nimport { SelectNamespace } from '../SelectNamespace';\nimport { SearchField } from '../SearchField';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { Filter } from '@kyverno/backstage-plugin-policy-reporter-common';\n\nexport interface PolicyReportsPageProps {\n  title?: string;\n  policyDocumentationUrl?: string;\n  subtitle?: string;\n}\n\nexport const PolicyReportsPage = ({\n  title = 'Policy Reports',\n  policyDocumentationUrl,\n}: PolicyReportsPageProps) => {\n  const { environments, environmentsLoading } = useEnvironments();\n\n  const defaultFilter: Filter = {\n    status: ['fail'],\n  };\n\n  // Loading environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Header title={title} />\n        <Content>\n          <EmptyState\n            missing=\"content\"\n            title=\"No kubernetes-cluster Resources found\"\n            description={\n              <>\n                You need to define a Resource with the kubernetes-cluster type\n                and a<code> kyverno.io/endpoint </code> annotation for this\n                plugin to work.\n              </>\n            }\n            action={\n              <>\n                <ButtonLink\n                  target=\"_blank\"\n                  href=\"https://github.com/kyverno/backstage-policy-reporter-plugin\"\n                >\n                  Read More\n                </ButtonLink>\n              </>\n            }\n          />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={defaultFilter}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title={title}\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <Grid.Root columns=\"1\" gap=\"4\">\n            <Flex align=\"end\" gap=\"4\">\n              <SelectStatus />\n              <SelectSeverity />\n              <SelectNamespace />\n              <Box width=\"300px\" style={{ flexShrink: 0 }}>\n                <SearchField />\n              </Box>\n            </Flex>\n            <PolicyReportsTable\n              emptyContentText=\"No policies found\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid.Root>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA,GAAQ,gBAAA;AAAA,EACR;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,eAAA,EAAgB;AAE9D,EAAA,MAAM,aAAA,GAAwB;AAAA,IAC5B,MAAA,EAAQ,CAAC,MAAM;AAAA,GACjB;AAGA,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAO,KAAA,EAAc,CAAA;AAAA,0BACrB,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,KAAA,EAAM,uCAAA;AAAA,UACN,6BACE,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,YAAA,sEAAA;AAAA,4BAEK,GAAA,CAAC,UAAK,QAAA,EAAA,uBAAA,EAAqB,CAAA;AAAA,YAAO;AAAA,WAAA,EAEzC,CAAA;AAAA,UAEF,wBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAO,QAAA;AAAA,cACP,IAAA,EAAK,6DAAA;AAAA,cACN,QAAA,EAAA;AAAA;AAAA,WAED,EACF;AAAA;AAAA,OAEJ,EACF;AAAA,KAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB,aAAA;AAAA,MAChB,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,WACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,MAAL,EAAU,OAAA,EAAQ,GAAA,EAAI,GAAA,EAAI,GAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,KAAA,EAAM,GAAA,EAAI,GAAA,EACpB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe,CAAA;AAAA,gCACf,eAAA,EAAA,EAAgB,CAAA;AAAA,4BACjB,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,OAAA,EAAQ,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE,EACxC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,EACf;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAiB,mBAAA;AAAA,cACjB;AAAA;AAAA;AACF,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"PolicyReportsPage.esm.js","sources":["../../../src/components/PolicyReportsPage/PolicyReportsPage.tsx"],"sourcesContent":["import { Content, EmptyState, Progress } from '@backstage/core-components';\nimport { Container, Flex, Header, ButtonLink } from '@backstage/ui';\nimport { useEnvironments } from '../../hooks/useEnvironments';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { SelectStatus } from '../SelectStatus';\nimport { SelectSeverity } from '../SelectSeverity';\nimport { SelectNamespace } from '../SelectNamespace';\nimport { SearchField } from '../SearchField';\nimport { PolicyReportsFiltersProvider } from '../../hooks/usePolicyReportsFilters';\nimport { Filter } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { FilterLayout } from '../FilterLayout';\n\nexport interface PolicyReportsPageProps {\n  title?: string;\n  policyDocumentationUrl?: string;\n  subtitle?: string;\n}\n\nexport const PolicyReportsPage = ({\n  title = 'Policy Reports',\n  policyDocumentationUrl,\n}: PolicyReportsPageProps) => {\n  const { environments, environmentsLoading } = useEnvironments();\n\n  const defaultFilter: Filter = {\n    status: ['fail'],\n  };\n\n  // Loading environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (!environments?.length)\n    return (\n      <Container>\n        <Header title={title} />\n        <Content>\n          <EmptyState\n            missing=\"content\"\n            title=\"No kubernetes-cluster Resources found\"\n            description={\n              <>\n                You need to define a Resource with the kubernetes-cluster type\n                and a<code> kyverno.io/endpoint </code> annotation for this\n                plugin to work.\n              </>\n            }\n            action={\n              <>\n                <ButtonLink\n                  target=\"_blank\"\n                  href=\"https://github.com/kyverno/backstage-policy-reporter-plugin\"\n                >\n                  Read More\n                </ButtonLink>\n              </>\n            }\n          />\n        </Content>\n      </Container>\n    );\n\n  return (\n    <PolicyReportsFiltersProvider\n      defaultFilters={defaultFilter}\n      defaultEnvironment={environments[0].entityRef}\n    >\n      <Container>\n        <Header\n          title={title}\n          customActions={<SelectEnvironment environments={environments} />}\n        />\n        <Content>\n          <FilterLayout>\n            <FilterLayout.Filters>\n              <SelectStatus />\n              <SelectSeverity />\n              <SelectNamespace />\n            </FilterLayout.Filters>\n            <FilterLayout.Content>\n              <Flex direction=\"column\" gap=\"4\">\n                <SearchField />\n                <PolicyReportsTable\n                  emptyContentText=\"No policies found\"\n                  policyDocumentationUrl={policyDocumentationUrl}\n                />\n              </Flex>\n            </FilterLayout.Content>\n          </FilterLayout>\n        </Content>\n      </Container>\n    </PolicyReportsFiltersProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA,GAAQ,gBAAA;AAAA,EACR;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,EAAE,YAAA,EAAc,mBAAA,EAAoB,GAAI,eAAA,EAAgB;AAE9D,EAAA,MAAM,aAAA,GAAwB;AAAA,IAC5B,MAAA,EAAQ,CAAC,MAAM;AAAA,GACjB;AAGA,EAAA,IAAI,mBAAA,EAAqB,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAG1C,EAAA,IAAI,CAAC,YAAA,EAAc,MAAA;AACjB,IAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAO,KAAA,EAAc,CAAA;AAAA,0BACrB,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,KAAA,EAAM,uCAAA;AAAA,UACN,6BACE,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,YAAA,sEAAA;AAAA,4BAEK,GAAA,CAAC,UAAK,QAAA,EAAA,uBAAA,EAAqB,CAAA;AAAA,YAAO;AAAA,WAAA,EAEzC,CAAA;AAAA,UAEF,wBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAO,QAAA;AAAA,cACP,IAAA,EAAK,6DAAA;AAAA,cACN,QAAA,EAAA;AAAA;AAAA,WAED,EACF;AAAA;AAAA,OAEJ,EACF;AAAA,KAAA,EACF,CAAA;AAGJ,EAAA,uBACE,GAAA;AAAA,IAAC,4BAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB,aAAA;AAAA,MAChB,kBAAA,EAAoB,YAAA,CAAa,CAAC,CAAA,CAAE,SAAA;AAAA,MAEpC,+BAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,aAAA,kBAAe,GAAA,CAAC,iBAAA,EAAA,EAAkB,YAAA,EAA4B;AAAA;AAAA,SAChE;AAAA,wBACA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,YAAA,CAAa,SAAb,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,gCACb,cAAA,EAAA,EAAe,CAAA;AAAA,gCACf,eAAA,EAAA,EAAgB;AAAA,WAAA,EACnB,CAAA;AAAA,0BACA,GAAA,CAAC,aAAa,OAAA,EAAb,EACC,+BAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,GAAA,EAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA;AAAA,4BACb,GAAA;AAAA,cAAC,kBAAA;AAAA,cAAA;AAAA,gBACC,gBAAA,EAAiB,mBAAA;AAAA,gBACjB;AAAA;AAAA;AACF,WAAA,EACF,CAAA,EACF;AAAA,SAAA,EACF,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -31,8 +31,7 @@ const SelectNamespace = () => {
       options,
       value: filter.namespaces ?? [],
       onChange: handleChange,
-      placeholder: "All",
-      style: { width: 200 }
+      placeholder: "All"
     }
   );
 };

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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    />\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;AAAA;AAAA,GACd;AAEJ;;;;"}

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

@@ -37,8 +37,7 @@ const SelectSeverity = () => {
       options: SEVERITY_OPTIONS,
       value: filter.severities ?? [],
       onChange: handleChange,
-      placeholder: "All",
-      style: { width: 200 }
+      placeholder: "All"
     }
   );
 };

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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    />\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;AAAA;AAAA,GACd;AAEJ;;;;"}

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

@@ -37,8 +37,7 @@ const SelectStatus = () => {
       options: STATUS_OPTIONS,
       value: filter.status ?? [],
       onChange: handleChange,
-      placeholder: "All",
-      style: { width: 200 }
+      placeholder: "All"
     }
   );
 };

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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    />\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;AAAA;AAAA,GACd;AAEJ;;;;"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@kyverno/backstage-plugin-policy-reporter";
-var version = "2.8.0";
+var version = "2.9.0";
 var main = "src/index.ts";
 var types = "src/index.ts";
 var license = "Apache-2.0";
@@ -20,7 +20,8 @@ var backstage = {
 var publishConfig = {
 	access: "public",
 	main: "dist/index.esm.js",
-	types: "dist/index.d.ts"
+	types: "dist/index.d.ts",
+	provenance: true
 };
 var exports$1 = {
 	".": "./src/index.ts",
@@ -65,6 +66,7 @@ var dependencies = {
 	"@material-ui/core": "^4.12.4",
 	"@material-ui/icons": "^4.11.3",
 	"@material-ui/lab": "4.0.0-alpha.61",
+	"@remixicon/react": ">=4.6.0 <4.9.0",
 	qs: "^6.15.0",
 	"react-use": "^17.6.0"
 };

package/dist/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyverno/backstage-plugin-policy-reporter",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -24,7 +24,8 @@
   "publishConfig": {
     "access": "public",
     "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "types": "dist/index.d.ts",
+    "provenance": true
   },
   "exports": {
     ".": {
@@ -78,6 +79,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
+    "@remixicon/react": ">=4.6.0 <4.9.0",
     "qs": "^6.15.0",
     "react-use": "^17.6.0"
   },
@@ -99,5 +101,6 @@
   "files": [
     "dist"
   ],
-  "module": "./dist/index.esm.js"
+  "module": "./dist/index.esm.js",
+  "provenance": true
 }