@red-hat-developer-hub/backstage-plugin-global-header 1.15.1 → 1.16.0

package/dist/components/HeaderDropdownComponent/StarredDropdown.esm.js

@@ -13,6 +13,9 @@ import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import '@backstage/core-plugin-api';
+import '@backstage/core-plugin-api/alpha';
 import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
 import { DropdownEmptyState } from './DropdownEmptyState.esm.js';
 
@@ -24,6 +27,7 @@ const StarredItem = ({
   const { Icon, primaryTitle, secondaryTitle } = useEntityPresentation(entityRef);
   const { name, kind, namespace } = parseEntityRef(entityRef);
   const theme = useTheme();
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     MenuItem,
     {
@@ -42,7 +46,7 @@ const StarredItem = ({
             sx: { ml: 1, mr: 1 }
           }
         ),
-        /* @__PURE__ */ jsx(Tooltip, { title: "Remove from list", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Tooltip, { title: t("starred.removeTooltip"), children: /* @__PURE__ */ jsx(
           IconButton,
           {
             onClick: (e) => {
@@ -60,6 +64,7 @@ const StarredItem = ({
 const StarredDropdown = () => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const { starredEntities, toggleStarredEntity } = useStarredEntities();
+  const { t } = useTranslation();
   const entitiesArray = Array.from(starredEntities);
   return /* @__PURE__ */ jsx(
     HeaderDropdownComponent,
@@ -68,13 +73,13 @@ const StarredDropdown = () => {
       onOpen: handleOpen,
       onClose: handleClose,
       anchorEl,
-      tooltip: "Your starred items",
+      tooltip: t("starred.title"),
       isIconButton: true,
       children: entitiesArray.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           ListItemText,
           {
-            primary: "Your starred items",
+            primary: t("starred.title"),
             sx: { pl: 2, mt: 1, fontWeight: "bold", color: "text.secondary" }
           }
         ),
@@ -90,8 +95,8 @@ const StarredDropdown = () => {
       ] }) : /* @__PURE__ */ jsx(
         DropdownEmptyState,
         {
-          title: "No starred items yet",
-          subTitle: "Click the star icon next to an entity's name to save it here for quick access.",
+          title: t("starred.noItemsTitle"),
+          subTitle: t("starred.noItemsSubtitle"),
           icon: /* @__PURE__ */ jsx(AutoAwesomeIcon, { sx: { fontSize: 64 }, color: "disabled" })
         }
       )

package/dist/components/HeaderDropdownComponent/StarredDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarredDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/StarredDropdown.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 { FC } from 'react';\nimport {\n  useEntityPresentation,\n  useStarredEntities,\n} from '@backstage/plugin-catalog-react';\nimport { Link } from '@backstage/core-components';\nimport {\n  CompoundEntityRef,\n  Entity,\n  parseEntityRef,\n} from '@backstage/catalog-model';\nimport StarBorderIcon from '@mui/icons-material/StarBorder';\nimport Star from '@mui/icons-material/Star';\nimport AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\n\nimport { useTheme } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { DropdownEmptyState } from './DropdownEmptyState';\n\n/**\n * @public\n * Props for each starred entitify item\n */\ninterface SectionComponentProps {\n  entityRef: string | CompoundEntityRef | Entity;\n  toggleStarredEntity: (\n    entityOrRef: Entity | CompoundEntityRef | string,\n  ) => void;\n  handleClose: () => void;\n}\n\nconst StarredItem: FC<SectionComponentProps> = ({\n  entityRef,\n  toggleStarredEntity,\n  handleClose,\n}) => {\n  const { Icon, primaryTitle, secondaryTitle } =\n    useEntityPresentation(entityRef);\n  const { name, kind, namespace } = parseEntityRef(entityRef as string);\n  const theme = useTheme();\n\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\n    >\n      {Icon && (\n        <ListItemIcon sx={{ minWidth: 36 }}>\n          <Icon />\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={\n          <Typography sx={{ color: theme.palette.text.primary }}>\n            {primaryTitle || secondaryTitle}\n          </Typography>\n        }\n        secondary={kind.toLocaleUpperCase()}\n        // inset={!Icon}\n        sx={{ ml: 1, mr: 1 }}\n      />\n      <Tooltip title=\"Remove from list\">\n        <IconButton\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n        >\n          <Star color=\"warning\" />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\n\n  const entitiesArray = Array.from(starredEntities);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<StarBorderIcon />}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      tooltip=\"Your starred items\"\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary=\"Your starred items\"\n            sx={{ pl: 2, mt: 1, fontWeight: 'bold', color: 'text.secondary' }}\n          />\n          {entitiesArray.map(enitityRef => (\n            <StarredItem\n              key={enitityRef}\n              entityRef={enitityRef}\n              toggleStarredEntity={toggleStarredEntity}\n              handleClose={handleClose}\n            />\n          ))}\n        </>\n      ) : (\n        <DropdownEmptyState\n          title=\"No starred items yet\"\n          subTitle=\"Click the star icon next to an entity's name to save it here for quick access.\"\n          icon={<AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StarredDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/StarredDropdown.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 { FC } from 'react';\nimport {\n  useEntityPresentation,\n  useStarredEntities,\n} from '@backstage/plugin-catalog-react';\nimport { Link } from '@backstage/core-components';\nimport {\n  CompoundEntityRef,\n  Entity,\n  parseEntityRef,\n} from '@backstage/catalog-model';\nimport StarBorderIcon from '@mui/icons-material/StarBorder';\nimport Star from '@mui/icons-material/Star';\nimport AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\n\nimport { useTheme } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { DropdownEmptyState } from './DropdownEmptyState';\nimport { useTranslation } from '../../hooks/useTranslation';\n\n/**\n * @public\n * Props for each starred entitify item\n */\ninterface SectionComponentProps {\n  entityRef: string | CompoundEntityRef | Entity;\n  toggleStarredEntity: (\n    entityOrRef: Entity | CompoundEntityRef | string,\n  ) => void;\n  handleClose: () => void;\n}\n\nconst StarredItem: FC<SectionComponentProps> = ({\n  entityRef,\n  toggleStarredEntity,\n  handleClose,\n}) => {\n  const { Icon, primaryTitle, secondaryTitle } =\n    useEntityPresentation(entityRef);\n  const { name, kind, namespace } = parseEntityRef(entityRef as string);\n  const theme = useTheme();\n  const { t } = useTranslation();\n\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\n    >\n      {Icon && (\n        <ListItemIcon sx={{ minWidth: 36 }}>\n          <Icon />\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={\n          <Typography sx={{ color: theme.palette.text.primary }}>\n            {primaryTitle || secondaryTitle}\n          </Typography>\n        }\n        secondary={kind.toLocaleUpperCase()}\n        // inset={!Icon}\n        sx={{ ml: 1, mr: 1 }}\n      />\n      <Tooltip title={t('starred.removeTooltip')}>\n        <IconButton\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n        >\n          <Star color=\"warning\" />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\n  const { t } = useTranslation();\n\n  const entitiesArray = Array.from(starredEntities);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<StarBorderIcon />}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      tooltip={t('starred.title')}\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary={t('starred.title')}\n            sx={{ pl: 2, mt: 1, fontWeight: 'bold', color: 'text.secondary' }}\n          />\n          {entitiesArray.map(enitityRef => (\n            <StarredItem\n              key={enitityRef}\n              entityRef={enitityRef}\n              toggleStarredEntity={toggleStarredEntity}\n              handleClose={handleClose}\n            />\n          ))}\n        </>\n      ) : (\n        <DropdownEmptyState\n          title={t('starred.noItemsTitle')}\n          subTitle={t('starred.noItemsSubtitle')}\n          icon={<AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LogoutButton/LogoutButton.esm.js

@@ -3,10 +3,12 @@ import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api'
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 import { MenuItemLinkContent } from '../MenuItemLink/MenuItemLinkContent.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const LogoutButton = () => {
   const errorApi = useApi(errorApiRef);
   const identityApi = useApi(identityApiRef);
+  const { t } = useTranslation();
   const handleLogout = () => {
     identityApi.signOut().catch((error) => errorApi.post(error));
   };
@@ -21,7 +23,7 @@ const LogoutButton = () => {
           width: "100%",
           color: "inherit"
         },
-        children: /* @__PURE__ */ jsx(MenuItemLinkContent, { icon: "logout", label: "Sign out" })
+        children: /* @__PURE__ */ jsx(MenuItemLinkContent, { icon: "logout", label: t("profile.signOut") })
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"LogoutButton.esm.js","sources":["../../../src/components/LogoutButton/LogoutButton.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  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\nimport MenuItem from '@mui/material/MenuItem';\nimport Divider from '@mui/material/Divider';\n\nimport { MenuItemLinkContent } from '../MenuItemLink/MenuItemLinkContent';\n\nexport const LogoutButton = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n\n  const handleLogout = () => {\n    identityApi.signOut().catch(error => errorApi.post(error));\n  };\n\n  return (\n    <>\n      <Divider />\n      <MenuItem\n        onClick={handleLogout}\n        sx={{\n          cursor: 'pointer',\n          width: '100%',\n          color: 'inherit',\n        }}\n      >\n        <MenuItemLinkContent icon=\"logout\" label=\"Sign out\" />\n      </MenuItem>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AAEzC,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,WAAS,QAAS,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,GAC3D;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,CAAA;AAAA,oBACT,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,YAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,MAAQ,EAAA,SAAA;AAAA,UACR,KAAO,EAAA,MAAA;AAAA,UACP,KAAO,EAAA;AAAA,SACT;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA,EAAoB,IAAK,EAAA,QAAA,EAAS,OAAM,UAAW,EAAA;AAAA;AAAA;AACtD,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LogoutButton.esm.js","sources":["../../../src/components/LogoutButton/LogoutButton.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  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\nimport MenuItem from '@mui/material/MenuItem';\nimport Divider from '@mui/material/Divider';\n\nimport { MenuItemLinkContent } from '../MenuItemLink/MenuItemLinkContent';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const LogoutButton = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const { t } = useTranslation();\n\n  const handleLogout = () => {\n    identityApi.signOut().catch(error => errorApi.post(error));\n  };\n\n  return (\n    <>\n      <Divider />\n      <MenuItem\n        onClick={handleLogout}\n        sx={{\n          cursor: 'pointer',\n          width: '100%',\n          color: 'inherit',\n        }}\n      >\n        <MenuItemLinkContent icon=\"logout\" label={t('profile.signOut')} />\n      </MenuItem>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,WAAS,QAAS,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,GAC3D;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,CAAA;AAAA,oBACT,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,YAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,MAAQ,EAAA,SAAA;AAAA,UACR,KAAO,EAAA,MAAA;AAAA,UACP,KAAO,EAAA;AAAA,SACT;AAAA,QAEA,8BAAC,mBAAoB,EAAA,EAAA,IAAA,EAAK,UAAS,KAAO,EAAA,CAAA,CAAE,iBAAiB,CAAG,EAAA;AAAA;AAAA;AAClE,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/MenuItemLink/MenuItemLink.esm.js

@@ -1,5 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { MenuItemLinkContent } from './MenuItemLinkContent.esm.js';
 
 const MenuItemLink = ({
@@ -9,12 +10,14 @@ const MenuItemLink = ({
   icon,
   tooltip
 }) => {
-  const isExternalLink = to.startsWith("http://") || to.startsWith("https://");
+  const { t } = useTranslation();
+  const isExternalLink = to?.startsWith("http://") || to?.startsWith("https://");
+  const translatedTitle = title && title.includes(".") ? t(title, {}) || title : title;
   const headerLinkContent = () => /* @__PURE__ */ jsx(
     MenuItemLinkContent,
     {
       icon,
-      label: title,
+      label: translatedTitle,
       subLabel: subTitle,
       isExternalLink
     }

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItemLink.esm.js","sources":["../../../src/components/MenuItemLink/MenuItemLink.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 Tooltip from '@mui/material/Tooltip';\nimport { MenuItemLinkContent } from './MenuItemLinkContent';\n\n/**\n * Header Icon Button properties\n * @public\n */\nexport interface MenuItemLinkProps {\n  to: string;\n  title?: string;\n  subTitle?: string;\n  icon?: string;\n  tooltip?: string;\n}\n\nexport const MenuItemLink = ({\n  to,\n  title,\n  subTitle,\n  icon,\n  tooltip,\n}: MenuItemLinkProps) => {\n  const isExternalLink = to.startsWith('http://') || to.startsWith('https://');\n\n  const headerLinkContent = () => (\n    <MenuItemLinkContent\n      icon={icon}\n      label={title}\n      subLabel={subTitle}\n      isExternalLink={isExternalLink}\n    />\n  );\n\n  return (\n    <>\n      {tooltip && (\n        <Tooltip title={tooltip}>\n          <div>{headerLinkContent()}</div>\n        </Tooltip>\n      )}\n      {!tooltip && headerLinkContent()}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AA+BO,MAAM,eAAe,CAAC;AAAA,EAC3B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,iBAAiB,EAAG,CAAA,UAAA,CAAW,SAAS,CAAK,IAAA,EAAA,CAAG,WAAW,UAAU,CAAA;AAE3E,EAAA,MAAM,oBAAoB,sBACxB,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA,QAAA;AAAA,MACV;AAAA;AAAA,GACF;AAGF,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IACC,OAAA,oBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,EACd,8BAAC,KAAK,EAAA,EAAA,QAAA,EAAA,iBAAA,IAAoB,CAC5B,EAAA,CAAA;AAAA,IAED,CAAC,WAAW,iBAAkB;AAAA,GACjC,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MenuItemLink.esm.js","sources":["../../../src/components/MenuItemLink/MenuItemLink.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 Tooltip from '@mui/material/Tooltip';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { MenuItemLinkContent } from './MenuItemLinkContent';\n\n/**\n * Header Icon Button properties\n * @public\n */\nexport interface MenuItemLinkProps {\n  to: string;\n  title?: string;\n  subTitle?: string;\n  icon?: string;\n  tooltip?: string;\n}\n\nexport const MenuItemLink = ({\n  to,\n  title,\n  subTitle,\n  icon,\n  tooltip,\n}: MenuItemLinkProps) => {\n  const { t } = useTranslation();\n  const isExternalLink =\n    to?.startsWith('http://') || to?.startsWith('https://');\n\n  // Check if title looks like a translation key (contains dots)\n  const translatedTitle =\n    title && title.includes('.')\n      ? t(title as any, {}) || title // Fallback to original title if translation fails\n      : title;\n\n  const headerLinkContent = () => (\n    <MenuItemLinkContent\n      icon={icon}\n      label={translatedTitle}\n      subLabel={subTitle}\n      isExternalLink={isExternalLink}\n    />\n  );\n\n  return (\n    <>\n      {tooltip && (\n        <Tooltip title={tooltip}>\n          <div>{headerLinkContent()}</div>\n        </Tooltip>\n      )}\n      {!tooltip && headerLinkContent()}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgCO,MAAM,eAAe,CAAC;AAAA,EAC3B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,iBACJ,EAAI,EAAA,UAAA,CAAW,SAAS,CAAK,IAAA,EAAA,EAAI,WAAW,UAAU,CAAA;AAGxD,EAAM,MAAA,eAAA,GACJ,KAAS,IAAA,KAAA,CAAM,QAAS,CAAA,GAAG,CACvB,GAAA,CAAA,CAAE,KAAc,EAAA,EAAE,CAAA,IAAK,KACvB,GAAA,KAAA;AAEN,EAAA,MAAM,oBAAoB,sBACxB,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,KAAO,EAAA,eAAA;AAAA,MACP,QAAU,EAAA,QAAA;AAAA,MACV;AAAA;AAAA,GACF;AAGF,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IACC,OAAA,oBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,EACd,8BAAC,KAAK,EAAA,EAAA,QAAA,EAAA,iBAAA,IAAoB,CAC5B,EAAA,CAAA;AAAA,IAED,CAAC,WAAW,iBAAkB;AAAA,GACjC,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/NotificationBanner.esm.js

@@ -3,8 +3,10 @@ import { useState, useMemo } from 'react';
 import { MarkdownContent } from '@backstage/core-components';
 import Alert from '@mui/material/Alert';
 import { HeaderIcon } from './HeaderIcon/HeaderIcon.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const NotificationBanner = (props) => {
+  const { t } = useTranslation();
   const [dismissed, setDismissed] = useState(() => {
     if (props.dismiss === "localstorage") {
       try {
@@ -39,10 +41,12 @@ const NotificationBanner = (props) => {
       };
     }
     console.warn(
-      `Unsupported dismiss option "${props.dismiss}", currently supported "none", "session" or "localstorage"!`
+      t("notifications.unsupportedDismissOption", {
+        option: props.dismiss
+      })
     );
     return void 0;
-  }, [props.id, props.title, props.dismiss]);
+  }, [props.id, props.title, props.dismiss, t]);
   if (dismissed || !props.title) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationBanner.esm.js","sources":["../../src/components/NotificationBanner.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 { useState, useMemo } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport Alert from '@mui/material/Alert';\n\nimport { HeaderIcon } from './HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';\n\n/**\n * @public\n */\nexport interface NotificationBannerProps {\n  id?: string;\n  title: string;\n  markdown?: boolean;\n  icon?: string;\n\n  textColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  layout?: CSSProperties;\n\n  dismiss?: NotificationBannerDismiss;\n}\n\nexport const NotificationBanner = (props: NotificationBannerProps) => {\n  const [dismissed, setDismissed] = useState<boolean>(() => {\n    if (props.dismiss === 'localstorage') {\n      try {\n        const dismissedString =\n          localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n        const dismissedObject = JSON.parse(dismissedString);\n        return dismissedObject[props.id ?? props.title] === 'dismissed';\n      } catch (error) {\n        // nothing\n        return false;\n      }\n    } else {\n      return false;\n    }\n  });\n\n  const onClose = useMemo<(() => void) | undefined>(() => {\n    if (!props.dismiss || props.dismiss === 'none') {\n      return undefined;\n    } else if (props.dismiss === 'session') {\n      return () => setDismissed(true);\n    } else if (props.dismiss === 'localstorage') {\n      return () => {\n        try {\n          const dismissedString =\n            localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n          const dismissedObject = JSON.parse(dismissedString);\n          dismissedObject[props.id ?? props.title] = 'dismissed';\n          localStorage.setItem(\n            'global-header/NotificationBanner',\n            JSON.stringify(dismissedObject),\n          );\n        } catch (error) {\n          // nothing\n        }\n        setDismissed(true);\n      };\n    }\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Unsupported dismiss option \"${props.dismiss}\", currently supported \"none\", \"session\" or \"localstorage\"!`,\n    );\n    return undefined;\n  }, [props.id, props.title, props.dismiss]);\n\n  if (dismissed || !props.title) {\n    return null;\n  }\n\n  return (\n    <Alert\n      color=\"warning\"\n      icon={props.icon ? <HeaderIcon icon={props.icon} /> : false}\n      onClose={onClose}\n      sx={{\n        color: props.textColor,\n        backgroundColor: props.backgroundColor,\n        borderColor: props.borderColor,\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderRadius: 0,\n        justifyContent: 'center',\n        textAlign: 'center',\n        ...props.layout,\n      }}\n    >\n      {props.markdown ? (\n        <MarkdownContent content={props.title} dialect=\"gfm\" />\n      ) : (\n        props.title\n      )}\n    </Alert>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+Ca,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,MAAM;AACxD,IAAI,IAAA,KAAA,CAAM,YAAY,cAAgB,EAAA;AACpC,MAAI,IAAA;AACF,QAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,QAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,QAAA,OAAO,eAAgB,CAAA,KAAA,CAAM,EAAM,IAAA,KAAA,CAAM,KAAK,CAAM,KAAA,WAAA;AAAA,eAC7C,KAAO,EAAA;AAEd,QAAO,OAAA,KAAA;AAAA;AACT,KACK,MAAA;AACL,MAAO,OAAA,KAAA;AAAA;AACT,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,QAAkC,MAAM;AACtD,IAAA,IAAI,CAAC,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC9C,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,SAAW,EAAA;AACtC,MAAO,OAAA,MAAM,aAAa,IAAI,CAAA;AAAA,KAChC,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,cAAgB,EAAA;AAC3C,MAAA,OAAO,MAAM;AACX,QAAI,IAAA;AACF,UAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,UAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,UAAA,eAAA,CAAgB,KAAM,CAAA,EAAA,IAAM,KAAM,CAAA,KAAK,CAAI,GAAA,WAAA;AAC3C,UAAa,YAAA,CAAA,OAAA;AAAA,YACX,kCAAA;AAAA,YACA,IAAA,CAAK,UAAU,eAAe;AAAA,WAChC;AAAA,iBACO,KAAO,EAAA;AAAA;AAGhB,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,OACnB;AAAA;AAGF,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,4BAAA,EAA+B,MAAM,OAAO,CAAA,2DAAA;AAAA,KAC9C;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAM,CAAA,EAAA,EAAI,MAAM,KAAO,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAEzC,EAAI,IAAA,SAAA,IAAa,CAAC,KAAA,CAAM,KAAO,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,IAAA,EAAM,MAAM,IAAO,mBAAA,GAAA,CAAC,cAAW,IAAM,EAAA,KAAA,CAAM,MAAM,CAAK,GAAA,KAAA;AAAA,MACtD,OAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,OAAO,KAAM,CAAA,SAAA;AAAA,QACb,iBAAiB,KAAM,CAAA,eAAA;AAAA,QACvB,aAAa,KAAM,CAAA,WAAA;AAAA,QACnB,WAAa,EAAA,OAAA;AAAA,QACb,WAAa,EAAA,CAAA;AAAA,QACb,YAAc,EAAA,CAAA;AAAA,QACd,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA,QAAA;AAAA,QACX,GAAG,KAAM,CAAA;AAAA,OACX;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,QACL,mBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,MAAM,KAAO,EAAA,OAAA,EAAQ,KAAM,EAAA,CAAA,GAErD,KAAM,CAAA;AAAA;AAAA,GAEV;AAEJ;;;;"}
+{"version":3,"file":"NotificationBanner.esm.js","sources":["../../src/components/NotificationBanner.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 { useState, useMemo } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport Alert from '@mui/material/Alert';\n\nimport { HeaderIcon } from './HeaderIcon/HeaderIcon';\nimport { useTranslation } from '../hooks/useTranslation';\n\n/**\n * @public\n */\nexport type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';\n\n/**\n * @public\n */\nexport interface NotificationBannerProps {\n  id?: string;\n  title: string;\n  markdown?: boolean;\n  icon?: string;\n\n  textColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  layout?: CSSProperties;\n\n  dismiss?: NotificationBannerDismiss;\n}\n\nexport const NotificationBanner = (props: NotificationBannerProps) => {\n  const { t } = useTranslation();\n  const [dismissed, setDismissed] = useState<boolean>(() => {\n    if (props.dismiss === 'localstorage') {\n      try {\n        const dismissedString =\n          localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n        const dismissedObject = JSON.parse(dismissedString);\n        return dismissedObject[props.id ?? props.title] === 'dismissed';\n      } catch (error) {\n        // nothing\n        return false;\n      }\n    } else {\n      return false;\n    }\n  });\n\n  const onClose = useMemo<(() => void) | undefined>(() => {\n    if (!props.dismiss || props.dismiss === 'none') {\n      return undefined;\n    } else if (props.dismiss === 'session') {\n      return () => setDismissed(true);\n    } else if (props.dismiss === 'localstorage') {\n      return () => {\n        try {\n          const dismissedString =\n            localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n          const dismissedObject = JSON.parse(dismissedString);\n          dismissedObject[props.id ?? props.title] = 'dismissed';\n          localStorage.setItem(\n            'global-header/NotificationBanner',\n            JSON.stringify(dismissedObject),\n          );\n        } catch (error) {\n          // nothing\n        }\n        setDismissed(true);\n      };\n    }\n    // eslint-disable-next-line no-console\n    console.warn(\n      t('notifications.unsupportedDismissOption' as any, {\n        option: props.dismiss,\n      }),\n    );\n    return undefined;\n  }, [props.id, props.title, props.dismiss, t]);\n\n  if (dismissed || !props.title) {\n    return null;\n  }\n\n  return (\n    <Alert\n      color=\"warning\"\n      icon={props.icon ? <HeaderIcon icon={props.icon} /> : false}\n      onClose={onClose}\n      sx={{\n        color: props.textColor,\n        backgroundColor: props.backgroundColor,\n        borderColor: props.borderColor,\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderRadius: 0,\n        justifyContent: 'center',\n        textAlign: 'center',\n        ...props.layout,\n      }}\n    >\n      {props.markdown ? (\n        <MarkdownContent content={props.title} dialect=\"gfm\" />\n      ) : (\n        props.title\n      )}\n    </Alert>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/NotificationButton/NotificationButton.esm.js

@@ -6,10 +6,11 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import NotificationIcon from '@mui/icons-material/NotificationsOutlined';
 import { useNotificationCount } from '../../hooks/useNotificationCount.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const Link = (props) => /* @__PURE__ */ jsx(Link$1, { ...props, color: "inherit", externalLinkIcon: false });
 const NotificationButton = ({
-  title = "Notifications",
+  title,
   tooltip,
   color = "inherit",
   size = "small",
@@ -17,18 +18,20 @@ const NotificationButton = ({
   to = "/notifications",
   layout
 }) => {
+  const { t } = useTranslation();
   const { available, unreadCount } = useNotificationCount();
+  const displayTitle = title || t("notifications.title");
   if (!available) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Box, { sx: layout, children: /* @__PURE__ */ jsx(Tooltip, { title: tooltip ?? title, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { sx: layout, children: /* @__PURE__ */ jsx(Tooltip, { title: tooltip ?? displayTitle, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     IconButton,
     {
       component: Link,
       color,
       size,
       to,
-      "aria-label": title,
+      "aria-label": displayTitle,
       children: unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { badgeContent: unreadCount, color: badgeColor, max: 999, children: /* @__PURE__ */ jsx(NotificationIcon, { fontSize: size }) }) : /* @__PURE__ */ jsx(NotificationIcon, { fontSize: size })
     }
   ) }) }) });

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationButton.esm.js","sources":["../../../src/components/NotificationButton/NotificationButton.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 { CSSProperties } from 'react';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport NotificationIcon from '@mui/icons-material/NotificationsOutlined';\n\nimport { useNotificationCount } from '../../hooks/useNotificationCount';\n\n/**\n * @public\n */\nexport interface NotificationButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  badgeColor?:\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  to?: string;\n  layout?: CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const NotificationButton = ({\n  title = 'Notifications',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  badgeColor = 'error',\n  to = '/notifications',\n  layout,\n}: NotificationButtonProps) => {\n  const { available, unreadCount } = useNotificationCount();\n\n  if (!available) {\n    return null;\n  }\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? title}>\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={to}\n            aria-label={title}\n          >\n            {unreadCount > 0 ? (\n              <Badge badgeContent={unreadCount} color={badgeColor} max={999}>\n                <NotificationIcon fontSize={size} />\n              </Badge>\n            ) : (\n              <NotificationIcon fontSize={size} />\n            )}\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;;AAwDA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,GAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,UAAa,GAAA,OAAA;AAAA,EACb,EAAK,GAAA,gBAAA;AAAA,EACL;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,EAAE,SAAA,EAAW,WAAY,EAAA,GAAI,oBAAqB,EAAA;AAExD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,KACzB,EAAA,QAAA,kBAAA,GAAA,CAAC,KACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAY,EAAA,KAAA;AAAA,MAEX,wBAAc,CACb,mBAAA,GAAA,CAAC,SAAM,YAAc,EAAA,WAAA,EAAa,OAAO,UAAY,EAAA,GAAA,EAAK,KACxD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA,CAAA,EACpC,oBAEC,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA;AAAA;AAAA,GAEtC,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NotificationButton.esm.js","sources":["../../../src/components/NotificationButton/NotificationButton.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 { CSSProperties } from 'react';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport NotificationIcon from '@mui/icons-material/NotificationsOutlined';\n\nimport { useNotificationCount } from '../../hooks/useNotificationCount';\nimport { useTranslation } from '../../hooks/useTranslation';\n\n/**\n * @public\n */\nexport interface NotificationButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  badgeColor?:\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  to?: string;\n  layout?: CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const NotificationButton = ({\n  title,\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  badgeColor = 'error',\n  to = '/notifications',\n  layout,\n}: NotificationButtonProps) => {\n  const { t } = useTranslation();\n  const { available, unreadCount } = useNotificationCount();\n\n  const displayTitle = title || t('notifications.title');\n\n  if (!available) {\n    return null;\n  }\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? displayTitle}>\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={to}\n            aria-label={displayTitle}\n          >\n            {unreadCount > 0 ? (\n              <Badge badgeContent={unreadCount} color={badgeColor} max={999}>\n                <NotificationIcon fontSize={size} />\n              </Badge>\n            ) : (\n              <NotificationIcon fontSize={size} />\n            )}\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;;;AAyDA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,GAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,UAAa,GAAA,OAAA;AAAA,EACb,EAAK,GAAA,gBAAA;AAAA,EACL;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,EAAE,SAAA,EAAW,WAAY,EAAA,GAAI,oBAAqB,EAAA;AAExD,EAAM,MAAA,YAAA,GAAe,KAAS,IAAA,CAAA,CAAE,qBAAqB,CAAA;AAErD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,YACzB,EAAA,QAAA,kBAAA,GAAA,CAAC,KACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAY,EAAA,YAAA;AAAA,MAEX,wBAAc,CACb,mBAAA,GAAA,CAAC,SAAM,YAAc,EAAA,WAAA,EAAa,OAAO,UAAY,EAAA,GAAA,EAAK,KACxD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA,CAAA,EACpC,oBAEC,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA;AAAA;AAAA,GAEtC,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchBar.esm.js

@@ -8,6 +8,7 @@ import { SearchInput } from './SearchInput.esm.js';
 import { SearchOption } from './SearchOption.esm.js';
 import { useTheme } from '@mui/material/styles';
 import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const SearchBar = (props) => {
   const { query, setSearchTerm } = props;
@@ -16,6 +17,7 @@ const SearchBar = (props) => {
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const highlightedIndexRef = useRef(highlightedIndex);
   const { setTerm } = useSearch();
+  const { t } = useTranslation();
   const onInputChange = useDebouncedCallback((_, inputValue) => {
     setSearchTerm(inputValue);
     setTerm(inputValue);
@@ -27,7 +29,7 @@ const SearchBar = (props) => {
     const results = query?.term ? value?.results ?? [] : [];
     let options = [];
     if (query?.term && results.length === 0) {
-      options = ["No results found"];
+      options = [t("search.noResults")];
     }
     if (results.length > 0) {
       options = [
@@ -83,7 +85,7 @@ const SearchBar = (props) => {
           {
             params,
             error: !!error,
-            helperText: error ? "Error fetching results" : ""
+            helperText: error ? t("search.errorFetching") : ""
           }
         ),
         renderOption: (renderProps, option, { index }) => /* @__PURE__ */ jsx(

package/dist/components/SearchComponent/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.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 { useEffect, useRef, useState } from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n  useSearch,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\nimport { useTheme } from '@mui/material/styles';\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n  const theme = useTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const highlightedIndexRef = useRef(highlightedIndex);\n  const { setTerm } = useSearch();\n\n  const onInputChange = useDebouncedCallback((_, inputValue) => {\n    setSearchTerm(inputValue);\n    setTerm(inputValue);\n  }, 300);\n\n  useEffect(() => {\n    highlightedIndexRef.current = highlightedIndex;\n  }, [highlightedIndex]);\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (query?.term && results.length === 0) {\n          options = ['No results found'];\n        }\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            value={query?.term ?? ''}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={onInputChange}\n            onHighlightChange={(_, option) =>\n              setHighlightedIndex(options.indexOf(option ?? ''))\n            }\n            componentsProps={{\n              paper: {\n                sx: {\n                  '&:empty': { visibility: 'hidden' }, // Removes underline-like effect\n                  borderRadius: '4px',\n                  outline: 'unset',\n                  boxShadow:\n                    theme.palette.mode === 'dark'\n                      ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)`\n                      : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',\n                },\n              },\n            }}\n            sx={{\n              width: '100%',\n              '& [class*=\"MuiAutocomplete-clearIndicator\"]': {\n                visibility: query?.term ? 'visible' : 'hidden',\n              },\n            }}\n            filterOptions={x => x}\n            onKeyDown={event => {\n              const currentHighlight = highlightedIndexRef.current;\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (currentHighlight === -1 && query?.term) {\n                  navigate(searchLink);\n                } else if (currentHighlight !== -1) {\n                  navigate(\n                    results[highlightedIndex]?.document?.location ?? searchLink,\n                  );\n                }\n                setHighlightedIndex(-1);\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              sx: { maxHeight: '60vh' },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.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 { useEffect, useRef, useState } from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n  useSearch,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\nimport { useTheme } from '@mui/material/styles';\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback';\nimport { useTranslation } from '../../hooks/useTranslation';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n  const theme = useTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const highlightedIndexRef = useRef(highlightedIndex);\n  const { setTerm } = useSearch();\n  const { t } = useTranslation();\n\n  const onInputChange = useDebouncedCallback((_, inputValue) => {\n    setSearchTerm(inputValue);\n    setTerm(inputValue);\n  }, 300);\n\n  useEffect(() => {\n    highlightedIndexRef.current = highlightedIndex;\n  }, [highlightedIndex]);\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (query?.term && results.length === 0) {\n          options = [t('search.noResults')];\n        }\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            value={query?.term ?? ''}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={onInputChange}\n            onHighlightChange={(_, option) =>\n              setHighlightedIndex(options.indexOf(option ?? ''))\n            }\n            componentsProps={{\n              paper: {\n                sx: {\n                  '&:empty': { visibility: 'hidden' }, // Removes underline-like effect\n                  borderRadius: '4px',\n                  outline: 'unset',\n                  boxShadow:\n                    theme.palette.mode === 'dark'\n                      ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)`\n                      : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',\n                },\n              },\n            }}\n            sx={{\n              width: '100%',\n              '& [class*=\"MuiAutocomplete-clearIndicator\"]': {\n                visibility: query?.term ? 'visible' : 'hidden',\n              },\n            }}\n            filterOptions={x => x}\n            onKeyDown={event => {\n              const currentHighlight = highlightedIndexRef.current;\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (currentHighlight === -1 && query?.term) {\n                  navigate(searchLink);\n                } else if (currentHighlight !== -1) {\n                  navigate(\n                    results[highlightedIndex]?.document?.location ?? searchLink,\n                  );\n                }\n                setHighlightedIndex(-1);\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? t('search.errorFetching') : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              sx: { maxHeight: '60vh' },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SearchComponent/SearchInput.esm.js

@@ -2,31 +2,35 @@ import { jsx } from 'react/jsx-runtime';
 import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const SearchInput = ({
   params,
   error,
   helperText
-}) => /* @__PURE__ */ jsx(
-  TextField,
-  {
-    ...params,
-    placeholder: "Search...",
-    variant: "standard",
-    error,
-    helperText,
-    InputProps: {
-      ...params.InputProps,
-      disableUnderline: true,
-      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { style: { color: "inherit" } }) })
-    },
-    sx: {
-      input: { color: "inherit" },
-      button: { color: "inherit" },
-      "& fieldset": { border: "none" }
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...params,
+      placeholder: t("search.placeholder"),
+      variant: "standard",
+      error,
+      helperText,
+      InputProps: {
+        ...params.InputProps,
+        disableUnderline: true,
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { style: { color: "inherit" } }) })
+      },
+      sx: {
+        input: { color: "inherit" },
+        button: { color: "inherit" },
+        "& fieldset": { border: "none" }
+      }
     }
-  }
-);
+  );
+};
 
 export { SearchInput };
 //# sourceMappingURL=SearchInput.esm.js.map

package/dist/components/SearchComponent/SearchInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.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 TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => (\n  <TextField\n    {...params}\n    placeholder=\"Search...\"\n    variant=\"standard\"\n    error={error}\n    helperText={helperText}\n    InputProps={{\n      ...params.InputProps,\n      disableUnderline: true,\n      startAdornment: (\n        <InputAdornment position=\"start\">\n          <SearchIcon style={{ color: 'inherit' }} />\n        </InputAdornment>\n      ),\n    }}\n    sx={{\n      input: { color: 'inherit' },\n      button: { color: 'inherit' },\n      '& fieldset': { border: 'none' },\n    }}\n  />\n);\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACE,GAAG,MAAA;AAAA,IACJ,WAAY,EAAA,WAAA;AAAA,IACZ,OAAQ,EAAA,UAAA;AAAA,IACR,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,MAAO,CAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,MAClB,cACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,SAAU,EAAA,EAAG,CAC3C,EAAA;AAAA,KAEJ;AAAA,IACA,EAAI,EAAA;AAAA,MACF,KAAA,EAAO,EAAE,KAAA,EAAO,SAAU,EAAA;AAAA,MAC1B,MAAA,EAAQ,EAAE,KAAA,EAAO,SAAU,EAAA;AAAA,MAC3B,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AACF;;;;"}
+{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.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 TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { useTranslation } from '../../hooks/useTranslation';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <TextField\n      {...params}\n      placeholder={t('search.placeholder')}\n      variant=\"standard\"\n      error={error}\n      helperText={helperText}\n      InputProps={{\n        ...params.InputProps,\n        disableUnderline: true,\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon style={{ color: 'inherit' }} />\n          </InputAdornment>\n        ),\n      }}\n      sx={{\n        input: { color: 'inherit' },\n        button: { color: 'inherit' },\n        '& fieldset': { border: 'none' },\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAwB,KAAA;AACtB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,WAAA,EAAa,EAAE,oBAAoB,CAAA;AAAA,MACnC,OAAQ,EAAA,UAAA;AAAA,MACR,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAY,EAAA;AAAA,QACV,GAAG,MAAO,CAAA,UAAA;AAAA,QACV,gBAAkB,EAAA,IAAA;AAAA,QAClB,cACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,SAAU,EAAA,EAAG,CAC3C,EAAA;AAAA,OAEJ;AAAA,MACA,EAAI,EAAA;AAAA,QACF,KAAA,EAAO,EAAE,KAAA,EAAO,SAAU,EAAA;AAAA,QAC1B,MAAA,EAAQ,EAAE,KAAA,EAAO,SAAU,EAAA;AAAA,QAC3B,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AAAA,GACF;AAEJ;;;;"}

package/dist/components/SupportButton/SupportButton.esm.js

@@ -3,9 +3,10 @@ import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
 import { Link } from '@backstage/core-components';
 import MenuItem from '@mui/material/MenuItem';
 import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const SupportButton = ({
-  title = "Support",
+  title,
   to,
   icon = "support",
   tooltip,
@@ -15,6 +16,8 @@ const SupportButton = ({
 }) => {
   const apiHolder = useApiHolder();
   const config = apiHolder.get(configApiRef);
+  const { t } = useTranslation();
+  const displayTitle = title || t("help.supportTitle");
   const supportUrl = to ?? config?.getOptionalString("app.support.url");
   if (!supportUrl) {
     return null;
@@ -31,7 +34,7 @@ const SupportButton = ({
         MenuItemLink,
         {
           to: supportUrl,
-          title,
+          title: displayTitle,
           icon,
           tooltip
         }

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

@@ -1 +1 @@
-{"version":3,"file":"SupportButton.esm.js","sources":["../../../src/components/SupportButton/SupportButton.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 { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport MenuItem from '@mui/material/MenuItem';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\nimport { CSSProperties } from 'react';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\n  icon?: string;\n  title?: string;\n  to?: string;\n  tooltip?: string;\n  style?: CSSProperties;\n  onClick?: () => void;\n}\n/**\n * @public\n */\nexport const SupportButton = ({\n  title = 'Support',\n  to,\n  icon = 'support',\n  tooltip,\n  style,\n  onClick = () => {},\n}: SupportButtonProps) => {\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const supportUrl = to ?? config?.getOptionalString('app.support.url');\n\n  if (!supportUrl) {\n    return null;\n  }\n\n  return (\n    <MenuItem\n      to={supportUrl}\n      component={Link}\n      sx={{ width: '100%', color: 'inherit', ...style }}\n      onClick={onClick}\n      data-testid=\"support-button\"\n    >\n      <MenuItemLink\n        to={supportUrl}\n        title={title}\n        icon={icon}\n        tooltip={tooltip}\n      />\n    </MenuItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,EAAA;AAAA,EACA,IAAO,GAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAU,MAAM;AAAA;AAClB,CAA0B,KAAA;AACxB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA,EAAA,IAAM,MAAQ,EAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAEpE,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,UAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,MACX,IAAI,EAAE,KAAA,EAAO,QAAQ,KAAO,EAAA,SAAA,EAAW,GAAG,KAAM,EAAA;AAAA,MAChD,OAAA;AAAA,MACA,aAAY,EAAA,gBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,UAAA;AAAA,UACJ,KAAA;AAAA,UACA,IAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SupportButton.esm.js","sources":["../../../src/components/SupportButton/SupportButton.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 { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport MenuItem from '@mui/material/MenuItem';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\nimport { CSSProperties } from 'react';\nimport { useTranslation } from '../../hooks/useTranslation';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\n  icon?: string;\n  title?: string;\n  to?: string;\n  tooltip?: string;\n  style?: CSSProperties;\n  onClick?: () => void;\n}\n/**\n * @public\n */\nexport const SupportButton = ({\n  title,\n  to,\n  icon = 'support',\n  tooltip,\n  style,\n  onClick = () => {},\n}: SupportButtonProps) => {\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const { t } = useTranslation();\n\n  const displayTitle = title || t('help.supportTitle');\n  const supportUrl = to ?? config?.getOptionalString('app.support.url');\n\n  if (!supportUrl) {\n    return null;\n  }\n\n  return (\n    <MenuItem\n      to={supportUrl}\n      component={Link}\n      sx={{ width: '100%', color: 'inherit', ...style }}\n      onClick={onClick}\n      data-testid=\"support-button\"\n    >\n      <MenuItemLink\n        to={supportUrl}\n        title={displayTitle}\n        icon={icon}\n        tooltip={tooltip}\n      />\n    </MenuItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAA;AAAA,EACA,EAAA;AAAA,EACA,IAAO,GAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAU,MAAM;AAAA;AAClB,CAA0B,KAAA;AACxB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAM,MAAA,YAAA,GAAe,KAAS,IAAA,CAAA,CAAE,mBAAmB,CAAA;AACnD,EAAA,MAAM,UAAa,GAAA,EAAA,IAAM,MAAQ,EAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAEpE,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,UAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,MACX,IAAI,EAAE,KAAA,EAAO,QAAQ,KAAO,EAAA,SAAA,EAAW,GAAG,KAAM,EAAA;AAAA,MAChD,OAAA;AAAA,MACA,aAAY,EAAA,gBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,UAAA;AAAA,UACJ,KAAO,EAAA,YAAA;AAAA,UACP,IAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/defaultMountPoints/defaultMountPoints.esm.js

@@ -118,7 +118,7 @@ const defaultProfileDropdownMountPoints = [
     config: {
       priority: 200,
       props: {
-        title: "Settings",
+        title: "profile.settings",
         icon: "manageAccounts",
         link: "/settings"
       }
@@ -129,7 +129,7 @@ const defaultProfileDropdownMountPoints = [
     config: {
       priority: 150,
       props: {
-        title: "My profile",
+        title: "profile.myProfile",
         icon: "account"
       }
     }
@@ -147,7 +147,7 @@ const defaultHelpDropdownMountPoints = [
     config: {
       priority: 100,
       props: {
-        title: "Quick start",
+        title: "help.quickStart",
         icon: "quickstart",
         link: "https://docs.redhat.com/en/documentation/red_hat_developer_hub/latest/"
       }
@@ -164,10 +164,10 @@ const defaultApplicationLauncherDropdownMountPoints = [
   {
     Component: MenuItemLink,
     config: {
-      section: "Documentation",
+      section: "applicationLauncher.sections.documentation",
       priority: 150,
       props: {
-        title: "Developer Hub",
+        title: "applicationLauncher.developerHub",
         icon: "developerHub",
         link: "https://docs.redhat.com/en/documentation/red_hat_developer_hub"
       }
@@ -176,10 +176,10 @@ const defaultApplicationLauncherDropdownMountPoints = [
   {
     Component: MenuItemLink,
     config: {
-      section: "Developer Tools",
+      section: "applicationLauncher.sections.developerTools",
       priority: 130,
       props: {
-        title: "RHDH Local",
+        title: "applicationLauncher.rhdhLocal",
         icon: "developerHub",
         link: "https://github.com/redhat-developer/rhdh-local"
       }