@red-hat-developer-hub/backstage-plugin-adoption-insights 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @red-hat-developer-hub/backstage-plugin-adoption-insights
 
+## 0.3.0
+
+### Minor Changes
+
+- 2470f72: Add internationalization (i18n) support with German and French translations.
+- 6673ba3: Backstage version bump to v1.42.5
+
+### Patch Changes
+
+- 192c262: Update label from techdocs to TechDocs in UI
+- 67e9f96: Fixed CSV export filename to include timestamp for better file identification and to avoid naming conflicts. Active Users CSV exports now use format "active_users_YYYY-MM-DD_HH-mm-ss-SSS.csv" instead of generic "active_users"
+- 25fcc52: Pagination and title consistency improvements:
+
+  - Fixed dynamic "Top X" pagination options to adapt to actual item count, resolving misleading filter options when dataset is smaller than defaults
+  - Added "All" option for datasets smaller than maxDefaultOption (20 items)
+  - Improved component title consistency across the UI
+
+- e7f6aba: Fixed Adoption Insights header background color by removing custom background style override that was causing wrong theming
+- 617de8b: - Fixed confusing text in ActiveUsers and Searches components by replacing "were conducted" with professional analytics terminology
+  - Updated text to use "Average peak active user count" and "Average search count" for better clarity
+  - Enhanced time period text to properly handle all grouping types (hourly, daily, weekly, monthly) instead of only supporting hour and day
+- 0dd7b78: Align legends in Active users card, display trends on initial load, and remove empty space in no results card
+- b887a58: French translation updated
+- 5eeb69a: Updated dependency `@mui/lab` to `5.0.0-alpha.177`.
+  Updated dependency `date-fns-tz` to `1.3.8`.
+- 86cf463: Updated dependency `@red-hat-developer-hub/backstage-plugin-theme` to `^0.10.0`.
+- c2501eb: Updated dependency `@mui/icons-material` to `5.18.0`.
+  Updated dependency `@mui/material` to `5.18.0`.
+- Updated dependencies [6673ba3]
+  - @red-hat-developer-hub/backstage-plugin-adoption-insights-common@0.4.0
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/components/ActiveUsers/ActiveUsers.esm.js

@@ -7,34 +7,39 @@ import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, A
 import CardWrapper from '../CardWrapper/CardWrapper.esm.js';
 import CustomCursor from '../Common/CustomCursor.esm.js';
 import CustomLegend from './CustomLegend.esm.js';
-import { getAverage, getXAxisTickValues, getXAxisformat } from '../../utils/utils.esm.js';
+import { getGroupingLabel, getAverage, getXAxisTickValues, getXAxisformat, formatNumber } from '../../utils/utils.esm.js';
 import { useActiveUsers } from '../../hooks/useActiveUsers.esm.js';
 import { Typography } from '@material-ui/core';
 import ExportCSVButton from './ExportCSVButton.esm.js';
 import EmptyChartState from '../Common/EmptyChartState.esm.js';
 import ChartTooltip from '../Common/ChartTooltip.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { useLanguage } from '../../hooks/useLanguage.esm.js';
+import { Trans } from '../Trans.esm.js';
 
 const ActiveUsers = () => {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
+  const { t } = useTranslation();
+  const locale = useLanguage();
   const { activeUsers, loading, error } = useActiveUsers();
   const { data, grouping = "daily" } = activeUsers;
   if (error) {
-    return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
+    return /* @__PURE__ */ jsx(CardWrapper, { title: t("activeUsers.title"), children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
   }
   if (!data || data?.length === 0 || !data?.[0] && !loading) {
-    return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(CardWrapper, { title: t("activeUsers.title"), children: /* @__PURE__ */ jsx(
       Box,
       {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: 200,
+        minHeight: 80,
         children: /* @__PURE__ */ jsx(EmptyChartState, {})
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", filter: /* @__PURE__ */ jsx(ExportCSVButton, {}), children: loading ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CardWrapper, { title: t("activeUsers.title"), filter: /* @__PURE__ */ jsx(ExportCSVButton, {}), children: loading ? /* @__PURE__ */ jsx(
     Box,
     {
       display: "flex",
@@ -45,11 +50,21 @@ const ActiveUsers = () => {
     }
   ) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Typography, { style: { margin: "20px 36px" }, children: [
-      /* @__PURE__ */ jsx("b", { children: `${Math.round(getAverage(data, "total_users")).toLocaleString(
-        "en-Us"
-      )} active users per ${grouping === "hourly" ? "hour" : "day"}` }),
+      t("activeUsers.averagePrefix"),
       " ",
-      "were conducted during this period."
+      /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx(
+        Trans,
+        {
+          message: "activeUsers.averageText",
+          params: {
+            count: Math.round(
+              getAverage(data, "total_users")
+            ).toLocaleString("en-US"),
+            period: getGroupingLabel(grouping, t, "activeUsers")
+          }
+        }
+      ) }),
+      t("activeUsers.averageSuffix")
     ] }),
     /* @__PURE__ */ jsx(Box, { sx: { height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
       AreaChart,
@@ -89,7 +104,7 @@ const ActiveUsers = () => {
             XAxis,
             {
               dataKey: "date",
-              tickFormatter: (date) => getXAxisformat(date, grouping),
+              tickFormatter: (date) => getXAxisformat(date, grouping, locale),
               ticks: getXAxisTickValues(data, grouping),
               tick: { fill: theme.palette.text.primary },
               axisLine: false,
@@ -104,7 +119,7 @@ const ActiveUsers = () => {
               tick: { fill: theme.palette.text.primary },
               tickLine: false,
               axisLine: false,
-              tickFormatter: (value) => value.toLocaleString("en-Us"),
+              tickFormatter: (value) => formatNumber(value, {}, locale),
               tickMargin: 20
             }
           ),

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveUsers.esm.js","sources":["../../../src/components/ActiveUsers/ActiveUsers.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { ResponseErrorPanel } from '@backstage/core-components';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Area,\n  Legend,\n} from 'recharts';\n\nimport CardWrapper from '../CardWrapper';\nimport CustomCursor from '../Common/CustomCursor';\nimport CustomLegend from './CustomLegend';\nimport {\n  getAverage,\n  getXAxisformat,\n  getXAxisTickValues,\n} from '../../utils/utils';\nimport { useActiveUsers } from '../../hooks/useActiveUsers';\nimport { Typography } from '@material-ui/core';\nimport ExportCSVButton from './ExportCSVButton';\nimport EmptyChartState from '../Common/EmptyChartState';\nimport ChartTooltip from '../Common/ChartTooltip';\n\nconst ActiveUsers = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const { activeUsers, loading, error } = useActiveUsers();\n  const { data, grouping = 'daily' } = activeUsers;\n  if (error) {\n    return (\n      <CardWrapper title=\"Active users\">\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!data || data?.length === 0 || (!data?.[0] && !loading)) {\n    return (\n      <CardWrapper title=\"Active users\">\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper title=\"Active users\" filter={<ExportCSVButton />}>\n      {loading ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <CircularProgress />\n        </Box>\n      ) : (\n        <>\n          <Typography style={{ margin: '20px 36px' }}>\n            <b>\n              {`${Math.round(getAverage(data, 'total_users')).toLocaleString(\n                'en-Us',\n              )} active users per ${grouping === 'hourly' ? 'hour' : 'day'}`}\n            </b>{' '}\n            were conducted during this period.\n          </Typography>\n          <Box sx={{ height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={data}\n                margin={{ top: 10, right: 50, left: 20, bottom: 0 }}\n                key={JSON.stringify(data.map(d => d))}\n              >\n                <defs>\n                  <linearGradient id=\"new_users\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#1976d2\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#1976d2\" stopOpacity={0.2} />\n                  </linearGradient>\n                  <linearGradient\n                    id=\"returning_users\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"5%\" stopColor=\"#B8BBBE\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#B8BBBE\" stopOpacity={0.2} />\n                  </linearGradient>\n                </defs>\n\n                <CartesianGrid\n                  stroke={isDarkMode ? '#666' : '#E5E7EB'}\n                  strokeDasharray={0}\n                  vertical={false}\n                />\n\n                <XAxis\n                  dataKey=\"date\"\n                  tickFormatter={date => getXAxisformat(date, grouping)}\n                  ticks={getXAxisTickValues(data, grouping)}\n                  tick={{ fill: theme.palette.text.primary }}\n                  axisLine={false}\n                  tickLine={false}\n                  padding={{ left: 30, right: 30 }}\n                  tickMargin={10}\n                />\n                <YAxis\n                  tick={{ fill: theme.palette.text.primary }}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={value => value.toLocaleString('en-Us')}\n                  tickMargin={20}\n                />\n                <Tooltip\n                  cursor={<CustomCursor cursorHeight={250} />}\n                  content={<ChartTooltip grouping={grouping} />}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"returning_users\"\n                  stroke=\"#555\"\n                  fill=\"url(#returning_users)\"\n                  strokeWidth={1}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"new_users\"\n                  stroke=\"#1976d2\"\n                  fill=\"url(#new_users)\"\n                  strokeWidth={1}\n                />\n                <Legend content={<CustomLegend />} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </>\n      )}\n    </CardWrapper>\n  );\n};\n\nexport default ActiveUsers;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActiveUsers.esm.js","sources":["../../../src/components/ActiveUsers/ActiveUsers.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { ResponseErrorPanel } from '@backstage/core-components';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Area,\n  Legend,\n} from 'recharts';\n\nimport CardWrapper from '../CardWrapper';\nimport CustomCursor from '../Common/CustomCursor';\nimport CustomLegend from './CustomLegend';\nimport {\n  getAverage,\n  getXAxisformat,\n  getXAxisTickValues,\n  formatNumber,\n  getGroupingLabel,\n} from '../../utils/utils';\nimport { useActiveUsers } from '../../hooks/useActiveUsers';\nimport { Typography } from '@material-ui/core';\nimport ExportCSVButton from './ExportCSVButton';\nimport EmptyChartState from '../Common/EmptyChartState';\nimport ChartTooltip from '../Common/ChartTooltip';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { Trans } from '../Trans';\n\nconst ActiveUsers = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const { t } = useTranslation();\n  const locale = useLanguage();\n\n  const { activeUsers, loading, error } = useActiveUsers();\n  const { data, grouping = 'daily' } = activeUsers;\n  if (error) {\n    return (\n      <CardWrapper title={t('activeUsers.title')}>\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!data || data?.length === 0 || (!data?.[0] && !loading)) {\n    return (\n      <CardWrapper title={t('activeUsers.title')}>\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight={80}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper title={t('activeUsers.title')} filter={<ExportCSVButton />}>\n      {loading ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <CircularProgress />\n        </Box>\n      ) : (\n        <>\n          <Typography style={{ margin: '20px 36px' }}>\n            {t('activeUsers.averagePrefix')}{' '}\n            <b>\n              <Trans\n                message=\"activeUsers.averageText\"\n                params={{\n                  count: Math.round(\n                    getAverage(data, 'total_users'),\n                  ).toLocaleString('en-US'),\n                  period: getGroupingLabel(grouping, t, 'activeUsers'),\n                }}\n              />\n            </b>\n            {t('activeUsers.averageSuffix')}\n          </Typography>\n          <Box sx={{ height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={data}\n                margin={{ top: 10, right: 50, left: 20, bottom: 0 }}\n                key={JSON.stringify(data.map(d => d))}\n              >\n                <defs>\n                  <linearGradient id=\"new_users\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#1976d2\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#1976d2\" stopOpacity={0.2} />\n                  </linearGradient>\n                  <linearGradient\n                    id=\"returning_users\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"5%\" stopColor=\"#B8BBBE\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#B8BBBE\" stopOpacity={0.2} />\n                  </linearGradient>\n                </defs>\n\n                <CartesianGrid\n                  stroke={isDarkMode ? '#666' : '#E5E7EB'}\n                  strokeDasharray={0}\n                  vertical={false}\n                />\n\n                <XAxis\n                  dataKey=\"date\"\n                  tickFormatter={date => getXAxisformat(date, grouping, locale)}\n                  ticks={getXAxisTickValues(data, grouping)}\n                  tick={{ fill: theme.palette.text.primary }}\n                  axisLine={false}\n                  tickLine={false}\n                  padding={{ left: 30, right: 30 }}\n                  tickMargin={10}\n                />\n                <YAxis\n                  tick={{ fill: theme.palette.text.primary }}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={value => formatNumber(value, {}, locale)}\n                  tickMargin={20}\n                />\n                <Tooltip\n                  cursor={<CustomCursor cursorHeight={250} />}\n                  content={<ChartTooltip grouping={grouping} />}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"returning_users\"\n                  stroke=\"#555\"\n                  fill=\"url(#returning_users)\"\n                  strokeWidth={1}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"new_users\"\n                  stroke=\"#1976d2\"\n                  fill=\"url(#new_users)\"\n                  strokeWidth={1}\n                />\n                <Legend content={<CustomLegend />} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </>\n      )}\n    </CardWrapper>\n  );\n};\n\nexport default ActiveUsers;\n"],"names":[],"mappings":"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"}

package/dist/components/ActiveUsers/CustomLegend.esm.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const CustomLegend = (props) => {
   const theme = useTheme();
   const { payload } = props;
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -26,7 +28,7 @@ const CustomLegend = (props) => {
                 {
                   style: {
                     width: 20,
-                    height: 3,
+                    height: 4,
                     backgroundColor: entry.color
                   }
                 }
@@ -48,7 +50,7 @@ const CustomLegend = (props) => {
               {
                 variant: "body2",
                 style: { color: theme.palette.text.primary, fontSize: "0.875rem" },
-                children: entry.value === "new_users" ? "New users" : "Returning users"
+                children: entry.value === "new_users" ? t("activeUsers.legend.newUsers") : t("activeUsers.legend.returningUsers")
               }
             )
           ]

package/dist/components/ActiveUsers/CustomLegend.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLegend.esm.js","sources":["../../../src/components/ActiveUsers/CustomLegend.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\n\nconst CustomLegend = (props: any) => {\n  const theme = useTheme();\n  const { payload } = props;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: 16,\n        alignItems: 'center',\n        marginLeft: 50,\n        paddingTop: 10,\n      }}\n    >\n      {payload.map((entry: any) => (\n        <div\n          key={entry.value}\n          style={{ display: 'flex', alignItems: 'center', gap: 4 }}\n        >\n          <div>\n            <div\n              style={{\n                width: 20,\n                height: 3,\n                backgroundColor: entry.color,\n              }}\n            />\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n                opacity: '0.4',\n              }}\n            />\n          </div>\n          <Typography\n            variant=\"body2\"\n            style={{ color: theme.palette.text.primary, fontSize: '0.875rem' }}\n          >\n            {entry.value === 'new_users' ? 'New users' : 'Returning users'}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CustomLegend;\n"],"names":[],"mappings":";;;;AAkBM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AAEpB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,GAAK,EAAA,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,UAAY,EAAA,EAAA;AAAA,QACZ,UAAY,EAAA;AAAA,OACd;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,KACZ,qBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,OAAO,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAU,KAAK,CAAE,EAAA;AAAA,UAEvD,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA;AAAA;AACzB;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA,KAAA;AAAA,oBACvB,OAAS,EAAA;AAAA;AACX;AAAA;AACF,aACF,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,OAAA;AAAA,gBACR,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,OAAA,EAAS,UAAU,UAAW,EAAA;AAAA,gBAEhE,QAAA,EAAA,KAAA,CAAM,KAAU,KAAA,WAAA,GAAc,WAAc,GAAA;AAAA;AAAA;AAC/C;AAAA,SAAA;AAAA,QAzBK,KAAM,CAAA;AAAA,OA2Bd;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"CustomLegend.esm.js","sources":["../../../src/components/ActiveUsers/CustomLegend.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nconst CustomLegend = (props: any) => {\n  const theme = useTheme();\n  const { payload } = props;\n  const { t } = useTranslation();\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: 16,\n        alignItems: 'center',\n        marginLeft: 50,\n        paddingTop: 10,\n      }}\n    >\n      {payload.map((entry: any) => (\n        <div\n          key={entry.value}\n          style={{ display: 'flex', alignItems: 'center', gap: 4 }}\n        >\n          <div>\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n              }}\n            />\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n                opacity: '0.4',\n              }}\n            />\n          </div>\n          <Typography\n            variant=\"body2\"\n            style={{ color: theme.palette.text.primary, fontSize: '0.875rem' }}\n          >\n            {entry.value === 'new_users'\n              ? t('activeUsers.legend.newUsers')\n              : t('activeUsers.legend.returningUsers')}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CustomLegend;\n"],"names":[],"mappings":";;;;;AAmBM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AACpB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,GAAK,EAAA,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,UAAY,EAAA,EAAA;AAAA,QACZ,UAAY,EAAA;AAAA,OACd;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,KACZ,qBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,OAAO,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAU,KAAK,CAAE,EAAA;AAAA,UAEvD,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA;AAAA;AACzB;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA,KAAA;AAAA,oBACvB,OAAS,EAAA;AAAA;AACX;AAAA;AACF,aACF,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,OAAA;AAAA,gBACR,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,OAAA,EAAS,UAAU,UAAW,EAAA;AAAA,gBAEhE,gBAAM,KAAU,KAAA,WAAA,GACb,EAAE,6BAA6B,CAAA,GAC/B,EAAE,mCAAmC;AAAA;AAAA;AAC3C;AAAA,SAAA;AAAA,QA3BK,KAAM,CAAA;AAAA,OA6Bd;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/ActiveUsers/ExportCSVButton.esm.js

@@ -8,21 +8,25 @@ import { useTheme } from '@mui/material/styles';
 import { format } from 'date-fns';
 import { adoptionInsightsApiRef } from '../../api/index.esm.js';
 import { useDateRange } from '../Header/DateRangeContext.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const ExportCSVButton = () => {
   const [loading, setLoading] = useState(false);
   const api = useApi(adoptionInsightsApiRef);
   const { startDateRange, endDateRange } = useDateRange();
   const theme = useTheme();
+  const { t } = useTranslation();
   const debounceRef = useRef(null);
   const handleCSVDownload = async () => {
     try {
+      const timestamp = format(/* @__PURE__ */ new Date(), "yyyy-MM-dd_HH-mm-ss-SSS");
       await api.downloadBlob({
         type: "active_users",
         start_date: startDateRange ? format(startDateRange, "yyyy-MM-dd") : void 0,
         end_date: endDateRange ? format(endDateRange, "yyyy-MM-dd") : void 0,
         timezone: new Intl.DateTimeFormat().resolvedOptions().timeZone,
-        format: "csv"
+        format: "csv",
+        blobName: `${t("common.csvFilename")}_${timestamp}.csv`
       });
     } catch (error) {
       console.error("CSV Download failed:", error);
@@ -47,7 +51,9 @@ const ExportCSVButton = () => {
         minWidth: 160,
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        padding: "8px 16px"
+        // Add padding for better spacing from card border
       },
       children: /* @__PURE__ */ jsx(
         Button,
@@ -66,7 +72,7 @@ const ExportCSVButton = () => {
               textDecoration: "none"
             }
           },
-          children: loading ? "Downloading..." : "Export CSV"
+          children: loading ? t("common.downloading") : t("common.exportCSV")
         }
       )
     }

package/dist/components/ActiveUsers/ExportCSVButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExportCSVButton.esm.js","sources":["../../../src/components/ActiveUsers/ExportCSVButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useRef, useState } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport Button from '@mui/material/Button';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { format } from 'date-fns';\n\nimport { adoptionInsightsApiRef } from '../../api';\nimport { useDateRange } from '../Header/DateRangeContext';\n\nconst ExportCSVButton = () => {\n  const [loading, setLoading] = useState(false);\n  const api = useApi(adoptionInsightsApiRef);\n  const { startDateRange, endDateRange } = useDateRange();\n  const theme = useTheme();\n  const debounceRef = useRef<NodeJS.Timeout | null>(null);\n\n  const handleCSVDownload = async () => {\n    try {\n      await api.downloadBlob({\n        type: 'active_users',\n        start_date: startDateRange\n          ? format(startDateRange, 'yyyy-MM-dd')\n          : undefined,\n        end_date: endDateRange ? format(endDateRange, 'yyyy-MM-dd') : undefined,\n        timezone: new Intl.DateTimeFormat().resolvedOptions().timeZone,\n        format: 'csv',\n      });\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error('CSV Download failed:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const debouncedHandleCSVDownload = () => {\n    setLoading(true);\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n    debounceRef.current = setTimeout(() => {\n      handleCSVDownload();\n    }, 500);\n  };\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        minWidth: 160,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Button\n        variant=\"text\"\n        startIcon={<FileDownloadOutlinedIcon />}\n        onClick={debouncedHandleCSVDownload}\n        sx={{\n          color: theme.palette.primary.main,\n          textTransform: 'none',\n          fontSize: '1rem',\n          fontWeight: 400,\n          textDecoration: 'none',\n          '&:hover': {\n            backgroundColor: 'transparent',\n            textDecoration: 'none',\n          },\n        }}\n      >\n        {loading ? 'Downloading...' : 'Export CSV'}\n      </Button>\n    </Box>\n  );\n};\n\nexport default ExportCSVButton;\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,kBAAkB,MAAM;AAC5B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,GAAA,GAAM,OAAO,sBAAsB,CAAA;AACzC,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAa,EAAA,GAAI,YAAa,EAAA;AACtD,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,WAAA,GAAc,OAA8B,IAAI,CAAA;AAEtD,EAAA,MAAM,oBAAoB,YAAY;AACpC,IAAI,IAAA;AACF,MAAA,MAAM,IAAI,YAAa,CAAA;AAAA,QACrB,IAAM,EAAA,cAAA;AAAA,QACN,UAAY,EAAA,cAAA,GACR,MAAO,CAAA,cAAA,EAAgB,YAAY,CACnC,GAAA,KAAA,CAAA;AAAA,QACJ,QAAU,EAAA,YAAA,GAAe,MAAO,CAAA,YAAA,EAAc,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,QAC9D,UAAU,IAAI,IAAA,CAAK,cAAe,EAAA,CAAE,iBAAkB,CAAA,QAAA;AAAA,QACtD,MAAQ,EAAA;AAAA,OACT,CAAA;AAAA,aACM,KAAO,EAAA;AAEd,MAAQ,OAAA,CAAA,KAAA,CAAM,wBAAwB,KAAK,CAAA;AAAA,KAC3C,SAAA;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,GACF;AAEA,EAAA,MAAM,6BAA6B,MAAM;AACvC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAAA;AAElC,IAAY,WAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACrC,MAAkB,iBAAA,EAAA;AAAA,OACjB,GAAG,CAAA;AAAA,GACR;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,GAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA;AAAA,OAClB;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,MAAA;AAAA,UACR,SAAA,sBAAY,wBAAyB,EAAA,EAAA,CAAA;AAAA,UACrC,OAAS,EAAA,0BAAA;AAAA,UACT,EAAI,EAAA;AAAA,YACF,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,YAC7B,aAAe,EAAA,MAAA;AAAA,YACf,QAAU,EAAA,MAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,cAAgB,EAAA,MAAA;AAAA,YAChB,SAAW,EAAA;AAAA,cACT,eAAiB,EAAA,aAAA;AAAA,cACjB,cAAgB,EAAA;AAAA;AAClB,WACF;AAAA,UAEC,oBAAU,gBAAmB,GAAA;AAAA;AAAA;AAChC;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ExportCSVButton.esm.js","sources":["../../../src/components/ActiveUsers/ExportCSVButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useRef, useState } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport Button from '@mui/material/Button';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { format } from 'date-fns';\n\nimport { adoptionInsightsApiRef } from '../../api';\nimport { useDateRange } from '../Header/DateRangeContext';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nconst ExportCSVButton = () => {\n  const [loading, setLoading] = useState(false);\n  const api = useApi(adoptionInsightsApiRef);\n  const { startDateRange, endDateRange } = useDateRange();\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const debounceRef = useRef<NodeJS.Timeout | null>(null);\n\n  const handleCSVDownload = async () => {\n    try {\n      const timestamp = format(new Date(), 'yyyy-MM-dd_HH-mm-ss-SSS');\n      await api.downloadBlob({\n        type: 'active_users',\n        start_date: startDateRange\n          ? format(startDateRange, 'yyyy-MM-dd')\n          : undefined,\n        end_date: endDateRange ? format(endDateRange, 'yyyy-MM-dd') : undefined,\n        timezone: new Intl.DateTimeFormat().resolvedOptions().timeZone,\n        format: 'csv',\n        blobName: `${t('common.csvFilename')}_${timestamp}.csv`,\n      });\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error('CSV Download failed:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const debouncedHandleCSVDownload = () => {\n    setLoading(true);\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n    debounceRef.current = setTimeout(() => {\n      handleCSVDownload();\n    }, 500);\n  };\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        minWidth: 160,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: '8px 16px', // Add padding for better spacing from card border\n      }}\n    >\n      <Button\n        variant=\"text\"\n        startIcon={<FileDownloadOutlinedIcon />}\n        onClick={debouncedHandleCSVDownload}\n        sx={{\n          color: theme.palette.primary.main,\n          textTransform: 'none',\n          fontSize: '1rem',\n          fontWeight: 400,\n          textDecoration: 'none',\n          '&:hover': {\n            backgroundColor: 'transparent',\n            textDecoration: 'none',\n          },\n        }}\n      >\n        {loading ? t('common.downloading') : t('common.exportCSV')}\n      </Button>\n    </Box>\n  );\n};\n\nexport default ExportCSVButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,kBAAkB,MAAM;AAC5B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,GAAA,GAAM,OAAO,sBAAsB,CAAA;AACzC,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAa,EAAA,GAAI,YAAa,EAAA;AACtD,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,WAAA,GAAc,OAA8B,IAAI,CAAA;AAEtD,EAAA,MAAM,oBAAoB,YAAY;AACpC,IAAI,IAAA;AACF,MAAA,MAAM,SAAY,GAAA,MAAA,iBAAW,IAAA,IAAA,IAAQ,yBAAyB,CAAA;AAC9D,MAAA,MAAM,IAAI,YAAa,CAAA;AAAA,QACrB,IAAM,EAAA,cAAA;AAAA,QACN,UAAY,EAAA,cAAA,GACR,MAAO,CAAA,cAAA,EAAgB,YAAY,CACnC,GAAA,KAAA,CAAA;AAAA,QACJ,QAAU,EAAA,YAAA,GAAe,MAAO,CAAA,YAAA,EAAc,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,QAC9D,UAAU,IAAI,IAAA,CAAK,cAAe,EAAA,CAAE,iBAAkB,CAAA,QAAA;AAAA,QACtD,MAAQ,EAAA,KAAA;AAAA,QACR,UAAU,CAAG,EAAA,CAAA,CAAE,oBAAoB,CAAC,IAAI,SAAS,CAAA,IAAA;AAAA,OAClD,CAAA;AAAA,aACM,KAAO,EAAA;AAEd,MAAQ,OAAA,CAAA,KAAA,CAAM,wBAAwB,KAAK,CAAA;AAAA,KAC3C,SAAA;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,GACF;AAEA,EAAA,MAAM,6BAA6B,MAAM;AACvC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAAA;AAElC,IAAY,WAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACrC,MAAkB,iBAAA,EAAA;AAAA,OACjB,GAAG,CAAA;AAAA,GACR;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,GAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,OAAS,EAAA;AAAA;AAAA,OACX;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,MAAA;AAAA,UACR,SAAA,sBAAY,wBAAyB,EAAA,EAAA,CAAA;AAAA,UACrC,OAAS,EAAA,0BAAA;AAAA,UACT,EAAI,EAAA;AAAA,YACF,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,YAC7B,aAAe,EAAA,MAAA;AAAA,YACf,QAAU,EAAA,MAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,cAAgB,EAAA,MAAA;AAAA,YAChB,SAAW,EAAA;AAAA,cACT,eAAiB,EAAA,aAAA;AAAA,cACjB,cAAgB,EAAA;AAAA;AAClB,WACF;AAAA,UAEC,QAAU,EAAA,OAAA,GAAA,CAAA,CAAE,oBAAoB,CAAA,GAAI,EAAE,kBAAkB;AAAA;AAAA;AAC3D;AAAA,GACF;AAEJ;;;;"}

package/dist/components/AdoptionInsightsPage/AdoptionInsightsPage.esm.js

@@ -14,16 +14,18 @@ import Users from '../Users/Users.esm.js';
 import { DateRangeProvider } from '../Header/DateRangeContext.esm.js';
 import { useAdoptionInsightsEventsReadPermission } from '../../hooks/useAdoptionInsightsEventsReadPermission.esm.js';
 import PermissionRequiredState from '../Common/PermissionRequiredState.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const AdoptionInsightsPage = () => {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const { allowed: hasEventsReadPermission, loading } = useAdoptionInsightsEventsReadPermission();
+  const { t } = useTranslation();
   if (loading) {
     return null;
   }
   return /* @__PURE__ */ jsx(Page, { themeId: "home", children: !hasEventsReadPermission ? /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(PermissionRequiredState, {}) }) : /* @__PURE__ */ jsxs(DateRangeProvider, { children: [
-    /* @__PURE__ */ jsx(InsightsHeader, { title: "Adoption Insights" }),
+    /* @__PURE__ */ jsx(InsightsHeader, { title: t("page.title") }),
     /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Masonry, { columns: isSmallScreen ? 1 : 2, spacing: 2, children: [
       /* @__PURE__ */ jsx(ActiveUsers, {}),
       /* @__PURE__ */ jsx(Users, {}),

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

@@ -1 +1 @@
-{"version":3,"file":"AdoptionInsightsPage.esm.js","sources":["../../../src/components/AdoptionInsightsPage/AdoptionInsightsPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { Content, Page } from '@backstage/core-components';\nimport Masonry from '@mui/lab/Masonry';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport { useTheme } from '@mui/material/styles';\n\nimport InsightsHeader from '../Header';\nimport CatalogEntities from '../CatalogEntities';\nimport Templates from '../Templates';\nimport Techdocs from '../Techdocs';\nimport ActiveUsers from '../ActiveUsers';\nimport Plugins from '../Plugins';\nimport Searches from '../Searches';\nimport Users from '../Users';\nimport { DateRangeProvider } from '../Header/DateRangeContext';\nimport { useAdoptionInsightsEventsReadPermission } from '../../hooks/useAdoptionInsightsEventsReadPermission';\nimport PermissionRequiredState from '../Common/PermissionRequiredState';\n\nexport const AdoptionInsightsPage = () => {\n  const theme = useTheme();\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));\n  const { allowed: hasEventsReadPermission, loading } =\n    useAdoptionInsightsEventsReadPermission();\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"home\">\n      {!hasEventsReadPermission ? (\n        <Content>\n          <PermissionRequiredState />\n        </Content>\n      ) : (\n        <DateRangeProvider>\n          <InsightsHeader title=\"Adoption Insights\" />\n          <Content>\n            <Masonry columns={isSmallScreen ? 1 : 2} spacing={2}>\n              <ActiveUsers />\n              <Users />\n              <Templates />\n              <CatalogEntities />\n              <Plugins />\n              <Techdocs />\n              <Searches />\n            </Masonry>\n          </Content>\n        </DateRangeProvider>\n      )}\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgCO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,gBAAgB,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAChE,EAAA,MAAM,EAAE,OAAA,EAAS,uBAAyB,EAAA,OAAA,KACxC,uCAAwC,EAAA;AAE1C,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EACX,QAAC,EAAA,CAAA,uBAAA,mBACC,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA,EAAwB,CAC3B,EAAA,CAAA,wBAEC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAM,mBAAoB,EAAA,CAAA;AAAA,oBAC1C,GAAA,CAAC,WACC,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,aAAgB,GAAA,CAAA,GAAI,CAAG,EAAA,OAAA,EAAS,CAChD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,CAAA;AAAA,0BACZ,KAAM,EAAA,EAAA,CAAA;AAAA,0BACN,SAAU,EAAA,EAAA,CAAA;AAAA,0BACV,eAAgB,EAAA,EAAA,CAAA;AAAA,0BAChB,OAAQ,EAAA,EAAA,CAAA;AAAA,0BACR,QAAS,EAAA,EAAA,CAAA;AAAA,0BACT,QAAS,EAAA,EAAA;AAAA,KAAA,EACZ,CACF,EAAA;AAAA,GAAA,EACF,CAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AdoptionInsightsPage.esm.js","sources":["../../../src/components/AdoptionInsightsPage/AdoptionInsightsPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { Content, Page } from '@backstage/core-components';\nimport Masonry from '@mui/lab/Masonry';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport { useTheme } from '@mui/material/styles';\n\nimport InsightsHeader from '../Header';\nimport CatalogEntities from '../CatalogEntities';\nimport Templates from '../Templates';\nimport Techdocs from '../Techdocs';\nimport ActiveUsers from '../ActiveUsers';\nimport Plugins from '../Plugins';\nimport Searches from '../Searches';\nimport Users from '../Users';\nimport { DateRangeProvider } from '../Header/DateRangeContext';\nimport { useAdoptionInsightsEventsReadPermission } from '../../hooks/useAdoptionInsightsEventsReadPermission';\nimport PermissionRequiredState from '../Common/PermissionRequiredState';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const AdoptionInsightsPage = () => {\n  const theme = useTheme();\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));\n  const { allowed: hasEventsReadPermission, loading } =\n    useAdoptionInsightsEventsReadPermission();\n  const { t } = useTranslation();\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"home\">\n      {!hasEventsReadPermission ? (\n        <Content>\n          <PermissionRequiredState />\n        </Content>\n      ) : (\n        <DateRangeProvider>\n          <InsightsHeader title={t('page.title')} />\n          <Content>\n            <Masonry columns={isSmallScreen ? 1 : 2} spacing={2}>\n              <ActiveUsers />\n              <Users />\n              <Templates />\n              <CatalogEntities />\n              <Plugins />\n              <Techdocs />\n              <Searches />\n            </Masonry>\n          </Content>\n        </DateRangeProvider>\n      )}\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiCO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,gBAAgB,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAChE,EAAA,MAAM,EAAE,OAAA,EAAS,uBAAyB,EAAA,OAAA,KACxC,uCAAwC,EAAA;AAC1C,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EACX,QAAC,EAAA,CAAA,uBAAA,mBACC,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA,EAAwB,CAC3B,EAAA,CAAA,wBAEC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,YAAY,CAAG,EAAA,CAAA;AAAA,oBACxC,GAAA,CAAC,WACC,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,aAAgB,GAAA,CAAA,GAAI,CAAG,EAAA,OAAA,EAAS,CAChD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,CAAA;AAAA,0BACZ,KAAM,EAAA,EAAA,CAAA;AAAA,0BACN,SAAU,EAAA,EAAA,CAAA;AAAA,0BACV,eAAgB,EAAA,EAAA,CAAA;AAAA,0BAChB,OAAQ,EAAA,EAAA,CAAA;AAAA,0BACR,QAAS,EAAA,EAAA,CAAA;AAAA,0BACT,QAAS,EAAA,EAAA;AAAA,KAAA,EACZ,CACF,EAAA;AAAA,GAAA,EACF,CAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CardFooter/TableFooterPagination.esm.js

@@ -2,7 +2,38 @@ import { jsx } from 'react/jsx-runtime';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import TablePagination from '@mui/material/TablePagination';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
+const generateRowsPerPageOptions = (totalCount, t) => {
+  const defaultOptions = [3, 5, 10, 20];
+  const maxDefaultOption = Math.max(...defaultOptions);
+  if (defaultOptions.includes(totalCount)) {
+    const validOptions = defaultOptions.filter((option) => option <= totalCount);
+    return validOptions.map((value) => ({
+      label: t("table.pagination.topN", { count: value.toString() }),
+      value
+    }));
+  }
+  const validDefaults = defaultOptions.filter((option) => option < totalCount);
+  if (validDefaults.length > 0 && totalCount <= maxDefaultOption) {
+    const options = validDefaults.map((value) => ({
+      label: t("table.pagination.topN", { count: value.toString() }),
+      value
+    }));
+    options.push({
+      label: t("filter.all", {}),
+      value: totalCount
+    });
+    return options;
+  }
+  if (validDefaults.length > 0) {
+    return validDefaults.map((value) => ({
+      label: t("table.pagination.topN", { count: value.toString() }),
+      value
+    }));
+  }
+  return [];
+};
 const TableFooterPagination = ({
   count,
   rowsPerPage,
@@ -10,6 +41,11 @@ const TableFooterPagination = ({
   handleChangePage,
   handleChangeRowsPerPage
 }) => {
+  const { t } = useTranslation();
+  const rowsPerPageOptions = generateRowsPerPageOptions(count, t);
+  if (rowsPerPageOptions.length <= 1) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -27,12 +63,7 @@ const TableFooterPagination = ({
               backgroundColor: "transparent"
             }
           },
-          rowsPerPageOptions: [
-            { label: "Top 3", value: 3 },
-            { label: "Top 5", value: 5 },
-            { label: "Top 10", value: 10 },
-            { label: "Top 20", value: 20 }
-          ],
+          rowsPerPageOptions,
           component: "div",
           count,
           rowsPerPage,

package/dist/components/CardFooter/TableFooterPagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooterPagination.esm.js","sources":["../../../src/components/CardFooter/TableFooterPagination.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { MouseEvent, ChangeEvent, FC } from 'react';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport TablePagination from '@mui/material/TablePagination';\n\ninterface TableFooterPaginationProps {\n  count: number;\n  rowsPerPage: number;\n  page: number;\n  handleChangePage: (\n    event: MouseEvent<HTMLButtonElement> | null,\n    newPage: number,\n  ) => void;\n  handleChangeRowsPerPage: (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => void;\n}\n\nconst TableFooterPagination: FC<TableFooterPaginationProps> = ({\n  count,\n  rowsPerPage,\n  page,\n  handleChangePage,\n  handleChangeRowsPerPage,\n}) => {\n  return (\n    <Box\n      component={Paper}\n      sx={{\n        display: 'flex',\n        justifyContent: 'flex-end',\n        padding: 1,\n      }}\n    >\n      <TablePagination\n        sx={{\n          '& .v5-MuiTablePagination-select:focus': {\n            backgroundColor: 'transparent',\n          },\n        }}\n        rowsPerPageOptions={[\n          { label: 'Top 3', value: 3 },\n          { label: 'Top 5', value: 5 },\n          { label: 'Top 10', value: 10 },\n          { label: 'Top 20', value: 20 },\n        ]}\n        component=\"div\"\n        count={count}\n        rowsPerPage={rowsPerPage}\n        page={page}\n        onPageChange={handleChangePage}\n        onRowsPerPageChange={handleChangeRowsPerPage}\n        labelRowsPerPage={null}\n        labelDisplayedRows={() => null}\n        ActionsComponent={() => null}\n        slotProps={{\n          select: {\n            MenuProps: {\n              MenuListProps: {\n                autoFocusItem: false,\n              },\n              PaperProps: {\n                sx: {\n                  width: 190,\n                  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',\n                  borderRadius: 2,\n                  border: theme => `1px solid ${theme.palette.grey[300]}`,\n                  overflow: 'hidden',\n                },\n              },\n            },\n          },\n        }}\n      />\n    </Box>\n  );\n};\n\nexport default TableFooterPagination;\n"],"names":[],"mappings":";;;;;AAiCA,MAAM,wBAAwD,CAAC;AAAA,EAC7D,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,KAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,UAAA;AAAA,QAChB,OAAS,EAAA;AAAA,OACX;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,uCAAyC,EAAA;AAAA,cACvC,eAAiB,EAAA;AAAA;AACnB,WACF;AAAA,UACA,kBAAoB,EAAA;AAAA,YAClB,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAE,EAAA;AAAA,YAC3B,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAE,EAAA;AAAA,YAC3B,EAAE,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,EAAG,EAAA;AAAA,YAC7B,EAAE,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,EAAG;AAAA,WAC/B;AAAA,UACA,SAAU,EAAA,KAAA;AAAA,UACV,KAAA;AAAA,UACA,WAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAc,EAAA,gBAAA;AAAA,UACd,mBAAqB,EAAA,uBAAA;AAAA,UACrB,gBAAkB,EAAA,IAAA;AAAA,UAClB,oBAAoB,MAAM,IAAA;AAAA,UAC1B,kBAAkB,MAAM,IAAA;AAAA,UACxB,SAAW,EAAA;AAAA,YACT,MAAQ,EAAA;AAAA,cACN,SAAW,EAAA;AAAA,gBACT,aAAe,EAAA;AAAA,kBACb,aAAe,EAAA;AAAA,iBACjB;AAAA,gBACA,UAAY,EAAA;AAAA,kBACV,EAAI,EAAA;AAAA,oBACF,KAAO,EAAA,GAAA;AAAA,oBACP,SAAW,EAAA,iCAAA;AAAA,oBACX,YAAc,EAAA,CAAA;AAAA,oBACd,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,oBACrD,QAAU,EAAA;AAAA;AACZ;AACF;AACF;AACF;AACF;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"TableFooterPagination.esm.js","sources":["../../../src/components/CardFooter/TableFooterPagination.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { MouseEvent, ChangeEvent, FC } from 'react';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport TablePagination from '@mui/material/TablePagination';\n\nimport { useTranslation } from '../../hooks/useTranslation';\n\ninterface TableFooterPaginationProps {\n  count: number;\n  rowsPerPage: number;\n  page: number;\n  handleChangePage: (\n    event: MouseEvent<HTMLButtonElement> | null,\n    newPage: number,\n  ) => void;\n  handleChangeRowsPerPage: (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => void;\n}\n\nconst generateRowsPerPageOptions = (totalCount: number, t: any) => {\n  const defaultOptions = [3, 5, 10, 20];\n  const maxDefaultOption = Math.max(...defaultOptions);\n\n  if (defaultOptions.includes(totalCount)) {\n    const validOptions = defaultOptions.filter(option => option <= totalCount);\n    return validOptions.map(value => ({\n      label: t('table.pagination.topN' as any, { count: value.toString() }),\n      value,\n    }));\n  }\n\n  const validDefaults = defaultOptions.filter(option => option < totalCount);\n\n  if (validDefaults.length > 0 && totalCount <= maxDefaultOption) {\n    const options = validDefaults.map(value => ({\n      label: t('table.pagination.topN' as any, { count: value.toString() }),\n      value,\n    }));\n\n    options.push({\n      label: t('filter.all' as any, {}),\n      value: totalCount,\n    });\n\n    return options;\n  }\n\n  if (validDefaults.length > 0) {\n    return validDefaults.map(value => ({\n      label: t('table.pagination.topN' as any, { count: value.toString() }),\n      value,\n    }));\n  }\n\n  return [];\n};\n\nconst TableFooterPagination: FC<TableFooterPaginationProps> = ({\n  count,\n  rowsPerPage,\n  page,\n  handleChangePage,\n  handleChangeRowsPerPage,\n}) => {\n  const { t } = useTranslation();\n  const rowsPerPageOptions = generateRowsPerPageOptions(count, t);\n\n  if (rowsPerPageOptions.length <= 1) {\n    return null;\n  }\n\n  return (\n    <Box\n      component={Paper}\n      sx={{\n        display: 'flex',\n        justifyContent: 'flex-end',\n        padding: 1,\n      }}\n    >\n      <TablePagination\n        sx={{\n          '& .v5-MuiTablePagination-select:focus': {\n            backgroundColor: 'transparent',\n          },\n        }}\n        rowsPerPageOptions={rowsPerPageOptions}\n        component=\"div\"\n        count={count}\n        rowsPerPage={rowsPerPage}\n        page={page}\n        onPageChange={handleChangePage}\n        onRowsPerPageChange={handleChangeRowsPerPage}\n        labelRowsPerPage={null}\n        labelDisplayedRows={() => null}\n        ActionsComponent={() => null}\n        slotProps={{\n          select: {\n            MenuProps: {\n              MenuListProps: {\n                autoFocusItem: false,\n              },\n              PaperProps: {\n                sx: {\n                  width: 190,\n                  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',\n                  borderRadius: 2,\n                  border: theme => `1px solid ${theme.palette.grey[300]}`,\n                  overflow: 'hidden',\n                },\n              },\n            },\n          },\n        }}\n      />\n    </Box>\n  );\n};\n\nexport default TableFooterPagination;\n"],"names":[],"mappings":";;;;;;AAmCA,MAAM,0BAAA,GAA6B,CAAC,UAAA,EAAoB,CAAW,KAAA;AACjE,EAAA,MAAM,cAAiB,GAAA,CAAC,CAAG,EAAA,CAAA,EAAG,IAAI,EAAE,CAAA;AACpC,EAAA,MAAM,gBAAmB,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,cAAc,CAAA;AAEnD,EAAI,IAAA,cAAA,CAAe,QAAS,CAAA,UAAU,CAAG,EAAA;AACvC,IAAA,MAAM,YAAe,GAAA,cAAA,CAAe,MAAO,CAAA,CAAA,MAAA,KAAU,UAAU,UAAU,CAAA;AACzE,IAAO,OAAA,YAAA,CAAa,IAAI,CAAU,KAAA,MAAA;AAAA,MAChC,KAAA,EAAO,EAAE,uBAAgC,EAAA,EAAE,OAAO,KAAM,CAAA,QAAA,IAAY,CAAA;AAAA,MACpE;AAAA,KACA,CAAA,CAAA;AAAA;AAGJ,EAAA,MAAM,aAAgB,GAAA,cAAA,CAAe,MAAO,CAAA,CAAA,MAAA,KAAU,SAAS,UAAU,CAAA;AAEzE,EAAA,IAAI,aAAc,CAAA,MAAA,GAAS,CAAK,IAAA,UAAA,IAAc,gBAAkB,EAAA;AAC9D,IAAM,MAAA,OAAA,GAAU,aAAc,CAAA,GAAA,CAAI,CAAU,KAAA,MAAA;AAAA,MAC1C,KAAA,EAAO,EAAE,uBAAgC,EAAA,EAAE,OAAO,KAAM,CAAA,QAAA,IAAY,CAAA;AAAA,MACpE;AAAA,KACA,CAAA,CAAA;AAEF,IAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,MACX,KAAO,EAAA,CAAA,CAAE,YAAqB,EAAA,EAAE,CAAA;AAAA,MAChC,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAO,OAAA,OAAA;AAAA;AAGT,EAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,IAAO,OAAA,aAAA,CAAc,IAAI,CAAU,KAAA,MAAA;AAAA,MACjC,KAAA,EAAO,EAAE,uBAAgC,EAAA,EAAE,OAAO,KAAM,CAAA,QAAA,IAAY,CAAA;AAAA,MACpE;AAAA,KACA,CAAA,CAAA;AAAA;AAGJ,EAAA,OAAO,EAAC;AACV,CAAA;AAEA,MAAM,wBAAwD,CAAC;AAAA,EAC7D,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,kBAAA,GAAqB,0BAA2B,CAAA,KAAA,EAAO,CAAC,CAAA;AAE9D,EAAI,IAAA,kBAAA,CAAmB,UAAU,CAAG,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,KAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,UAAA;AAAA,QAChB,OAAS,EAAA;AAAA,OACX;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,uCAAyC,EAAA;AAAA,cACvC,eAAiB,EAAA;AAAA;AACnB,WACF;AAAA,UACA,kBAAA;AAAA,UACA,SAAU,EAAA,KAAA;AAAA,UACV,KAAA;AAAA,UACA,WAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAc,EAAA,gBAAA;AAAA,UACd,mBAAqB,EAAA,uBAAA;AAAA,UACrB,gBAAkB,EAAA,IAAA;AAAA,UAClB,oBAAoB,MAAM,IAAA;AAAA,UAC1B,kBAAkB,MAAM,IAAA;AAAA,UACxB,SAAW,EAAA;AAAA,YACT,MAAQ,EAAA;AAAA,cACN,SAAW,EAAA;AAAA,gBACT,aAAe,EAAA;AAAA,kBACb,aAAe,EAAA;AAAA,iBACjB;AAAA,gBACA,UAAY,EAAA;AAAA,kBACV,EAAI,EAAA;AAAA,oBACF,KAAO,EAAA,GAAA;AAAA,oBACP,SAAW,EAAA,iCAAA;AAAA,oBACX,YAAc,EAAA,CAAA;AAAA,oBACd,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,oBACrD,QAAU,EAAA;AAAA;AACZ;AACF;AACF;AACF;AACF;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/CatalogEntities/CatalogEntities.esm.js

@@ -13,12 +13,13 @@ import Link from '@mui/material/Link';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import CardWrapper from '../CardWrapper/CardWrapper.esm.js';
-import { CATALOG_ENTITIES_TITLE, CATALOG_ENTITIES_TABLE_HEADERS } from '../../utils/constants.esm.js';
+import { CATALOG_ENTITIES_TABLE_HEADERS } from '../../utils/constants.esm.js';
 import { useCatalogEntities } from '../../hooks/useCatalogEntities.esm.js';
 import TableFooterPagination from '../CardFooter/TableFooterPagination.esm.js';
 import { getUniqueCatalogEntityKinds, getLastUsedDay } from '../../utils/utils.esm.js';
 import FilterDropdown from './FilterDropdown.esm.js';
 import EmptyChartState from '../Common/EmptyChartState.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const CatalogEntities = () => {
   const [page, setPage] = useState(0);
@@ -26,6 +27,7 @@ const CatalogEntities = () => {
   const [rowsPerPage, setRowsPerPage] = useState(3);
   const [selectedOption, setSelectedOption] = useState("");
   const [uniqueCatalogEntityKinds, setUniqueCatalogEntityKinds] = useState([]);
+  const { t } = useTranslation();
   const entityLink = useRouteRef(entityRouteRef);
   const { catalogEntities, loading, error } = useCatalogEntities({
     limit,
@@ -59,16 +61,16 @@ const CatalogEntities = () => {
     }).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
   }, [catalogEntities, page, rowsPerPage, selectedOption]);
   if (error) {
-    return /* @__PURE__ */ jsx(CardWrapper, { title: CATALOG_ENTITIES_TITLE, children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
+    return /* @__PURE__ */ jsx(CardWrapper, { title: t("catalogEntities.title"), children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
   }
   if ((!visibleCatalogEntities || visibleCatalogEntities?.length === 0) && !loading) {
-    return /* @__PURE__ */ jsx(CardWrapper, { title: CATALOG_ENTITIES_TITLE, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(CardWrapper, { title: t("catalogEntities.title"), children: /* @__PURE__ */ jsx(
       Box,
       {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: 200,
+        minHeight: 80,
         children: /* @__PURE__ */ jsx(EmptyChartState, {})
       }
     ) });
@@ -76,7 +78,9 @@ const CatalogEntities = () => {
   return /* @__PURE__ */ jsx(
     CardWrapper,
     {
-      title: CATALOG_ENTITIES_TITLE,
+      title: rowsPerPage >= (catalogEntities.data?.length ?? 0) ? t("catalogEntities.allTitle", {}) : t("catalogEntities.topNTitle", {
+        count: rowsPerPage.toString()
+      }),
       filter: /* @__PURE__ */ jsx(
         FilterDropdown,
         {
@@ -94,7 +98,7 @@ const CatalogEntities = () => {
               borderBottom: (theme) => `1px solid ${theme.palette.grey[300]}`,
               width: "25%"
             },
-            children: header.title
+            children: t(header.titleKey, {})
           },
           header.id
         )) }) }),
@@ -134,7 +138,7 @@ const CatalogEntities = () => {
                 }
               ) }),
               /* @__PURE__ */ jsx(TableCell, { sx: { width: "25%" }, children: entity.kind?.charAt(0).toLocaleUpperCase("en-US") + entity.kind?.slice(1) || "--" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: { width: "25%" }, children: getLastUsedDay(entity.last_used) ?? "--" }),
+              /* @__PURE__ */ jsx(TableCell, { sx: { width: "25%" }, children: getLastUsedDay(entity.last_used, t) ?? "--" }),
               /* @__PURE__ */ jsx(TableCell, { sx: { width: "25%" }, children: Number(entity.count).toLocaleString("en-US") ?? "--" })
             ]
           },

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

@@ -1 +1 @@
-{"version":3,"file":"CatalogEntities.esm.js","sources":["../../../src/components/CatalogEntities/CatalogEntities.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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, useEffect, useMemo, useCallback } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport Box from '@mui/material/Box';\nimport { SelectChangeEvent } from '@mui/material/Select';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableFooter from '@mui/material/TableFooter';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Link from '@mui/material/Link';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nimport CardWrapper from '../CardWrapper';\nimport {\n  CATALOG_ENTITIES_TABLE_HEADERS,\n  CATALOG_ENTITIES_TITLE,\n} from '../../utils/constants';\nimport { useCatalogEntities } from '../../hooks/useCatalogEntities';\nimport TableFooterPagination from '../CardFooter';\nimport { getLastUsedDay, getUniqueCatalogEntityKinds } from '../../utils/utils';\nimport FilterDropdown from './FilterDropdown';\nimport EmptyChartState from '../Common/EmptyChartState';\n\nconst CatalogEntities = () => {\n  const [page, setPage] = useState(0);\n  const [limit] = useState(20);\n  const [rowsPerPage, setRowsPerPage] = useState(3);\n  const [selectedOption, setSelectedOption] = useState('');\n  const [uniqueCatalogEntityKinds, setUniqueCatalogEntityKinds] = useState<\n    string[]\n  >([]);\n\n  const entityLink = useRouteRef(entityRouteRef);\n\n  const { catalogEntities, loading, error } = useCatalogEntities({\n    limit,\n    kind: selectedOption === 'All' ? '' : selectedOption.toLocaleLowerCase(),\n  });\n\n  useEffect(() => {\n    if (\n      catalogEntities?.data?.length > 0 &&\n      uniqueCatalogEntityKinds?.length === 0\n    ) {\n      const uniqueKinds = getUniqueCatalogEntityKinds(catalogEntities.data);\n      setUniqueCatalogEntityKinds(uniqueKinds);\n    }\n  }, [catalogEntities, uniqueCatalogEntityKinds]);\n\n  const handleChangePage = useCallback((_event: unknown, newPage: number) => {\n    setPage(newPage);\n  }, []);\n\n  const handleChangeRowsPerPage = useCallback(\n    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      setRowsPerPage(+event.target.value);\n      setPage(0);\n    },\n    [],\n  );\n\n  const handleChange = useCallback((event: SelectChangeEvent<string>) => {\n    setSelectedOption(event.target.value);\n  }, []);\n\n  const visibleCatalogEntities = useMemo(() => {\n    return catalogEntities.data\n      ?.filter(entity => {\n        if (selectedOption && selectedOption !== 'All') {\n          return (\n            entity.kind.toLocaleLowerCase() ===\n            selectedOption.toLocaleLowerCase()\n          );\n        }\n        return true;\n      })\n      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n  }, [catalogEntities, page, rowsPerPage, selectedOption]);\n\n  if (error) {\n    return (\n      <CardWrapper title={CATALOG_ENTITIES_TITLE}>\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (\n    (!visibleCatalogEntities || visibleCatalogEntities?.length === 0) &&\n    !loading\n  ) {\n    return (\n      <CardWrapper title={CATALOG_ENTITIES_TITLE}>\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper\n      title={CATALOG_ENTITIES_TITLE}\n      filter={\n        <FilterDropdown\n          selectedOption={selectedOption}\n          handleChange={handleChange}\n          uniqueCatalogEntityKinds={uniqueCatalogEntityKinds}\n        />\n      }\n    >\n      <Table aria-labelledby=\"Catalog entities\" sx={{ width: '100%' }}>\n        <TableHead>\n          <TableRow>\n            {CATALOG_ENTITIES_TABLE_HEADERS.map(header => (\n              <TableCell\n                key={header.id}\n                align=\"left\"\n                sx={{\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                  width: '25%',\n                }}\n              >\n                {header.title}\n              </TableCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell\n                colSpan={CATALOG_ENTITIES_TABLE_HEADERS.length}\n                align=\"center\"\n              >\n                <CircularProgress />\n              </TableCell>\n            </TableRow>\n          ) : (\n            visibleCatalogEntities?.map(entity => (\n              <TableRow\n                key={`${entity.kind}-${entity.name}`}\n                sx={{\n                  '&:nth-of-type(odd)': { backgroundColor: 'inherit' },\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                }}\n              >\n                <TableCell sx={{ width: '25%' }}>\n                  <Link\n                    component=\"a\"\n                    href={entityLink({\n                      kind: entity.kind,\n                      namespace: entity.namespace,\n                      name: entity.name,\n                    })}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    sx={{\n                      textDecoration: 'none',\n                      '&:hover': {\n                        textDecoration: 'none',\n                      },\n                    }}\n                  >\n                    {entity.name ?? '--'}\n                  </Link>\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {entity.kind?.charAt(0).toLocaleUpperCase('en-US') +\n                    entity.kind?.slice(1) || '--'}\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {getLastUsedDay(entity.last_used) ?? '--'}\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {Number(entity.count).toLocaleString('en-US') ?? '--'}\n                </TableCell>\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell\n              colSpan={CATALOG_ENTITIES_TABLE_HEADERS.length}\n              sx={{ padding: 0 }}\n            >\n              <TableFooterPagination\n                count={catalogEntities.data?.length}\n                rowsPerPage={rowsPerPage}\n                page={page}\n                handleChangePage={handleChangePage}\n                handleChangeRowsPerPage={handleChangeRowsPerPage}\n              />\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardWrapper>\n  );\n};\n\nexport default CatalogEntities;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CatalogEntities.esm.js","sources":["../../../src/components/CatalogEntities/CatalogEntities.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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, useEffect, useMemo, useCallback } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport Box from '@mui/material/Box';\nimport { SelectChangeEvent } from '@mui/material/Select';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableFooter from '@mui/material/TableFooter';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Link from '@mui/material/Link';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nimport CardWrapper from '../CardWrapper';\nimport { CATALOG_ENTITIES_TABLE_HEADERS } from '../../utils/constants';\nimport { useCatalogEntities } from '../../hooks/useCatalogEntities';\nimport TableFooterPagination from '../CardFooter';\nimport { getLastUsedDay, getUniqueCatalogEntityKinds } from '../../utils/utils';\nimport FilterDropdown from './FilterDropdown';\nimport EmptyChartState from '../Common/EmptyChartState';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nconst CatalogEntities = () => {\n  const [page, setPage] = useState(0);\n  const [limit] = useState(20);\n  const [rowsPerPage, setRowsPerPage] = useState(3);\n  const [selectedOption, setSelectedOption] = useState('');\n  const [uniqueCatalogEntityKinds, setUniqueCatalogEntityKinds] = useState<\n    string[]\n  >([]);\n  const { t } = useTranslation();\n\n  const entityLink = useRouteRef(entityRouteRef);\n\n  const { catalogEntities, loading, error } = useCatalogEntities({\n    limit,\n    kind: selectedOption === 'All' ? '' : selectedOption.toLocaleLowerCase(),\n  });\n\n  useEffect(() => {\n    if (\n      catalogEntities?.data?.length > 0 &&\n      uniqueCatalogEntityKinds?.length === 0\n    ) {\n      const uniqueKinds = getUniqueCatalogEntityKinds(catalogEntities.data);\n      setUniqueCatalogEntityKinds(uniqueKinds);\n    }\n  }, [catalogEntities, uniqueCatalogEntityKinds]);\n\n  const handleChangePage = useCallback((_event: unknown, newPage: number) => {\n    setPage(newPage);\n  }, []);\n\n  const handleChangeRowsPerPage = useCallback(\n    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      setRowsPerPage(+event.target.value);\n      setPage(0);\n    },\n    [],\n  );\n\n  const handleChange = useCallback((event: SelectChangeEvent<string>) => {\n    setSelectedOption(event.target.value);\n  }, []);\n\n  const visibleCatalogEntities = useMemo(() => {\n    return catalogEntities.data\n      ?.filter(entity => {\n        if (selectedOption && selectedOption !== 'All') {\n          return (\n            entity.kind.toLocaleLowerCase() ===\n            selectedOption.toLocaleLowerCase()\n          );\n        }\n        return true;\n      })\n      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n  }, [catalogEntities, page, rowsPerPage, selectedOption]);\n\n  if (error) {\n    return (\n      <CardWrapper title={t('catalogEntities.title')}>\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (\n    (!visibleCatalogEntities || visibleCatalogEntities?.length === 0) &&\n    !loading\n  ) {\n    return (\n      <CardWrapper title={t('catalogEntities.title')}>\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight={80}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper\n      title={\n        rowsPerPage >= (catalogEntities.data?.length ?? 0)\n          ? t('catalogEntities.allTitle' as any, {})\n          : t('catalogEntities.topNTitle' as any, {\n              count: rowsPerPage.toString(),\n            })\n      }\n      filter={\n        <FilterDropdown\n          selectedOption={selectedOption}\n          handleChange={handleChange}\n          uniqueCatalogEntityKinds={uniqueCatalogEntityKinds}\n        />\n      }\n    >\n      <Table aria-labelledby=\"Catalog entities\" sx={{ width: '100%' }}>\n        <TableHead>\n          <TableRow>\n            {CATALOG_ENTITIES_TABLE_HEADERS.map(header => (\n              <TableCell\n                key={header.id}\n                align=\"left\"\n                sx={{\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                  width: '25%',\n                }}\n              >\n                {t(header.titleKey as any, {})}\n              </TableCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell\n                colSpan={CATALOG_ENTITIES_TABLE_HEADERS.length}\n                align=\"center\"\n              >\n                <CircularProgress />\n              </TableCell>\n            </TableRow>\n          ) : (\n            visibleCatalogEntities?.map(entity => (\n              <TableRow\n                key={`${entity.kind}-${entity.name}`}\n                sx={{\n                  '&:nth-of-type(odd)': { backgroundColor: 'inherit' },\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                }}\n              >\n                <TableCell sx={{ width: '25%' }}>\n                  <Link\n                    component=\"a\"\n                    href={entityLink({\n                      kind: entity.kind,\n                      namespace: entity.namespace,\n                      name: entity.name,\n                    })}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    sx={{\n                      textDecoration: 'none',\n                      '&:hover': {\n                        textDecoration: 'none',\n                      },\n                    }}\n                  >\n                    {entity.name ?? '--'}\n                  </Link>\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {entity.kind?.charAt(0).toLocaleUpperCase('en-US') +\n                    entity.kind?.slice(1) || '--'}\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {getLastUsedDay(entity.last_used, t) ?? '--'}\n                </TableCell>\n                <TableCell sx={{ width: '25%' }}>\n                  {Number(entity.count).toLocaleString('en-US') ?? '--'}\n                </TableCell>\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell\n              colSpan={CATALOG_ENTITIES_TABLE_HEADERS.length}\n              sx={{ padding: 0 }}\n            >\n              <TableFooterPagination\n                count={catalogEntities.data?.length}\n                rowsPerPage={rowsPerPage}\n                page={page}\n                handleChangePage={handleChangePage}\n                handleChangeRowsPerPage={handleChangeRowsPerPage}\n              />\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardWrapper>\n  );\n};\n\nexport default CatalogEntities;\n"],"names":[],"mappings":"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"}