@backstage-community/plugin-apiiro 0.1.0

package/dist/components/tiles/TopLanguagesTile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopLanguagesTile.esm.js","sources":["../../../src/components/tiles/TopLanguagesTile.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { styled, useTheme } from '@mui/material/styles';\nimport { getBlueColorVariants, getOtherColor } from '../../theme/themeUtils';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport { languageIconMap, LanguageKey } from '../common/languageIcons';\nimport { CustomTooltip } from '../common';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChartBox } from '../common/ChartBox';\nimport PieChart, { PieChartData } from '../charts/PieChart';\nimport { ApiiroSmall } from '../../assets/apiiroLogo';\nimport { NotFound } from '../common';\nimport Divider from '@mui/material/Divider';\n\nexport interface TopLanguagesTileProps {\n  title?: string;\n  tooltip?: string;\n  data?: Record<string, number> | undefined;\n  width?: string | number;\n  height?: string | number;\n}\n\nconst LegendContainer = styled(Box)(() => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  justifyContent: 'center',\n  gap: '6px',\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '6px',\n  fontSize: '12px',\n  color: theme.palette.text.secondary,\n}));\n\nconst LegendColor = styled('div')<{ color: string }>(({ color }) => ({\n  width: '8px',\n  height: '8px',\n  borderRadius: '50%',\n  backgroundColor: color,\n  flexShrink: 0,\n}));\n\nconst CustomHeader = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  marginBottom: '12px',\n}));\n\nconst TitleContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: '16px',\n  lineHeight: '24px',\n  color: theme.palette.text.primary,\n}));\n\nconst mapLanguagePercentagesToPieData = (\n  languagePercentages: Record<string, number>,\n): PieChartData[] =>\n  Object.entries(languagePercentages)\n    .map(([language, value], index) => {\n      // Ensure value is a valid number, default to 0 if not\n      const numericValue =\n        typeof value === 'number' && !isNaN(value) ? value : 0;\n      return {\n        id: `${language.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-${index}`,\n        label: language,\n        value: numericValue,\n      };\n    })\n    .filter(item => item.value > 0);\n\nexport const TopLanguagesTile = ({\n  title = 'Top languages',\n  data = {},\n  width = '100%',\n}: TopLanguagesTileProps) => {\n  const theme = useTheme();\n  const blueColorVariants = getBlueColorVariants(theme);\n  const otherColor = getOtherColor(theme);\n\n  const chartData = useMemo(() => {\n    if (data && Object.keys(data).length > 0) {\n      const mappedData = mapLanguagePercentagesToPieData(data);\n      if (mappedData.length > 0) {\n        return mappedData;\n      }\n    }\n\n    return [];\n  }, [data]);\n\n  const [processedData, setProcessedData] = useState<PieChartData[]>(chartData);\n\n  useEffect(() => {\n    setProcessedData(chartData);\n  }, [chartData]);\n\n  const customHeader = (\n    <CustomHeader>\n      <TitleContainer>\n        <StyledTitle>{title}</StyledTitle>\n        <ApiiroSmall sx={{ width: 20, height: 20, color: 'text.primary' }} />\n      </TitleContainer>\n    </CustomHeader>\n  );\n  // Generate colors for legend items based on data length\n  const generateColor = useCallback(\n    (index: number, itemId: string): string => {\n      // If item id is \"other\", always use the other color\n      if (itemId === 'other') {\n        return otherColor;\n      }\n\n      // If index is within blue variants, use blue colors\n      if (index < blueColorVariants.length) {\n        return blueColorVariants[index];\n      }\n\n      // For additional items beyond blue variants, use the other color\n      return otherColor;\n    },\n    [blueColorVariants, otherColor],\n  );\n\n  const legend = (\n    <LegendContainer>\n      {processedData.slice(0, 5).map((item, index) => (\n        <LegendItem key={item.id}>\n          <LegendColor color={item.color || generateColor(index, item.id)} />\n          <Typography variant=\"caption\">{item.label}</Typography>\n        </LegendItem>\n      ))}\n      {processedData.length > 5 && (\n        <CustomTooltip\n          title={\n            <List dense disablePadding>\n              {processedData.slice(5).map(item => {\n                const LanguageIcon =\n                  languageIconMap[item.label as LanguageKey] ||\n                  languageIconMap['Unknown' as LanguageKey];\n\n                return (\n                  <ListItem\n                    key={item.id}\n                    disableGutters\n                    disablePadding\n                    sx={{ py: 0.5, px: 1, minWidth: 200 }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        width: '100%',\n                        justifyContent: 'space-between',\n                      }}\n                    >\n                      <Box\n                        sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n                      >\n                        <Box\n                          sx={{\n                            width: 24,\n                            height: 24,\n                            display: 'flex',\n                            alignItems: 'center',\n                            justifyContent: 'center',\n                          }}\n                        >\n                          <LanguageIcon />\n                        </Box>\n                        <Typography\n                          variant=\"body2\"\n                          sx={{ fontSize: '12px', color: 'text.primary' }}\n                        >\n                          {item.label}\n                        </Typography>\n                      </Box>\n                      <Typography\n                        variant=\"body2\"\n                        sx={{\n                          fontSize: '12px',\n                          color: 'text.primary',\n                          fontWeight: 400,\n                        }}\n                      >\n                        {Math.round(item.value)}%\n                      </Typography>\n                    </Box>\n                  </ListItem>\n                );\n              })}\n              <Divider />\n              <Typography\n                variant=\"body2\"\n                sx={{ py: 1, fontSize: '12px', color: 'text.primary' }}\n              >\n                Less then 0.1%\n              </Typography>\n            </List>\n          }\n          placement=\"top\"\n        >\n          <LegendItem>\n            <LegendColor color={generateColor(-1, 'other')} />\n            <Typography variant=\"caption\">Other</Typography>\n          </LegendItem>\n        </CustomTooltip>\n      )}\n    </LegendContainer>\n  );\n\n  // Show message when no data is available\n  if (Object.keys(data).length === 0 || processedData.length === 0) {\n    return (\n      <ChartBox title={title} width={width} customHeader={customHeader}>\n        <NotFound />\n      </ChartBox>\n    );\n  }\n\n  return (\n    <ChartBox\n      title={title}\n      width={width}\n      footer={legend}\n      customHeader={customHeader}\n    >\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          width: '100%',\n          flex: 1,\n          minHeight: 0,\n        }}\n      >\n        <PieChart\n          data={chartData}\n          width={310}\n          height={310}\n          generateColor={generateColor}\n          onDataProcessed={setProcessedData}\n        />\n      </div>\n    </ChartBox>\n  );\n};\n\nexport default TopLanguagesTile;\n"],"names":[],"mappings":"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"}

package/dist/components/tiles/TopRiskTile.esm.js

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { useApi, fetchApiRef } from '@backstage/core-plugin-api';
+import { ChartBox } from '../common/ChartBox.esm.js';
+import { useTopRisksData } from '../../queries/top-risks.queries.esm.js';
+import { apiiroApiRef } from '../../api/index.esm.js';
+import { CustomTooltip } from '../common/CustomTooltip.esm.js';
+import { NotFound } from '../common/NotFound.esm.js';
+import { SomethingWentWrong } from '../common/SomethingWentWrong.esm.js';
+import { LogoSpinner } from '../common/logoSpinner.esm.js';
+import { RiskLevel } from '../RiskLevel.esm.js';
+import '@mui/material/SvgIcon';
+import { ApiiroSmall } from '../../assets/apiiroLogo/apiiroSmall.esm.js';
+
+const RiskListContainer = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  width: "100%",
+  padding: "0 8px"
+}));
+const RiskItem = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "12px 16px",
+  borderRadius: "14px",
+  border: `1px solid ${theme.palette.divider}`,
+  minHeight: "48px",
+  gap: "12px",
+  cursor: "pointer",
+  transition: "box-shadow 200ms ease-in-out",
+  "&:hover": {
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)"
+  }
+}));
+const RiskContent = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  flex: 1,
+  minWidth: 0,
+  // Allow text truncation
+  overflow: "hidden"
+  // Ensure container doesn't overflow
+}));
+const TooltipWrapper = styled(Box)(() => ({
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  display: "flex"
+}));
+const RiskName = styled(Typography)(({ theme }) => ({
+  fontSize: "14px",
+  fontWeight: 400,
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  flex: 1,
+  minWidth: 0
+}));
+const RiskCount = styled(Typography)(({ theme }) => ({
+  fontSize: "16px",
+  fontWeight: 500,
+  color: theme.palette.text.primary,
+  minWidth: "fit-content"
+}));
+const CustomHeader = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+}));
+const TitleContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+}));
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 400,
+  fontSize: "16px",
+  lineHeight: "24px",
+  color: theme.palette.text.primary
+}));
+const TopRiskTile = ({
+  title = "Top risks",
+  data = [],
+  width = "100%",
+  height = "366px",
+  repoId,
+  entityRef
+}) => {
+  const customHeader = /* @__PURE__ */ jsx(CustomHeader, { children: /* @__PURE__ */ jsxs(TitleContainer, { children: [
+    /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+    /* @__PURE__ */ jsx(ApiiroSmall, { sx: { width: 20, height: 20, color: "text.primary" } })
+  ] }) });
+  const connectBackendApi = useApi(apiiroApiRef);
+  const { fetch } = useApi(fetchApiRef);
+  const { topRisksData, topRisksDataError, topRisksDataLoading } = useTopRisksData({
+    connectApi: connectBackendApi,
+    fetchApi: fetch,
+    repoId,
+    entityRef
+  });
+  const finalData = topRisksData ? topRisksData.map((point) => ({
+    ruleName: point.ruleName,
+    count: point.count,
+    severity: point.severity,
+    devPhase: point.devPhase
+  })) : data;
+  if (topRisksDataLoading) {
+    return /* @__PURE__ */ jsx(
+      ChartBox,
+      {
+        title,
+        width,
+        height,
+        customHeader,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "250px",
+            children: /* @__PURE__ */ jsx(LogoSpinner, {})
+          }
+        )
+      }
+    );
+  }
+  if (topRisksDataError) {
+    return /* @__PURE__ */ jsx(
+      ChartBox,
+      {
+        title,
+        width,
+        height,
+        customHeader,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "300px",
+            children: /* @__PURE__ */ jsx(SomethingWentWrong, {})
+          }
+        )
+      }
+    );
+  }
+  if (!repoId) {
+    return /* @__PURE__ */ jsx(
+      ChartBox,
+      {
+        title,
+        width,
+        height,
+        customHeader,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "300px",
+            children: /* @__PURE__ */ jsx(NotFound, { message: "Please provide the repository details to access the data." })
+          }
+        )
+      }
+    );
+  }
+  if (finalData.length === 0) {
+    return /* @__PURE__ */ jsx(
+      ChartBox,
+      {
+        title,
+        width,
+        height,
+        customHeader,
+        children: /* @__PURE__ */ jsx(NotFound, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ChartBox,
+    {
+      title,
+      width,
+      height,
+      customHeader,
+      children: /* @__PURE__ */ jsx(RiskListContainer, { children: finalData.map((risk, index) => /* @__PURE__ */ jsxs(RiskItem, { children: [
+        /* @__PURE__ */ jsxs(RiskContent, { children: [
+          /* @__PURE__ */ jsx(RiskLevel, { level: risk.severity, iconSize: "large" }),
+          /* @__PURE__ */ jsx(TooltipWrapper, { children: /* @__PURE__ */ jsx(CustomTooltip, { title: risk.ruleName, children: /* @__PURE__ */ jsx(RiskName, { children: risk.ruleName }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(RiskCount, { children: risk.count })
+      ] }, `${risk.ruleName}-${index}`)) })
+    }
+  );
+};
+
+export { TopRiskTile, TopRiskTile as default };
+//# sourceMappingURL=TopRiskTile.esm.js.map

package/dist/components/tiles/TopRiskTile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopRiskTile.esm.js","sources":["../../../src/components/tiles/TopRiskTile.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { styled } from '@mui/material/styles';\nimport { fetchApiRef, useApi } from '@backstage/core-plugin-api';\nimport { ChartBox } from '../common/ChartBox';\nimport { useTopRisksData } from '../../queries/top-risks.queries';\nimport { apiiroApiRef } from '../../api';\nimport { TopRiskDataPoint } from '../../queries/queries.type';\nimport { CustomTooltip, NotFound, SomethingWentWrong } from '../common';\nimport { LogoSpinner } from '../common/logoSpinner';\nimport { RiskLevel } from '../RiskLevel';\nimport { ApiiroSmall } from '../../assets/apiiroLogo';\n\nexport interface TopRiskData {\n  ruleName: string;\n  count: number;\n  severity: string;\n  devPhase: string;\n}\n\nexport interface TopRiskTileProps {\n  title?: string;\n  tooltip?: string;\n  data?: TopRiskData[];\n  width?: string | number;\n  height?: string | number;\n  repoId?: string;\n  entityRef?: string;\n}\n\nconst RiskListContainer = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px',\n  width: '100%',\n  padding: '0 8px',\n}));\n\nconst RiskItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px 16px',\n  borderRadius: '14px',\n  border: `1px solid ${theme.palette.divider}`,\n  minHeight: '48px',\n  gap: '12px',\n  cursor: 'pointer',\n  transition: 'box-shadow 200ms ease-in-out',\n\n  '&:hover': {\n    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',\n  },\n}));\n\nconst RiskContent = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  flex: 1,\n  minWidth: 0, // Allow text truncation\n  overflow: 'hidden', // Ensure container doesn't overflow\n}));\n\nconst TooltipWrapper = styled(Box)(() => ({\n  flex: 1,\n  minWidth: 0,\n  overflow: 'hidden',\n  display: 'flex',\n}));\n\nconst RiskName = styled(Typography)(({ theme }) => ({\n  fontSize: '14px',\n  fontWeight: 400,\n  color: theme.palette.text.primary,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  flex: 1,\n  minWidth: 0,\n}));\n\nconst RiskCount = styled(Typography)(({ theme }) => ({\n  fontSize: '16px',\n  fontWeight: 500,\n  color: theme.palette.text.primary,\n  minWidth: 'fit-content',\n}));\n\nconst CustomHeader = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  marginBottom: '12px',\n}));\n\nconst TitleContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: '16px',\n  lineHeight: '24px',\n  color: theme.palette.text.primary,\n}));\n\nexport const TopRiskTile = ({\n  title = 'Top risks',\n  data = [],\n  width = '100%',\n  height = '366px',\n  repoId,\n  entityRef,\n}: TopRiskTileProps) => {\n  const customHeader = (\n    <CustomHeader>\n      <TitleContainer>\n        <StyledTitle>{title}</StyledTitle>\n        <ApiiroSmall sx={{ width: 20, height: 20, color: 'text.primary' }} />\n      </TitleContainer>\n    </CustomHeader>\n  );\n  // Use API hooks internally\n  const connectBackendApi = useApi(apiiroApiRef);\n  const { fetch } = useApi(fetchApiRef);\n\n  // Always call the hook, but conditionally use the result\n  const { topRisksData, topRisksDataError, topRisksDataLoading } =\n    useTopRisksData({\n      connectApi: connectBackendApi,\n      fetchApi: fetch,\n      repoId,\n      entityRef,\n    });\n\n  // Transform API data to component data format\n  const finalData: TopRiskData[] = topRisksData\n    ? topRisksData.map((point: TopRiskDataPoint) => ({\n        ruleName: point.ruleName,\n        count: point.count,\n        severity: point.severity,\n        devPhase: point.devPhase,\n      }))\n    : data;\n\n  // Show loading state while data is loading\n  if (topRisksDataLoading) {\n    return (\n      <ChartBox\n        title={title}\n        width={width}\n        height={height}\n        customHeader={customHeader}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight=\"250px\"\n        >\n          <LogoSpinner />\n        </Box>\n      </ChartBox>\n    );\n  }\n\n  // Show error state if there's an error\n  if (topRisksDataError) {\n    return (\n      <ChartBox\n        title={title}\n        width={width}\n        height={height}\n        customHeader={customHeader}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight=\"300px\"\n        >\n          <SomethingWentWrong />\n        </Box>\n      </ChartBox>\n    );\n  }\n\n  // Show message when no repository key is provided\n  if (!repoId) {\n    return (\n      <ChartBox\n        title={title}\n        width={width}\n        height={height}\n        customHeader={customHeader}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight=\"300px\"\n        >\n          <NotFound message=\"Please provide the repository details to access the data.\" />\n        </Box>\n      </ChartBox>\n    );\n  }\n\n  // Show message when no data is available\n  if (finalData.length === 0) {\n    return (\n      <ChartBox\n        title={title}\n        width={width}\n        height={height}\n        customHeader={customHeader}\n      >\n        <NotFound />\n      </ChartBox>\n    );\n  }\n\n  return (\n    <ChartBox\n      title={title}\n      width={width}\n      height={height}\n      customHeader={customHeader}\n    >\n      <RiskListContainer>\n        {finalData.map((risk, index) => (\n          <RiskItem key={`${risk.ruleName}-${index}`}>\n            <RiskContent>\n              <RiskLevel level={risk.severity} iconSize=\"large\" />\n              <TooltipWrapper>\n                <CustomTooltip title={risk.ruleName}>\n                  <RiskName>{risk.ruleName}</RiskName>\n                </CustomTooltip>\n              </TooltipWrapper>\n            </RiskContent>\n            <RiskCount>{risk.count}</RiskCount>\n          </RiskItem>\n        ))}\n      </RiskListContainer>\n    </ChartBox>\n  );\n};\n\nexport default TopRiskTile;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6CA,MAAM,iBAAA,GAAoB,MAAA,CAAO,GAAG,CAAA,CAAE,OAAO;AAAA,EAC3C,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,MAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,CAAE,CAAA;AAEF,MAAM,WAAW,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAO;AAAA,EAC3C,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,eAAA;AAAA,EAChB,OAAA,EAAS,WAAA;AAAA,EACT,YAAA,EAAc,MAAA;AAAA,EACd,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,EAC1C,SAAA,EAAW,MAAA;AAAA,EACX,GAAA,EAAK,MAAA;AAAA,EACL,MAAA,EAAQ,SAAA;AAAA,EACR,UAAA,EAAY,8BAAA;AAAA,EAEZ,SAAA,EAAW;AAAA,IACT,SAAA,EAAW;AAAA;AAEf,CAAA,CAAE,CAAA;AAEF,MAAM,WAAA,GAAc,MAAA,CAAO,GAAG,CAAA,CAAE,OAAO;AAAA,EACrC,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,QAAA,EAAU,CAAA;AAAA;AAAA,EACV,QAAA,EAAU;AAAA;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,cAAA,GAAiB,MAAA,CAAO,GAAG,CAAA,CAAE,OAAO;AAAA,EACxC,IAAA,EAAM,CAAA;AAAA,EACN,QAAA,EAAU,CAAA;AAAA,EACV,QAAA,EAAU,QAAA;AAAA,EACV,OAAA,EAAS;AACX,CAAA,CAAE,CAAA;AAEF,MAAM,WAAW,MAAA,CAAO,UAAU,EAAE,CAAC,EAAE,OAAM,MAAO;AAAA,EAClD,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,EAC1B,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc,UAAA;AAAA,EACd,UAAA,EAAY,QAAA;AAAA,EACZ,IAAA,EAAM,CAAA;AAAA,EACN,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,YAAY,MAAA,CAAO,UAAU,EAAE,CAAC,EAAE,OAAM,MAAO;AAAA,EACnD,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,EAC1B,QAAA,EAAU;AACZ,CAAA,CAAE,CAAA;AAEF,MAAM,YAAA,GAAe,MAAA,CAAO,GAAG,CAAA,CAAE,OAAO;AAAA,EACtC,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,eAAA;AAAA,EAChB,YAAA,EAAc;AAChB,CAAA,CAAE,CAAA;AAEF,MAAM,cAAA,GAAiB,MAAA,CAAO,GAAG,CAAA,CAAE,OAAO;AAAA,EACxC,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK;AACP,CAAA,CAAE,CAAA;AAEF,MAAM,cAAc,MAAA,CAAO,UAAU,EAAE,CAAC,EAAE,OAAM,MAAO;AAAA,EACrD,UAAA,EAAY,GAAA;AAAA,EACZ,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,MAAA;AAAA,EACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAC5B,CAAA,CAAE,CAAA;AAEK,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAA,GAAQ,WAAA;AAAA,EACR,OAAO,EAAC;AAAA,EACR,KAAA,GAAQ,MAAA;AAAA,EACR,MAAA,GAAS,OAAA;AAAA,EACT,MAAA;AAAA,EACA;AACF,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAA,mBACJ,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACpB,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAI,EAAE,KAAA,EAAO,IAAI,MAAA,EAAQ,EAAA,EAAI,KAAA,EAAO,cAAA,EAAe,EAAG;AAAA,GAAA,EACrE,CAAA,EACF,CAAA;AAGF,EAAA,MAAM,iBAAA,GAAoB,OAAO,YAAY,CAAA;AAC7C,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,MAAA,CAAO,WAAW,CAAA;AAGpC,EAAA,MAAM,EAAE,YAAA,EAAc,iBAAA,EAAmB,mBAAA,KACvC,eAAA,CAAgB;AAAA,IACd,UAAA,EAAY,iBAAA;AAAA,IACZ,QAAA,EAAU,KAAA;AAAA,IACV,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,MAAM,SAAA,GAA2B,YAAA,GAC7B,YAAA,CAAa,GAAA,CAAI,CAAC,KAAA,MAA6B;AAAA,IAC7C,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,OAAO,KAAA,CAAM,KAAA;AAAA,IACb,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,UAAU,KAAA,CAAM;AAAA,IAChB,CAAA,GACF,IAAA;AAGJ,EAAA,IAAI,mBAAA,EAAqB;AACvB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,MAAA;AAAA,YACR,cAAA,EAAe,QAAA;AAAA,YACf,UAAA,EAAW,QAAA;AAAA,YACX,SAAA,EAAU,OAAA;AAAA,YAEV,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA;AACf;AAAA,KACF;AAAA,EAEJ;AAGA,EAAA,IAAI,iBAAA,EAAmB;AACrB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,MAAA;AAAA,YACR,cAAA,EAAe,QAAA;AAAA,YACf,UAAA,EAAW,QAAA;AAAA,YACX,SAAA,EAAU,OAAA;AAAA,YAEV,8BAAC,kBAAA,EAAA,EAAmB;AAAA;AAAA;AACtB;AAAA,KACF;AAAA,EAEJ;AAGA,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,MAAA;AAAA,YACR,cAAA,EAAe,QAAA;AAAA,YACf,UAAA,EAAW,QAAA;AAAA,YACX,SAAA,EAAU,OAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAQ,2DAAA,EAA4D;AAAA;AAAA;AAChF;AAAA,KACF;AAAA,EAEJ;AAGA,EAAA,IAAI,SAAA,CAAU,WAAW,CAAA,EAAG;AAC1B,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAA;AAAA,QAEA,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,KACZ;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,qBACE,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,0BACnB,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,IAAA,CAAK,QAAA,EAAU,UAAS,OAAA,EAAQ,CAAA;AAAA,0BAClD,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,IAAA,CAAK,QAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,QAAA,EAAA,IAAA,CAAK,QAAA,EAAS,CAAA,EAC3B,CAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,SAAA,EAAA,EAAW,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM;AAAA,OAAA,EAAA,EATV,GAAG,IAAA,CAAK,QAAQ,IAAI,KAAK,CAAA,CAUxC,CACD,CAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useUrlFilters.esm.js

@@ -0,0 +1,102 @@
+import { useState, useCallback } from 'react';
+
+const useUrlFilters = () => {
+  const getInitialFilters = () => {
+    if (typeof window === "undefined") {
+      return {
+        riskCategory: [],
+        riskLevel: [],
+        findingCategory: [],
+        riskInsight: [],
+        discoveredOnRange: [],
+        selectedPreset: ""
+      };
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    const parseArrayParam = (param) => {
+      const value = urlParams.get(param);
+      return value ? value.split(",").filter(Boolean) : [];
+    };
+    const parseDateRange = () => {
+      const startDate = urlParams.get("discoveredStart");
+      const endDate = urlParams.get("discoveredEnd");
+      if (startDate && endDate) {
+        try {
+          const parseLocalDate = (dateStr) => {
+            const [year, month, day] = dateStr.split("-").map(Number);
+            return new Date(year, month - 1, day);
+          };
+          return [parseLocalDate(startDate), parseLocalDate(endDate)];
+        } catch {
+          return [];
+        }
+      }
+      return [];
+    };
+    return {
+      riskCategory: parseArrayParam("riskCategory"),
+      riskLevel: parseArrayParam("riskLevel"),
+      findingCategory: parseArrayParam("findingCategory"),
+      riskInsight: parseArrayParam("riskInsight"),
+      discoveredOnRange: parseDateRange(),
+      selectedPreset: urlParams.get("preset") || ""
+    };
+  };
+  const [filters, setFilters] = useState(getInitialFilters);
+  const updateURL = useCallback((newFilters) => {
+    if (typeof window === "undefined") return;
+    setFilters((prevFilters) => {
+      const updatedFilters = { ...prevFilters, ...newFilters };
+      const url = new URL(window.location.href);
+      const setArrayParam = (key, values) => {
+        if (values.length > 0) {
+          url.searchParams.set(key, values.join(","));
+        } else {
+          url.searchParams.delete(key);
+        }
+      };
+      setArrayParam("riskCategory", updatedFilters.riskCategory);
+      setArrayParam("riskLevel", updatedFilters.riskLevel);
+      setArrayParam("findingCategory", updatedFilters.findingCategory);
+      setArrayParam("riskInsight", updatedFilters.riskInsight);
+      if (Array.isArray(updatedFilters.discoveredOnRange) && updatedFilters.discoveredOnRange[0] instanceof Date && updatedFilters.discoveredOnRange[1] instanceof Date) {
+        const formatLocalDate = (date) => {
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, "0");
+          const day = String(date.getDate()).padStart(2, "0");
+          return `${year}-${month}-${day}`;
+        };
+        url.searchParams.set(
+          "discoveredStart",
+          formatLocalDate(updatedFilters.discoveredOnRange[0])
+        );
+        url.searchParams.set(
+          "discoveredEnd",
+          formatLocalDate(updatedFilters.discoveredOnRange[1])
+        );
+      } else {
+        url.searchParams.delete("discoveredStart");
+        url.searchParams.delete("discoveredEnd");
+      }
+      if (updatedFilters.selectedPreset) {
+        url.searchParams.set("preset", updatedFilters.selectedPreset);
+      } else {
+        url.searchParams.delete("preset");
+      }
+      window.history.replaceState({}, "", url.toString());
+      return updatedFilters;
+    });
+  }, []);
+  return {
+    filters,
+    setRiskCategoryFilter: (value) => updateURL({ riskCategory: value }),
+    setRiskLevelFilter: (value) => updateURL({ riskLevel: value }),
+    setFindingCategoryFilter: (value) => updateURL({ findingCategory: value }),
+    setRiskInsightFilter: (value) => updateURL({ riskInsight: value }),
+    setDiscoveredOnRange: (value) => updateURL({ discoveredOnRange: value }),
+    setSelectedPreset: (value) => updateURL({ selectedPreset: value })
+  };
+};
+
+export { useUrlFilters };
+//# sourceMappingURL=useUrlFilters.esm.js.map

package/dist/hooks/useUrlFilters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUrlFilters.esm.js","sources":["../../src/hooks/useUrlFilters.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useCallback } from 'react';\nimport { CalendarDateValue } from '../components';\n\nexport interface UrlFilters {\n  riskCategory: string[];\n  riskLevel: string[];\n  findingCategory: string[];\n  riskInsight: string[];\n  discoveredOnRange: CalendarDateValue;\n  selectedPreset: string;\n}\n\nexport const useUrlFilters = () => {\n  // Get initial values from URL parameters\n  const getInitialFilters = (): UrlFilters => {\n    if (typeof window === 'undefined') {\n      return {\n        riskCategory: [],\n        riskLevel: [],\n        findingCategory: [],\n        riskInsight: [],\n        discoveredOnRange: [],\n        selectedPreset: '',\n      };\n    }\n\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Parse array parameters\n    const parseArrayParam = (param: string): string[] => {\n      const value = urlParams.get(param);\n      return value ? value.split(',').filter(Boolean) : [];\n    };\n\n    // Parse date range\n    const parseDateRange = (): CalendarDateValue => {\n      const startDate = urlParams.get('discoveredStart');\n      const endDate = urlParams.get('discoveredEnd');\n\n      if (startDate && endDate) {\n        try {\n          // Parse dates in local timezone to avoid timezone conversion issues\n          const parseLocalDate = (dateStr: string) => {\n            const [year, month, day] = dateStr.split('-').map(Number);\n            return new Date(year, month - 1, day);\n          };\n\n          return [parseLocalDate(startDate), parseLocalDate(endDate)];\n        } catch {\n          return [];\n        }\n      }\n      return [];\n    };\n\n    return {\n      riskCategory: parseArrayParam('riskCategory'),\n      riskLevel: parseArrayParam('riskLevel'),\n      findingCategory: parseArrayParam('findingCategory'),\n      riskInsight: parseArrayParam('riskInsight'),\n      discoveredOnRange: parseDateRange(),\n      selectedPreset: urlParams.get('preset') || '',\n    };\n  };\n\n  const [filters, setFilters] = useState<UrlFilters>(getInitialFilters);\n\n  // Update URL parameters\n  const updateURL = useCallback((newFilters: Partial<UrlFilters>) => {\n    if (typeof window === 'undefined') return;\n\n    setFilters(prevFilters => {\n      const updatedFilters = { ...prevFilters, ...newFilters };\n      const url = new URL(window.location.href);\n\n      // Helper to set or delete array parameters\n      const setArrayParam = (key: string, values: string[]) => {\n        if (values.length > 0) {\n          url.searchParams.set(key, values.join(','));\n        } else {\n          url.searchParams.delete(key);\n        }\n      };\n\n      // Update URL parameters\n      setArrayParam('riskCategory', updatedFilters.riskCategory);\n      setArrayParam('riskLevel', updatedFilters.riskLevel);\n      setArrayParam('findingCategory', updatedFilters.findingCategory);\n      setArrayParam('riskInsight', updatedFilters.riskInsight);\n\n      // Handle date range\n      if (\n        Array.isArray(updatedFilters.discoveredOnRange) &&\n        updatedFilters.discoveredOnRange[0] instanceof Date &&\n        updatedFilters.discoveredOnRange[1] instanceof Date\n      ) {\n        // Format dates in local timezone to avoid timezone conversion issues\n        const formatLocalDate = (date: Date) => {\n          const year = date.getFullYear();\n          const month = String(date.getMonth() + 1).padStart(2, '0');\n          const day = String(date.getDate()).padStart(2, '0');\n          return `${year}-${month}-${day}`;\n        };\n\n        url.searchParams.set(\n          'discoveredStart',\n          formatLocalDate(updatedFilters.discoveredOnRange[0]),\n        );\n        url.searchParams.set(\n          'discoveredEnd',\n          formatLocalDate(updatedFilters.discoveredOnRange[1]),\n        );\n      } else {\n        url.searchParams.delete('discoveredStart');\n        url.searchParams.delete('discoveredEnd');\n      }\n\n      // Handle preset\n      if (updatedFilters.selectedPreset) {\n        url.searchParams.set('preset', updatedFilters.selectedPreset);\n      } else {\n        url.searchParams.delete('preset');\n      }\n\n      window.history.replaceState({}, '', url.toString());\n      return updatedFilters;\n    });\n  }, []);\n\n  return {\n    filters,\n    setRiskCategoryFilter: (value: string[]) =>\n      updateURL({ riskCategory: value }),\n    setRiskLevelFilter: (value: string[]) => updateURL({ riskLevel: value }),\n    setFindingCategoryFilter: (value: string[]) =>\n      updateURL({ findingCategory: value }),\n    setRiskInsightFilter: (value: string[]) =>\n      updateURL({ riskInsight: value }),\n    setDiscoveredOnRange: (value: CalendarDateValue) =>\n      updateURL({ discoveredOnRange: value }),\n    setSelectedPreset: (value: string) => updateURL({ selectedPreset: value }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { Entity } from '@backstage/catalog-model';
+
+/** @public */
+declare const apiiroPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/** @public */
+declare const ApiiroPage: () => react_jsx_runtime.JSX.Element;
+
+/** @public */
+declare const ApiiroSidebar: () => JSX.Element;
+
+/** @public */
+declare const ApiiroTab: () => react_jsx_runtime.JSX.Element;
+
+/** @public */
+declare const ApiiroWidget: () => react_jsx_runtime.JSX.Element;
+
+/**
+ * @public
+ * Checks if the entity has the APIIRO project annotation.
+ */
+declare const isApiiroRepoAvailable: (entity: Entity) => boolean;
+
+export { ApiiroPage, ApiiroSidebar, ApiiroTab, ApiiroWidget, apiiroPlugin, isApiiroRepoAvailable };

package/dist/index.esm.js

@@ -0,0 +1,42 @@
+export { ApiiroPage, apiiroPlugin } from './plugin.esm.js';
+export { ApiiroSidebar } from './components/ApiiroSidebar.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/x-data-grid';
+import '@mui/material/Box';
+import '@mui/material/styles';
+import '@mui/material/MenuItem';
+import '@mui/material/ListItemIcon';
+import '@mui/material/ListItemText';
+import '@mui/icons-material';
+import '@mui/material/Typography';
+import '@mui/material/Select';
+import '@mui/material/Pagination';
+import '@mui/material/TextField';
+import '@mui/material/InputAdornment';
+import '@mui/icons-material/Search';
+import '@mui/icons-material/Clear';
+import '@mui/material/IconButton';
+import './components/common/ChartBox.esm.js';
+import 'react-dom';
+import './components/common/logoSpinner.esm.js';
+import '@backstage/core-components';
+import '@mui/material/SvgIcon';
+import '@mui/material/Chip';
+import '@mui/material/Link';
+import '@mui/icons-material/VisibilityOff';
+import '@mui/material/Avatar';
+export { isApiiroRepoAvailable } from './utils/utils.esm.js';
+import './components/filters/FilterDropdown.esm.js';
+import './components/filters/RiskInsightFilter.esm.js';
+import './components/CalendarDatePicker.esm.js';
+import '@mui/material/ButtonBase';
+import '@mui/material/Popper';
+import '@mui/material/ClickAwayListener';
+import '@mui/material/Tooltip';
+import '@mui/material/Skeleton';
+import '@mui/icons-material/KeyboardArrowDown';
+import '@mui/icons-material/Close';
+export { ApiiroTab } from './pages/tab/TabProvider.esm.js';
+export { ApiiroWidget } from './pages/widget/WidgetProvider.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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

package/dist/pages/Repositories/Repositories.esm.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Page, Content } from '@backstage/core-components';
+import { useApi, fetchApiRef } from '@backstage/core-plugin-api';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { apiiroApiRef } from '../../api/index.esm.js';
+import { DataGrid } from '../../components/DataGrid/DataGrid.esm.js';
+import '@mui/material/Select';
+import '@mui/material/MenuItem';
+import '@mui/material/Pagination';
+import '@mui/material/styles';
+import '@mui/x-data-grid';
+import '@mui/material/ListItemIcon';
+import '@mui/material/ListItemText';
+import '@mui/icons-material';
+import '@mui/material/TextField';
+import '@mui/material/InputAdornment';
+import '@mui/icons-material/Search';
+import '@mui/icons-material/Clear';
+import '@mui/material/IconButton';
+import { Header } from '../../components/Header.esm.js';
+import { useRepositoriesData } from '../../queries/repository.queries.esm.js';
+import '@tanstack/react-query';
+import { columnVisibilityModal, repositoryColumns } from './tableConfig.esm.js';
+import '../../components/common/ChartBox.esm.js';
+import 'react-dom';
+import { SomethingWentWrong } from '../../components/common/SomethingWentWrong.esm.js';
+
+const SomethingWentWrongBox = ({ statusCode }) => {
+  return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flexDirection: "column",
+      minHeight: "300px",
+      children: /* @__PURE__ */ jsx(SomethingWentWrong, { statusCode })
+    }
+  ) });
+};
+const INITIAL_SORTING = [
+  {
+    field: "riskScore",
+    sort: "desc"
+  }
+];
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const DATA_GRID_FEATURES = {
+  quickSearch: true,
+  columnPinning: true,
+  columnReordering: true,
+  customPagination: true,
+  columnMenu: true,
+  persistLayout: true
+};
+const Repositories = () => {
+  const connectBackendApi = useApi(apiiroApiRef);
+  const { fetch } = useApi(fetchApiRef);
+  const { repositoriesData, repositoriesDataLoading, repositoriesDataError } = useRepositoriesData({
+    connectApi: connectBackendApi,
+    fetchApi: fetch
+  });
+  const rows = useMemo(
+    () => repositoriesData?.repositories || [],
+    [repositoriesData?.repositories]
+  );
+  const showDataGrid = !repositoriesDataError;
+  const errorStatusCode = repositoriesDataError?.details?.status;
+  return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { color: "text.primary", mb: 2 }, children: "Repositories" }),
+      repositoriesDataError && /* @__PURE__ */ jsx(SomethingWentWrongBox, { statusCode: errorStatusCode }),
+      showDataGrid && /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          getRowId: (row) => `${row.key}-${row.entityUrl}`,
+          loading: repositoriesDataLoading,
+          tableKey: "repositories",
+          columns: repositoryColumns,
+          rows,
+          dataLabel: "repositories",
+          searchBarPlaceHolder: "Search repository name...",
+          features: DATA_GRID_FEATURES,
+          initialState: {
+            sorting: {
+              sortModel: INITIAL_SORTING
+            }
+          },
+          initialPageSize: PAGE_SIZE_OPTIONS[0],
+          pageSizeOptions: PAGE_SIZE_OPTIONS,
+          columnVisibility: columnVisibilityModal
+        }
+      )
+    ] })
+  ] });
+};
+
+export { Repositories };
+//# sourceMappingURL=Repositories.esm.js.map

package/dist/pages/Repositories/Repositories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Repositories.esm.js","sources":["../../../src/pages/Repositories/Repositories.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useMemo } from 'react';\nimport { Content, Page } from '@backstage/core-components';\nimport { fetchApiRef, useApi } from '@backstage/core-plugin-api';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { apiiroApiRef } from '../../api';\nimport { DataGrid } from '../../components/DataGrid';\nimport { Header } from '../../components/Header';\nimport { RepositoryType, useRepositoriesData } from '../../queries';\nimport { columnVisibilityModal, repositoryColumns } from './tableConfig';\nimport { SomethingWentWrong } from '../../components/common';\n\ninterface SomethingWentWrongBoxProps {\n  statusCode?: number;\n}\n\nconst SomethingWentWrongBox = ({ statusCode }: SomethingWentWrongBoxProps) => {\n  return (\n    <Content>\n      <Box\n        display=\"flex\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        flexDirection=\"column\"\n        minHeight=\"300px\"\n      >\n        <SomethingWentWrong statusCode={statusCode} />\n      </Box>\n    </Content>\n  );\n};\n\nconst INITIAL_SORTING = [\n  {\n    field: 'riskScore',\n    sort: 'desc' as const,\n  },\n];\n\nconst PAGE_SIZE_OPTIONS = [10, 20, 50, 100];\n\nconst DATA_GRID_FEATURES = {\n  quickSearch: true,\n  columnPinning: true,\n  columnReordering: true,\n  customPagination: true,\n  columnMenu: true,\n  persistLayout: true,\n} as const;\n\nexport const Repositories = () => {\n  const connectBackendApi = useApi(apiiroApiRef);\n  const { fetch } = useApi(fetchApiRef);\n\n  const { repositoriesData, repositoriesDataLoading, repositoriesDataError } =\n    useRepositoriesData({\n      connectApi: connectBackendApi,\n      fetchApi: fetch,\n    });\n\n  const rows = useMemo(\n    () => repositoriesData?.repositories || [],\n    [repositoriesData?.repositories],\n  );\n\n  const showDataGrid = !repositoriesDataError;\n  const errorStatusCode = repositoriesDataError?.details?.status;\n\n  return (\n    <Page themeId=\"tool\">\n      <Header />\n      <Content>\n        <Typography variant=\"h4\" sx={{ color: 'text.primary', mb: 2 }}>\n          Repositories\n        </Typography>\n\n        {repositoriesDataError && (\n          <SomethingWentWrongBox statusCode={errorStatusCode} />\n        )}\n\n        {showDataGrid && (\n          <DataGrid<RepositoryType>\n            getRowId={row => `${row.key}-${row.entityUrl}`}\n            loading={repositoriesDataLoading}\n            tableKey=\"repositories\"\n            columns={repositoryColumns}\n            rows={rows}\n            dataLabel=\"repositories\"\n            searchBarPlaceHolder=\"Search repository name...\"\n            features={DATA_GRID_FEATURES}\n            initialState={{\n              sorting: {\n                sortModel: INITIAL_SORTING,\n              },\n            }}\n            initialPageSize={PAGE_SIZE_OPTIONS[0]}\n            pageSizeOptions={PAGE_SIZE_OPTIONS}\n            columnVisibility={columnVisibilityModal}\n          />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}