Merge branch 'main' of https://github.com/janus-idp/backstage-showcase …

…into add-scaffolder-from-processor

packages/app/src/components/catalog/EntityPage/ContextMenuAwareEntityLayout.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode, useMemo, useState } from 'react';
+import { EntityLayout } from '@backstage/plugin-catalog';
+import getMountPointData from '../../../utils/dynamicUI/getMountPointData';
+import { MenuIcon } from '../../Root/Root';
+import { IconComponent } from '@backstage/core-plugin-api';
+
+const makeIcon =
+  (iconName: string): IconComponent =>
+  () => <MenuIcon icon={iconName} />;
+
+export const ContextMenuAwareEntityLayout = (props: {
+  children?: ReactNode;
+}) => {
+  const contextMenuElements =
+    getMountPointData<React.ComponentType<React.PropsWithChildren<any>>>(
+      `entity.context.menu`,
+    );
+
+  const [openStates, setOpenStates] = useState(
+    new Array<boolean>(contextMenuElements.length).fill(false),
+  );
+
+  const changeValueAt = (
+    values: boolean[],
+    index: number,
+    newValue: boolean,
+  ): boolean[] => values.map((v, i) => (i === index ? newValue : v));
+
+  const extraMenuItems = useMemo(
+    () =>
+      contextMenuElements.map((e, index) => {
+        const Icon = makeIcon(e.config.props?.icon ?? 'icon');
+        return {
+          title: e.config.props?.title ?? '<title>',
+          Icon,
+          onClick: () => {
+            setOpenStates(changeValueAt(openStates, index, true));
+          },
+        };
+      }),
+    [contextMenuElements, openStates],
+  );
+
+  return (
+    <>
+      <EntityLayout
+        UNSTABLE_extraContextMenuItems={extraMenuItems}
+        UNSTABLE_contextMenuOptions={{
+          disableUnregister: 'visible',
+        }}
+      >
+        {props.children}
+      </EntityLayout>
+      {contextMenuElements.map(({ Component }, index) => (
+        <Component
+          key={`entity.context.menu-${Component.displayName}`}
+          open={openStates[index]}
+          onClose={() => setOpenStates(changeValueAt(openStates, index, false))}
+        />
+      ))}
+    </>
+  );
+};

packages/app/src/components/catalog/EntityPage/EntityPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { EntityLayout } from '@backstage/plugin-catalog';
 import { dynamicEntityTab, DynamicEntityTabProps } from './DynamicEntityTab';
 import { defaultTabs, tabRules, tabChildren } from './defaultTabs';
+import { ContextMenuAwareEntityLayout } from './ContextMenuAwareEntityLayout';
 
 /**
  * Displays the tabs and content for a catalog entity
@@ -16,7 +16,7 @@ export const entityPage = (
   > = {},
 ) => {
   return (
-    <EntityLayout>
+    <ContextMenuAwareEntityLayout>
       {Object.entries({ ...defaultTabs, ...entityTabOverrides }).map(
         ([path, config]) => {
           return dynamicEntityTab({
@@ -27,6 +27,6 @@ export const entityPage = (
           } as DynamicEntityTabProps);
         },
       )}
-    </EntityLayout>
+    </ContextMenuAwareEntityLayout>
   );
 };