moved ScaffolderWizardContextMenu.tsx

Signed-off-by: kosukeKK <koskacts@gmail.com>

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -16,7 +16,10 @@
 import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
-import { stringifyEntityRef } from '@backstage/catalog-model';
+import {
+  stringifyEntityRef,
+  ANNOTATION_EDIT_URL,
+} from '@backstage/catalog-model';
 import {
   AnalyticsContext,
   useApi,
@@ -33,7 +36,6 @@ import {
 } from '@backstage/plugin-scaffolder-react';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 
-import { ScaffolderWizardContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
 import { Workflow } from '@backstage/plugin-scaffolder-react/alpha';
 import { JsonValue } from '@backstage/types';
 import { Header, Page } from '@backstage/core-components';
@@ -44,6 +46,11 @@ import {
   selectedTemplateRouteRef,
 } from '../../routes';
 
+import {
+  TemplateWizardPageContextMenu,
+  TemplateWizardPageContextMenuProps,
+} from './TemplateWizardPageContextMenu';
+
 /**
  * @alpha
  */
@@ -80,17 +87,18 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
 
   const { value: editUrl } = useAsync(async () => {
     const data = await catalogApi.getEntityByRef(templateRef);
-    return data?.metadata.annotations?.['backstage.io/edit-url'] || '';
+    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL] || '';
   }, [templateRef, catalogApi]);
 
-  const scaffolderWizardContextMenuProps = {
-    onEditorClicked:
-      editUrl !== ''
-        ? () => {
-            window.open(editUrl, '_blank');
-          }
-        : undefined,
-  };
+  const templateWizardPageContextMenuProps: TemplateWizardPageContextMenuProps =
+    {
+      onEditorClicked:
+        editUrl !== ''
+          ? () => {
+              window.open(editUrl, '_blank');
+            }
+          : undefined,
+    };
 
   const onCreate = async (values: Record<string, JsonValue>) => {
     const { taskId } = await scaffolderApi.scaffold({
@@ -113,7 +121,9 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
           subtitle="Create new software components using standard templates in your organization"
           {...props.headerOptions}
         >
-          <ScaffolderWizardContextMenu {...scaffolderWizardContextMenuProps} />
+          <TemplateWizardPageContextMenu
+            {...templateWizardPageContextMenuProps}
+          />
         </Header>
         <Workflow
           namespace={namespace}

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPageContextMenu.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import { makeStyles } from '@material-ui/core/styles';
+import Edit from '@material-ui/icons/Edit';
+import MoreVert from '@material-ui/icons/MoreVert';
+import React, { useState } from 'react';
+
+const useStyles = makeStyles(theme => ({
+  button: {
+    color: theme.page.fontColor,
+  },
+}));
+
+export type TemplateWizardPageContextMenuProps = {
+  onEditorClicked?: () => void;
+};
+
+export function TemplateWizardPageContextMenu(
+  props: TemplateWizardPageContextMenuProps,
+) {
+  const { onEditorClicked } = props;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
+
+  if (!onEditorClicked) {
+    return null;
+  }
+
+  const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onClose = () => {
+    setAnchorEl(undefined);
+  };
+
+  return (
+    <>
+      <IconButton
+        id="long-menu"
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-expanded={!!anchorEl}
+        aria-haspopup="true"
+        role="button"
+        onClick={onOpen}
+        data-testid="menu-button"
+        color="inherit"
+        className={classes.button}
+      >
+        <MoreVert />
+      </IconButton>
+      <Popover
+        aria-labelledby="long-menu"
+        open={Boolean(anchorEl)}
+        onClose={onClose}
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <MenuList>
+          {onEditorClicked && (
+            <MenuItem onClick={onEditorClicked}>
+              <ListItemIcon>
+                <Edit fontSize="small" />
+              </ListItemIcon>
+              <ListItemText primary="Edit Configuration" />
+            </MenuItem>
+          )}
+        </MenuList>
+      </Popover>
+    </>
+  );
+}