feat: create custom fields route

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/five-gorillas-pay.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Create a separate route for the custom fields explorer so we refresh it without being redirected to scaffolder edit page.

plugins/scaffolder/api-report.md

@@ -613,6 +613,7 @@ export const scaffolderPlugin: BackstagePlugin<
     listTasks: SubRouteRef<undefined>;
     edit: SubRouteRef<undefined>;
     editor: SubRouteRef<undefined>;
+    customFields: SubRouteRef<undefined>;
   },
   {
     registerComponent: ExternalRouteRef<undefined, true>;

plugins/scaffolder/src/components/Router/Router.tsx

@@ -35,6 +35,7 @@ import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';
 import {
   actionsRouteRef,
   editorRouteRef,
+  customFieldsRouteRef,
   editRouteRef,
   scaffolderListTaskRouteRef,
   scaffolderTaskRouteRef,
@@ -51,8 +52,11 @@ import {
 } from '@backstage/plugin-scaffolder/alpha';
 import { TemplateListPage, TemplateWizardPage } from '../../next';
 import { OngoingTask } from '../OngoingTask';
-import { TemplateEditorPage } from '../../next/TemplateEditorPage';
-import { TemplatePage } from '../../next/TemplateEditorPage/TemplatePage';
+import {
+  TemplatePage,
+  TemplateEditorPage,
+  CustomFieldsPage,
+} from '../../next/TemplateEditorPage';
 
 /**
  * The Props for the Scaffolder Router
@@ -173,6 +177,14 @@ export const Router = (props: PropsWithChildren<RouterProps>) => {
           </SecretsContextProvider>
         }
       />
+      <Route
+        path={customFieldsRouteRef.path}
+        element={
+          <SecretsContextProvider>
+            <CustomFieldsPage fieldExtensions={fieldExtensions} />
+          </SecretsContextProvider>
+        }
+      />
 
       <Route path={actionsRouteRef.path} element={<ActionsPage />} />
       <Route

plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldsPage.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 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 React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Page, Header, Content } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
+
+import { editRouteRef } from '../../routes';
+import { scaffolderTranslationRef } from '../../translation';
+
+import { CustomFieldExplorer } from './CustomFieldExplorer';
+
+interface CustomFieldsPageProps {
+  fieldExtensions?: FieldExtensionOptions<any, any>[];
+}
+
+export function CustomFieldsPage(props: CustomFieldsPageProps) {
+  const navigate = useNavigate();
+  const editLink = useRouteRef(editRouteRef);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+
+  const handleClose = useCallback(() => {
+    navigate(editLink());
+  }, [navigate, editLink]);
+
+  return (
+    <Page themeId="home">
+      <Header
+        title={t('templateEditorPage.title')}
+        subtitle={t('templateEditorPage.subtitle')}
+      />
+      <Content>
+        <CustomFieldExplorer
+          customFieldExtensions={props.fieldExtensions}
+          onClose={handleClose}
+        />
+      </Content>
+    </Page>
+  );
+}

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx

@@ -19,7 +19,6 @@ import {
   TemplateDirectoryAccess,
   WebFileSystemAccess,
 } from '../../lib/filesystem';
-import { CustomFieldExplorer } from './CustomFieldExplorer';
 import { TemplateFormPreviewer } from './TemplateFormPreviewer';
 import {
   FieldExtensionOptions,
@@ -33,6 +32,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import {
   actionsRouteRef,
   editorRouteRef,
+  customFieldsRouteRef,
   rootRouteRef,
   scaffolderListTaskRouteRef,
 } from '../../routes';
@@ -70,6 +70,7 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
   const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
   const createLink = useRouteRef(rootRouteRef);
   const editorLink = useRouteRef(editorRouteRef);
+  const customFieldsLink = useRouteRef(customFieldsRouteRef);
   const { t } = useTranslationRef(scaffolderTranslationRef);
 
   const scaffolderPageContextMenuProps = {
@@ -90,13 +91,6 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
         formProps={props.formProps}
       />
     );
-  } else if (selection?.type === 'field-explorer') {
-    content = (
-      <CustomFieldExplorer
-        customFieldExtensions={props.customFieldExtensions}
-        onClose={() => setSelection(undefined)}
-      />
-    );
   } else {
     content = (
       <Content>
@@ -119,7 +113,7 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
             } else if (option === 'form') {
               setSelection({ type: 'form' });
             } else if (option === 'field-explorer') {
-              setSelection({ type: 'field-explorer' });
+              navigate(customFieldsLink());
             }
           }}
         />

plugins/scaffolder/src/next/TemplateEditorPage/index.ts

@@ -16,6 +16,7 @@
 
 export { TemplatePage } from './TemplatePage';
 export { TemplateEditorPage } from './TemplateEditorPage';
+export { CustomFieldsPage } from './CustomFieldsPage';
 export type { ScaffolderCustomFieldExplorerClassKey } from './CustomFieldExplorer';
 export type { ScaffolderTemplateEditorClassKey } from './TemplateEditor';
 export type { ScaffolderTemplateFormPreviewerClassKey } from './TemplateFormPreviewer';

plugins/scaffolder/src/plugin.tsx

@@ -69,6 +69,7 @@ import {
   actionsRouteRef,
   editRouteRef,
   editorRouteRef,
+  customFieldsRouteRef,
 } from './routes';
 import {
   MyGroupsPicker,
@@ -109,6 +110,7 @@ export const scaffolderPlugin = createPlugin({
     listTasks: scaffolderListTaskRouteRef,
     edit: editRouteRef,
     editor: editorRouteRef,
+    customFields: customFieldsRouteRef,
   },
   externalRoutes: {
     registerComponent: registerComponentRouteRef,

plugins/scaffolder/src/routes.ts

@@ -84,3 +84,9 @@ export const editorRouteRef = createSubRouteRef({
   parent: rootRouteRef,
   path: '/template',
 });
+
+export const customFieldsRouteRef = createSubRouteRef({
+  id: 'scaffolder/edit',
+  parent: rootRouteRef,
+  path: '/custom-fields',
+});