@red-hat-developer-hub/backstage-plugin-global-header 1.11.2 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.13.0
+
+### Minor Changes
+
+- ba5e13c: Add dynamic profile link support to ProfileDropdown based on current user identity.
+
+## 1.12.0
+
+### Minor Changes
+
+- 667e8c2: **BREAKING**: The `CompanyLogo` prop `logoWidth` has been renamed to `width`.
+
+  Allow configuring `width` and `height` for `CompanyLogo` via configuration. When `width` is not specified, `CompanyLogo` will now fall back to using the value from `app.branding.fullLogoWidth`.
+
+- 5000863: **BREAKING**: `SupportButton` is now a `MenuItem` and `style` config prop can be used to update color, size and other required css properties.
+
+  Add `HelpDropdown` in global header plugin.
+
+- 5638ede: Add QuickstartButton to global header plugin
+
 ## 1.11.2
 
 ### Patch Changes

package/app-config.dynamic.yaml

@@ -67,10 +67,20 @@ dynamicPlugins:
               link: https://github.com/redhat-developer/rhdh-local
 
         - mountPoint: global.header/component
-          importName: SupportButton
+          importName: HelpDropdown
           config:
             priority: 80
 
+        - mountPoint: global.header/help
+          importName: QuickstartButton
+          config:
+            priority: 100
+
+        - mountPoint: global.header/help
+          importName: SupportButton
+          config:
+            priority: 10
+
         - mountPoint: global.header/component
           importName: NotificationButton
           config:

package/config.d.ts

@@ -38,6 +38,13 @@ declare module '@backstage/config' {
                */
               dark: string;
             };
+        /**
+         * Fallback width for the full logo in the global header.
+         * Accepts any valid CSS length (e.g. `'200px'`, `'12rem'`).
+         * Used only when a `width` prop isn’t supplied through the extension configuration.
+         * @visibility frontend
+         */
+        fullLogoWidth?: string | number;
       };
     };
   }

package/dist/components/CompanyLogo/CompanyLogo.esm.js

@@ -8,7 +8,8 @@ import { useAppBarBackgroundScheme } from '../../hooks/useAppBarBackgroundScheme
 const LogoRender = ({
   base64Logo,
   defaultLogo,
-  width = 150
+  width = 150,
+  height = 40
 }) => {
   return base64Logo ? /* @__PURE__ */ jsx(
     "img",
@@ -19,8 +20,7 @@ const LogoRender = ({
       style: {
         objectFit: "contain",
         objectPosition: "left",
-        maxHeight: "40px"
-        // "kind of" aligns with PF's MastheadLogo height
+        maxHeight: height
       },
       width
     }
@@ -36,10 +36,15 @@ const useFullLogo = (logo) => {
 };
 const CompanyLogo = ({
   logo,
-  logoWidth,
+  width,
+  height,
   to = "/"
 }) => {
   const logoURL = useFullLogo(logo);
+  const configApi = useApi(configApiRef);
+  const fullLogoWidth = configApi.getOptional(
+    "app.branding.fullLogoWidth"
+  );
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -68,7 +73,8 @@ const CompanyLogo = ({
             {
               base64Logo: logoURL,
               defaultLogo: /* @__PURE__ */ jsx(DefaultLogo, {}),
-              width: logoWidth
+              width: width ?? fullLogoWidth,
+              height
             }
           )
         }

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

@@ -1 +1 @@
-{"version":3,"file":"CompanyLogo.esm.js","sources":["../../../src/components/CompanyLogo/CompanyLogo.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 { CSSProperties } from 'react';\nimport { Link } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport DefaultLogo from './DefaultLogo';\nimport Box from '@mui/material/Box';\nimport { useAppBarBackgroundScheme } from '../../hooks/useAppBarBackgroundScheme';\n\nconst LogoRender = ({\n  base64Logo,\n  defaultLogo,\n  width = 150,\n}: {\n  base64Logo: string | undefined;\n  defaultLogo: JSX.Element;\n  width?: number;\n}) => {\n  return base64Logo ? (\n    <img\n      data-testid=\"home-logo\"\n      src={base64Logo}\n      alt=\"Home logo\"\n      style={{\n        objectFit: 'contain',\n        objectPosition: 'left',\n        maxHeight: '40px', // \"kind of\" aligns with PF's MastheadLogo height\n      }}\n      width={width}\n    />\n  ) : (\n    defaultLogo\n  );\n};\n\n/**\n * An interface representing the URLs for light and dark variants of a logo.\n * @public\n */\nexport type LogoURLs =\n  | {\n      /** The logo that will be used in global headers with a light-coloured background */\n      light: string;\n      /** The logo that will be used in global headers with a dark-coloured background */\n      dark: string;\n    }\n  | string\n  | undefined;\n\n/**\n * @public\n */\nexport interface CompanyLogoProps {\n  /** An object containing the logo URLs */\n  logo?: LogoURLs;\n  /** The route to link the logo to */\n  to?: string;\n  /**\n   * The width of the logo in pixels (defaults to 150px). This prop fixes an\n   * issue where encoded SVGs without an explicit width would not render.\n   * You likely do not need to set this prop, but we recommend setting it\n   * to a value under 200px.\n   */\n  logoWidth?: number;\n  /** This prop is not used by this component. */\n  layout?: CSSProperties;\n}\n\n/**\n * Gets a themed image based on the current theme.\n */\nconst useFullLogo = (logo: LogoURLs): string | undefined => {\n  const appBarBackgroundScheme = useAppBarBackgroundScheme();\n\n  const configApi = useApi(configApiRef);\n\n  /** The fullLogo config specified by app.branding.fullLogo */\n  const fullLogo = configApi.getOptional<LogoURLs>('app.branding.fullLogo');\n\n  /** The URI of the logo specified by app.branding.fullLogo */\n  const fullLogoURI =\n    typeof fullLogo === 'string'\n      ? fullLogo\n      : fullLogo?.[appBarBackgroundScheme];\n\n  /** The URI of the logo specified by CompanyLogo props */\n  const propsLogoURI =\n    typeof logo === 'string' ? logo : logo?.[appBarBackgroundScheme];\n\n  return propsLogoURI ?? fullLogoURI ?? undefined;\n};\n\nexport const CompanyLogo = ({\n  logo,\n  logoWidth,\n  to = '/',\n}: CompanyLogoProps) => {\n  const logoURL = useFullLogo(logo);\n\n  return (\n    <Box\n      data-testid=\"global-header-company-logo\"\n      sx={{\n        minWidth: '200px',\n        marginRight: '13px', // align with BackstageContent\n        display: 'flex',\n        justifyContent: 'flex-start',\n        alignItems: 'center',\n      }}\n    >\n      <Link\n        to={to}\n        underline=\"none\"\n        aria-label=\"Home\"\n        style={{\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'center',\n        }}\n      >\n        <LogoRender\n          base64Logo={logoURL}\n          defaultLogo={<DefaultLogo />}\n          width={logoWidth}\n        />\n      </Link>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,aAAa,CAAC;AAAA,EAClB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAIM,KAAA;AACJ,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,WAAA;AAAA,MACZ,GAAK,EAAA,UAAA;AAAA,MACL,GAAI,EAAA,WAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,SAAW,EAAA,SAAA;AAAA,QACX,cAAgB,EAAA,MAAA;AAAA,QAChB,SAAW,EAAA;AAAA;AAAA,OACb;AAAA,MACA;AAAA;AAAA,GAGF,GAAA,WAAA;AAEJ,CAAA;AAsCA,MAAM,WAAA,GAAc,CAAC,IAAuC,KAAA;AAC1D,EAAA,MAAM,yBAAyB,yBAA0B,EAAA;AAEzD,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAGrC,EAAM,MAAA,QAAA,GAAW,SAAU,CAAA,WAAA,CAAsB,uBAAuB,CAAA;AAGxE,EAAA,MAAM,cACJ,OAAO,QAAA,KAAa,QAChB,GAAA,QAAA,GACA,WAAW,sBAAsB,CAAA;AAGvC,EAAA,MAAM,eACJ,OAAO,IAAA,KAAS,QAAW,GAAA,IAAA,GAAO,OAAO,sBAAsB,CAAA;AAEjE,EAAA,OAAO,gBAAgB,WAAe,IAAA,KAAA,CAAA;AACxC,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAK,GAAA;AACP,CAAwB,KAAA;AACtB,EAAM,MAAA,OAAA,GAAU,YAAY,IAAI,CAAA;AAEhC,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,4BAAA;AAAA,MACZ,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,OAAA;AAAA,QACV,WAAa,EAAA,MAAA;AAAA;AAAA,QACb,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,YAAA;AAAA,QAChB,UAAY,EAAA;AAAA,OACd;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAA;AAAA,UACA,SAAU,EAAA,MAAA;AAAA,UACV,YAAW,EAAA,MAAA;AAAA,UACX,KAAO,EAAA;AAAA,YACL,OAAS,EAAA,MAAA;AAAA,YACT,cAAgB,EAAA,YAAA;AAAA,YAChB,UAAY,EAAA;AAAA,WACd;AAAA,UAEA,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA,OAAA;AAAA,cACZ,WAAA,sBAAc,WAAY,EAAA,EAAA,CAAA;AAAA,cAC1B,KAAO,EAAA;AAAA;AAAA;AACT;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"CompanyLogo.esm.js","sources":["../../../src/components/CompanyLogo/CompanyLogo.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 { CSSProperties } from 'react';\nimport { Link } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport DefaultLogo from './DefaultLogo';\nimport Box from '@mui/material/Box';\nimport { useAppBarBackgroundScheme } from '../../hooks/useAppBarBackgroundScheme';\n\nconst LogoRender = ({\n  base64Logo,\n  defaultLogo,\n  width = 150,\n  height = 40,\n}: {\n  base64Logo: string | undefined;\n  defaultLogo: JSX.Element;\n  width?: number | string;\n  height?: number | string;\n}) => {\n  return base64Logo ? (\n    <img\n      data-testid=\"home-logo\"\n      src={base64Logo}\n      alt=\"Home logo\"\n      style={{\n        objectFit: 'contain',\n        objectPosition: 'left',\n        maxHeight: height,\n      }}\n      width={width}\n    />\n  ) : (\n    defaultLogo\n  );\n};\n\n/**\n * An interface representing the URLs for light and dark variants of a logo.\n * @public\n */\nexport type LogoURLs =\n  | {\n      /** The logo that will be used in global headers with a light-coloured background */\n      light: string;\n      /** The logo that will be used in global headers with a dark-coloured background */\n      dark: string;\n    }\n  | string\n  | undefined;\n\n/**\n * @public\n */\nexport interface CompanyLogoProps {\n  /** An object containing the logo URLs */\n  logo?: LogoURLs;\n  /** The route to link the logo to */\n  to?: string;\n  /**\n   * The width of the logo in pixels (defaults to 150px). This prop fixes an\n   * issue where encoded SVGs without an explicit width would not render.\n   * You likely do not need to set this prop, but we recommend setting it\n   * to a value under 200px.\n   */\n  width?: string | number;\n  /**\n   * The maximum height of the logo in pixels (defaults to 40px).\n   * Note that changing this value may result in changes in the height of the global header.\n   **/\n  height?: string | number;\n  /** This prop is not used by this component. */\n  layout?: CSSProperties;\n}\n\n/**\n * Gets a themed image based on the current theme.\n */\nconst useFullLogo = (logo: LogoURLs): string | undefined => {\n  const appBarBackgroundScheme = useAppBarBackgroundScheme();\n\n  const configApi = useApi(configApiRef);\n\n  /** The fullLogo config specified by app.branding.fullLogo */\n  const fullLogo = configApi.getOptional<LogoURLs>('app.branding.fullLogo');\n\n  /** The URI of the logo specified by app.branding.fullLogo */\n  const fullLogoURI =\n    typeof fullLogo === 'string'\n      ? fullLogo\n      : fullLogo?.[appBarBackgroundScheme];\n\n  /** The URI of the logo specified by CompanyLogo props */\n  const propsLogoURI =\n    typeof logo === 'string' ? logo : logo?.[appBarBackgroundScheme];\n\n  return propsLogoURI ?? fullLogoURI ?? undefined;\n};\n\nexport const CompanyLogo = ({\n  logo,\n  width,\n  height,\n  to = '/',\n}: CompanyLogoProps) => {\n  const logoURL = useFullLogo(logo);\n  const configApi = useApi(configApiRef);\n  const fullLogoWidth = configApi.getOptional<number | string>(\n    'app.branding.fullLogoWidth',\n  );\n  return (\n    <Box\n      data-testid=\"global-header-company-logo\"\n      sx={{\n        minWidth: '200px',\n        marginRight: '13px', // align with BackstageContent\n        display: 'flex',\n        justifyContent: 'flex-start',\n        alignItems: 'center',\n      }}\n    >\n      <Link\n        to={to}\n        underline=\"none\"\n        aria-label=\"Home\"\n        style={{\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'center',\n        }}\n      >\n        <LogoRender\n          base64Logo={logoURL}\n          defaultLogo={<DefaultLogo />}\n          width={width ?? fullLogoWidth}\n          height={height}\n        />\n      </Link>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,aAAa,CAAC;AAAA,EAClB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACR,MAAS,GAAA;AACX,CAKM,KAAA;AACJ,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,WAAA;AAAA,MACZ,GAAK,EAAA,UAAA;AAAA,MACL,GAAI,EAAA,WAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,SAAW,EAAA,SAAA;AAAA,QACX,cAAgB,EAAA,MAAA;AAAA,QAChB,SAAW,EAAA;AAAA,OACb;AAAA,MACA;AAAA;AAAA,GAGF,GAAA,WAAA;AAEJ,CAAA;AA2CA,MAAM,WAAA,GAAc,CAAC,IAAuC,KAAA;AAC1D,EAAA,MAAM,yBAAyB,yBAA0B,EAAA;AAEzD,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAGrC,EAAM,MAAA,QAAA,GAAW,SAAU,CAAA,WAAA,CAAsB,uBAAuB,CAAA;AAGxE,EAAA,MAAM,cACJ,OAAO,QAAA,KAAa,QAChB,GAAA,QAAA,GACA,WAAW,sBAAsB,CAAA;AAGvC,EAAA,MAAM,eACJ,OAAO,IAAA,KAAS,QAAW,GAAA,IAAA,GAAO,OAAO,sBAAsB,CAAA;AAEjE,EAAA,OAAO,gBAAgB,WAAe,IAAA,KAAA,CAAA;AACxC,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,EAAK,GAAA;AACP,CAAwB,KAAA;AACtB,EAAM,MAAA,OAAA,GAAU,YAAY,IAAI,CAAA;AAChC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAgB,SAAU,CAAA,WAAA;AAAA,IAC9B;AAAA,GACF;AACA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,4BAAA;AAAA,MACZ,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,OAAA;AAAA,QACV,WAAa,EAAA,MAAA;AAAA;AAAA,QACb,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,YAAA;AAAA,QAChB,UAAY,EAAA;AAAA,OACd;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAA;AAAA,UACA,SAAU,EAAA,MAAA;AAAA,UACV,YAAW,EAAA,MAAA;AAAA,UACX,KAAO,EAAA;AAAA,YACL,OAAS,EAAA,MAAA;AAAA,YACT,cAAgB,EAAA,YAAA;AAAA,YAChB,UAAY,EAAA;AAAA,WACd;AAAA,UAEA,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA,OAAA;AAAA,cACZ,WAAA,sBAAc,WAAY,EAAA,EAAA,CAAA;AAAA,cAC1B,OAAO,KAAS,IAAA,aAAA;AAAA,cAChB;AAAA;AAAA;AACF;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { useHelpDropdownMountPoints } from '../../hooks/useHelpDropdownMountPoints.esm.js';
+import { MenuSection } from './MenuSection.esm.js';
+
+const HelpDropdown = ({ layout }) => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
+  const helpDropdownMountPoints = useHelpDropdownMountPoints();
+  const menuItems = useMemo(() => {
+    return (helpDropdownMountPoints ?? []).map((mp) => ({
+      Component: mp.Component,
+      icon: mp.config?.props?.icon,
+      label: mp.config?.props?.title,
+      link: mp.config?.props?.link,
+      tooltip: mp.config?.props?.tooltip,
+      style: mp.config?.style,
+      priority: mp.config?.priority ?? 0
+    })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [helpDropdownMountPoints]);
+  if (menuItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    HeaderDropdownComponent,
+    {
+      isIconButton: true,
+      tooltip: "Help",
+      buttonContent: /* @__PURE__ */ jsx(HelpOutlineIcon, {}),
+      buttonProps: {
+        color: "inherit",
+        sx: layout
+      },
+      onOpen: handleOpen,
+      onClose: handleClose,
+      anchorEl,
+      children: /* @__PURE__ */ jsx(MenuSection, { hideDivider: true, items: menuItems, handleClose })
+    }
+  );
+};
+
+export { HelpDropdown };
+//# sourceMappingURL=HelpDropdown.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HelpDropdown.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';\nimport type { CSSProperties } from 'react';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useDropdownManager } from '../../hooks';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport { useHelpDropdownMountPoints } from '../../hooks/useHelpDropdownMountPoints';\nimport { MenuSection } from './MenuSection';\n\n/**\n * @public\n * Props for Help Dropdown\n */\nexport interface HelpDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const HelpDropdown = ({ layout }: HelpDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const helpDropdownMountPoints = useHelpDropdownMountPoints();\n\n  const menuItems = useMemo(() => {\n    return (helpDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon,\n        label: mp.config?.props?.title,\n        link: mp.config?.props?.link,\n        tooltip: mp.config?.props?.tooltip,\n        style: mp.config?.style,\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [helpDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      isIconButton\n      tooltip=\"Help\"\n      buttonContent={<HelpOutlineIcon />}\n      buttonProps={{\n        color: 'inherit',\n        sx: layout,\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCO,MAAM,YAAe,GAAA,CAAC,EAAE,MAAA,EAAgC,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AAEjE,EAAA,MAAM,0BAA0B,0BAA2B,EAAA;AAE3D,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM;AAC9B,IAAA,OAAA,CAAQ,uBAA2B,IAAA,EAChC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,IAAA,EAAM,EAAG,CAAA,MAAA,EAAQ,KAAO,EAAA,IAAA;AAAA,MACxB,KAAA,EAAO,EAAG,CAAA,MAAA,EAAQ,KAAO,EAAA,KAAA;AAAA,MACzB,IAAA,EAAM,EAAG,CAAA,MAAA,EAAQ,KAAO,EAAA,IAAA;AAAA,MACxB,OAAA,EAAS,EAAG,CAAA,MAAA,EAAQ,KAAO,EAAA,OAAA;AAAA,MAC3B,KAAA,EAAO,GAAG,MAAQ,EAAA,KAAA;AAAA,MAClB,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,uBAAuB,CAAC,CAAA;AAE5B,EAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,IAAA;AAAA,MACZ,OAAQ,EAAA,MAAA;AAAA,MACR,aAAA,sBAAgB,eAAgB,EAAA,EAAA,CAAA;AAAA,MAChC,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,OACN;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,QAAA;AAAA,MAEA,8BAAC,WAAY,EAAA,EAAA,WAAA,EAAW,IAAC,EAAA,KAAA,EAAO,WAAW,WAA0B,EAAA;AAAA;AAAA,GACvE;AAEJ;;;;"}

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

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { useUserProfile } from '@backstage/plugin-user-settings';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { parseEntityRef } from '@backstage/catalog-model';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import Avatar from '@mui/material/Avatar';
@@ -17,6 +18,7 @@ import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
 const ProfileDropdown = ({ layout }) => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const [user, setUser] = useState();
+  const [profileLink, setProfileLink] = useState();
   const {
     displayName,
     backstageIdentity,
@@ -45,30 +47,52 @@ const ProfileDropdown = ({ layout }) => {
   useEffect(() => {
     const fetchUserEntity = async () => {
       let userProfile;
+      let profileUrl = null;
       try {
         if (backstageIdentity?.userEntityRef) {
+          const { namespace = "default", name } = parseEntityRef(
+            backstageIdentity.userEntityRef
+          );
+          profileUrl = `/catalog/${namespace}/user/${name}`;
           userProfile = await catalogApi.getEntityByRef(
             backstageIdentity.userEntityRef
           );
+          setUser(
+            userProfile?.spec?.profile?.displayName ?? userProfile?.metadata?.title
+          );
+          setProfileLink(profileUrl);
+        } else {
+          setUser(null);
+          setProfileLink(null);
         }
-        setUser(
-          userProfile?.spec?.profile?.displayName ?? userProfile?.metadata?.title
-        );
       } catch (_err) {
         setUser(null);
+        setProfileLink(null);
       }
     };
     fetchUserEntity();
   }, [backstageIdentity, catalogApi]);
   const menuItems = useMemo(() => {
-    return (profileDropdownMountPoints ?? []).map((mp) => ({
-      Component: mp.Component,
-      icon: mp.config?.props?.icon ?? "",
-      label: mp.config?.props?.title ?? "",
-      link: mp.config?.props?.link ?? "",
-      priority: mp.config?.priority ?? 0
-    })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-  }, [profileDropdownMountPoints]);
+    return (profileDropdownMountPoints ?? []).map((mp) => {
+      const {
+        title = "",
+        icon = "",
+        link: staticLink = ""
+      } = mp.config?.props ?? {};
+      const isMyProfile = title.toLowerCase() === "my profile";
+      const link = isMyProfile ? profileLink ?? "" : staticLink;
+      if (!link && title) {
+        return null;
+      }
+      return {
+        Component: mp.Component,
+        label: title,
+        link,
+        priority: mp.config?.priority ?? 0,
+        ...icon && { icon }
+      };
+    }).filter((item) => item !== null).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [profileDropdownMountPoints, profileLink]);
   if (menuItems.length === 0) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const [user, setUser] = useState<string | null>();\n  const {\n    displayName,\n    backstageIdentity,\n    profile,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      let userProfile;\n      try {\n        if (backstageIdentity?.userEntityRef) {\n          userProfile = (await catalogApi.getEntityByRef(\n            backstageIdentity.userEntityRef,\n          )) as unknown as UserEntity;\n        }\n        setUser(\n          userProfile?.spec?.profile?.displayName ??\n            userProfile?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\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  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          {!profileLoading && (\n            <>\n              {profile.picture ? (\n                <Avatar\n                  src={profile.picture}\n                  sx={{ mr: 2, height: '32px', width: '32px' }}\n                  alt=\"Profile picture\"\n                />\n              ) : (\n                <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n              )}\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: { xs: 'none', md: 'block' },\n                  fontWeight: 500,\n                  mr: '1rem',\n                }}\n              >\n                {profileDisplayName()}\n              </Typography>\n            </>\n          )}\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { parseEntityRef, UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuItemConfig, MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const [user, setUser] = useState<string | null>();\n  const [profileLink, setProfileLink] = useState<string | null>();\n  const {\n    displayName,\n    backstageIdentity,\n    profile,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      let userProfile;\n      let profileUrl: string | null = null;\n\n      try {\n        if (backstageIdentity?.userEntityRef) {\n          const { namespace = 'default', name } = parseEntityRef(\n            backstageIdentity.userEntityRef,\n          );\n          profileUrl = `/catalog/${namespace}/user/${name}`;\n\n          userProfile = (await catalogApi.getEntityByRef(\n            backstageIdentity.userEntityRef,\n          )) as unknown as UserEntity;\n          setUser(\n            userProfile?.spec?.profile?.displayName ??\n              userProfile?.metadata?.title,\n          );\n          setProfileLink(profileUrl);\n        } else {\n          setUser(null);\n          setProfileLink(null);\n        }\n      } catch (_err) {\n        setUser(null);\n        setProfileLink(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => {\n        const {\n          title = '',\n          icon = '',\n          link: staticLink = '',\n        } = mp.config?.props ?? {};\n        const isMyProfile = title.toLowerCase() === 'my profile';\n        const link = isMyProfile ? profileLink ?? '' : staticLink;\n\n        if (!link && title) {\n          return null;\n        }\n\n        return {\n          Component: mp.Component,\n          label: title,\n          link,\n          priority: mp.config?.priority ?? 0,\n          ...(icon && { icon }),\n        };\n      })\n      .filter((item: MenuItemConfig) => item !== null)\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints, profileLink]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\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  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          {!profileLoading && (\n            <>\n              {profile.picture ? (\n                <Avatar\n                  src={profile.picture}\n                  sx={{ mr: 2, height: '32px', width: '32px' }}\n                  alt=\"Profile picture\"\n                />\n              ) : (\n                <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n              )}\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: { xs: 'none', md: 'block' },\n                  fontWeight: 500,\n                  mr: '1rem',\n                }}\n              >\n                {profileDisplayName()}\n              </Typography>\n            </>\n          )}\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickstartButton/QuickstartButton.esm.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
+import { QUICKSTART_DRAWER_OPEN_KEY } from './const.esm.js';
+import { useQuickstartButtonPermission } from './useQuickstartButtonPermission.esm.js';
+
+const QuickstartButton = ({
+  icon = "quickstart",
+  title = "Quick start",
+  tooltip,
+  style
+}) => {
+  const isAllowed = useQuickstartButtonPermission();
+  const toggleDrawer = useCallback(() => {
+    const isDrawerOpen = localStorage.getItem(QUICKSTART_DRAWER_OPEN_KEY) === "true";
+    localStorage.setItem(
+      QUICKSTART_DRAWER_OPEN_KEY,
+      (!isDrawerOpen).toString()
+    );
+  }, []);
+  return isAllowed ? /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      sx: { width: "100%", color: "inherit", ...style },
+      "data-testid": "quickstart-button",
+      onClick: toggleDrawer,
+      children: /* @__PURE__ */ jsx(MenuItemLink, { to: "", title, icon, tooltip })
+    }
+  ) : null;
+};
+
+export { QuickstartButton };
+//# sourceMappingURL=QuickstartButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickstartButton.esm.js","sources":["../../../src/components/QuickstartButton/QuickstartButton.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 { CSSProperties, useCallback } from 'react';\nimport MenuItem from '@mui/material/MenuItem';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\nimport { QUICKSTART_DRAWER_OPEN_KEY } from './const';\nimport { useQuickstartButtonPermission } from './useQuickstartButtonPermission';\n\n/**\n * @public\n */\nexport interface QuickstartButtonProps {\n  icon?: string;\n  title?: string;\n  tooltip?: string;\n  style?: CSSProperties;\n}\n\n/**\n * @public\n */\nexport const QuickstartButton = ({\n  icon = 'quickstart',\n  title = 'Quick start',\n  tooltip,\n  style,\n}: QuickstartButtonProps) => {\n  const isAllowed = useQuickstartButtonPermission();\n  const toggleDrawer = useCallback(() => {\n    const isDrawerOpen =\n      localStorage.getItem(QUICKSTART_DRAWER_OPEN_KEY) === 'true';\n    localStorage.setItem(\n      QUICKSTART_DRAWER_OPEN_KEY,\n      (!isDrawerOpen).toString(),\n    );\n  }, []);\n\n  return isAllowed ? (\n    <MenuItem\n      sx={{ width: '100%', color: 'inherit', ...style }}\n      data-testid=\"quickstart-button\"\n      onClick={toggleDrawer}\n    >\n      <MenuItemLink to=\"\" title={title} icon={icon} tooltip={tooltip} />\n    </MenuItem>\n  ) : null;\n};\n"],"names":[],"mappings":";;;;;;;AAmCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,IAAO,GAAA,YAAA;AAAA,EACP,KAAQ,GAAA,aAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,MAAM,YAAY,6BAA8B,EAAA;AAChD,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,MAAM,YACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,0BAA0B,CAAM,KAAA,MAAA;AACvD,IAAa,YAAA,CAAA,OAAA;AAAA,MACX,0BAAA;AAAA,MACC,CAAA,CAAC,cAAc,QAAS;AAAA,KAC3B;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,SACL,mBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAI,EAAE,KAAA,EAAO,QAAQ,KAAO,EAAA,SAAA,EAAW,GAAG,KAAM,EAAA;AAAA,MAChD,aAAY,EAAA,mBAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MAET,8BAAC,YAAa,EAAA,EAAA,EAAA,EAAG,EAAG,EAAA,KAAA,EAAc,MAAY,OAAkB,EAAA;AAAA;AAAA,GAEhE,GAAA,IAAA;AACN;;;;"}

package/dist/components/QuickstartButton/const.esm.js

@@ -0,0 +1,4 @@
+const QUICKSTART_DRAWER_OPEN_KEY = "quickstart-drawer-open";
+
+export { QUICKSTART_DRAWER_OPEN_KEY };
+//# sourceMappingURL=const.esm.js.map

package/dist/components/QuickstartButton/const.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.esm.js","sources":["../../../src/components/QuickstartButton/const.ts"],"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\nexport const QUICKSTART_DRAWER_OPEN_KEY = 'quickstart-drawer-open';\n"],"names":[],"mappings":"AAgBO,MAAM,0BAA6B,GAAA;;;;"}

package/dist/components/QuickstartButton/useQuickstartButtonPermission.esm.js

@@ -0,0 +1,27 @@
+import { useApi, identityApiRef, configApiRef } from '@backstage/core-plugin-api';
+import { useAsync } from 'react-use';
+
+const useQuickstartButtonPermission = () => {
+  const identityApi = useApi(identityApiRef);
+  const configApi = useApi(configApiRef);
+  const getUserAuthorization = async () => {
+    const { token: idToken } = await identityApi.getCredentials();
+    const backendUrl = configApi.getString("backend.baseUrl");
+    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {
+      headers: {
+        ...idToken && { Authorization: `Bearer ${idToken}` }
+      }
+    });
+    return jsonResponse.json();
+  };
+  const { loading: isUserLoading, value: result } = useAsync(
+    async () => await getUserAuthorization(),
+    []
+  );
+  const isRBACPluginEnabled = configApi.getOptionalBoolean("permission.enabled");
+  if (!isRBACPluginEnabled) return true;
+  return !isUserLoading && result.status === "Authorized";
+};
+
+export { useQuickstartButtonPermission };
+//# sourceMappingURL=useQuickstartButtonPermission.esm.js.map

package/dist/components/QuickstartButton/useQuickstartButtonPermission.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuickstartButtonPermission.esm.js","sources":["../../../src/components/QuickstartButton/useQuickstartButtonPermission.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  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useAsync } from 'react-use';\n\nexport const useQuickstartButtonPermission = () => {\n  const identityApi = useApi(identityApiRef);\n  const configApi = useApi(configApiRef);\n\n  const getUserAuthorization = async () => {\n    const { token: idToken } = await identityApi.getCredentials();\n    const backendUrl = configApi.getString('backend.baseUrl');\n    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {\n      headers: {\n        ...(idToken && { Authorization: `Bearer ${idToken}` }),\n      },\n    });\n    return jsonResponse.json();\n  };\n  const { loading: isUserLoading, value: result } = useAsync(\n    async () => await getUserAuthorization(),\n    [],\n  );\n\n  const isRBACPluginEnabled =\n    configApi.getOptionalBoolean('permission.enabled');\n\n  if (!isRBACPluginEnabled) return true;\n\n  return !isUserLoading && result.status === 'Authorized';\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,gCAAgC,MAAM;AACjD,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAA,MAAM,uBAAuB,YAAY;AACvC,IAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAY,GAAA,MAAM,YAAY,cAAe,EAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,SAAU,CAAA,SAAA,CAAU,iBAAiB,CAAA;AACxD,IAAA,MAAM,YAAe,GAAA,MAAM,KAAM,CAAA,CAAA,EAAG,UAAU,CAAoB,gBAAA,CAAA,EAAA;AAAA,MAChE,OAAS,EAAA;AAAA,QACP,GAAI,OAAW,IAAA,EAAE,aAAe,EAAA,CAAA,OAAA,EAAU,OAAO,CAAG,CAAA;AAAA;AACtD,KACD,CAAA;AACD,IAAA,OAAO,aAAa,IAAK,EAAA;AAAA,GAC3B;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,KAAA,EAAO,QAAW,GAAA,QAAA;AAAA,IAChD,YAAY,MAAM,oBAAqB,EAAA;AAAA,IACvC;AAAC,GACH;AAEA,EAAM,MAAA,mBAAA,GACJ,SAAU,CAAA,kBAAA,CAAmB,oBAAoB,CAAA;AAEnD,EAAI,IAAA,CAAC,qBAA4B,OAAA,IAAA;AAEjC,EAAO,OAAA,CAAC,aAAiB,IAAA,MAAA,CAAO,MAAW,KAAA,YAAA;AAC7C;;;;"}

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

@@ -1,19 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
-import { Link as Link$1 } from '@backstage/core-components';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import HelpIcon from '@mui/icons-material/HelpOutline';
+import { Link } from '@backstage/core-components';
+import MenuItem from '@mui/material/MenuItem';
+import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
 
-const Link = (props) => /* @__PURE__ */ jsx(Link$1, { ...props, color: "inherit", externalLinkIcon: false });
 const SupportButton = ({
   title = "Support",
-  tooltip,
-  color = "inherit",
-  size = "small",
   to,
-  layout
+  icon = "support",
+  tooltip,
+  style
 }) => {
   const apiHolder = useApiHolder();
   const config = apiHolder.get(configApiRef);
@@ -21,24 +17,24 @@ const SupportButton = ({
   if (!supportUrl) {
     return null;
   }
-  const isExternalLink = supportUrl.startsWith("http://") || supportUrl.startsWith("https://");
-  return /* @__PURE__ */ jsx(Box, { sx: layout, children: /* @__PURE__ */ jsx(
-    Tooltip,
+  return /* @__PURE__ */ jsx(
+    MenuItem,
     {
-      title: tooltip ?? `${title}${isExternalLink ? " (external link)" : ""}`,
-      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        IconButton,
+      to: supportUrl,
+      component: Link,
+      sx: { width: "100%", color: "inherit", ...style },
+      "data-testid": "support-button",
+      children: /* @__PURE__ */ jsx(
+        MenuItemLink,
         {
-          component: Link,
-          color,
-          size,
           to: supportUrl,
-          "aria-label": title,
-          children: /* @__PURE__ */ jsx(HelpIcon, { fontSize: size })
+          title,
+          icon,
+          tooltip
         }
-      ) })
+      )
     }
-  ) });
+  );
 };
 
 export { SupportButton };

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 type { CSSProperties } from 'react';\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpIcon from '@mui/icons-material/HelpOutline';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\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  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 SupportButton = ({\n  title = 'Support',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  to,\n  layout,\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  const isExternalLink =\n    supportUrl.startsWith('http://') || supportUrl.startsWith('https://');\n\n  return (\n    <Box sx={layout}>\n      <Tooltip\n        title={tooltip ?? `${title}${isExternalLink ? ' (external link)' : ''}`}\n      >\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={supportUrl}\n            aria-label={title}\n          >\n            <HelpIcon fontSize={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;AA8CA,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,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,EAAA;AAAA,EACA;AACF,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,EAAA,MAAM,iBACJ,UAAW,CAAA,UAAA,CAAW,SAAS,CAAK,IAAA,UAAA,CAAW,WAAW,UAAU,CAAA;AAEtE,EACE,uBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAW,IAAA,CAAA,EAAG,KAAK,CAAG,EAAA,cAAA,GAAiB,qBAAqB,EAAE,CAAA,CAAA;AAAA,MAErE,8BAAC,KACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,UACX,KAAA;AAAA,UACA,IAAA;AAAA,UACA,EAAI,EAAA,UAAA;AAAA,UACJ,YAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA;AAAA;AAAA,OAE9B,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;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';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\n  icon?: string;\n  title?: string;\n  to?: string;\n  tooltip?: string;\n  style?: CSSProperties;\n}\n/**\n * @public\n */\nexport const SupportButton = ({\n  title = 'Support',\n  to,\n  icon = 'support',\n  tooltip,\n  style,\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      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":";;;;;;AAmCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,EAAA;AAAA,EACA,IAAO,GAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA;AACF,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,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;;;;"}

package/dist/defaultMountPoints/defaultMountPoints.esm.js

@@ -12,6 +12,8 @@ import { Spacer } from '../components/Spacer/Spacer.esm.js';
 import { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown.esm.js';
 import { ApplicationLauncherDropdown } from '../components/HeaderDropdownComponent/ApplicationLauncherDropdown.esm.js';
 import { CompanyLogo } from '../components/CompanyLogo/CompanyLogo.esm.js';
+import { HelpDropdown } from '../components/HeaderDropdownComponent/HelpDropdown.esm.js';
+import { QuickstartButton } from '../components/QuickstartButton/QuickstartButton.esm.js';
 
 const defaultGlobalHeaderComponentsMountPoints = [
   {
@@ -72,7 +74,7 @@ const defaultGlobalHeaderComponentsMountPoints = [
     }
   },
   {
-    Component: SupportButton,
+    Component: HelpDropdown,
     config: {
       priority: 80
     }
@@ -123,6 +125,16 @@ const defaultProfileDropdownMountPoints = [
       }
     }
   },
+  {
+    Component: MenuItemLink,
+    config: {
+      priority: 150,
+      props: {
+        title: "My profile",
+        icon: "account"
+      }
+    }
+  },
   {
     Component: LogoutButton,
     config: {
@@ -130,6 +142,20 @@ const defaultProfileDropdownMountPoints = [
     }
   }
 ];
+const defaultHelpDropdownMountPoints = [
+  {
+    Component: QuickstartButton,
+    config: {
+      priority: 100
+    }
+  },
+  {
+    Component: SupportButton,
+    config: {
+      priority: 10
+    }
+  }
+];
 const defaultApplicationLauncherDropdownMountPoints = [
   {
     Component: MenuItemLink,
@@ -157,5 +183,5 @@ const defaultApplicationLauncherDropdownMountPoints = [
   }
 ];
 
-export { defaultApplicationLauncherDropdownMountPoints, defaultCreateDropdownMountPoints, defaultGlobalHeaderComponentsMountPoints, defaultProfileDropdownMountPoints };
+export { defaultApplicationLauncherDropdownMountPoints, defaultCreateDropdownMountPoints, defaultGlobalHeaderComponentsMountPoints, defaultHelpDropdownMountPoints, defaultProfileDropdownMountPoints };
 //# sourceMappingURL=defaultMountPoints.esm.js.map