@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @red-hat-developer-hub/backstage-plugin-dynamic-home-page
 
+## 1.8.0
+
+### Minor Changes
+
+- 8b64e16: Add internationalization (i18n) support with German, French, Italian, and Spanish translations.
+
+### Patch Changes
+
+- a994094: Updated dependency `@red-hat-developer-hub/backstage-plugin-theme` to `^0.10.0`.
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/components/CustomizableHomePage.esm.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Page, Content, EmptyState } from '@backstage/core-components';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { Header } from './Header.esm.js';
 import { CustomizableGrid } from './CustomizableGrid.esm.js';
 
 const CustomizableHomePage = (props) => {
+  const { t } = useTranslation();
   const filteredAndSortedHomePageCards = useMemo(() => {
     if (!props.cards) {
       return [];
@@ -19,13 +21,7 @@ const CustomizableHomePage = (props) => {
   }, [props.cards]);
   return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
     /* @__PURE__ */ jsx(Header, { ...props }),
-    /* @__PURE__ */ jsx(Content, { children: filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: "No home page cards (mount points) configured or found.",
-        missing: "content"
-      }
-    ) : /* @__PURE__ */ jsx(CustomizableGrid, { mountPoints: filteredAndSortedHomePageCards }) })
+    /* @__PURE__ */ jsx(Content, { children: filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { title: t("homePage.empty"), missing: "content" }) : /* @__PURE__ */ jsx(CustomizableGrid, { mountPoints: filteredAndSortedHomePageCards }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"CustomizableHomePage.esm.js","sources":["../../src/components/CustomizableHomePage.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 */\n\nimport { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { CustomizableGrid } from './CustomizableGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const CustomizableHomePage = (props: HomePageProps) => {\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState\n            title=\"No home page cards (mount points) configured or found.\"\n            missing=\"content\"\n          />\n        ) : (\n          <CustomizableGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ba,MAAA,oBAAA,GAAuB,CAAC,KAAyB,KAAA;AAC5D,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAO,EAAA,CAAA;AAAA,oBAClB,GAAA,CAAA,OAAA,EAAA,EACE,QAA+B,EAAA,8BAAA,CAAA,MAAA,KAAW,CACzC,mBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,wDAAA;AAAA,QACN,OAAQ,EAAA;AAAA;AAAA,KAGV,mBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,WAAA,EAAa,gCAAgC,CAEnE,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CustomizableHomePage.esm.js","sources":["../../src/components/CustomizableHomePage.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 */\n\nimport { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\nimport { useTranslation } from '../hooks/useTranslation';\n\nimport { Header, HeaderProps } from './Header';\nimport { CustomizableGrid } from './CustomizableGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const CustomizableHomePage = (props: HomePageProps) => {\n  const { t } = useTranslation();\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState title={t('homePage.empty')} missing=\"content\" />\n        ) : (\n          <CustomizableGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8Ba,MAAA,oBAAA,GAAuB,CAAC,KAAyB,KAAA;AAC5D,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAO,EAAA,CAAA;AAAA,wBAClB,OACE,EAAA,EAAA,QAAA,EAAA,8BAAA,CAA+B,WAAW,CACzC,mBAAA,GAAA,CAAC,cAAW,KAAO,EAAA,CAAA,CAAE,gBAAgB,CAAA,EAAG,SAAQ,SAAU,EAAA,CAAA,uBAEzD,gBAAiB,EAAA,EAAA,WAAA,EAAa,gCAAgC,CAEnE,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntitySection/EntitySection.esm.js

@@ -18,6 +18,8 @@ import { ViewMoreLink } from './ViewMoreLink.esm.js';
 import HomePageEntityIllustration from '../../images/homepage-entities-1.svg';
 import { useEntities } from '../../hooks/useEntities.esm.js';
 import { hasEntityIllustrationUserDismissed, addDismissedEntityIllustrationUsers } from '../../utils/utils.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { Trans } from '../Trans.esm.js';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
@@ -29,6 +31,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }));
 const EntitySection = () => {
   const theme = useTheme();
+  const { t } = useTranslation();
   const { displayName, loading: profileLoading } = useUserProfile();
   const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);
   const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);
@@ -72,11 +75,11 @@ const EntitySection = () => {
       }
     );
   } else if (!data) {
-    content = /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: "Could not fetch data.", children: /* @__PURE__ */ jsx(
+    content = /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("entities.fetchError"), children: /* @__PURE__ */ jsx(
       CodeSnippet,
       {
         language: "text",
-        text: error?.toString() ?? "Unknown error"
+        text: error?.toString() ?? t("entities.error")
       }
     ) });
   } else {
@@ -123,12 +126,12 @@ const EntitySection = () => {
               }
             ),
             /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: "Browse the Systems, Components, Resources, and APIs that are available in your organization." }) }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("entities.description") }) }),
               entities?.length > 0 && /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   onClick: handleClose,
-                  "aria-label": "close",
+                  "aria-label": t("entities.close"),
                   style: {
                     position: "absolute",
                     top: "8px",
@@ -175,7 +178,7 @@ const EntitySection = () => {
             overflow: "hidden"
           },
           children: /* @__PURE__ */ jsxs(CardContent, { children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: "No software catalog added yet" }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("entities.empty") }),
             /* @__PURE__ */ jsx(
               Typography,
               {
@@ -185,10 +188,10 @@ const EntitySection = () => {
                   mt: "20px",
                   mb: "16px"
                 },
-                children: "Once software catalogs are added, this space will showcase relevant content tailored to your experience."
+                children: t("entities.emptyDescription")
               }
             ),
-            /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: "Register a component" })
+            /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("entities.register") })
           ] })
         }
       ) })
@@ -214,15 +217,17 @@ const EntitySection = () => {
               fontWeight: "500",
               fontSize: "1.5rem"
             },
-            children: "Explore Your Software Catalog"
+            children: t("entities.title")
           }
         ),
         content,
-        entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsxs(ViewMoreLink, { to: "/catalog", children: [
-          "View all ",
-          data?.totalItems ? data?.totalItems : "",
-          " catalog entities"
-        ] }) })
+        entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: "/catalog", children: /* @__PURE__ */ jsx(
+          Trans,
+          {
+            message: "entities.viewAll",
+            params: { count: data?.totalItems?.toString() || "" }
+          }
+        ) }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"EntitySection.esm.js","sources":["../../../src/components/EntitySection/EntitySection.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 { ReactNode } from 'react';\n\nimport { useState, useEffect, Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { useTheme, styled } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport EntityCard from './EntityCard';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport HomePageEntityIllustration from '../../images/homepage-entities-1.svg';\nimport { useEntities } from '../../hooks/useEntities';\nimport {\n  addDismissedEntityIllustrationUsers,\n  hasEntityIllustrationUserDismissed,\n} from '../../utils/utils';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const EntitySection = () => {\n  const theme = useTheme();\n  const { displayName, loading: profileLoading } = useUserProfile();\n  const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);\n  const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);\n  const [imgLoaded, setImgLoaded] = useState(false);\n  const [isMediumBreakpoint, setIsMediumBreakpoint] = useState(false);\n\n  const isMd = useMediaQuery(theme.breakpoints.only('md'));\n\n  useEffect(() => {\n    if (isMd) {\n      setIsMediumBreakpoint(true);\n    } else {\n      setIsMediumBreakpoint(false);\n    }\n  }, [isMd]);\n\n  useEffect(() => {\n    const isUserDismissedEntityIllustration =\n      hasEntityIllustrationUserDismissed(displayName);\n    setIsRemoveFirstCard(isUserDismissedEntityIllustration);\n  }, [displayName]);\n\n  const handleClose = () => {\n    setShowDiscoveryCard(false);\n    setTimeout(() => {\n      addDismissedEntityIllustrationUsers(displayName);\n      setIsRemoveFirstCard(true);\n    }, 500);\n  };\n\n  const { data, error, isLoading } = useEntities({\n    kind: ['Component', 'API', 'Resource', 'System'],\n  });\n\n  const entities = data?.items ?? [];\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title=\"Could not fetch data.\">\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? 'Unknown error'}\n        />\n      </WarningPanel>\n    );\n  } else {\n    let entityCardCount = 2;\n    if (isMediumBreakpoint) entityCardCount = 3;\n\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {!isRemoveFirstCard && !profileLoading && (\n              <Grid item xs={12} md={6} lg={5} key=\"entities illustration\">\n                <Card\n                  elevation={0}\n                  sx={{\n                    border: `1px solid ${theme.palette.grey[400]}`,\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    position: 'relative',\n                    transition:\n                      'opacity 0.5s ease-out, transform 0.5s ease-in-out',\n                    opacity: showDiscoveryCard ? 1 : 0,\n                    transform: showDiscoveryCard\n                      ? 'translateX(0)'\n                      : 'translateX(-50px)',\n                  }}\n                >\n                  {!imgLoaded && (\n                    <Skeleton\n                      variant=\"rectangular\"\n                      height={300}\n                      sx={{\n                        borderRadius: 3,\n                        width: 'clamp(140px, 14vw, 266px)',\n                      }}\n                    />\n                  )}\n                  <Box\n                    component=\"img\"\n                    src={HomePageEntityIllustration}\n                    onLoad={() => setImgLoaded(true)}\n                    alt=\"\"\n                    height={300}\n                    sx={{\n                      width: 'clamp(140px, 14vw, 266px)',\n                    }}\n                  />\n                  <Box sx={{ p: 2 }}>\n                    <Box>\n                      <Typography variant=\"body2\" paragraph>\n                        Browse the Systems, Components, Resources, and APIs that\n                        are available in your organization.\n                      </Typography>\n                    </Box>\n                    {entities?.length > 0 && (\n                      <IconButton\n                        onClick={handleClose}\n                        aria-label=\"close\"\n                        style={{\n                          position: 'absolute',\n                          top: '8px',\n                          right: '8px',\n                        }}\n                      >\n                        <CloseIcon style={{ width: '16px', height: '16px' }} />\n                      </IconButton>\n                    )}\n                  </Box>\n                </Card>\n              </Grid>\n            )}\n            {entities\n              ?.slice(0, isRemoveFirstCard ? 4 : entityCardCount)\n              .map((item: any) => (\n                <Grid\n                  item\n                  xs={12}\n                  md={6}\n                  lg={isRemoveFirstCard ? 3 : 3.5}\n                  key={item.metadata.name}\n                >\n                  <EntityCard\n                    entity={item}\n                    title={\n                      item.spec?.profile?.displayName ?? item.metadata.name\n                    }\n                    version=\"latest\"\n                    description={item.metadata.description ?? ''}\n                    tags={item.metadata?.tags ?? []}\n                    kind={item.kind}\n                  />\n                </Grid>\n              ))}\n            {entities?.length === 0 && (\n              <Grid item md={isRemoveFirstCard ? 12 : 7}>\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    minHeight: 300,\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent>\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      No software catalog added yet\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      Once software catalogs are added, this space will showcase\n                      relevant content tailored to your experience.\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      Register a component\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n        }}\n      >\n        Explore Your Software Catalog\n      </Typography>\n      {content}\n      {entities?.length > 0 && (\n        <Box sx={{ pt: 2 }}>\n          <ViewMoreLink to=\"/catalog\">\n            View all {data?.totalItems ? data?.totalItems : ''} catalog entities\n          </ViewMoreLink>\n        </Box>\n      )}\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}
+{"version":3,"file":"EntitySection.esm.js","sources":["../../../src/components/EntitySection/EntitySection.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 { ReactNode } from 'react';\n\nimport { useState, useEffect, Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { useTheme, styled } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport EntityCard from './EntityCard';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport HomePageEntityIllustration from '../../images/homepage-entities-1.svg';\nimport { useEntities } from '../../hooks/useEntities';\nimport {\n  addDismissedEntityIllustrationUsers,\n  hasEntityIllustrationUserDismissed,\n} from '../../utils/utils';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const EntitySection = () => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const { displayName, loading: profileLoading } = useUserProfile();\n  const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);\n  const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);\n  const [imgLoaded, setImgLoaded] = useState(false);\n  const [isMediumBreakpoint, setIsMediumBreakpoint] = useState(false);\n\n  const isMd = useMediaQuery(theme.breakpoints.only('md'));\n\n  useEffect(() => {\n    if (isMd) {\n      setIsMediumBreakpoint(true);\n    } else {\n      setIsMediumBreakpoint(false);\n    }\n  }, [isMd]);\n\n  useEffect(() => {\n    const isUserDismissedEntityIllustration =\n      hasEntityIllustrationUserDismissed(displayName);\n    setIsRemoveFirstCard(isUserDismissedEntityIllustration);\n  }, [displayName]);\n\n  const handleClose = () => {\n    setShowDiscoveryCard(false);\n    setTimeout(() => {\n      addDismissedEntityIllustrationUsers(displayName);\n      setIsRemoveFirstCard(true);\n    }, 500);\n  };\n\n  const { data, error, isLoading } = useEntities({\n    kind: ['Component', 'API', 'Resource', 'System'],\n  });\n\n  const entities = data?.items ?? [];\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('entities.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('entities.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    let entityCardCount = 2;\n    if (isMediumBreakpoint) entityCardCount = 3;\n\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {!isRemoveFirstCard && !profileLoading && (\n              <Grid item xs={12} md={6} lg={5} key=\"entities illustration\">\n                <Card\n                  elevation={0}\n                  sx={{\n                    border: `1px solid ${theme.palette.grey[400]}`,\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    position: 'relative',\n                    transition:\n                      'opacity 0.5s ease-out, transform 0.5s ease-in-out',\n                    opacity: showDiscoveryCard ? 1 : 0,\n                    transform: showDiscoveryCard\n                      ? 'translateX(0)'\n                      : 'translateX(-50px)',\n                  }}\n                >\n                  {!imgLoaded && (\n                    <Skeleton\n                      variant=\"rectangular\"\n                      height={300}\n                      sx={{\n                        borderRadius: 3,\n                        width: 'clamp(140px, 14vw, 266px)',\n                      }}\n                    />\n                  )}\n                  <Box\n                    component=\"img\"\n                    src={HomePageEntityIllustration}\n                    onLoad={() => setImgLoaded(true)}\n                    alt=\"\"\n                    height={300}\n                    sx={{\n                      width: 'clamp(140px, 14vw, 266px)',\n                    }}\n                  />\n                  <Box sx={{ p: 2 }}>\n                    <Box>\n                      <Typography variant=\"body2\" paragraph>\n                        {t('entities.description')}\n                      </Typography>\n                    </Box>\n                    {entities?.length > 0 && (\n                      <IconButton\n                        onClick={handleClose}\n                        aria-label={t('entities.close')}\n                        style={{\n                          position: 'absolute',\n                          top: '8px',\n                          right: '8px',\n                        }}\n                      >\n                        <CloseIcon style={{ width: '16px', height: '16px' }} />\n                      </IconButton>\n                    )}\n                  </Box>\n                </Card>\n              </Grid>\n            )}\n            {entities\n              ?.slice(0, isRemoveFirstCard ? 4 : entityCardCount)\n              .map((item: any) => (\n                <Grid\n                  item\n                  xs={12}\n                  md={6}\n                  lg={isRemoveFirstCard ? 3 : 3.5}\n                  key={item.metadata.name}\n                >\n                  <EntityCard\n                    entity={item}\n                    title={\n                      item.spec?.profile?.displayName ?? item.metadata.name\n                    }\n                    version=\"latest\"\n                    description={item.metadata.description ?? ''}\n                    tags={item.metadata?.tags ?? []}\n                    kind={item.kind}\n                  />\n                </Grid>\n              ))}\n            {entities?.length === 0 && (\n              <Grid item md={isRemoveFirstCard ? 12 : 7}>\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    minHeight: 300,\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent>\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('entities.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('entities.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('entities.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n        }}\n      >\n        {t('entities.title')}\n      </Typography>\n      {content}\n      {entities?.length > 0 && (\n        <Box sx={{ pt: 2 }}>\n          <ViewMoreLink to=\"/catalog\">\n            <Trans\n              message=\"entities.viewAll\"\n              params={{ count: data?.totalItems?.toString() || '' }}\n            />\n          </ViewMoreLink>\n        </Box>\n      )}\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}

package/dist/components/FeaturedDocsCard.esm.js

@@ -1,8 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { FeaturedDocsCard as FeaturedDocsCard$1 } from '@backstage/plugin-home';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const FeaturedDocsCard = (props) => {
-  return /* @__PURE__ */ jsx(FeaturedDocsCard$1, { subLinkText: " Learn more", ...props });
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    FeaturedDocsCard$1,
+    {
+      subLinkText: ` ${t("featuredDocs.learnMore")}`,
+      ...props
+    }
+  );
 };
 
 export { FeaturedDocsCard };

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

@@ -1 +1 @@
-{"version":3,"file":"FeaturedDocsCard.esm.js","sources":["../../src/components/FeaturedDocsCard.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 */\n\nimport {\n  FeaturedDocsCard as PluginHomeFeaturedDocsCard,\n  FeaturedDocsCardProps,\n} from '@backstage/plugin-home';\n\n/**\n * Overrides `FeaturedDocsCard` from the home plugin, but overrides the\n * `subLinkText` prop to be \" Learn more\" instead of \"LEARN MORE\".\n *\n * 1. To fix the all uppercase that is used in home plugin\n * 2. To add a small missing gap between the title and the button\n */\nexport const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {\n  return <PluginHomeFeaturedDocsCard subLinkText=\" Learn more\" {...props} />;\n};\n"],"names":["PluginHomeFeaturedDocsCard"],"mappings":";;;AA4Ba,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAA,uBAAQ,GAAA,CAAAA,kBAAA,EAAA,EAA2B,WAAY,EAAA,aAAA,EAAe,GAAG,KAAO,EAAA,CAAA;AAC1E;;;;"}
+{"version":3,"file":"FeaturedDocsCard.esm.js","sources":["../../src/components/FeaturedDocsCard.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 */\n\nimport {\n  FeaturedDocsCard as PluginHomeFeaturedDocsCard,\n  FeaturedDocsCardProps,\n} from '@backstage/plugin-home';\n\nimport { useTranslation } from '../hooks/useTranslation';\n\n/**\n * Overrides `FeaturedDocsCard` from the home plugin, but overrides the\n * `subLinkText` prop to be \" Learn more\" instead of \"LEARN MORE\".\n *\n * 1. To fix the all uppercase that is used in home plugin\n * 2. To add a small missing gap between the title and the button\n */\nexport const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {\n  const { t } = useTranslation();\n  return (\n    <PluginHomeFeaturedDocsCard\n      subLinkText={` ${t('featuredDocs.learnMore')}`}\n      {...props}\n    />\n  );\n};\n"],"names":["PluginHomeFeaturedDocsCard"],"mappings":";;;;AA8Ba,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EACE,uBAAA,GAAA;AAAA,IAACA,kBAAA;AAAA,IAAA;AAAA,MACC,WAAa,EAAA,CAAA,CAAA,EAAI,CAAE,CAAA,wBAAwB,CAAC,CAAA,CAAA;AAAA,MAC3C,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Header.esm.js

@@ -5,25 +5,37 @@ import { Header as Header$1 } from '@backstage/core-components';
 import { HeaderWorldClock } from '@backstage/plugin-home';
 import useAsync from 'react-use/esm/useAsync';
 import { LocalClock } from './LocalClock.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
-const getPersonalizedTitle = (title, displayName) => {
-  const firstName = displayName?.split(" ")[0];
-  const replacedTitle = title.replace("{{firstName}}", firstName ?? "").replace("{{displayName}}", displayName ?? "");
-  return replacedTitle;
+const interpolateUserTitle = (title, displayName) => {
+  if (!displayName) {
+    return title.replace(/\{\{(firstName|displayName)\}\}/g, "");
+  }
+  const firstName = displayName.split(" ")[0];
+  return title.replace(/\{\{firstName\}\}/g, firstName).replace(/\{\{displayName\}\}/g, displayName);
 };
 const Header = (props) => {
   const identityApi = useApi(identityApiRef);
   const { value: profile } = useAsync(() => identityApi.getProfileInfo());
+  const { t } = useTranslation();
   const title = useMemo(() => {
+    const firstName = profile?.displayName?.split(" ")[0];
     if (profile?.displayName && props.personalizedTitle) {
-      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);
-    } else if (props.title) {
-      return getPersonalizedTitle(props.title, profile?.displayName);
+      return interpolateUserTitle(props.personalizedTitle, profile.displayName);
     }
-    return getPersonalizedTitle("Welcome back!", profile?.displayName);
-  }, [profile?.displayName, props.personalizedTitle, props.title]);
+    if (props.title) {
+      return interpolateUserTitle(props.title, profile?.displayName);
+    }
+    if (profile?.displayName && firstName) {
+      return t("header.welcomePersonalized", { name: firstName });
+    }
+    return t("header.welcome");
+  }, [profile?.displayName, props.personalizedTitle, props.title, t]);
   const subtitle = useMemo(() => {
-    return props.subtitle ? getPersonalizedTitle(props.subtitle, profile?.displayName) : undefined;
+    if (props.subtitle) {
+      return interpolateUserTitle(props.subtitle, profile?.displayName);
+    }
+    return undefined;
   }, [props.subtitle, profile?.displayName]);
   return /* @__PURE__ */ jsxs(
     Header$1,
@@ -35,7 +47,7 @@ const Header = (props) => {
         props.localClock?.format && props.localClock?.format !== "none" ? /* @__PURE__ */ jsx(
           LocalClock,
           {
-            label: props.localClock?.label ?? (props.worldClocks && props.worldClocks.length > 0 ? "Local" : undefined),
+            label: props.localClock?.label ?? (props.worldClocks && props.worldClocks.length > 0 ? t("header.local") : undefined),
             format: props.localClock?.format ?? (props.worldClocks && props.worldClocks.length > 0 ? "time" : undefined),
             lang: props.localClock?.lang
           }
@@ -46,5 +58,5 @@ const Header = (props) => {
   );
 };
 
-export { Header, getPersonalizedTitle };
+export { Header };
 //# sourceMappingURL=Header.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../src/components/Header.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 */\n\nimport { useMemo } from 'react';\n\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Header as BackstageHeader } from '@backstage/core-components';\nimport { ClockConfig, HeaderWorldClock } from '@backstage/plugin-home';\n\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { LocalClock, LocalClockProps } from './LocalClock';\n\nexport interface HeaderProps {\n  title?: string;\n  personalizedTitle?: string;\n  pageTitle?: string;\n  subtitle?: string;\n  localClock?: LocalClockProps;\n  worldClocks?: ClockConfig[];\n}\n\n// I kept this because I hope that we will add this soon or at least in Dynamic Home Page plugin 1.2 ~ RHDH 1.6.\n// const getTimeBasedTitle = (): string => {\n//   const currentHour = new Date(Date.now()).getHours();\n//   if (currentHour < 12) {\n//     return 'Good morning {{firstName}}';\n//   } else if (currentHour < 17) {\n//     return 'Good afternoon {{firstName}}';\n//   }\n//   return 'Good evening {{firstName}}';\n// };\n\nexport const getPersonalizedTitle = (\n  title: string,\n  displayName: string | undefined,\n) => {\n  const firstName = displayName?.split(' ')[0];\n  const replacedTitle = title\n    .replace('{{firstName}}', firstName ?? '')\n    .replace('{{displayName}}', displayName ?? '');\n  return replacedTitle;\n};\n\nexport const Header = (props: HeaderProps) => {\n  const identityApi = useApi(identityApiRef);\n  const { value: profile } = useAsync(() => identityApi.getProfileInfo());\n\n  const title = useMemo<string>(() => {\n    if (profile?.displayName && props.personalizedTitle) {\n      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);\n    } else if (props.title) {\n      return getPersonalizedTitle(props.title, profile?.displayName);\n    }\n    // return getPersonalizedTitle(getTimeBasedTitle(), profile?.displayName);\n    return getPersonalizedTitle('Welcome back!', profile?.displayName);\n  }, [profile?.displayName, props.personalizedTitle, props.title]);\n\n  const subtitle = useMemo<string | undefined>(() => {\n    return props.subtitle\n      ? getPersonalizedTitle(props.subtitle, profile?.displayName)\n      : undefined;\n  }, [props.subtitle, profile?.displayName]);\n\n  return (\n    <BackstageHeader\n      title={title}\n      subtitle={subtitle}\n      pageTitleOverride={props.pageTitle}\n    >\n      {props.localClock?.format && props.localClock?.format !== 'none' ? (\n        <LocalClock\n          label={\n            props.localClock?.label ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? 'Local'\n              : undefined)\n          }\n          format={\n            props.localClock?.format ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? 'time'\n              : undefined)\n          }\n          lang={props.localClock?.lang}\n        />\n      ) : null}\n\n      {props.worldClocks && props.worldClocks.length > 0 ? (\n        <HeaderWorldClock clockConfigs={props.worldClocks} />\n      ) : null}\n    </BackstageHeader>\n  );\n};\n"],"names":["BackstageHeader"],"mappings":";;;;;;;;AA8Ca,MAAA,oBAAA,GAAuB,CAClC,KAAA,EACA,WACG,KAAA;AACH,EAAA,MAAM,SAAY,GAAA,WAAA,EAAa,KAAM,CAAA,GAAG,EAAE,CAAC,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,KACnB,CAAA,OAAA,CAAQ,eAAiB,EAAA,SAAA,IAAa,EAAE,CACxC,CAAA,OAAA,CAAQ,iBAAmB,EAAA,WAAA,IAAe,EAAE,CAAA;AAC/C,EAAO,OAAA,aAAA;AACT;AAEa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAI,SAAS,MAAM,WAAA,CAAY,gBAAgB,CAAA;AAEtE,EAAM,MAAA,KAAA,GAAQ,QAAgB,MAAM;AAClC,IAAI,IAAA,OAAA,EAAS,WAAe,IAAA,KAAA,CAAM,iBAAmB,EAAA;AACnD,MAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,iBAAmB,EAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,KAC1E,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,KAAO,EAAA,OAAA,EAAS,WAAW,CAAA;AAAA;AAG/D,IAAO,OAAA,oBAAA,CAAqB,eAAiB,EAAA,OAAA,EAAS,WAAW,CAAA;AAAA,GACnE,EAAG,CAAC,OAAS,EAAA,WAAA,EAAa,MAAM,iBAAmB,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAE/D,EAAM,MAAA,QAAA,GAAW,QAA4B,MAAM;AACjD,IAAA,OAAO,MAAM,QACT,GAAA,oBAAA,CAAqB,MAAM,QAAU,EAAA,OAAA,EAAS,WAAW,CACzD,GAAA,SAAA;AAAA,KACH,CAAC,KAAA,CAAM,QAAU,EAAA,OAAA,EAAS,WAAW,CAAC,CAAA;AAEzC,EACE,uBAAA,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,mBAAmB,KAAM,CAAA,SAAA;AAAA,MAExB,QAAA,EAAA;AAAA,QAAA,KAAA,CAAM,UAAY,EAAA,MAAA,IAAU,KAAM,CAAA,UAAA,EAAY,WAAW,MACxD,mBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA,EACE,KAAM,CAAA,UAAA,EAAY,KACjB,KAAA,KAAA,CAAM,eAAe,KAAM,CAAA,WAAA,CAAY,MAAS,GAAA,CAAA,GAC7C,OACA,GAAA,SAAA,CAAA;AAAA,YAEN,MAAA,EACE,KAAM,CAAA,UAAA,EAAY,MACjB,KAAA,KAAA,CAAM,eAAe,KAAM,CAAA,WAAA,CAAY,MAAS,GAAA,CAAA,GAC7C,MACA,GAAA,SAAA,CAAA;AAAA,YAEN,IAAA,EAAM,MAAM,UAAY,EAAA;AAAA;AAAA,SAExB,GAAA,IAAA;AAAA,QAEH,KAAA,CAAM,WAAe,IAAA,KAAA,CAAM,WAAY,CAAA,MAAA,GAAS,CAC/C,mBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,YAAA,EAAc,KAAM,CAAA,WAAA,EAAa,CACjD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Header.esm.js","sources":["../../src/components/Header.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 */\n\nimport { useMemo } from 'react';\n\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Header as BackstageHeader } from '@backstage/core-components';\nimport { ClockConfig, HeaderWorldClock } from '@backstage/plugin-home';\n\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { LocalClock, LocalClockProps } from './LocalClock';\nimport { useTranslation } from '../hooks/useTranslation';\n\nexport interface HeaderProps {\n  title?: string;\n  personalizedTitle?: string;\n  pageTitle?: string;\n  subtitle?: string;\n  localClock?: LocalClockProps;\n  worldClocks?: ClockConfig[];\n}\n\n// I kept this because I hope that we will add this soon or at least in Dynamic Home Page plugin 1.2 ~ RHDH 1.6.\n// const getTimeBasedTitle = (): string => {\n//   const currentHour = new Date(Date.now()).getHours();\n//   if (currentHour < 12) {\n//     return 'Good morning {{firstName}}';\n//   } else if (currentHour < 17) {\n//     return 'Good afternoon {{firstName}}';\n//   }\n//   return 'Good evening {{firstName}}';\n// };\n\n/**\n * Handles user-provided title customization with variable interpolation.\n *\n * When users provide custom titles in their configuration, they take responsibility\n * for internationalization at the configuration level. This function simply handles\n * the variable interpolation for their custom strings.\n *\n * Supports variables:\n * - {{firstName}} - First part of displayName (split by space)\n * - {{displayName}} - Full displayName from user profile\n *\n * @param title - User-provided title string with optional {{variables}}\n * @param displayName - User's displayName from profile, if available\n */\nconst interpolateUserTitle = (\n  title: string,\n  displayName: string | undefined,\n) => {\n  if (!displayName) {\n    // Remove variable placeholders when no displayName is available\n    return title.replace(/\\{\\{(firstName|displayName)\\}\\}/g, '');\n  }\n\n  const firstName = displayName.split(' ')[0];\n  return title\n    .replace(/\\{\\{firstName\\}\\}/g, firstName)\n    .replace(/\\{\\{displayName\\}\\}/g, displayName);\n};\n\nexport const Header = (props: HeaderProps) => {\n  const identityApi = useApi(identityApiRef);\n  const { value: profile } = useAsync(() => identityApi.getProfileInfo());\n  const { t } = useTranslation();\n\n  const title = useMemo<string>(() => {\n    const firstName = profile?.displayName?.split(' ')[0];\n\n    // Priority 1: User-provided personalized title (user handles i18n)\n    if (profile?.displayName && props.personalizedTitle) {\n      return interpolateUserTitle(props.personalizedTitle, profile.displayName);\n    }\n\n    // Priority 2: User-provided general title (user handles i18n)\n    if (props.title) {\n      return interpolateUserTitle(props.title, profile?.displayName);\n    }\n\n    // Default: Use plugin's translation system\n    if (profile?.displayName && firstName) {\n      return t('header.welcomePersonalized' as any, { name: firstName });\n    }\n\n    return t('header.welcome');\n  }, [profile?.displayName, props.personalizedTitle, props.title, t]);\n\n  const subtitle = useMemo<string | undefined>(() => {\n    // User-provided subtitle (user handles i18n)\n    if (props.subtitle) {\n      return interpolateUserTitle(props.subtitle, profile?.displayName);\n    }\n\n    return undefined;\n  }, [props.subtitle, profile?.displayName]);\n\n  return (\n    <BackstageHeader\n      title={title}\n      subtitle={subtitle}\n      pageTitleOverride={props.pageTitle}\n    >\n      {props.localClock?.format && props.localClock?.format !== 'none' ? (\n        <LocalClock\n          label={\n            props.localClock?.label ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? t('header.local')\n              : undefined)\n          }\n          format={\n            props.localClock?.format ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? 'time'\n              : undefined)\n          }\n          lang={props.localClock?.lang}\n        />\n      ) : null}\n\n      {props.worldClocks && props.worldClocks.length > 0 ? (\n        <HeaderWorldClock clockConfigs={props.worldClocks} />\n      ) : null}\n    </BackstageHeader>\n  );\n};\n"],"names":["BackstageHeader"],"mappings":"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"}

package/dist/components/HomePage.esm.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Page, Content, EmptyState } from '@backstage/core-components';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { Header } from './Header.esm.js';
 import { ReadOnlyGrid } from './ReadOnlyGrid.esm.js';
 
 const HomePage = (props) => {
+  const { t } = useTranslation();
   const filteredAndSortedHomePageCards = useMemo(() => {
     if (!props.cards) {
       return [];
@@ -18,14 +20,8 @@ const HomePage = (props) => {
     return filteredAndSorted;
   }, [props.cards]);
   return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
-    /* @__PURE__ */ jsx(Header, { title: "Welcome back!", ...props }),
-    /* @__PURE__ */ jsx(Content, { children: filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: "No home page cards (mount points) configured or found.",
-        missing: "content"
-      }
-    ) : /* @__PURE__ */ jsx(ReadOnlyGrid, { mountPoints: filteredAndSortedHomePageCards }) })
+    /* @__PURE__ */ jsx(Header, { title: t("header.welcome"), ...props }),
+    /* @__PURE__ */ jsx(Content, { children: filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { title: t("homePage.empty"), missing: "content" }) : /* @__PURE__ */ jsx(ReadOnlyGrid, { mountPoints: filteredAndSortedHomePageCards }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.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 */\n\nimport { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const HomePage = (props: HomePageProps) => {\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"Welcome back!\" {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState\n            title=\"No home page cards (mount points) configured or found.\"\n            missing=\"content\"\n          />\n        ) : (\n          <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ba,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAM,eAAiB,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA,oBACxC,GAAA,CAAA,OAAA,EAAA,EACE,QAA+B,EAAA,8BAAA,CAAA,MAAA,KAAW,CACzC,mBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,wDAAA;AAAA,QACN,OAAQ,EAAA;AAAA;AAAA,KAGV,mBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,WAAA,EAAa,gCAAgC,CAE/D,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.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 */\n\nimport { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\nimport { useTranslation } from '../hooks/useTranslation';\n\nimport { Header, HeaderProps } from './Header';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const HomePage = (props: HomePageProps) => {\n  const { t } = useTranslation();\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header title={t('header.welcome')} {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState title={t('homePage.empty')} missing=\"content\" />\n        ) : (\n          <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8Ba,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAO,KAAO,EAAA,CAAA,CAAE,gBAAgB,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA;AAAA,wBAC9C,OACE,EAAA,EAAA,QAAA,EAAA,8BAAA,CAA+B,WAAW,CACzC,mBAAA,GAAA,CAAC,cAAW,KAAO,EAAA,CAAA,CAAE,gBAAgB,CAAA,EAAG,SAAQ,SAAU,EAAA,CAAA,uBAEzD,YAAa,EAAA,EAAA,WAAA,EAAa,gCAAgC,CAE/D,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/OnboardingSection/OnboardingSection.esm.js

@@ -11,14 +11,16 @@ import { useTheme } from '@mui/material/styles';
 import OnboardingCard from './OnboardingCard.esm.js';
 import HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';
 import HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';
-import { LEARNING_SECTION_ITEMS } from '../../utils/constants.esm.js';
+import { getLearningItems } from '../../utils/constants.esm.js';
 import useGreeting from '../../hooks/useGreeting.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const OnboardingSection = () => {
   const [user, setUser] = useState();
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   const greeting = useGreeting();
+  const { t } = useTranslation();
   const {
     displayName,
     backstageIdentity,
@@ -75,7 +77,7 @@ const OnboardingSection = () => {
         )
       }
     ),
-    LEARNING_SECTION_ITEMS.map((item) => /* @__PURE__ */ jsx(
+    getLearningItems(t).map((item) => /* @__PURE__ */ jsx(
       Grid,
       {
         item: true,
@@ -121,7 +123,7 @@ const OnboardingSection = () => {
               fontWeight: "500",
               fontSize: "1.5rem"
             },
-            children: `${greeting}, ${profileDisplayName() || "Guest"}!`
+            children: `${greeting}, ${profileDisplayName() || t("onboarding.guest")}!`
           }
         ),
         content

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

@@ -1 +1 @@
-{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.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 } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { LEARNING_SECTION_ITEMS } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box>\n      <Grid container margin=\"auto\">\n        <Grid\n          item\n          xs={12}\n          md={6}\n          lg={3}\n          display=\"flex\"\n          justifyContent=\"left\"\n          alignItems=\"center\"\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n            }}\n          />\n        </Grid>\n        {LEARNING_SECTION_ITEMS.map((item: LearningSectionItem) => (\n          <Grid\n            item\n            xs={12}\n            md={6}\n            lg={3}\n            key={item.title}\n            display=\"flex\"\n            justifyContent=\"left\"\n            alignItems=\"center\"\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || 'Guest'}!`}\n        </Typography>\n      )}\n      {content}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.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 } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { getLearningItems } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box>\n      <Grid container margin=\"auto\">\n        <Grid\n          item\n          xs={12}\n          md={6}\n          lg={3}\n          display=\"flex\"\n          justifyContent=\"left\"\n          alignItems=\"center\"\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n            }}\n          />\n        </Grid>\n        {getLearningItems(t).map((item: LearningSectionItem) => (\n          <Grid\n            item\n            xs={12}\n            md={6}\n            lg={3}\n            key={item.title}\n            display=\"flex\"\n            justifyContent=\"left\"\n            alignItems=\"center\"\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}\n        </Typography>\n      )}\n      {content}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickAccessCard.esm.js

@@ -4,6 +4,7 @@ import { HomePageToolkit, ComponentAccordion } from '@backstage/plugin-home';
 import CircularProgress from '@mui/material/CircularProgress';
 import { makeStyles } from 'tss-react/mui';
 import { useQuickAccessLinks } from '../hooks/useQuickAccessLinks.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const useStyles = makeStyles()({
   center: {
@@ -24,16 +25,17 @@ const useStyles = makeStyles()({
 });
 const QuickAccessCard = (props) => {
   const { classes } = useStyles();
+  const { t } = useTranslation();
   const { data, error, isLoading } = useQuickAccessLinks(props.path);
   let content;
   if (isLoading) {
     content = /* @__PURE__ */ jsx("div", { className: classes.center, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   } else if (!data) {
-    content = /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: "Could not fetch data.", children: /* @__PURE__ */ jsx(
+    content = /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("quickAccess.fetchError"), children: /* @__PURE__ */ jsx(
       CodeSnippet,
       {
         language: "text",
-        text: error?.toString() ?? "Unknown error"
+        text: error?.toString() ?? t("quickAccess.error")
       }
     ) });
   } else {
@@ -60,7 +62,7 @@ const QuickAccessCard = (props) => {
   return /* @__PURE__ */ jsx(
     InfoCard,
     {
-      title: props.title ?? "Quick Access",
+      title: props.title ?? t("quickAccess.title"),
       noPadding: true,
       className: classes.title,
       children: content

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

@@ -1 +1 @@
-{"version":3,"file":"QuickAccessCard.esm.js","sources":["../../src/components/QuickAccessCard.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 */\n\nimport type { ReactNode } from 'react';\n\nimport {\n  CodeSnippet,\n  InfoCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { ComponentAccordion, HomePageToolkit } from '@backstage/plugin-home';\n\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';\n\nconst useStyles = makeStyles()({\n  center: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  img: {\n    height: '40px',\n    width: 'auto',\n  },\n  title: {\n    '& div > div > div > div > p': {\n      textTransform: 'uppercase',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface QuickAccessCardProps {\n  title?: string;\n  path?: string;\n}\n\n/**\n * @public\n */\nexport const QuickAccessCard = (props: QuickAccessCardProps) => {\n  const { classes } = useStyles();\n  const { data, error, isLoading } = useQuickAccessLinks(props.path);\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <div className={classes.center}>\n        <CircularProgress />\n      </div>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title=\"Could not fetch data.\">\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? 'Unknown error'}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <>\n        {data.map(item => (\n          <HomePageToolkit\n            key={item.title}\n            title={item.title}\n            tools={item.links.map(link => ({\n              ...link,\n              icon: (\n                <img\n                  className={classes.img}\n                  src={link.iconUrl}\n                  alt={link.label}\n                />\n              ),\n            }))}\n            // Component creation is allowed inside component props only\n            // if prop name starts with `render`.\n            // We accept it here since the upstream package use `Renderer` instead.\n            Renderer={(\n              renderProps, // NOSONAR\n            ) => (\n              <ComponentAccordion expanded={item.isExpanded} {...renderProps} />\n            )}\n          />\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <InfoCard\n      title={props.title ?? 'Quick Access'}\n      noPadding\n      className={classes.title}\n    >\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,KAAO,EAAA;AAAA,IACL,6BAA+B,EAAA;AAAA,MAC7B,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAaY,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,WAAc,GAAA,mBAAA,CAAoB,MAAM,IAAI,CAAA;AAEjE,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,OAAA,uBACG,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,MACtB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAiB,CACpB,EAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,CAAC,IAAM,EAAA;AAChB,IAAA,OAAA,mBACG,GAAA,CAAA,YAAA,EAAA,EAAa,QAAS,EAAA,OAAA,EAAQ,OAAM,uBACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,MAAA;AAAA,QACT,IAAA,EAAM,KAAO,EAAA,QAAA,EAAc,IAAA;AAAA;AAAA,KAE/B,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,OAAA,mBAAA,GAAA,CAAA,QAAA,EAAA,EACG,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,IAAA,qBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAK,CAAA,KAAA;AAAA,QACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAS,IAAA,MAAA;AAAA,UAC7B,GAAG,IAAA;AAAA,UACH,IACE,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,GAAA;AAAA,cACnB,KAAK,IAAK,CAAA,OAAA;AAAA,cACV,KAAK,IAAK,CAAA;AAAA;AAAA;AACZ,SAEF,CAAA,CAAA;AAAA,QAIF,QAAA,EAAU,CACR,WAEA,qBAAA,GAAA,CAAC,sBAAmB,QAAU,EAAA,IAAA,CAAK,UAAa,EAAA,GAAG,WAAa,EAAA;AAAA,OAAA;AAAA,MAlB7D,IAAK,CAAA;AAAA,KAqBb,CACH,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,MAAM,KAAS,IAAA,cAAA;AAAA,MACtB,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,OAAQ,CAAA,KAAA;AAAA,MAElB,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"QuickAccessCard.esm.js","sources":["../../src/components/QuickAccessCard.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 */\n\nimport type { ReactNode } from 'react';\n\nimport {\n  CodeSnippet,\n  InfoCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { ComponentAccordion, HomePageToolkit } from '@backstage/plugin-home';\n\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';\nimport { useTranslation } from '../hooks/useTranslation';\n\nconst useStyles = makeStyles()({\n  center: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  img: {\n    height: '40px',\n    width: 'auto',\n  },\n  title: {\n    '& div > div > div > div > p': {\n      textTransform: 'uppercase',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface QuickAccessCardProps {\n  title?: string;\n  path?: string;\n}\n\n/**\n * @public\n */\nexport const QuickAccessCard = (props: QuickAccessCardProps) => {\n  const { classes } = useStyles();\n  const { t } = useTranslation();\n  const { data, error, isLoading } = useQuickAccessLinks(props.path);\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <div className={classes.center}>\n        <CircularProgress />\n      </div>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('quickAccess.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('quickAccess.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <>\n        {data.map(item => (\n          <HomePageToolkit\n            key={item.title}\n            title={item.title}\n            tools={item.links.map(link => ({\n              ...link,\n              icon: (\n                <img\n                  className={classes.img}\n                  src={link.iconUrl}\n                  alt={link.label}\n                />\n              ),\n            }))}\n            // Component creation is allowed inside component props only\n            // if prop name starts with `render`.\n            // We accept it here since the upstream package use `Renderer` instead.\n            Renderer={(\n              renderProps, // NOSONAR\n            ) => (\n              <ComponentAccordion expanded={item.isExpanded} {...renderProps} />\n            )}\n          />\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <InfoCard\n      title={props.title ?? t('quickAccess.title')}\n      noPadding\n      className={classes.title}\n    >\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA+BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,KAAO,EAAA;AAAA,IACL,6BAA+B,EAAA;AAAA,MAC7B,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAaY,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,WAAc,GAAA,mBAAA,CAAoB,MAAM,IAAI,CAAA;AAEjE,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,OAAA,uBACG,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,MACtB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAiB,CACpB,EAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,CAAC,IAAM,EAAA;AAChB,IAAA,OAAA,uBACG,YAAa,EAAA,EAAA,QAAA,EAAS,SAAQ,KAAO,EAAA,CAAA,CAAE,wBAAwB,CAC9D,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,MAAA;AAAA,QACT,IAAM,EAAA,KAAA,EAAO,QAAS,EAAA,IAAK,EAAE,mBAAmB;AAAA;AAAA,KAEpD,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,OAAA,mBAAA,GAAA,CAAA,QAAA,EAAA,EACG,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,IAAA,qBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAK,CAAA,KAAA;AAAA,QACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAS,IAAA,MAAA;AAAA,UAC7B,GAAG,IAAA;AAAA,UACH,IACE,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,GAAA;AAAA,cACnB,KAAK,IAAK,CAAA,OAAA;AAAA,cACV,KAAK,IAAK,CAAA;AAAA;AAAA;AACZ,SAEF,CAAA,CAAA;AAAA,QAIF,QAAA,EAAU,CACR,WAEA,qBAAA,GAAA,CAAC,sBAAmB,QAAU,EAAA,IAAA,CAAK,UAAa,EAAA,GAAG,WAAa,EAAA;AAAA,OAAA;AAAA,MAlB7D,IAAK,CAAA;AAAA,KAqBb,CACH,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,KAAA,CAAM,KAAS,IAAA,CAAA,CAAE,mBAAmB,CAAA;AAAA,MAC3C,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,OAAQ,CAAA,KAAA;AAAA,MAElB,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/SearchBar.esm.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { SearchBarBase } from '@backstage/plugin-search-react';
 import { makeStyles } from 'tss-react/mui';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const useStyles = makeStyles()((theme) => ({
   searchBar: {
@@ -22,6 +23,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 const SearchBar = ({ path, queryParam }) => {
   const { classes } = useStyles();
+  const { t } = useTranslation();
   const [value, setValue] = useState("");
   const ref = useRef(null);
   const navigate = useNavigate();
@@ -36,7 +38,7 @@ const SearchBar = ({ path, queryParam }) => {
   return /* @__PURE__ */ jsx(
     SearchBarBase,
     {
-      placeholder: "Search",
+      placeholder: t("search.placeholder"),
       value,
       onChange: setValue,
       onSubmit: handleSubmit,