@backstage/plugin-scaffolder 1.34.0-next.1 → 1.34.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @backstage/plugin-scaffolder
 
+## 1.34.0-next.3
+
+### Minor Changes
+
+- b1c0696: Add resizable panels width for the editor and preview panels in the template editor and template form playground layouts. Users can now resize these panels by dragging the divider between the two areas.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.11.0-next.2
+  - @backstage/core-compat-api@0.5.0-next.3
+  - @backstage/core-components@0.17.5-next.2
+
+## 1.34.0-next.2
+
+### Patch Changes
+
+- e4ddf22: Internal update to align with new blueprint parameter naming in the new frontend system.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.11.0-next.1
+  - @backstage/core-compat-api@0.5.0-next.2
+  - @backstage/plugin-catalog-react@1.20.0-next.2
+  - @backstage/core-components@0.17.5-next.1
+  - @backstage/catalog-client@1.11.0-next.0
+  - @backstage/catalog-model@1.7.5
+  - @backstage/core-plugin-api@1.10.9
+  - @backstage/errors@1.2.7
+  - @backstage/integration@1.17.1
+  - @backstage/integration-react@1.2.9
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.5
+  - @backstage/plugin-permission-react@0.4.36
+  - @backstage/plugin-scaffolder-common@1.7.0-next.0
+  - @backstage/plugin-scaffolder-react@1.19.0-next.1
+
 ## 1.34.0-next.1
 
 ### Minor Changes

package/dist/alpha/api/FormDecoratorsApi.esm.js

@@ -27,7 +27,7 @@ const formDecoratorsApi = ApiBlueprint.makeWithOverrides({
       (e) => e.get(FormDecoratorBlueprint.dataRefs.formDecoratorLoader)
     );
     return originalFactory(
-      (define) => define({
+      (defineParams) => defineParams({
         api: formDecoratorsApiRef,
         deps: {},
         factory: () => DefaultScaffolderFormDecoratorsApi.create({

package/dist/alpha/api/FormDecoratorsApi.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDecoratorsApi.esm.js","sources":["../../../src/alpha/api/FormDecoratorsApi.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 {\n  ApiBlueprint,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormDecoratorsApi } from './types';\nimport { ScaffolderFormDecorator } from '@backstage/plugin-scaffolder-react/alpha';\nimport { formDecoratorsApiRef } from './ref';\nimport { FormDecoratorBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\n\n/** @alpha */\nexport class DefaultScaffolderFormDecoratorsApi\n  implements ScaffolderFormDecoratorsApi\n{\n  private constructor(\n    private readonly options: {\n      decorators: Array<ScaffolderFormDecorator>;\n    },\n  ) {}\n\n  static create(options?: { decorators: ScaffolderFormDecorator[] }) {\n    return new DefaultScaffolderFormDecoratorsApi(\n      options ?? { decorators: [] },\n    );\n  }\n\n  async getFormDecorators(): Promise<ScaffolderFormDecorator[]> {\n    return this.options.decorators;\n  }\n}\n\n/** @alpha */\nexport const formDecoratorsApi = ApiBlueprint.makeWithOverrides({\n  name: 'form-decorators',\n  inputs: {\n    formDecorators: createExtensionInput([\n      FormDecoratorBlueprint.dataRefs.formDecoratorLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formDecorators = inputs.formDecorators.map(e =>\n      e.get(FormDecoratorBlueprint.dataRefs.formDecoratorLoader),\n    );\n\n    return originalFactory(define =>\n      define({\n        api: formDecoratorsApiRef,\n        deps: {},\n        factory: () =>\n          DefaultScaffolderFormDecoratorsApi.create({\n            decorators: formDecorators,\n          }),\n      }),\n    );\n  },\n});\n"],"names":[],"mappings":";;;;AA0BO,MAAM,kCAEb,CAAA;AAAA,EACU,YACW,OAGjB,EAAA;AAHiB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAGhB,EAEH,OAAO,OAAO,OAAqD,EAAA;AACjE,IAAA,OAAO,IAAI,kCAAA;AAAA,MACT,OAAW,IAAA,EAAE,UAAY,EAAA,EAAG;AAAA,KAC9B;AAAA;AACF,EAEA,MAAM,iBAAwD,GAAA;AAC5D,IAAA,OAAO,KAAK,OAAQ,CAAA,UAAA;AAAA;AAExB;AAGa,MAAA,iBAAA,GAAoB,aAAa,iBAAkB,CAAA;AAAA,EAC9D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,gBAAgB,oBAAqB,CAAA;AAAA,MACnC,uBAAuB,QAAS,CAAA;AAAA,KACjC;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,cAAA,GAAiB,OAAO,cAAe,CAAA,GAAA;AAAA,MAAI,CAC/C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,sBAAA,CAAuB,SAAS,mBAAmB;AAAA,KAC3D;AAEA,IAAO,OAAA,eAAA;AAAA,MAAgB,YACrB,MAAO,CAAA;AAAA,QACL,GAAK,EAAA,oBAAA;AAAA,QACL,MAAM,EAAC;AAAA,QACP,OAAA,EAAS,MACP,kCAAA,CAAmC,MAAO,CAAA;AAAA,UACxC,UAAY,EAAA;AAAA,SACb;AAAA,OACJ;AAAA,KACH;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FormDecoratorsApi.esm.js","sources":["../../../src/alpha/api/FormDecoratorsApi.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 {\n  ApiBlueprint,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormDecoratorsApi } from './types';\nimport { ScaffolderFormDecorator } from '@backstage/plugin-scaffolder-react/alpha';\nimport { formDecoratorsApiRef } from './ref';\nimport { FormDecoratorBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\n\n/** @alpha */\nexport class DefaultScaffolderFormDecoratorsApi\n  implements ScaffolderFormDecoratorsApi\n{\n  private constructor(\n    private readonly options: {\n      decorators: Array<ScaffolderFormDecorator>;\n    },\n  ) {}\n\n  static create(options?: { decorators: ScaffolderFormDecorator[] }) {\n    return new DefaultScaffolderFormDecoratorsApi(\n      options ?? { decorators: [] },\n    );\n  }\n\n  async getFormDecorators(): Promise<ScaffolderFormDecorator[]> {\n    return this.options.decorators;\n  }\n}\n\n/** @alpha */\nexport const formDecoratorsApi = ApiBlueprint.makeWithOverrides({\n  name: 'form-decorators',\n  inputs: {\n    formDecorators: createExtensionInput([\n      FormDecoratorBlueprint.dataRefs.formDecoratorLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formDecorators = inputs.formDecorators.map(e =>\n      e.get(FormDecoratorBlueprint.dataRefs.formDecoratorLoader),\n    );\n\n    return originalFactory(defineParams =>\n      defineParams({\n        api: formDecoratorsApiRef,\n        deps: {},\n        factory: () =>\n          DefaultScaffolderFormDecoratorsApi.create({\n            decorators: formDecorators,\n          }),\n      }),\n    );\n  },\n});\n"],"names":[],"mappings":";;;;AA0BO,MAAM,kCAEb,CAAA;AAAA,EACU,YACW,OAGjB,EAAA;AAHiB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAGhB,EAEH,OAAO,OAAO,OAAqD,EAAA;AACjE,IAAA,OAAO,IAAI,kCAAA;AAAA,MACT,OAAW,IAAA,EAAE,UAAY,EAAA,EAAG;AAAA,KAC9B;AAAA;AACF,EAEA,MAAM,iBAAwD,GAAA;AAC5D,IAAA,OAAO,KAAK,OAAQ,CAAA,UAAA;AAAA;AAExB;AAGa,MAAA,iBAAA,GAAoB,aAAa,iBAAkB,CAAA;AAAA,EAC9D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,gBAAgB,oBAAqB,CAAA;AAAA,MACnC,uBAAuB,QAAS,CAAA;AAAA,KACjC;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,cAAA,GAAiB,OAAO,cAAe,CAAA,GAAA;AAAA,MAAI,CAC/C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,sBAAA,CAAuB,SAAS,mBAAmB;AAAA,KAC3D;AAEA,IAAO,OAAA,eAAA;AAAA,MAAgB,kBACrB,YAAa,CAAA;AAAA,QACX,GAAK,EAAA,oBAAA;AAAA,QACL,MAAM,EAAC;AAAA,QACP,OAAA,EAAS,MACP,kCAAA,CAAmC,MAAO,CAAA;AAAA,UACxC,UAAY,EAAA;AAAA,SACb;AAAA,OACJ;AAAA,KACH;AAAA;AAEJ,CAAC;;;;"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditor.esm.js

@@ -5,7 +5,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import { editRouteRef } from '../../../routes.esm.js';
 import { useTemplateDirectory } from './useTemplateDirectory.esm.js';
 import { DirectoryEditorProvider } from './DirectoryEditorContext.esm.js';
-import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorLayoutBrowser, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutConsole } from './TemplateEditorLayout.esm.js';
+import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorLayoutBrowser, TemplateEditorPanels, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutConsole } from './TemplateEditorLayout.esm.js';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar.esm.js';
 import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu.esm.js';
 import { TemplateEditorBrowser } from './TemplateEditorBrowser.esm.js';
@@ -38,16 +38,22 @@ const TemplateEditor = (props) => {
       }
     ) }) }),
     /* @__PURE__ */ jsx(TemplateEditorLayoutBrowser, { children: /* @__PURE__ */ jsx(TemplateEditorBrowser, { onClose: closeDirectory }) }),
-    /* @__PURE__ */ jsx(TemplateEditorLayoutFiles, { children: /* @__PURE__ */ jsx(TemplateEditorTextArea.DirectoryEditor, { errorText }) }),
-    /* @__PURE__ */ jsx(TemplateEditorLayoutPreview, { children: /* @__PURE__ */ jsx(
-      TemplateEditorForm.DirectoryEditorDryRun,
+    /* @__PURE__ */ jsx(
+      TemplateEditorPanels,
       {
-        setErrorText,
-        fieldExtensions,
-        layouts,
-        formProps
+        autoSaveId: "template-editor",
+        files: /* @__PURE__ */ jsx(TemplateEditorLayoutFiles, { children: /* @__PURE__ */ jsx(TemplateEditorTextArea.DirectoryEditor, { errorText }) }),
+        preview: /* @__PURE__ */ jsx(TemplateEditorLayoutPreview, { children: /* @__PURE__ */ jsx(
+          TemplateEditorForm.DirectoryEditorDryRun,
+          {
+            setErrorText,
+            fieldExtensions,
+            layouts,
+            formProps
+          }
+        ) })
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(TemplateEditorLayoutConsole, { children: /* @__PURE__ */ jsx(DryRunResults, {}) })
   ] }) }) });
 };

package/dist/alpha/components/TemplateEditorPage/TemplateEditor.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditor.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditor.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 */\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport type {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport { useTemplateDirectory } from './useTemplateDirectory';\nimport { DirectoryEditorProvider } from './DirectoryEditorContext';\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutBrowser,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n  TemplateEditorLayoutConsole,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport { TemplateEditorBrowser } from './TemplateEditorBrowser';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { DryRunProvider } from './DryRunContext';\nimport { DryRunResults } from './DryRunResults';\n\n/** @public */\nexport type ScaffolderTemplateEditorClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'browser'\n  | 'editor'\n  | 'preview'\n  | 'results';\n\nexport const TemplateEditor = (props: {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const { layouts, formProps, fieldExtensions } = props;\n  const [errorText, setErrorText] = useState<string>();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const {\n    directory,\n    openDirectory: handleOpenDirectory,\n    createDirectory: handleCreateDirectory,\n    closeDirectory,\n  } = useTemplateDirectory();\n\n  const handleCloseDirectory = useCallback(() => {\n    closeDirectory().then(() => navigate(editLink()));\n  }, [closeDirectory, navigate, editLink]);\n\n  return (\n    <DirectoryEditorProvider directory={directory}>\n      <DryRunProvider>\n        <TemplateEditorLayout>\n          <TemplateEditorLayoutToolbar>\n            <TemplateEditorToolbar fieldExtensions={fieldExtensions}>\n              <TemplateEditorToolbarFileMenu\n                onOpenDirectory={handleOpenDirectory}\n                onCreateDirectory={handleCreateDirectory}\n                onCloseDirectory={handleCloseDirectory}\n              />\n            </TemplateEditorToolbar>\n          </TemplateEditorLayoutToolbar>\n          <TemplateEditorLayoutBrowser>\n            <TemplateEditorBrowser onClose={closeDirectory} />\n          </TemplateEditorLayoutBrowser>\n          <TemplateEditorLayoutFiles>\n            <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />\n          </TemplateEditorLayoutFiles>\n          <TemplateEditorLayoutPreview>\n            <TemplateEditorForm.DirectoryEditorDryRun\n              setErrorText={setErrorText}\n              fieldExtensions={fieldExtensions}\n              layouts={layouts}\n              formProps={formProps}\n            />\n          </TemplateEditorLayoutPreview>\n          <TemplateEditorLayoutConsole>\n            <DryRunResults />\n          </TemplateEditorLayoutConsole>\n        </TemplateEditorLayout>\n      </DryRunProvider>\n    </DirectoryEditorProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsDa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,SAAW,EAAA,eAAA,EAAoB,GAAA,KAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAiB,EAAA;AACnD,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,aAAe,EAAA,mBAAA;AAAA,IACf,eAAiB,EAAA,qBAAA;AAAA,IACjB;AAAA,MACE,oBAAqB,EAAA;AAEzB,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,cAAA,GAAiB,IAAK,CAAA,MAAM,QAAS,CAAA,QAAA,EAAU,CAAC,CAAA;AAAA,GAC/C,EAAA,CAAC,cAAgB,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA;AAEvC,EAAA,2BACG,uBAAwB,EAAA,EAAA,SAAA,EACvB,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,+BAAC,oBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,2BAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,qBAAA,EAAA,EAAsB,eACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,eAAiB,EAAA,mBAAA;AAAA,QACjB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,gBAAkB,EAAA;AAAA;AAAA,OAEtB,CACF,EAAA,CAAA;AAAA,wBACC,2BACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,qBAAsB,EAAA,EAAA,OAAA,EAAS,gBAAgB,CAClD,EAAA,CAAA;AAAA,wBACC,yBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,uBAAuB,eAAvB,EAAA,EAAuC,WAAsB,CAChE,EAAA,CAAA;AAAA,wBACC,2BACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,kBAAmB,CAAA,qBAAA;AAAA,MAAnB;AAAA,QACC,YAAA;AAAA,QACA,eAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,2BAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,CACjB,EAAA;AAAA,GAAA,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditor.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditor.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 */\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport type {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport { useTemplateDirectory } from './useTemplateDirectory';\nimport { DirectoryEditorProvider } from './DirectoryEditorContext';\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutBrowser,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n  TemplateEditorLayoutConsole,\n  TemplateEditorPanels,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport { TemplateEditorBrowser } from './TemplateEditorBrowser';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { DryRunProvider } from './DryRunContext';\nimport { DryRunResults } from './DryRunResults';\n\n/** @public */\nexport type ScaffolderTemplateEditorClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'browser'\n  | 'editor'\n  | 'preview'\n  | 'results';\n\nexport const TemplateEditor = (props: {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const { layouts, formProps, fieldExtensions } = props;\n  const [errorText, setErrorText] = useState<string>();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const {\n    directory,\n    openDirectory: handleOpenDirectory,\n    createDirectory: handleCreateDirectory,\n    closeDirectory,\n  } = useTemplateDirectory();\n\n  const handleCloseDirectory = useCallback(() => {\n    closeDirectory().then(() => navigate(editLink()));\n  }, [closeDirectory, navigate, editLink]);\n\n  return (\n    <DirectoryEditorProvider directory={directory}>\n      <DryRunProvider>\n        <TemplateEditorLayout>\n          <TemplateEditorLayoutToolbar>\n            <TemplateEditorToolbar fieldExtensions={fieldExtensions}>\n              <TemplateEditorToolbarFileMenu\n                onOpenDirectory={handleOpenDirectory}\n                onCreateDirectory={handleCreateDirectory}\n                onCloseDirectory={handleCloseDirectory}\n              />\n            </TemplateEditorToolbar>\n          </TemplateEditorLayoutToolbar>\n          <TemplateEditorLayoutBrowser>\n            <TemplateEditorBrowser onClose={closeDirectory} />\n          </TemplateEditorLayoutBrowser>\n          <TemplateEditorPanels\n            autoSaveId=\"template-editor\"\n            files={\n              <TemplateEditorLayoutFiles>\n                <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />\n              </TemplateEditorLayoutFiles>\n            }\n            preview={\n              <TemplateEditorLayoutPreview>\n                <TemplateEditorForm.DirectoryEditorDryRun\n                  setErrorText={setErrorText}\n                  fieldExtensions={fieldExtensions}\n                  layouts={layouts}\n                  formProps={formProps}\n                />\n              </TemplateEditorLayoutPreview>\n            }\n          />\n          <TemplateEditorLayoutConsole>\n            <DryRunResults />\n          </TemplateEditorLayoutConsole>\n        </TemplateEditorLayout>\n      </DryRunProvider>\n    </DirectoryEditorProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuDa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,SAAW,EAAA,eAAA,EAAoB,GAAA,KAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAiB,EAAA;AACnD,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,aAAe,EAAA,mBAAA;AAAA,IACf,eAAiB,EAAA,qBAAA;AAAA,IACjB;AAAA,MACE,oBAAqB,EAAA;AAEzB,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,cAAA,GAAiB,IAAK,CAAA,MAAM,QAAS,CAAA,QAAA,EAAU,CAAC,CAAA;AAAA,GAC/C,EAAA,CAAC,cAAgB,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA;AAEvC,EAAA,2BACG,uBAAwB,EAAA,EAAA,SAAA,EACvB,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,+BAAC,oBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,2BAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,qBAAA,EAAA,EAAsB,eACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,eAAiB,EAAA,mBAAA;AAAA,QACjB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,gBAAkB,EAAA;AAAA;AAAA,OAEtB,CACF,EAAA,CAAA;AAAA,wBACC,2BACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,qBAAsB,EAAA,EAAA,OAAA,EAAS,gBAAgB,CAClD,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,iBAAA;AAAA,QACX,KAAA,sBACG,yBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,uBAAuB,eAAvB,EAAA,EAAuC,WAAsB,CAChE,EAAA,CAAA;AAAA,QAEF,OAAA,sBACG,2BACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,kBAAmB,CAAA,qBAAA;AAAA,UAAnB;AAAA,YACC,YAAA;AAAA,YACA,eAAA;AAAA,YACA,OAAA;AAAA,YACA;AAAA;AAAA,SAEJ,EAAA;AAAA;AAAA,KAEJ;AAAA,oBACC,GAAA,CAAA,2BAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,CACjB,EAAA;AAAA,GAAA,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditorLayout.esm.js

@@ -1,5 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
-import { withStyles } from '@material-ui/core/styles';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { withStyles, useTheme } from '@material-ui/core/styles';
+import { PanelResizeHandle, PanelGroup, Panel } from 'react-resizable-panels';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 const TemplateEditorLayout = withStyles(
   (theme) => ({
@@ -20,7 +22,7 @@ const TemplateEditorLayout = withStyles(
       "browser editor preview"
       "results results results"
     `,
-        gridTemplateColumns: "1fr 3fr 2fr",
+        gridTemplateColumns: "1fr 5fr",
         gridTemplateRows: "auto 1fr auto"
       }
     }
@@ -48,12 +50,15 @@ const TemplateEditorLayoutBrowser = withStyles(
   { name: "ScaffolderTemplateEditorLayoutBrowser" }
 )(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 const TemplateEditorLayoutFiles = withStyles(
-  {
+  (theme) => ({
     root: {
       gridArea: "editor",
-      overflow: "auto"
+      overflow: "auto",
+      [theme.breakpoints.up("md")]: {
+        height: "100%"
+      }
     }
-  },
+  }),
   { name: "ScaffolderTemplateEditorLayoutFiles" }
 )(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 const TemplateEditorLayoutPreview = withStyles(
@@ -63,7 +68,7 @@ const TemplateEditorLayoutPreview = withStyles(
       position: "relative",
       backgroundColor: theme.palette.background.default,
       [theme.breakpoints.up("md")]: {
-        borderLeft: `1px solid ${theme.palette.divider}`
+        height: "100%"
       }
     },
     scroll: {
@@ -89,6 +94,35 @@ const TemplateEditorLayoutConsole = withStyles(
   },
   { name: "ScaffolderTemplateEditorLayoutConsole" }
 )(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
+const TemplateEditorPanelResizeHandle = withStyles(
+  {
+    root: {
+      width: 8,
+      cursor: "col-resize",
+      background: "rgba(0,0,0,0.04)"
+    }
+  },
+  { name: "ScaffolderTemplateEditorPanelResizeHandle" }
+)(({ classes }) => /* @__PURE__ */ jsx(PanelResizeHandle, { className: classes.root }));
+function TemplateEditorPanels({
+  files,
+  preview,
+  autoSaveId = "template-editor-panels"
+}) {
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
+  if (isMdUp) {
+    return /* @__PURE__ */ jsxs(PanelGroup, { direction: "horizontal", autoSaveId, children: [
+      /* @__PURE__ */ jsx(Panel, { minSize: 15, defaultSize: 50, children: files }),
+      /* @__PURE__ */ jsx(TemplateEditorPanelResizeHandle, {}),
+      /* @__PURE__ */ jsx(Panel, { minSize: 15, defaultSize: 50, children: preview })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    files,
+    preview
+  ] });
+}
 
-export { TemplateEditorLayout, TemplateEditorLayoutBrowser, TemplateEditorLayoutConsole, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutToolbar };
+export { TemplateEditorLayout, TemplateEditorLayoutBrowser, TemplateEditorLayoutConsole, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutToolbar, TemplateEditorPanelResizeHandle, TemplateEditorPanels };
 //# sourceMappingURL=TemplateEditorLayout.esm.js.map

package/dist/alpha/components/TemplateEditorPage/TemplateEditorLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorLayout.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { PropsWithChildren } from 'react';\nimport { WithStyles, withStyles } from '@material-ui/core/styles';\n\nexport const TemplateEditorLayout = withStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"browser\"\n      \"editor\"\n      \"preview\"\n      \"results\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar toolbar\"\n      \"browser editor preview\"\n      \"results results results\"\n    `,\n        gridTemplateColumns: '1fr 3fr 2fr',\n        gridTemplateRows: 'auto 1fr auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayout' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <main className={classes.root}>{children}</main>\n));\n\nexport const TemplateEditorLayoutToolbar = withStyles(\n  {\n    root: {\n      gridArea: 'toolbar',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutToolbar' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutBrowser = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'browser',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutBrowser' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutFiles = withStyles(\n  {\n    root: {\n      gridArea: 'editor',\n      overflow: 'auto',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutFiles' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutPreview = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'preview',\n      position: 'relative',\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('md')]: {\n        borderLeft: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    scroll: {\n      height: '100%',\n      padding: theme.spacing(1),\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        overflow: 'auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutPreview' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>\n    <div className={classes.scroll}>{children}</div>\n  </section>\n));\n\nexport const TemplateEditorLayoutConsole = withStyles(\n  {\n    root: {\n      gridArea: 'results',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutConsole' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorLayout.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { PropsWithChildren, ReactNode } from 'react';\nimport { WithStyles, withStyles } from '@material-ui/core/styles';\nimport { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';\nimport { useTheme } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\n\nexport const TemplateEditorLayout = withStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"browser\"\n      \"editor\"\n      \"preview\"\n      \"results\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar toolbar\"\n      \"browser editor preview\"\n      \"results results results\"\n    `,\n        gridTemplateColumns: '1fr 5fr',\n        gridTemplateRows: 'auto 1fr auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayout' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <main className={classes.root}>{children}</main>\n));\n\nexport const TemplateEditorLayoutToolbar = withStyles(\n  {\n    root: {\n      gridArea: 'toolbar',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutToolbar' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutBrowser = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'browser',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutBrowser' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutFiles = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'editor',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        height: '100%',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutFiles' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutPreview = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'preview',\n      position: 'relative',\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('md')]: {\n        height: '100%',\n      },\n    },\n    scroll: {\n      height: '100%',\n      padding: theme.spacing(1),\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        overflow: 'auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutPreview' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>\n    <div className={classes.scroll}>{children}</div>\n  </section>\n));\n\nexport const TemplateEditorLayoutConsole = withStyles(\n  {\n    root: {\n      gridArea: 'results',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutConsole' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorPanelResizeHandle = withStyles(\n  {\n    root: {\n      width: 8,\n      cursor: 'col-resize',\n      background: 'rgba(0,0,0,0.04)',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorPanelResizeHandle' },\n)(({ classes }: { classes: WithStyles['classes'] }) => (\n  <PanelResizeHandle className={classes.root} />\n));\n\nexport function TemplateEditorPanels({\n  files,\n  preview,\n  autoSaveId = 'template-editor-panels',\n}: {\n  files: ReactNode;\n  preview: ReactNode;\n  autoSaveId?: string;\n}) {\n  const theme = useTheme();\n  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));\n\n  if (isMdUp) {\n    return (\n      <PanelGroup direction=\"horizontal\" autoSaveId={autoSaveId}>\n        <Panel minSize={15} defaultSize={50}>\n          {files}\n        </Panel>\n        <TemplateEditorPanelResizeHandle />\n        <Panel minSize={15} defaultSize={50}>\n          {preview}\n        </Panel>\n      </PanelGroup>\n    );\n  }\n  // Stack as rows for small screens, just render children in a plain block\n  return (\n    <>\n      {files}\n      {preview}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/TemplateFormPreviewer.esm.js

@@ -7,7 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useApi, alertApiRef, useRouteRef } from '@backstage/core-plugin-api';
 import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
 import { editRouteRef } from '../../../routes.esm.js';
-import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview } from './TemplateEditorLayout.esm.js';
+import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorPanels, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview } from './TemplateEditorLayout.esm.js';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar.esm.js';
 import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu.esm.js';
 import { TemplateEditorToolbarTemplatesMenu } from './TemplateEditorToolbarTemplatesMenu.esm.js';
@@ -69,7 +69,7 @@ const useStyles = makeStyles(
       "textArea preview"
     `,
         gridTemplateRows: "auto 1fr",
-        gridTemplateColumns: "1fr 1fr"
+        gridTemplateColumns: "1fr"
       }
     },
     files: {
@@ -148,25 +148,31 @@ const TemplateFormPreviewer = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(TemplateEditorLayoutFiles, { classes: { root: classes.files }, children: /* @__PURE__ */ jsx(
-      TemplateEditorTextArea,
+    /* @__PURE__ */ jsx(
+      TemplateEditorPanels,
       {
-        content: templateYaml,
-        onUpdate: setTemplateYaml,
-        errorText
+        autoSaveId: "template-form-previewer",
+        files: /* @__PURE__ */ jsx(TemplateEditorLayoutFiles, { classes: { root: classes.files }, children: /* @__PURE__ */ jsx(
+          TemplateEditorTextArea,
+          {
+            content: templateYaml,
+            onUpdate: setTemplateYaml,
+            errorText
+          }
+        ) }),
+        preview: /* @__PURE__ */ jsx(TemplateEditorLayoutPreview, { children: /* @__PURE__ */ jsx(
+          TemplateEditorForm,
+          {
+            content: templateYaml,
+            contentIsSpec: true,
+            fieldExtensions: customFieldExtensions,
+            setErrorText,
+            layouts,
+            formProps
+          }
+        ) })
       }
-    ) }),
-    /* @__PURE__ */ jsx(TemplateEditorLayoutPreview, { children: /* @__PURE__ */ jsx(
-      TemplateEditorForm,
-      {
-        content: templateYaml,
-        contentIsSpec: true,
-        fieldExtensions: customFieldExtensions,
-        setErrorText,
-        layouts,
-        formProps
-      }
-    ) })
+    )
   ] });
 };
 

package/dist/alpha/components/TemplateEditorPage/TemplateFormPreviewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 yaml from 'yaml';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading existing templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 yaml from 'yaml';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n  TemplateEditorPanels,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading existing templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorPanels\n        autoSaveId=\"template-form-previewer\"\n        files={\n          <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n            <TemplateEditorTextArea\n              content={templateYaml}\n              onUpdate={setTemplateYaml}\n              errorText={errorText}\n            />\n          </TemplateEditorLayoutFiles>\n        }\n        preview={\n          <TemplateEditorLayoutPreview>\n            <TemplateEditorForm\n              content={templateYaml}\n              contentIsSpec\n              fieldExtensions={customFieldExtensions}\n              setErrorText={setErrorText}\n              layouts={layouts}\n              formProps={formProps}\n            />\n          </TemplateEditorLayoutPreview>\n        }\n      />\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/extensions.esm.js

@@ -20,7 +20,7 @@ const scaffolderPage = PageBlueprint.makeWithOverrides({
     );
     return originalFactory({
       routeRef: convertLegacyRouteRef(rootRouteRef),
-      defaultPath: "/create",
+      path: "/create",
       loader: () => import('../components/Router/Router.esm.js').then(
         (m) => compatWrapper(
           /* @__PURE__ */ jsx(m.InternalRouter, { formFieldLoaders })
@@ -43,7 +43,7 @@ const repoUrlPickerFormField = FormFieldBlueprint.make({
   }
 });
 const scaffolderApi = ApiBlueprint.make({
-  params: (define) => define({
+  params: (defineParams) => defineParams({
     api: scaffolderApiRef,
     deps: {
       discoveryApi: discoveryApiRef,

package/dist/alpha/extensions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.esm.js","sources":["../../src/alpha/extensions.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\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 {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  NavItemBlueprint,\n  PageBlueprint,\n  ApiBlueprint,\n  discoveryApiRef,\n  fetchApiRef,\n  identityApiRef,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { rootRouteRef } from '../routes';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport { FormFieldBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { ScaffolderClient } from '../api';\n\nexport const scaffolderPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    formFields: createExtensionInput([\n      FormFieldBlueprint.dataRefs.formFieldLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formFieldLoaders = inputs.formFields.map(i =>\n      i.get(FormFieldBlueprint.dataRefs.formFieldLoader),\n    );\n    return originalFactory({\n      routeRef: convertLegacyRouteRef(rootRouteRef),\n      defaultPath: '/create',\n      loader: () =>\n        import('../components/Router/Router').then(m =>\n          compatWrapper(\n            <m.InternalRouter formFieldLoaders={formFieldLoaders} />,\n          ),\n        ),\n    });\n  },\n});\n\nexport const scaffolderNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Create...',\n    icon: CreateComponentIcon,\n  },\n});\n\nexport const repoUrlPickerFormField = FormFieldBlueprint.make({\n  name: 'repo-url-picker',\n  params: {\n    field: () => import('./fields/RepoUrlPicker').then(m => m.RepoUrlPicker),\n  },\n});\n\nexport const scaffolderApi = ApiBlueprint.make({\n  params: define =>\n    define({\n      api: scaffolderApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        fetchApi: fetchApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) =>\n        new ScaffolderClient({\n          discoveryApi,\n          scmIntegrationsApi,\n          fetchApi,\n          identityApi,\n        }),\n    }),\n});\n"],"names":[],"mappings":";;;;;;;;;;AAoCa,MAAA,cAAA,GAAiB,cAAc,iBAAkB,CAAA;AAAA,EAC5D,MAAQ,EAAA;AAAA,IACN,YAAY,oBAAqB,CAAA;AAAA,MAC/B,mBAAmB,QAAS,CAAA;AAAA,KAC7B;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,gBAAA,GAAmB,OAAO,UAAW,CAAA,GAAA;AAAA,MAAI,CAC7C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,kBAAA,CAAmB,SAAS,eAAe;AAAA,KACnD;AACA,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,MAC5C,WAAa,EAAA,SAAA;AAAA,MACb,MAAQ,EAAA,MACN,OAAO,oCAA6B,CAAE,CAAA,IAAA;AAAA,QAAK,CACzC,CAAA,KAAA,aAAA;AAAA,0BACG,GAAA,CAAA,CAAA,CAAE,cAAF,EAAA,EAAiB,gBAAoC,EAAA;AAAA;AACxD;AACF,KACH,CAAA;AAAA;AAEL,CAAC;AAEY,MAAA,iBAAA,GAAoB,iBAAiB,IAAK,CAAA;AAAA,EACrD,MAAQ,EAAA;AAAA,IACN,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,KAAO,EAAA,WAAA;AAAA,IACP,IAAM,EAAA;AAAA;AAEV,CAAC;AAEY,MAAA,sBAAA,GAAyB,mBAAmB,IAAK,CAAA;AAAA,EAC5D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAO,+BAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAE3E,CAAC;AAEY,MAAA,aAAA,GAAgB,aAAa,IAAK,CAAA;AAAA,EAC7C,MAAA,EAAQ,YACN,MAAO,CAAA;AAAA,IACL,GAAK,EAAA,gBAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,YAAc,EAAA,eAAA;AAAA,MACd,kBAAoB,EAAA,qBAAA;AAAA,MACpB,QAAU,EAAA,WAAA;AAAA,MACV,WAAa,EAAA;AAAA,KACf;AAAA,IACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,oBAAoB,QAAU,EAAA,WAAA,EACtD,KAAA,IAAI,gBAAiB,CAAA;AAAA,MACnB,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD;AAAA,GACJ;AACL,CAAC;;;;"}
+{"version":3,"file":"extensions.esm.js","sources":["../../src/alpha/extensions.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\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 {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  NavItemBlueprint,\n  PageBlueprint,\n  ApiBlueprint,\n  discoveryApiRef,\n  fetchApiRef,\n  identityApiRef,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { rootRouteRef } from '../routes';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport { FormFieldBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { ScaffolderClient } from '../api';\n\nexport const scaffolderPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    formFields: createExtensionInput([\n      FormFieldBlueprint.dataRefs.formFieldLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formFieldLoaders = inputs.formFields.map(i =>\n      i.get(FormFieldBlueprint.dataRefs.formFieldLoader),\n    );\n    return originalFactory({\n      routeRef: convertLegacyRouteRef(rootRouteRef),\n      path: '/create',\n      loader: () =>\n        import('../components/Router/Router').then(m =>\n          compatWrapper(\n            <m.InternalRouter formFieldLoaders={formFieldLoaders} />,\n          ),\n        ),\n    });\n  },\n});\n\nexport const scaffolderNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Create...',\n    icon: CreateComponentIcon,\n  },\n});\n\nexport const repoUrlPickerFormField = FormFieldBlueprint.make({\n  name: 'repo-url-picker',\n  params: {\n    field: () => import('./fields/RepoUrlPicker').then(m => m.RepoUrlPicker),\n  },\n});\n\nexport const scaffolderApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: scaffolderApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        fetchApi: fetchApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) =>\n        new ScaffolderClient({\n          discoveryApi,\n          scmIntegrationsApi,\n          fetchApi,\n          identityApi,\n        }),\n    }),\n});\n"],"names":[],"mappings":";;;;;;;;;;AAoCa,MAAA,cAAA,GAAiB,cAAc,iBAAkB,CAAA;AAAA,EAC5D,MAAQ,EAAA;AAAA,IACN,YAAY,oBAAqB,CAAA;AAAA,MAC/B,mBAAmB,QAAS,CAAA;AAAA,KAC7B;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,gBAAA,GAAmB,OAAO,UAAW,CAAA,GAAA;AAAA,MAAI,CAC7C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,kBAAA,CAAmB,SAAS,eAAe;AAAA,KACnD;AACA,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,MAC5C,IAAM,EAAA,SAAA;AAAA,MACN,MAAQ,EAAA,MACN,OAAO,oCAA6B,CAAE,CAAA,IAAA;AAAA,QAAK,CACzC,CAAA,KAAA,aAAA;AAAA,0BACG,GAAA,CAAA,CAAA,CAAE,cAAF,EAAA,EAAiB,gBAAoC,EAAA;AAAA;AACxD;AACF,KACH,CAAA;AAAA;AAEL,CAAC;AAEY,MAAA,iBAAA,GAAoB,iBAAiB,IAAK,CAAA;AAAA,EACrD,MAAQ,EAAA;AAAA,IACN,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,KAAO,EAAA,WAAA;AAAA,IACP,IAAM,EAAA;AAAA;AAEV,CAAC;AAEY,MAAA,sBAAA,GAAyB,mBAAmB,IAAK,CAAA;AAAA,EAC5D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAO,+BAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAE3E,CAAC;AAEY,MAAA,aAAA,GAAgB,aAAa,IAAK,CAAA;AAAA,EAC7C,MAAA,EAAQ,kBACN,YAAa,CAAA;AAAA,IACX,GAAK,EAAA,gBAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,YAAc,EAAA,eAAA;AAAA,MACd,kBAAoB,EAAA,qBAAA;AAAA,MACpB,QAAU,EAAA,WAAA;AAAA,MACV,WAAa,EAAA;AAAA,KACf;AAAA,IACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,oBAAoB,QAAU,EAAA,WAAA,EACtD,KAAA,IAAI,gBAAiB,CAAA;AAAA,MACnB,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD;AAAA,GACJ;AACL,CAAC;;;;"}

package/dist/alpha.d.ts

@@ -276,7 +276,7 @@ declare class DefaultScaffolderFormDecoratorsApi implements ScaffolderFormDecora
 declare const formDecoratorsApi: _backstage_frontend_plugin_api.ExtensionDefinition<{
     config: {};
     configInput: {};
-    output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+    output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
     inputs: {
         formDecorators: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>, {
             singleton: false;
@@ -310,14 +310,14 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         name: undefined;
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
         inputs: {};
         params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
     }>;
     "api:scaffolder/form-decorators": _backstage_frontend_plugin_api.ExtensionDefinition<{
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
         inputs: {
             formDecorators: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_plugin_scaffolder_react_alpha.ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>, {
                 singleton: false;
@@ -331,7 +331,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     "api:scaffolder/form-fields": _backstage_frontend_plugin_api.ExtensionDefinition<{
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
         inputs: {
             formFields: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<_backstage_plugin_scaffolder_react_alpha.FormField>, "scaffolder.form-field-loader", {}>, {
                 singleton: false;
@@ -355,11 +355,11 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
             label?: string | undefined;
             title?: string | undefined;
         };
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<(entity: _backstage_catalog_model.Entity) => boolean, "catalog.entity-filter-function", {
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<(entity: _backstage_catalog_model.Entity) => boolean, "catalog.entity-filter-function", {
             optional: true;
-        }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "catalog.entity-filter-expression", {
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<string, "catalog.entity-filter-expression", {
             optional: true;
-        }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => _backstage_core_components.IconLinkVerticalProps, "entity-icon-link-props", {}>;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<() => _backstage_core_components.IconLinkVerticalProps, "entity-icon-link-props", {}>;
         inputs: {};
         params: {
             useProps: () => Omit<_backstage_core_components.IconLinkVerticalProps, "color">;
@@ -371,7 +371,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         name: undefined;
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<{
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<{
             title: string;
             icon: _backstage_core_plugin_api.IconComponent;
             routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
@@ -390,7 +390,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         configInput: {
             path?: string | undefined;
         };
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
         inputs: {
@@ -402,7 +402,8 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         kind: "page";
         name: undefined;
         params: {
-            defaultPath: string;
+            defaultPath?: [Error: `Use the 'path' param instead`];
+            path: string;
             loader: () => Promise<JSX.Element>;
             routeRef?: _backstage_frontend_plugin_api.RouteRef;
         };
@@ -412,7 +413,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         name: "repo-url-picker";
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<_backstage_plugin_scaffolder_react_alpha.FormField>, "scaffolder.form-field-loader", {}>;
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<() => Promise<_backstage_plugin_scaffolder_react_alpha.FormField>, "scaffolder.form-field-loader", {}>;
         inputs: {};
         params: {
             field: () => Promise<_backstage_plugin_scaffolder_react_alpha.FormField>;

package/dist/plugins/scaffolder/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-scaffolder";
-var version = "1.34.0-next.1";
+var version = "1.34.0-next.3";
 var description = "The Backstage plugin that helps you create new things";
 var backstage = {
 	role: "frontend-plugin",
@@ -95,6 +95,7 @@ var dependencies = {
 	luxon: "^3.0.0",
 	qs: "^6.9.4",
 	"react-resizable": "^3.0.5",
+	"react-resizable-panels": "^3.0.4",
 	"react-use": "^17.2.4",
 	"react-window": "^1.8.10",
 	yaml: "^2.0.0",

package/dist/plugins/scaffolder/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.34.0-next.1",
+  "version": "1.34.0-next.3",
   "description": "The Backstage plugin that helps you create new things",
   "backstage": {
     "role": "frontend-plugin",
@@ -72,15 +72,15 @@
   "dependencies": {
     "@backstage/catalog-client": "1.11.0-next.0",
     "@backstage/catalog-model": "1.7.5",
-    "@backstage/core-compat-api": "0.4.5-next.1",
-    "@backstage/core-components": "0.17.5-next.0",
+    "@backstage/core-compat-api": "0.5.0-next.3",
+    "@backstage/core-components": "0.17.5-next.2",
     "@backstage/core-plugin-api": "1.10.9",
     "@backstage/errors": "1.2.7",
-    "@backstage/frontend-plugin-api": "0.11.0-next.0",
+    "@backstage/frontend-plugin-api": "0.11.0-next.2",
     "@backstage/integration": "1.17.1",
     "@backstage/integration-react": "1.2.9",
     "@backstage/plugin-catalog-common": "1.1.5",
-    "@backstage/plugin-catalog-react": "1.20.0-next.1",
+    "@backstage/plugin-catalog-react": "1.20.0-next.2",
     "@backstage/plugin-permission-react": "0.4.36",
     "@backstage/plugin-scaffolder-common": "1.7.0-next.0",
     "@backstage/plugin-scaffolder-react": "1.19.0-next.1",
@@ -108,6 +108,7 @@
     "luxon": "^3.0.0",
     "qs": "^6.9.4",
     "react-resizable": "^3.0.5",
+    "react-resizable-panels": "^3.0.4",
     "react-use": "^17.2.4",
     "react-window": "^1.8.10",
     "yaml": "^2.0.0",
@@ -115,10 +116,10 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.33.2-next.0",
+    "@backstage/cli": "0.34.0-next.2",
     "@backstage/core-app-api": "1.18.0",
     "@backstage/dev-utils": "1.1.13-next.1",
-    "@backstage/plugin-catalog": "1.31.2-next.1",
+    "@backstage/plugin-catalog": "1.31.2-next.2",
     "@backstage/plugin-permission-common": "0.9.1",
     "@backstage/test-utils": "1.7.11-next.0",
     "@testing-library/dom": "^10.0.0",