@red-hat-developer-hub/backstage-plugin-global-header 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 0.0.4
+
+### Patch Changes
+
+- a07a84a: Update dependencies to Backstage 1.35.0
+- 02cd530: add new mountpoints for the search, create dropdown, profile dropdown, software templates, register a component, logout button, header link and header icon
+
+## 0.0.3
+
+### Patch Changes
+
+- 4959ebb: add new notificationbanner component
+
 ## 0.0.2
 
 ### Patch Changes

package/app-config.dynamic.yaml

@@ -0,0 +1,71 @@
+# please keep this in sync with rhdh/dynamic-plugins.default.yaml
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-header:
+      mountPoints:
+        - mountPoint: application/header
+          importName: GlobalHeader
+          config:
+            layout:
+              position: above-main-content # above-main-content | below-main-content
+        - mountPoint: global.header/component
+          importName: SearchComponent
+          config:
+            type: search
+            slot: header-start
+            priority: 100
+        - mountPoint: global.header/component
+          importName: CreateDropdown
+          config:
+            type: dropdown_button
+            key: create
+            slot: header-start
+            priority: 90
+        - mountPoint: global.header/create
+          importName: SoftwareTemplatesSection
+          config:
+            type: list
+            priority: 10
+        - mountPoint: global.header/create
+          importName: RegisterAComponentSection
+          config:
+            type: link
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            type: icon_button
+            slot: header-start
+            priority: 80
+            props:
+              icon: support
+              tooltip: 'Support'
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            type: icon_button
+            slot: header-start
+            priority: 70
+            props:
+              icon: notifications
+              tooltip: 'Notifications'
+        - mountPoint: global.header/component
+          importName: ProfileDropdown
+          config:
+            type: dropdown_button
+            key: profile
+            slot: header-end
+            priority: 0
+        - mountPoint: global.header/profile
+          importName: HeaderLink
+          config:
+            type: link
+            priority: 10
+            props:
+              title: Settings
+              link: /settings
+              icon: manageAccounts
+        - mountPoint: global.header/profile
+          importName: LogoutButton
+          config:
+            type: logout
+            priority: 0

package/dist/components/GlobalHeader.esm.js

@@ -1,51 +1,84 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import { SearchComponent } from './SearchComponent/SearchComponent.esm.js';
-import { HeaderIconButton } from './HeaderIconButton/HeaderIconButton.esm.js';
-import CreateDropdown from './HeaderDropdownComponent/CreateDropdown.esm.js';
-import ProfileDropdown from './HeaderDropdownComponent/ProfileDropdown.esm.js';
 import Divider from '@mui/material/Divider';
-import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineRounded';
-import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
 import { useDropdownManager } from '../hooks/useDropdownManager.esm.js';
+import { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints.esm.js';
+import { Slot, ComponentType } from '../types.esm.js';
+import { ErrorBoundary } from '@backstage/core-components';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 
-const iconButtons = [
-  {
-    key: "help",
-    Icon: HelpOutlineOutlinedIcon,
-    onClick: () => {
-    }
-  },
-  {
-    key: "notification",
-    Icon: NotificationsOutlinedIcon,
-    onClick: () => {
-    }
-  }
-];
 const GlobalHeader = () => {
+  const config = useApi(configApiRef);
+  const frontendConfig = config.getOptionalConfig("dynamicPlugins.frontend");
+  const frontendData = frontendConfig?.get();
+  const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();
+  const filteredAndSortedGlobalHeaderComponents = useMemo(() => {
+    if (!allGlobalHeaderMountPoints) {
+      return [];
+    }
+    const filteredAndSorted = allGlobalHeaderMountPoints.filter(
+      (component) => (component.config?.priority ?? 0) > -1
+    );
+    filteredAndSorted.sort(
+      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0)
+    );
+    return filteredAndSorted;
+  }, [allGlobalHeaderMountPoints]);
+  const globalHeaderStartComponentsMountPoints = filteredAndSortedGlobalHeaderComponents.filter(
+    (component) => component.config?.slot === Slot.HEADER_START
+  );
+  const globalHeaderEndComponentsMountPoints = filteredAndSortedGlobalHeaderComponents.filter(
+    (component) => component.config?.slot === Slot.HEADER_END
+  );
   const { menuStates, handleOpen, handleClose } = useDropdownManager();
-  const dropdownConfigs = [
-    {
-      key: "create",
-      component: CreateDropdown,
-      buttonProps: {
-        handleMenu: handleOpen("create"),
-        anchorEl: menuStates.create,
-        setAnchorEl: handleClose("create")
-      }
-    },
-    {
-      key: "profile",
-      component: ProfileDropdown,
-      buttonProps: {
-        handleMenu: handleOpen("profile"),
-        anchorEl: menuStates.profile,
-        setAnchorEl: handleClose("profile")
+  const getDropdownButtonProps = (key) => ({
+    handleMenu: handleOpen(key),
+    anchorEl: menuStates[key],
+    setAnchorEl: handleClose(key)
+  });
+  const getIconButtonProps = (props) => ({
+    icon: props.icon ?? "",
+    tooltip: props.tooltip ?? "",
+    to: props.to ?? ""
+  });
+  const renderComponents = (mountPoints) => mountPoints.map((mp, index) => {
+    let displayHeaderIcon = false;
+    if (frontendData) {
+      for (const pluginData of Object.values(frontendData)) {
+        const dynamicRoutes = pluginData.dynamicRoutes ?? [];
+        if (dynamicRoutes.some(
+          (route) => route.path === mp.config?.props?.to
+        )) {
+          displayHeaderIcon = true;
+          break;
+        }
       }
     }
-  ];
+    switch (mp.config?.type) {
+      case ComponentType.SEARCH:
+        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(mp.Component, { key: index }));
+      case ComponentType.DROPDOWN_BUTTON:
+        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(
+          mp.Component,
+          {
+            key: index,
+            ...getDropdownButtonProps(mp.config?.key ?? index.toString()),
+            ...mp.config?.props
+          }
+        ));
+      case ComponentType.ICON_BUTTON:
+        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, displayHeaderIcon && /* @__PURE__ */ React.createElement(
+          mp.Component,
+          {
+            key: index,
+            ...getIconButtonProps(mp.config?.props ?? {})
+          }
+        ));
+      default:
+        return null;
+    }
+  });
   return /* @__PURE__ */ React.createElement(
     AppBar,
     {
@@ -53,33 +86,14 @@ const GlobalHeader = () => {
       component: "nav",
       sx: { backgroundColor: "#212427" }
     },
-    /* @__PURE__ */ React.createElement(Toolbar, null, /* @__PURE__ */ React.createElement(SearchComponent, null), /* @__PURE__ */ React.createElement(
-      CreateDropdown,
-      {
-        key: dropdownConfigs[0].key,
-        ...dropdownConfigs[0].buttonProps
-      }
-    ), iconButtons.map(({ key, Icon, onClick }) => /* @__PURE__ */ React.createElement(
-      HeaderIconButton,
-      {
-        key: `header-icon-button-${key}`,
-        Icon,
-        onClick
-      }
-    )), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Toolbar, null, renderComponents(globalHeaderStartComponentsMountPoints), globalHeaderStartComponentsMountPoints.length > 0 && globalHeaderEndComponentsMountPoints.length > 0 && /* @__PURE__ */ React.createElement(
       Divider,
       {
         orientation: "vertical",
         flexItem: true,
-        sx: { borderColor: "#373A40" }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      ProfileDropdown,
-      {
-        key: dropdownConfigs[1].key,
-        ...dropdownConfigs[1].buttonProps
+        sx: { borderColor: "#4F5255", marginX: 1 }
       }
-    ))
+    ), renderComponents(globalHeaderEndComponentsMountPoints))
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.esm.js","sources":["../../src/components/GlobalHeader.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 React from 'react';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { SearchComponent } from './SearchComponent/SearchComponent';\nimport { HeaderIconButton } from './HeaderIconButton/HeaderIconButton';\nimport CreateDropdown from './HeaderDropdownComponent/CreateDropdown';\nimport ProfileDropdown from './HeaderDropdownComponent/ProfileDropdown';\nimport Divider from '@mui/material/Divider';\nimport HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineRounded';\nimport NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';\nimport { useDropdownManager } from '../hooks';\n\nconst iconButtons = [\n  {\n    key: 'help',\n    Icon: HelpOutlineOutlinedIcon,\n    onClick: () => {},\n  },\n  {\n    key: 'notification',\n    Icon: NotificationsOutlinedIcon,\n    onClick: () => {},\n  },\n];\n\nexport const GlobalHeader = () => {\n  const { menuStates, handleOpen, handleClose } = useDropdownManager();\n  const dropdownConfigs = [\n    {\n      key: 'create',\n      component: CreateDropdown,\n      buttonProps: {\n        handleMenu: handleOpen('create'),\n        anchorEl: menuStates.create,\n        setAnchorEl: handleClose('create'),\n      },\n    },\n    {\n      key: 'profile',\n      component: ProfileDropdown,\n      buttonProps: {\n        handleMenu: handleOpen('profile'),\n        anchorEl: menuStates.profile,\n        setAnchorEl: handleClose('profile'),\n      },\n    },\n  ];\n\n  return (\n    <AppBar\n      position=\"sticky\"\n      component=\"nav\"\n      sx={{ backgroundColor: '#212427' }}\n    >\n      <Toolbar>\n        <SearchComponent />\n        <CreateDropdown\n          key={dropdownConfigs[0].key}\n          {...dropdownConfigs[0].buttonProps}\n        />\n        {iconButtons.map(({ key, Icon, onClick }) => (\n          <HeaderIconButton\n            key={`header-icon-button-${key}`}\n            Icon={Icon}\n            onClick={onClick}\n          />\n        ))}\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ borderColor: '#373A40' }}\n        />\n        <ProfileDropdown\n          key={dropdownConfigs[1].key}\n          {...dropdownConfigs[1].buttonProps}\n        />\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,WAAc,GAAA;AAAA,EAClB;AAAA,IACE,GAAK,EAAA,MAAA;AAAA,IACL,IAAM,EAAA,uBAAA;AAAA,IACN,SAAS,MAAM;AAAA;AAAC,GAClB;AAAA,EACA;AAAA,IACE,GAAK,EAAA,cAAA;AAAA,IACL,IAAM,EAAA,yBAAA;AAAA,IACN,SAAS,MAAM;AAAA;AAAC;AAEpB,CAAA;AAEO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACnE,EAAA,MAAM,eAAkB,GAAA;AAAA,IACtB;AAAA,MACE,GAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,cAAA;AAAA,MACX,WAAa,EAAA;AAAA,QACX,UAAA,EAAY,WAAW,QAAQ,CAAA;AAAA,QAC/B,UAAU,UAAW,CAAA,MAAA;AAAA,QACrB,WAAA,EAAa,YAAY,QAAQ;AAAA;AACnC,KACF;AAAA,IACA;AAAA,MACE,GAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,eAAA;AAAA,MACX,WAAa,EAAA;AAAA,QACX,UAAA,EAAY,WAAW,SAAS,CAAA;AAAA,QAChC,UAAU,UAAW,CAAA,OAAA;AAAA,QACrB,WAAA,EAAa,YAAY,SAAS;AAAA;AACpC;AACF,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,QAAA;AAAA,MACT,SAAU,EAAA,KAAA;AAAA,MACV,EAAA,EAAI,EAAE,eAAA,EAAiB,SAAU;AAAA,KAAA;AAAA,oBAEhC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAgB,CACjB,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,eAAgB,CAAA,CAAC,CAAE,CAAA,GAAA;AAAA,QACvB,GAAG,eAAgB,CAAA,CAAC,CAAE,CAAA;AAAA;AAAA,KACzB,EACC,YAAY,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,IAAA,EAAM,SAC7B,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,sBAAsB,GAAG,CAAA,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA;AAAA;AAAA,KAEH,CACD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAY,EAAA,UAAA;AAAA,QACZ,QAAQ,EAAA,IAAA;AAAA,QACR,EAAA,EAAI,EAAE,WAAA,EAAa,SAAU;AAAA;AAAA,KAE/B,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,eAAgB,CAAA,CAAC,CAAE,CAAA,GAAA;AAAA,QACvB,GAAG,eAAgB,CAAA,CAAC,CAAE,CAAA;AAAA;AAAA,KAE3B;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"GlobalHeader.esm.js","sources":["../../src/components/GlobalHeader.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 React, { useMemo } from 'react';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport Divider from '@mui/material/Divider';\nimport { useDropdownManager } from '../hooks';\nimport { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints';\nimport { ComponentType, GlobalHeaderComponentMountPoint, Slot } from '../types';\nimport { ErrorBoundary } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const GlobalHeader = () => {\n  const config = useApi(configApiRef);\n  const frontendConfig = config.getOptionalConfig('dynamicPlugins.frontend');\n  const frontendData = frontendConfig?.get();\n\n  const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();\n\n  const filteredAndSortedGlobalHeaderComponents = useMemo(() => {\n    if (!allGlobalHeaderMountPoints) {\n      return [];\n    }\n\n    const filteredAndSorted = allGlobalHeaderMountPoints.filter(\n      component => (component.config?.priority ?? 0) > -1,\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [allGlobalHeaderMountPoints]);\n\n  const globalHeaderStartComponentsMountPoints =\n    filteredAndSortedGlobalHeaderComponents.filter(\n      component => component.config?.slot === Slot.HEADER_START,\n    );\n\n  const globalHeaderEndComponentsMountPoints =\n    filteredAndSortedGlobalHeaderComponents.filter(\n      component => component.config?.slot === Slot.HEADER_END,\n    );\n\n  const { menuStates, handleOpen, handleClose } = useDropdownManager();\n\n  const getDropdownButtonProps = (key: string) => ({\n    handleMenu: handleOpen(key),\n    anchorEl: menuStates[key],\n    setAnchorEl: handleClose(key),\n  });\n\n  const getIconButtonProps = (props: Record<string, any>) => ({\n    icon: props.icon ?? '',\n    tooltip: props.tooltip ?? '',\n    to: props.to ?? '',\n  });\n  const renderComponents = (mountPoints: GlobalHeaderComponentMountPoint[]) =>\n    mountPoints.map((mp, index) => {\n      let displayHeaderIcon = false;\n      if (frontendData) {\n        for (const pluginData of Object.values(frontendData)) {\n          const dynamicRoutes = pluginData.dynamicRoutes ?? [];\n          if (\n            dynamicRoutes.some(\n              (route: { path: string }) => route.path === mp.config?.props?.to,\n            )\n          ) {\n            displayHeaderIcon = true;\n            break;\n          }\n        }\n      }\n\n      switch (mp.config?.type) {\n        case ComponentType.SEARCH:\n          return (\n            <ErrorBoundary>\n              {/* eslint-disable-next-line react/no-array-index-key */}\n              <mp.Component key={index} />\n            </ErrorBoundary>\n          );\n        case ComponentType.DROPDOWN_BUTTON:\n          return (\n            <ErrorBoundary>\n              <mp.Component\n                // eslint-disable-next-line react/no-array-index-key\n                key={index}\n                {...getDropdownButtonProps(mp.config?.key ?? index.toString())}\n                {...mp.config?.props}\n              />\n            </ErrorBoundary>\n          );\n        case ComponentType.ICON_BUTTON:\n          return (\n            <ErrorBoundary>\n              {displayHeaderIcon && (\n                <mp.Component\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  {...getIconButtonProps(mp.config?.props ?? {})}\n                />\n              )}\n            </ErrorBoundary>\n          );\n        default:\n          return null;\n      }\n    });\n\n  return (\n    <AppBar\n      position=\"sticky\"\n      component=\"nav\"\n      sx={{ backgroundColor: '#212427' }}\n    >\n      <Toolbar>\n        {renderComponents(globalHeaderStartComponentsMountPoints)}\n        {globalHeaderStartComponentsMountPoints.length > 0 &&\n          globalHeaderEndComponentsMountPoints.length > 0 && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{ borderColor: '#4F5255', marginX: 1 }}\n            />\n          )}\n        {renderComponents(globalHeaderEndComponentsMountPoints)}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/HeaderButtonComponent/HeaderButton.esm.js

@@ -0,0 +1,17 @@
+import Box from '@mui/material/Box';
+import React from 'react';
+import HeaderItemContent from '../HeaderLinkComponent/HeaderItemContent.esm.js';
+
+const HeaderButton = ({ title, icon, onClick }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      onClick,
+      sx: { cursor: "pointer", width: "100%", color: "inherit" }
+    },
+    /* @__PURE__ */ React.createElement(HeaderItemContent, { icon, label: title })
+  );
+};
+
+export { HeaderButton };
+//# sourceMappingURL=HeaderButton.esm.js.map

package/dist/components/HeaderButtonComponent/HeaderButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderButton.esm.js","sources":["../../../src/components/HeaderButtonComponent/HeaderButton.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 Box from '@mui/material/Box';\nimport React from 'react';\nimport HeaderItemContent from '../HeaderLinkComponent/HeaderItemContent';\n\nexport type HeaderButtonProps = {\n  title: string;\n  icon: string;\n  onClick?: () => void;\n};\n\nexport const HeaderButton = ({ title, icon, onClick }: HeaderButtonProps) => {\n  return (\n    <Box\n      onClick={onClick}\n      sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n    >\n      <HeaderItemContent icon={icon} label={title} />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AA0BO,MAAM,eAAe,CAAC,EAAE,KAAO,EAAA,IAAA,EAAM,SAAiC,KAAA;AAC3E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAI,EAAE,MAAA,EAAQ,WAAW,KAAO,EAAA,MAAA,EAAQ,OAAO,SAAU;AAAA,KAAA;AAAA,oBAExD,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAkB,IAAY,EAAA,KAAA,EAAO,KAAO,EAAA;AAAA,GAC/C;AAEJ;;;;"}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { HeaderButton } from './HeaderButton.esm.js';
+
+const LogoutButton = () => {
+  const errorApi = useApi(errorApiRef);
+  const identityApi = useApi(identityApiRef);
+  const handleLogout = () => {
+    identityApi.signOut().catch((error) => errorApi.post(error));
+  };
+  return /* @__PURE__ */ React.createElement(HeaderButton, { title: "Logout", icon: "logout", onClick: handleLogout });
+};
+
+export { LogoutButton };
+//# sourceMappingURL=LogoutButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutButton.esm.js","sources":["../../../src/components/HeaderButtonComponent/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 React from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { HeaderButton } from './HeaderButton';\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 <HeaderButton title=\"Logout\" icon=\"logout\" onClick={handleLogout} />;\n};\n"],"names":[],"mappings":";;;;AAwBO,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,2CAAQ,YAAa,EAAA,EAAA,KAAA,EAAM,UAAS,IAAK,EAAA,QAAA,EAAS,SAAS,YAAc,EAAA,CAAA;AAC3E;;;;"}

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

@@ -1,69 +1,65 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import HeaderDropdownComponent from './HeaderDropdownComponent.esm.js';
 import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
+import { useApi } from '@backstage/core-plugin-api';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { ComponentType } from '../../types.esm.js';
+import { HeaderLink } from '../HeaderLinkComponent/HeaderLink.esm.js';
+import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints.esm.js';
 
-const models = [
-  {
-    key: "key-1",
-    value: "argocd-template",
-    label: "Add ArgoCD to an existing project"
-  },
-  {
-    key: "key-2",
-    value: "create-backend-plugin",
-    label: "Create Backend Plugin Template"
-  },
-  {
-    key: "key-3",
-    value: "create-frontend-plugin",
-    label: "Create Frontend Plugin Template"
-  },
-  {
-    key: "key-4",
-    value: "create-react-app-template-test-annotator",
-    label: "Create React App Template with annotations"
-  },
-  {
-    key: "key-5",
-    value: "define-ansible-job-template",
-    label: "Ansible Job Template"
-  }
-];
-const menuBottomItems = [
-  {
-    itemKey: "custom",
-    icon: CategoryOutlinedIcon,
-    label: "Register a component",
-    subLabel: "Import it to the catalog page",
-    link: "/catalog-import"
-  }
-];
 const CreateDropdown = ({
   handleMenu,
   anchorEl,
   setAnchorEl
 }) => {
-  const menuSections = [
-    {
-      sectionKey: "templates",
-      sectionLabel: "Use a template",
-      optionalLinkLabel: "All templates",
-      optionalLink: "/create",
-      items: models.map((m) => ({
-        itemKey: m.key,
-        label: m.label,
-        link: `/create/templates/default/${m.value}`
-      })),
-      handleClose: () => setAnchorEl(null)
-    }
-  ];
+  const catalogApi = useApi(catalogApiRef);
+  const [entities, setEntities] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const createDropdownMountPoints = useCreateDropdownMountPoints();
+  useEffect(() => {
+    const fetchEntities = async () => {
+      try {
+        const response = await catalogApi.getEntities({
+          filter: { kind: ["Template"] }
+        });
+        setEntities(response.items);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchEntities();
+  }, [catalogApi]);
+  const items = useMemo(() => {
+    return entities.filter((e) => e.kind === "Template").map((m) => ({
+      Component: HeaderLink,
+      type: ComponentType.LINK,
+      label: m.metadata.title ?? m.metadata.name,
+      link: `/create/templates/default/${m.metadata.name}`
+    }));
+  }, [entities]);
+  const menuSections = useMemo(() => {
+    return (createDropdownMountPoints ?? []).map((mp) => ({
+      Component: mp.Component,
+      type: mp.config?.type ?? ComponentType.LINK,
+      priority: mp.config?.priority ?? 0
+    })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [createDropdownMountPoints]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", p: 2 }, /* @__PURE__ */ React.createElement(CircularProgress, null), /* @__PURE__ */ React.createElement(Typography, { variant: "body1", sx: { ml: 2 } }, "Loading templates..."));
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", p: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "error" }, "Error fetching templates: ", error));
+  }
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
       buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create ", /* @__PURE__ */ React.createElement(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })),
-      menuSections,
-      menuBottomItems,
       buttonProps: {
         color: "primary",
         variant: "contained",
@@ -72,9 +68,18 @@ const CreateDropdown = ({
       buttonClick: handleMenu,
       anchorEl,
       setAnchorEl
-    }
+    },
+    menuSections.map((section, index) => /* @__PURE__ */ React.createElement(
+      section.Component,
+      {
+        key: `menu-section-${index.toString()}`,
+        hideDivider: index === menuSections.length - 1,
+        handleClose: () => setAnchorEl(null),
+        ...section.type === ComponentType.LIST ? { items } : {}
+      }
+    ))
   );
 };
 
-export { CreateDropdown as default };
+export { CreateDropdown };
 //# sourceMappingURL=CreateDropdown.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/CreateDropdown.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 React from 'react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\nimport CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';\nimport { MenuItemConfig } from './MenuSection';\n\ninterface CreateButtonProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst models = [\n  {\n    key: 'key-1',\n    value: 'argocd-template',\n    label: 'Add ArgoCD to an existing project',\n  },\n  {\n    key: 'key-2',\n    value: 'create-backend-plugin',\n    label: 'Create Backend Plugin Template',\n  },\n  {\n    key: 'key-3',\n    value: 'create-frontend-plugin',\n    label: 'Create Frontend Plugin Template',\n  },\n  {\n    key: 'key-4',\n    value: 'create-react-app-template-test-annotator',\n    label: 'Create React App Template with annotations',\n  },\n  {\n    key: 'key-5',\n    value: 'define-ansible-job-template',\n    label: 'Ansible Job Template',\n  },\n];\n\nconst menuBottomItems: MenuItemConfig[] = [\n  {\n    itemKey: 'custom',\n    icon: CategoryOutlinedIcon,\n    label: 'Register a component',\n    subLabel: 'Import it to the catalog page',\n    link: '/catalog-import',\n  },\n];\nconst CreateDropdown: React.FC<CreateButtonProps> = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  const menuSections = [\n    {\n      sectionKey: 'templates',\n      sectionLabel: 'Use a template',\n      optionalLinkLabel: 'All templates',\n      optionalLink: '/create',\n      items: models.map(m => ({\n        itemKey: m.key,\n        label: m.label,\n        link: `/create/templates/default/${m.value}`,\n      })),\n      handleClose: () => setAnchorEl(null),\n    },\n  ];\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </>\n      }\n      menuSections={menuSections}\n      menuBottomItems={menuBottomItems}\n      buttonProps={{\n        color: 'primary',\n        variant: 'contained',\n        sx: { mr: 2 },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    />\n  );\n};\n\nexport default CreateDropdown;\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,MAAS,GAAA;AAAA,EACb;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,iBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,uBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,wBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,0CAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,6BAAA;AAAA,IACP,KAAO,EAAA;AAAA;AAEX,CAAA;AAEA,MAAM,eAAoC,GAAA;AAAA,EACxC;AAAA,IACE,OAAS,EAAA,QAAA;AAAA,IACT,IAAM,EAAA,oBAAA;AAAA,IACN,KAAO,EAAA,sBAAA;AAAA,IACP,QAAU,EAAA,+BAAA;AAAA,IACV,IAAM,EAAA;AAAA;AAEV,CAAA;AACA,MAAM,iBAA8C,CAAC;AAAA,EACnD,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,UAAY,EAAA,WAAA;AAAA,MACZ,YAAc,EAAA,gBAAA;AAAA,MACd,iBAAmB,EAAA,eAAA;AAAA,MACnB,YAAc,EAAA,SAAA;AAAA,MACd,KAAA,EAAO,MAAO,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACtB,SAAS,CAAE,CAAA,GAAA;AAAA,QACX,OAAO,CAAE,CAAA,KAAA;AAAA,QACT,IAAA,EAAM,CAA6B,0BAAA,EAAA,CAAA,CAAE,KAAK,CAAA;AAAA,OAC1C,CAAA,CAAA;AAAA,MACF,WAAA,EAAa,MAAM,WAAA,CAAY,IAAI;AAAA;AACrC,GACF;AACA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,kBACI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,SAAA,kBACQ,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,IAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CACnD,CAAA;AAAA,MAEF,YAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,OAAS,EAAA,WAAA;AAAA,QACT,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE;AAAA,OACd;AAAA,MACA,WAAa,EAAA,UAAA;AAAA,MACb,QAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"CreateDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/CreateDropdown.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 React, { useEffect, useMemo, useState } from 'react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\nimport { MenuItemConfig } from './MenuSection';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Entity } from '@backstage/catalog-model';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { ComponentType } from '../../types';\nimport { HeaderLink } from '../HeaderLinkComponent/HeaderLink';\nimport { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints';\n\n/**\n * @public\n * Create button properties\n */\nexport interface CreateButtonProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\n/**\n * @public\n * Props for each dropdown section component\n */\ninterface SectionComponentProps {\n  handleClose: () => void;\n  hideDivider: boolean;\n  items?: MenuItemConfig[];\n}\n\nexport const CreateDropdown = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}: CreateButtonProps) => {\n  const catalogApi = useApi(catalogApiRef);\n  const [entities, setEntities] = useState<Entity[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const createDropdownMountPoints = useCreateDropdownMountPoints();\n\n  useEffect(() => {\n    const fetchEntities = async () => {\n      try {\n        const response = await catalogApi.getEntities({\n          filter: { kind: ['Template'] },\n        });\n        setEntities(response.items);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchEntities();\n  }, [catalogApi]);\n\n  const items = useMemo(() => {\n    return entities\n      .filter(e => e.kind === 'Template')\n      .map(m => ({\n        Component: HeaderLink as React.ComponentType,\n        type: ComponentType.LINK,\n        label: m.metadata.title ?? m.metadata.name,\n        link: `/create/templates/default/${m.metadata.name}`,\n      }));\n  }, [entities]);\n\n  const menuSections = useMemo(() => {\n    return (createDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component as React.ComponentType<SectionComponentProps>,\n        type: mp.config?.type ?? ComponentType.LINK,\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [createDropdownMountPoints]);\n\n  if (loading) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <CircularProgress />\n        <Typography variant=\"body1\" sx={{ ml: 2 }}>\n          Loading templates...\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <Typography variant=\"body1\" color=\"error\">\n          Error fetching templates: {error}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </>\n      }\n      buttonProps={{\n        color: 'primary',\n        variant: 'contained',\n        sx: { mr: 2 },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    >\n      {menuSections.map((section, index) => (\n        <section.Component\n          key={`menu-section-${index.toString()}`}\n          hideDivider={index === menuSections.length - 1}\n          handleClose={() => setAnchorEl(null)}\n          {...(section.type === ComponentType.LIST ? { items } : {})}\n        />\n      ))}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,8 @@
 import React from 'react';
 import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import { Link } from '@backstage/core-components';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import MenuSection from './MenuSection.esm.js';
 
 const Listbox = styled("ul")(
   ({ theme }) => `
@@ -29,14 +25,12 @@ const Listbox = styled("ul")(
 );
 const HeaderDropdownComponent = ({
   buttonContent,
-  menuSections = [],
-  menuBottomItems = [],
+  children,
   buttonProps,
   buttonClick,
   anchorEl,
   setAnchorEl
 }) => {
-  const shouldHideDivider = (index) => menuSections.length === 1 && index === menuSections.length - 1 && menuBottomItems.length === 0;
   return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -68,48 +62,7 @@ const HeaderDropdownComponent = ({
         }
       }
     },
-    /* @__PURE__ */ React.createElement(Listbox, { role: "menu" }, menuSections.map((section, index) => /* @__PURE__ */ React.createElement(
-      MenuSection,
-      {
-        key: `menu-section-${section.sectionKey}`,
-        ...{ hideDivider: shouldHideDivider(index), ...section },
-        handleClose: section.handleClose
-      }
-    )), menuBottomItems.map(
-      ({ itemKey, icon: Icon, label, subLabel, link }) => /* @__PURE__ */ React.createElement(
-        MenuItem,
-        {
-          key: `menu-item-${itemKey}`,
-          sx: { my: "8px", "&:hover": { background: "transparent" } },
-          onClick: () => setAnchorEl(null),
-          disableRipple: true
-        },
-        link && /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            to: link,
-            style: {
-              display: "flex",
-              color: "inherit",
-              alignItems: "center",
-              textDecoration: "none"
-            }
-          },
-          Icon && /* @__PURE__ */ React.createElement(
-            Icon,
-            {
-              fontSize: "small",
-              style: {
-                marginRight: "0.5rem",
-                flexShrink: 0,
-                color: "slategray"
-              }
-            }
-          ),
-          /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, label), subLabel && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "text.secondary" }, subLabel))
-        )
-      )
-    ))
+    /* @__PURE__ */ React.createElement(Listbox, { role: "menu" }, children)
   ));
 };