add templating extensions page

Signed-off-by: Matt Benson <gudnabrsam@gmail.com>

plugins/scaffolder-react/src/api/types.ts

@@ -86,7 +86,7 @@ export type Action = {
 export type ListActionsResponse = Array<Action>;
 
 /**
- * The response shape for a single filter in the `listTemplateExtensions` call to the `scaffolder-backend`
+ * The response shape for a single filter in the `listTemplatingExtensions` call to the `scaffolder-backend`
  *
  * @public
  */
@@ -101,7 +101,7 @@ export type TemplateFilter = {
 };
 
 /**
- * The response shape for a single global function in the `listTemplateExtensions` call to the `scaffolder-backend`
+ * The response shape for a single global function in the `listTemplatingExtensions` call to the `scaffolder-backend`
  *
  * @public
  */
@@ -115,7 +115,7 @@ export type TemplateGlobalFunction = {
 };
 
 /**
- * The response shape for a single global value in the `listTemplateExtensions` call to the `scaffolder-backend`
+ * The response shape for a single global value in the `listTemplatingExtensions` call to the `scaffolder-backend`
  *
  * @public
  */
@@ -125,7 +125,7 @@ export type TemplateGlobalValue = {
 };
 
 /**
- * The response shape for the `listTemplateExtensions` call to the `scaffolder-backend`
+ * The response shape for the `listTemplatingExtensions` call to the `scaffolder-backend`
  *
  * @public
  */

plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx

@@ -26,6 +26,7 @@ import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import Description from '@material-ui/icons/Description';
 import Edit from '@material-ui/icons/Edit';
 import List from '@material-ui/icons/List';
+import Functions from '@material-ui/icons/Functions';
 import MoreVert from '@material-ui/icons/MoreVert';
 import { SyntheticEvent, useState } from 'react';
 import { usePermission } from '@backstage/plugin-permission-react';
@@ -48,6 +49,7 @@ export type ScaffolderPageContextMenuProps = {
   onActionsClicked?: () => void;
   onTasksClicked?: () => void;
   onCreateClicked?: () => void;
+  onTemplatingExtensionsClicked?: () => void;
 };
 
 /**
@@ -57,8 +59,13 @@ export function ScaffolderPageContextMenu(
   props: ScaffolderPageContextMenuProps,
 ) {
   const { t } = useTranslationRef(scaffolderReactTranslationRef);
-  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } =
-    props;
+  const {
+    onEditorClicked,
+    onActionsClicked,
+    onTasksClicked,
+    onCreateClicked,
+    onTemplatingExtensionsClicked,
+  } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
@@ -71,10 +78,13 @@ export function ScaffolderPageContextMenu(
   });
 
   if (
-    !onEditorClicked &&
-    !onActionsClicked &&
-    !onTasksClicked &&
-    !onCreateClicked
+    !(
+      onEditorClicked ||
+      onActionsClicked ||
+      onTasksClicked ||
+      onCreateClicked ||
+      onTemplatingExtensionsClicked
+    )
   ) {
     return null;
   }
@@ -132,6 +142,18 @@ export function ScaffolderPageContextMenu(
               />
             </MenuItem>
           )}
+          {onTemplatingExtensionsClicked && (
+            <MenuItem onClick={onTemplatingExtensionsClicked}>
+              <ListItemIcon>
+                <Functions fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary={t(
+                  'scaffolderPageContextMenu.templatingExtensionsLabel',
+                )}
+              />
+            </MenuItem>
+          )}
           {onActionsClicked && (
             <MenuItem onClick={onActionsClicked}>
               <ListItemIcon>

plugins/scaffolder-react/src/translation.ts

@@ -29,6 +29,7 @@ export const scaffolderReactTranslationRef = createTranslationRef({
       editorLabel: 'Manage Templates',
       actionsLabel: 'Installed Actions',
       tasksLabel: 'Task List',
+      templatingExtensionsLabel: 'Templating Extensions',
     },
     stepper: {
       backButtonText: 'Back',