@backstage/plugin-scaffolder 1.30.0-next.0 → 1.30.0-next.2

package/dist/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { LogViewer } from '@backstage/core-components';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
@@ -7,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import CodeMirror from '@uiw/react-codemirror';
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useDryRun } from '../DryRunContext.esm.js';
 import { DryRunResultsSplitView } from './DryRunResultsSplitView.esm.js';
 import { FileBrowser } from '../../../../components/FileBrowser/FileBrowser.esm.js';
@@ -62,24 +63,27 @@ function FilesContent() {
   if (!selectedResult) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
-    FileBrowser,
-    {
-      selected: selectedPath,
-      onSelect: setSelectedPath,
-      filePaths: selectedResult.directoryContents.map((file) => file.path)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml)],
-      readOnly: true,
-      value: selectedFile?.base64Content ? atob(selectedFile.base64Content) : ""
-    }
-  ));
+  return /* @__PURE__ */ jsxs(DryRunResultsSplitView, { children: [
+    /* @__PURE__ */ jsx(
+      FileBrowser,
+      {
+        selected: selectedPath,
+        onSelect: setSelectedPath,
+        filePaths: selectedResult.directoryContents.map((file) => file.path)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        className: classes.codeMirror,
+        theme: "dark",
+        height: "100%",
+        extensions: [StreamLanguage.define(yaml)],
+        readOnly: true,
+        value: selectedFile?.base64Content ? atob(selectedFile.base64Content) : ""
+      }
+    )
+  ] });
 }
 function LogContent() {
   const { selectedResult } = useDryRun();
@@ -104,14 +108,17 @@ function LogContent() {
     return null;
   }
   const selectedStep = steps.find((s) => s.id === currentStepId) ?? steps[0];
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
-    TaskStatusStepper,
-    {
-      steps,
-      currentStepId: selectedStep.id,
-      onUserStepChange: setUserSelectedStepId
-    }
-  ), /* @__PURE__ */ React.createElement(LogViewer, { text: selectedStep?.logString ?? "" }));
+  return /* @__PURE__ */ jsxs(DryRunResultsSplitView, { children: [
+    /* @__PURE__ */ jsx(
+      TaskStatusStepper,
+      {
+        steps,
+        currentStepId: selectedStep.id,
+        onUserStepChange: setUserSelectedStepId
+      }
+    ),
+    /* @__PURE__ */ jsx(LogViewer, { text: selectedStep?.logString ?? "" })
+  ] });
 }
 function OutputContent() {
   const classes = useStyles();
@@ -119,17 +126,20 @@ function OutputContent() {
   if (!selectedResult) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(Box, { pt: 2 }, selectedResult.output?.links?.length && /* @__PURE__ */ React.createElement(TaskPageLinks, { output: selectedResult.output })), /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml)],
-      readOnly: true,
-      value: JSON.stringify(selectedResult.output, null, 2)
-    }
-  ));
+  return /* @__PURE__ */ jsxs(DryRunResultsSplitView, { children: [
+    /* @__PURE__ */ jsx(Box, { pt: 2, children: selectedResult.output?.links?.length && /* @__PURE__ */ jsx(TaskPageLinks, { output: selectedResult.output }) }),
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        className: classes.codeMirror,
+        theme: "dark",
+        height: "100%",
+        extensions: [StreamLanguage.define(yaml)],
+        readOnly: true,
+        value: JSON.stringify(selectedResult.output, null, 2)
+      }
+    )
+  ] });
 }
 function DryRunResultsView() {
   const classes = useStyles();
@@ -137,25 +147,37 @@ function DryRunResultsView() {
     "files"
   );
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tabs, { value: selectedTab, onChange: (_, v) => setSelectedTab(v) }, /* @__PURE__ */ React.createElement(
-    Tab,
-    {
-      value: "files",
-      label: t("templateEditorPage.dryRunResultsView.tab.files")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Tab,
-    {
-      value: "log",
-      label: t("templateEditorPage.dryRunResultsView.tab.log")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Tab,
-    {
-      value: "output",
-      label: t("templateEditorPage.dryRunResultsView.tab.output")
-    }
-  )), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: (_, v) => setSelectedTab(v), children: [
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          value: "files",
+          label: t("templateEditorPage.dryRunResultsView.tab.files")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          value: "log",
+          label: t("templateEditorPage.dryRunResultsView.tab.log")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          value: "output",
+          label: t("templateEditorPage.dryRunResultsView.tab.output")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx("div", { className: classes.contentWrapper, children: /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+      selectedTab === "files" && /* @__PURE__ */ jsx(FilesContent, {}),
+      selectedTab === "log" && /* @__PURE__ */ jsx(LogContent, {}),
+      selectedTab === "output" && /* @__PURE__ */ jsx(OutputContent, {})
+    ] }) })
+  ] });
 }
 
 export { DryRunResultsView };

package/dist/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DryRunResultsView.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.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 { LogViewer } from '@backstage/core-components';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useDryRun } from '../DryRunContext';\nimport { DryRunResultsSplitView } from './DryRunResultsSplitView';\nimport { FileBrowser } from '../../../../components/FileBrowser';\nimport { TaskPageLinks } from './TaskPageLinks';\nimport { TaskStatusStepper } from './TaskStatusStepper';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../../translation';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n  },\n  contentWrapper: {\n    flex: 1,\n    position: 'relative',\n  },\n  content: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n\n    display: 'flex',\n    '& > *': {\n      flex: 1,\n    },\n  },\n  codeMirror: {\n    height: '100%',\n    overflowY: 'auto',\n  },\n});\n\nfunction FilesContent() {\n  const classes = useStyles();\n  const { selectedResult } = useDryRun();\n  const [selectedPath, setSelectedPath] = useState<string>('');\n  const selectedFile = selectedResult?.directoryContents.find(\n    f => f.path === selectedPath,\n  );\n\n  useEffect(() => {\n    if (selectedResult) {\n      const [firstFile] = selectedResult.directoryContents;\n      if (firstFile) {\n        setSelectedPath(firstFile.path);\n      } else {\n        setSelectedPath('');\n      }\n    }\n    return undefined;\n  }, [selectedResult]);\n\n  if (!selectedResult) {\n    return null;\n  }\n  return (\n    <DryRunResultsSplitView>\n      <FileBrowser\n        selected={selectedPath}\n        onSelect={setSelectedPath}\n        filePaths={selectedResult.directoryContents.map(file => file.path)}\n      />\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport)]}\n        readOnly\n        value={\n          selectedFile?.base64Content ? atob(selectedFile.base64Content) : ''\n        }\n      />\n    </DryRunResultsSplitView>\n  );\n}\nfunction LogContent() {\n  const { selectedResult } = useDryRun();\n  const [currentStepId, setUserSelectedStepId] = useState<string>();\n\n  const steps = useMemo(() => {\n    if (!selectedResult) {\n      return [];\n    }\n    return (\n      selectedResult.steps.map(step => {\n        const stepLog = selectedResult.log.filter(\n          l => l.body.stepId === step.id,\n        );\n        return {\n          id: step.id,\n          name: step.name,\n          logString: stepLog.map(l => l.body.message).join('\\n'),\n          status: stepLog[stepLog.length - 1]?.body.status ?? 'completed',\n        };\n      }) ?? []\n    );\n  }, [selectedResult]);\n\n  if (!selectedResult) {\n    return null;\n  }\n\n  const selectedStep = steps.find(s => s.id === currentStepId) ?? steps[0];\n\n  return (\n    <DryRunResultsSplitView>\n      <TaskStatusStepper\n        steps={steps}\n        currentStepId={selectedStep.id}\n        onUserStepChange={setUserSelectedStepId}\n      />\n      <LogViewer text={selectedStep?.logString ?? ''} />\n    </DryRunResultsSplitView>\n  );\n}\n\nfunction OutputContent() {\n  const classes = useStyles();\n  const { selectedResult } = useDryRun();\n\n  if (!selectedResult) {\n    return null;\n  }\n\n  return (\n    <DryRunResultsSplitView>\n      <Box pt={2}>\n        {selectedResult.output?.links?.length && (\n          <TaskPageLinks output={selectedResult.output} />\n        )}\n      </Box>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport)]}\n        readOnly\n        value={JSON.stringify(selectedResult.output, null, 2)}\n      />\n    </DryRunResultsSplitView>\n  );\n}\n\nexport function DryRunResultsView() {\n  const classes = useStyles();\n  const [selectedTab, setSelectedTab] = useState<'files' | 'log' | 'output'>(\n    'files',\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <div className={classes.root}>\n      <Tabs value={selectedTab} onChange={(_, v) => setSelectedTab(v)}>\n        <Tab\n          value=\"files\"\n          label={t('templateEditorPage.dryRunResultsView.tab.files')}\n        />\n        <Tab\n          value=\"log\"\n          label={t('templateEditorPage.dryRunResultsView.tab.log')}\n        />\n        <Tab\n          value=\"output\"\n          label={t('templateEditorPage.dryRunResultsView.tab.output')}\n        />\n      </Tabs>\n      <Divider />\n\n      <div className={classes.contentWrapper}>\n        <div className={classes.content}>\n          {selectedTab === 'files' && <FilesContent />}\n          {selectedTab === 'log' && <LogContent />}\n          {selectedTab === 'output' && <OutputContent />}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["yamlSupport"],"mappings":"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"}
+{"version":3,"file":"DryRunResultsView.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.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 { LogViewer } from '@backstage/core-components';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDryRun } from '../DryRunContext';\nimport { DryRunResultsSplitView } from './DryRunResultsSplitView';\nimport { FileBrowser } from '../../../../components/FileBrowser';\nimport { TaskPageLinks } from './TaskPageLinks';\nimport { TaskStatusStepper } from './TaskStatusStepper';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../../translation';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n  },\n  contentWrapper: {\n    flex: 1,\n    position: 'relative',\n  },\n  content: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n\n    display: 'flex',\n    '& > *': {\n      flex: 1,\n    },\n  },\n  codeMirror: {\n    height: '100%',\n    overflowY: 'auto',\n  },\n});\n\nfunction FilesContent() {\n  const classes = useStyles();\n  const { selectedResult } = useDryRun();\n  const [selectedPath, setSelectedPath] = useState<string>('');\n  const selectedFile = selectedResult?.directoryContents.find(\n    f => f.path === selectedPath,\n  );\n\n  useEffect(() => {\n    if (selectedResult) {\n      const [firstFile] = selectedResult.directoryContents;\n      if (firstFile) {\n        setSelectedPath(firstFile.path);\n      } else {\n        setSelectedPath('');\n      }\n    }\n    return undefined;\n  }, [selectedResult]);\n\n  if (!selectedResult) {\n    return null;\n  }\n  return (\n    <DryRunResultsSplitView>\n      <FileBrowser\n        selected={selectedPath}\n        onSelect={setSelectedPath}\n        filePaths={selectedResult.directoryContents.map(file => file.path)}\n      />\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport)]}\n        readOnly\n        value={\n          selectedFile?.base64Content ? atob(selectedFile.base64Content) : ''\n        }\n      />\n    </DryRunResultsSplitView>\n  );\n}\nfunction LogContent() {\n  const { selectedResult } = useDryRun();\n  const [currentStepId, setUserSelectedStepId] = useState<string>();\n\n  const steps = useMemo(() => {\n    if (!selectedResult) {\n      return [];\n    }\n    return (\n      selectedResult.steps.map(step => {\n        const stepLog = selectedResult.log.filter(\n          l => l.body.stepId === step.id,\n        );\n        return {\n          id: step.id,\n          name: step.name,\n          logString: stepLog.map(l => l.body.message).join('\\n'),\n          status: stepLog[stepLog.length - 1]?.body.status ?? 'completed',\n        };\n      }) ?? []\n    );\n  }, [selectedResult]);\n\n  if (!selectedResult) {\n    return null;\n  }\n\n  const selectedStep = steps.find(s => s.id === currentStepId) ?? steps[0];\n\n  return (\n    <DryRunResultsSplitView>\n      <TaskStatusStepper\n        steps={steps}\n        currentStepId={selectedStep.id}\n        onUserStepChange={setUserSelectedStepId}\n      />\n      <LogViewer text={selectedStep?.logString ?? ''} />\n    </DryRunResultsSplitView>\n  );\n}\n\nfunction OutputContent() {\n  const classes = useStyles();\n  const { selectedResult } = useDryRun();\n\n  if (!selectedResult) {\n    return null;\n  }\n\n  return (\n    <DryRunResultsSplitView>\n      <Box pt={2}>\n        {selectedResult.output?.links?.length && (\n          <TaskPageLinks output={selectedResult.output} />\n        )}\n      </Box>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport)]}\n        readOnly\n        value={JSON.stringify(selectedResult.output, null, 2)}\n      />\n    </DryRunResultsSplitView>\n  );\n}\n\nexport function DryRunResultsView() {\n  const classes = useStyles();\n  const [selectedTab, setSelectedTab] = useState<'files' | 'log' | 'output'>(\n    'files',\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <div className={classes.root}>\n      <Tabs value={selectedTab} onChange={(_, v) => setSelectedTab(v)}>\n        <Tab\n          value=\"files\"\n          label={t('templateEditorPage.dryRunResultsView.tab.files')}\n        />\n        <Tab\n          value=\"log\"\n          label={t('templateEditorPage.dryRunResultsView.tab.log')}\n        />\n        <Tab\n          value=\"output\"\n          label={t('templateEditorPage.dryRunResultsView.tab.output')}\n        />\n      </Tabs>\n      <Divider />\n\n      <div className={classes.contentWrapper}>\n        <div className={classes.content}>\n          {selectedTab === 'files' && <FilesContent />}\n          {selectedTab === 'log' && <LogContent />}\n          {selectedTab === 'output' && <OutputContent />}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/DryRunResults/IconLink.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
@@ -18,7 +18,10 @@ const useStyles = makeStyles({
 const IconLink = (props) => {
   const { href, text, Icon, ...linkProps } = props;
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.svgIcon }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Link, { to: href, ...linkProps }, text || href)));
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { component: "div", className: classes.svgIcon, children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsx(LanguageIcon, {}) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Link, { to: href, ...linkProps, children: text || href }) })
+  ] });
 };
 
 export { IconLink };

package/dist/alpha/components/TemplateEditorPage/DryRunResults/IconLink.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLink.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.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 */\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Grid from '@material-ui/core/Grid';\nimport { LinkProps } from '@material-ui/core/Link';\nimport LanguageIcon from '@material-ui/icons/Language';\n\nimport { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\n\nconst useStyles = makeStyles({\n  svgIcon: {\n    display: 'inline-block',\n    '& svg': {\n      display: 'inline-block',\n      fontSize: 'inherit',\n      verticalAlign: 'baseline',\n    },\n  },\n});\n\nexport const IconLink = (\n  props: {\n    href: string;\n    text?: string;\n    Icon?: IconComponent;\n  } & LinkProps,\n) => {\n  const { href, text, Icon, ...linkProps } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Grid container direction=\"row\" spacing={1}>\n      <Grid item>\n        <Typography component=\"div\" className={classes.svgIcon}>\n          {Icon ? <Icon /> : <LanguageIcon />}\n        </Typography>\n      </Grid>\n      <Grid item>\n        <Link to={href} {...linkProps}>\n          {text || href}\n        </Link>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,cAAA;AAAA,IACT,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,cAAA;AAAA,MACT,QAAU,EAAA,SAAA;AAAA,MACV,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAEY,MAAA,QAAA,GAAW,CACtB,KAKG,KAAA;AACH,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAc,GAAA,KAAA;AAE3C,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,2CACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,SAAU,EAAA,KAAA,EAAM,SAAS,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,wBACP,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAU,KAAM,EAAA,SAAA,EAAW,QAAQ,OAC5C,EAAA,EAAA,IAAA,mBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,oBAAM,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAa,CACnC,CACF,CAAA,sCACC,IAAK,EAAA,EAAA,IAAA,EAAI,wBACP,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,IAAO,EAAA,GAAG,aACjB,IAAQ,IAAA,IACX,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"IconLink.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.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 */\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Grid from '@material-ui/core/Grid';\nimport { LinkProps } from '@material-ui/core/Link';\nimport LanguageIcon from '@material-ui/icons/Language';\n\nimport { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\n\nconst useStyles = makeStyles({\n  svgIcon: {\n    display: 'inline-block',\n    '& svg': {\n      display: 'inline-block',\n      fontSize: 'inherit',\n      verticalAlign: 'baseline',\n    },\n  },\n});\n\nexport const IconLink = (\n  props: {\n    href: string;\n    text?: string;\n    Icon?: IconComponent;\n  } & LinkProps,\n) => {\n  const { href, text, Icon, ...linkProps } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Grid container direction=\"row\" spacing={1}>\n      <Grid item>\n        <Typography component=\"div\" className={classes.svgIcon}>\n          {Icon ? <Icon /> : <LanguageIcon />}\n        </Typography>\n      </Grid>\n      <Grid item>\n        <Link to={href} {...linkProps}>\n          {text || href}\n        </Link>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,cAAA;AAAA,IACT,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,cAAA;AAAA,MACT,QAAU,EAAA,SAAA;AAAA,MACV,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAEY,MAAA,QAAA,GAAW,CACtB,KAKG,KAAA;AACH,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAc,GAAA,KAAA;AAE3C,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,SAAU,EAAA,KAAA,EAAM,SAAS,CACvC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EACR,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,WAAU,KAAM,EAAA,SAAA,EAAW,OAAQ,CAAA,OAAA,EAC5C,iCAAQ,GAAA,CAAA,IAAA,EAAA,EAAK,oBAAM,GAAA,CAAA,YAAA,EAAA,EAAa,GACnC,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EACR,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,IAAA,EAAO,GAAG,SAAA,EACjB,QAAQ,EAAA,IAAA,IAAA,IAAA,EACX,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.esm.js

@@ -1,8 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import Box from '@material-ui/core/Box';
 import LanguageIcon from '@material-ui/icons/Language';
-import React from 'react';
 import { IconLink } from './IconLink.esm.js';
 import { useApp, useRouteRef } from '@backstage/core-plugin-api';
 
@@ -11,7 +11,7 @@ const TaskPageLinks = ({ output }) => {
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;
-  return /* @__PURE__ */ React.createElement(Box, { px: 3, pb: 3 }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
+  return /* @__PURE__ */ jsx(Box, { px: 3, pb: 3, children: links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
     if (entityRef) {
       const entityName = parseEntityRef(entityRef, {
         defaultKind: "<unknown>",
@@ -21,16 +21,16 @@ const TaskPageLinks = ({ output }) => {
       return { title, icon, url: target };
     }
     return { title, icon, url };
-  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ jsx(
     IconLink,
     {
-      key: `output-link-${i}`,
       href: url,
       text: title ?? url,
       Icon: iconResolver(icon),
       target: "_blank"
-    }
-  )));
+    },
+    `output-link-${i}`
+  )) });
 };
 
 export { TaskPageLinks };

package/dist/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskPageLinks.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 { parseEntityRef } from '@backstage/catalog-model';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport Box from '@material-ui/core/Box';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React from 'react';\nimport { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';\nimport { IconLink } from './IconLink';\nimport { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api';\n\ntype TaskPageLinksProps = {\n  output: ScaffolderTaskOutput;\n};\n\nexport const TaskPageLinks = ({ output }: TaskPageLinksProps) => {\n  const { links = [] } = output;\n  const app = useApp();\n  const entityRoute = useRouteRef(entityRouteRef);\n\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n\n  return (\n    <Box px={3} pb={3}>\n      {links\n        .filter(({ url, entityRef }) => url || entityRef)\n        .map(({ url, entityRef, title, icon }) => {\n          if (entityRef) {\n            const entityName = parseEntityRef(entityRef, {\n              defaultKind: '<unknown>',\n              defaultNamespace: '<unknown>',\n            });\n            const target = entityRoute(entityName);\n            return { title, icon, url: target };\n          }\n          return { title, icon, url: url! };\n        })\n        .map(({ url, title, icon }, i) => (\n          <IconLink\n            key={`output-link-${i}`}\n            href={url}\n            text={title ?? url}\n            Icon={iconResolver(icon)}\n            target=\"_blank\"\n          />\n        ))}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,EAAE,KAAA,GAAQ,EAAC,EAAM,GAAA,MAAA;AACvB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA;AAE9C,EAAM,MAAA,YAAA,GAAe,CAAC,GACpB,KAAA,GAAA,GAAM,IAAI,aAAc,CAAA,GAAG,KAAK,YAAe,GAAA,YAAA;AAEjD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACb,EAAA,EAAA,KAAA,CACE,MAAO,CAAA,CAAC,EAAE,GAAA,EAAK,WAAgB,KAAA,GAAA,IAAO,SAAS,CAAA,CAC/C,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,SAAA,EAAW,KAAO,EAAA,IAAA,EAAW,KAAA;AACxC,IAAA,IAAI,SAAW,EAAA;AACb,MAAM,MAAA,UAAA,GAAa,eAAe,SAAW,EAAA;AAAA,QAC3C,WAAa,EAAA,WAAA;AAAA,QACb,gBAAkB,EAAA;AAAA,OACnB,CAAA;AACD,MAAM,MAAA,MAAA,GAAS,YAAY,UAAU,CAAA;AACrC,MAAA,OAAO,EAAE,KAAA,EAAO,IAAM,EAAA,GAAA,EAAK,MAAO,EAAA;AAAA;AAEpC,IAAO,OAAA,EAAE,KAAO,EAAA,IAAA,EAAM,GAAU,EAAA;AAAA,GACjC,EACA,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,KAAA,EAAO,IAAK,EAAA,EAAG,CAC1B,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,eAAe,CAAC,CAAA,CAAA;AAAA,MACrB,IAAM,EAAA,GAAA;AAAA,MACN,MAAM,KAAS,IAAA,GAAA;AAAA,MACf,IAAA,EAAM,aAAa,IAAI,CAAA;AAAA,MACvB,MAAO,EAAA;AAAA;AAAA,GAEV,CACL,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TaskPageLinks.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 { parseEntityRef } from '@backstage/catalog-model';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport Box from '@material-ui/core/Box';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';\nimport { IconLink } from './IconLink';\nimport { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api';\n\ntype TaskPageLinksProps = {\n  output: ScaffolderTaskOutput;\n};\n\nexport const TaskPageLinks = ({ output }: TaskPageLinksProps) => {\n  const { links = [] } = output;\n  const app = useApp();\n  const entityRoute = useRouteRef(entityRouteRef);\n\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n\n  return (\n    <Box px={3} pb={3}>\n      {links\n        .filter(({ url, entityRef }) => url || entityRef)\n        .map(({ url, entityRef, title, icon }) => {\n          if (entityRef) {\n            const entityName = parseEntityRef(entityRef, {\n              defaultKind: '<unknown>',\n              defaultNamespace: '<unknown>',\n            });\n            const target = entityRoute(entityName);\n            return { title, icon, url: target };\n          }\n          return { title, icon, url: url! };\n        })\n        .map(({ url, title, icon }, i) => (\n          <IconLink\n            key={`output-link-${i}`}\n            href={url}\n            text={title ?? url}\n            Icon={iconResolver(icon)}\n            target=\"_blank\"\n          />\n        ))}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA4BO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,EAAE,KAAA,GAAQ,EAAC,EAAM,GAAA,MAAA;AACvB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA;AAE9C,EAAM,MAAA,YAAA,GAAe,CAAC,GACpB,KAAA,GAAA,GAAM,IAAI,aAAc,CAAA,GAAG,KAAK,YAAe,GAAA,YAAA;AAEjD,EACE,uBAAA,GAAA,CAAC,OAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACb,EAAA,QAAA,EAAA,KAAA,CACE,MAAO,CAAA,CAAC,EAAE,GAAA,EAAK,WAAgB,KAAA,GAAA,IAAO,SAAS,CAAA,CAC/C,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,SAAA,EAAW,KAAO,EAAA,IAAA,EAAW,KAAA;AACxC,IAAA,IAAI,SAAW,EAAA;AACb,MAAM,MAAA,UAAA,GAAa,eAAe,SAAW,EAAA;AAAA,QAC3C,WAAa,EAAA,WAAA;AAAA,QACb,gBAAkB,EAAA;AAAA,OACnB,CAAA;AACD,MAAM,MAAA,MAAA,GAAS,YAAY,UAAU,CAAA;AACrC,MAAA,OAAO,EAAE,KAAA,EAAO,IAAM,EAAA,GAAA,EAAK,MAAO,EAAA;AAAA;AAEpC,IAAO,OAAA,EAAE,KAAO,EAAA,IAAA,EAAM,GAAU,EAAA;AAAA,GACjC,EACA,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,KAAA,EAAO,IAAK,EAAA,EAAG,CAC1B,qBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,IAAM,EAAA,GAAA;AAAA,MACN,MAAM,KAAS,IAAA,GAAA;AAAA,MACf,IAAA,EAAM,aAAa,IAAI,CAAA;AAAA,MACvB,MAAO,EAAA;AAAA,KAAA;AAAA,IAJF,eAAe,CAAC,CAAA;AAAA,GAMxB,CACL,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.esm.js

@@ -1,4 +1,5 @@
-import React, { memo, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useState } from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
@@ -70,32 +71,32 @@ const StepTimeTicker = ({ step }) => {
     const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
     setTime(humanizeDuration(formatted, { round: true }));
   }, 1e3);
-  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
+  return /* @__PURE__ */ jsx(Typography, { variant: "caption", children: time });
 };
 function TaskStepIconComponent(props) {
   const classes = useStepIconStyles();
   const { active, completed, error } = props;
   const getMiddle = () => {
     if (active) {
-      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "24px" });
+      return /* @__PURE__ */ jsx(CircularProgress, { size: "24px" });
     }
     if (completed) {
-      return /* @__PURE__ */ React.createElement(CheckIcon, null);
+      return /* @__PURE__ */ jsx(CheckIcon, {});
     }
     if (error) {
-      return /* @__PURE__ */ React.createElement(Cancel, null);
+      return /* @__PURE__ */ jsx(Cancel, {});
     }
-    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
+    return /* @__PURE__ */ jsx(FiberManualRecordIcon, {});
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: classNames(classes.root, {
         [classes.completed]: completed,
         [classes.error]: error
-      })
-    },
-    getMiddle()
+      }),
+      children: getMiddle()
+    }
   );
 }
 const TaskStatusStepper = memo(
@@ -103,36 +104,39 @@ const TaskStatusStepper = memo(
     const { steps, currentStepId, onUserStepChange } = props;
     const classes = useStyles(props);
     const { t } = useTranslationRef(scaffolderTranslationRef);
-    return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx(
       Stepper,
       {
         activeStep: steps.findIndex((s) => s.id === currentStepId),
         orientation: "vertical",
-        nonLinear: true
-      },
-      steps.map((step, index) => {
-        const isCancelled = step.status === "cancelled";
-        const isActive = step.status === "processing";
-        const isCompleted = step.status === "completed";
-        const isFailed = step.status === "failed";
-        const isSkipped = step.status === "skipped";
-        return /* @__PURE__ */ React.createElement(Step, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
-          StepLabel,
-          {
-            StepIconProps: {
-              completed: isCompleted,
-              error: isFailed || isCancelled,
-              active: isActive
-            },
-            StepIconComponent: TaskStepIconComponent,
-            className: classes.stepWrapper
-          },
-          /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, t(
-            "templateEditorPage.taskStatusStepper.skippedStepTitle"
-          )) : /* @__PURE__ */ React.createElement(StepTimeTicker, { step }))
-        )));
-      })
-    ));
+        nonLinear: true,
+        children: steps.map((step, index) => {
+          const isCancelled = step.status === "cancelled";
+          const isActive = step.status === "processing";
+          const isCompleted = step.status === "completed";
+          const isFailed = step.status === "failed";
+          const isSkipped = step.status === "skipped";
+          return /* @__PURE__ */ jsx(Step, { expanded: true, children: /* @__PURE__ */ jsx(StepButton, { onClick: () => onUserStepChange(step.id), children: /* @__PURE__ */ jsx(
+            StepLabel,
+            {
+              StepIconProps: {
+                completed: isCompleted,
+                error: isFailed || isCancelled,
+                active: isActive
+              },
+              StepIconComponent: TaskStepIconComponent,
+              className: classes.stepWrapper,
+              children: /* @__PURE__ */ jsxs("div", { className: classes.labelWrapper, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: step.name }),
+                isSkipped ? /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t(
+                  "templateEditorPage.taskStatusStepper.skippedStepTitle"
+                ) }) : /* @__PURE__ */ jsx(StepTimeTicker, { step })
+              ] })
+            }
+          ) }) }, String(index));
+        })
+      }
+    ) });
   }
 );
 

package/dist/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskStatusStepper.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.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 */\nimport React, { useState } from 'react';\nimport { makeStyles, createStyles, Theme } from '@material-ui/core/styles';\nimport { memo } from 'react';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Stepper from '@material-ui/core/Stepper';\nimport { ScaffolderTaskStatus } from '@backstage/plugin-scaffolder-react';\nimport StepButton from '@material-ui/core/StepButton';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Cancel from '@material-ui/icons/Cancel';\nimport Check from '@material-ui/icons/Check';\nimport FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';\nimport Typography from '@material-ui/core/Typography';\nimport { DateTime, Interval } from 'luxon';\nimport useInterval from 'react-use/esm/useInterval';\nimport humanizeDuration from 'humanize-duration';\nimport classNames from 'classnames';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../../translation';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    root: {\n      width: '100%',\n    },\n    button: {\n      marginBottom: theme.spacing(2),\n      marginLeft: theme.spacing(2),\n    },\n    actionsContainer: {\n      marginBottom: theme.spacing(2),\n    },\n    resetContainer: {\n      padding: theme.spacing(3),\n    },\n    labelWrapper: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    stepWrapper: {\n      width: '100%',\n    },\n  }),\n);\n\ntype TaskStep = {\n  id: string;\n  name: string;\n  status: ScaffolderTaskStatus;\n  startedAt?: string;\n  endedAt?: string;\n};\n\nconst useStepIconStyles = makeStyles(theme =>\n  createStyles({\n    root: {\n      color: theme.palette.text.disabled,\n      display: 'flex',\n      height: 22,\n      alignItems: 'center',\n    },\n    completed: {\n      color: theme.palette.status.ok,\n    },\n    error: {\n      color: theme.palette.status.error,\n    },\n  }),\n);\n\nconst StepTimeTicker = ({ step }: { step: TaskStep }) => {\n  const [time, setTime] = useState('');\n\n  useInterval(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    const end = step.endedAt\n      ? DateTime.fromISO(step.endedAt)\n      : DateTime.local();\n\n    const startedAt = DateTime.fromISO(step.startedAt);\n    const formatted = Interval.fromDateTimes(startedAt, end)\n      .toDuration()\n      .valueOf();\n\n    setTime(humanizeDuration(formatted, { round: true }));\n  }, 1000);\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n\nfunction TaskStepIconComponent(props: StepIconProps) {\n  const classes = useStepIconStyles();\n  const { active, completed, error } = props;\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"24px\" />;\n    }\n    if (completed) {\n      return <Check />;\n    }\n    if (error) {\n      return <Cancel />;\n    }\n    return <FiberManualRecordIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n}\n\nexport const TaskStatusStepper = memo(\n  (props: {\n    steps: TaskStep[];\n    currentStepId: string | undefined;\n    onUserStepChange: (id: string) => void;\n    classes?: {\n      root?: string;\n    };\n  }) => {\n    const { steps, currentStepId, onUserStepChange } = props;\n    const classes = useStyles(props);\n    const { t } = useTranslationRef(scaffolderTranslationRef);\n\n    return (\n      <div className={classes.root}>\n        <Stepper\n          activeStep={steps.findIndex(s => s.id === currentStepId)}\n          orientation=\"vertical\"\n          nonLinear\n        >\n          {steps.map((step, index) => {\n            const isCancelled = step.status === 'cancelled';\n            const isActive = step.status === 'processing';\n            const isCompleted = step.status === 'completed';\n            const isFailed = step.status === 'failed';\n            const isSkipped = step.status === 'skipped';\n\n            return (\n              <Step key={String(index)} expanded>\n                <StepButton onClick={() => onUserStepChange(step.id)}>\n                  <StepLabel\n                    StepIconProps={{\n                      completed: isCompleted,\n                      error: isFailed || isCancelled,\n                      active: isActive,\n                    }}\n                    StepIconComponent={TaskStepIconComponent}\n                    className={classes.stepWrapper}\n                  >\n                    <div className={classes.labelWrapper}>\n                      <Typography variant=\"subtitle2\">{step.name}</Typography>\n                      {isSkipped ? (\n                        <Typography variant=\"caption\">\n                          {t(\n                            'templateEditorPage.taskStatusStepper.skippedStepTitle',\n                          )}\n                        </Typography>\n                      ) : (\n                        <StepTimeTicker step={step} />\n                      )}\n                    </div>\n                  </StepLabel>\n                </StepButton>\n              </Step>\n            );\n          })}\n        </Stepper>\n      </div>\n    );\n  },\n);\n"],"names":["Check"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAa,CAAA;AAAA,IACX,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,KACT;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC7B,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC7B;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC/B;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC1B;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,CAAA;AAAA,MACN,aAAe,EAAA,KAAA;AAAA,MACf,cAAgB,EAAA;AAAA,KAClB;AAAA,IACA,WAAa,EAAA;AAAA,MACX,KAAO,EAAA;AAAA;AACT,GACD;AACH,CAAA;AAUA,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAAW,WACnC,YAAa,CAAA;AAAA,IACX,IAAM,EAAA;AAAA,MACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,QAAA;AAAA,MAC1B,OAAS,EAAA,MAAA;AAAA,MACT,MAAQ,EAAA,EAAA;AAAA,MACR,UAAY,EAAA;AAAA,KACd;AAAA,IACA,SAAW,EAAA;AAAA,MACT,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA,KAC9B;AAAA,IACA,KAAO,EAAA;AAAA,MACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AAC9B,GACD;AACH,CAAA;AAEA,MAAM,cAAiB,GAAA,CAAC,EAAE,IAAA,EAA+B,KAAA;AACvD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AAEnC,EAAA,WAAA,CAAY,MAAM;AAChB,IAAI,IAAA,CAAC,KAAK,SAAW,EAAA;AACnB,MAAA,OAAA,CAAQ,EAAE,CAAA;AACV,MAAA;AAAA;AAGF,IAAM,MAAA,GAAA,GAAM,KAAK,OACb,GAAA,QAAA,CAAS,QAAQ,IAAK,CAAA,OAAO,CAC7B,GAAA,QAAA,CAAS,KAAM,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,SAAS,CAAA;AACjD,IAAM,MAAA,SAAA,GAAY,SAAS,aAAc,CAAA,SAAA,EAAW,GAAG,CACpD,CAAA,UAAA,GACA,OAAQ,EAAA;AAEX,IAAA,OAAA,CAAQ,iBAAiB,SAAW,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA,KACnD,GAAI,CAAA;AAEP,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAA,EAAW,IAAK,CAAA;AAC7C,CAAA;AAEA,SAAS,sBAAsB,KAAsB,EAAA;AACnD,EAAA,MAAM,UAAU,iBAAkB,EAAA;AAClC,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA;AAErC,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,IAAA,EAAK,MAAO,EAAA,CAAA;AAAA;AAEvC,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,2CAAQA,SAAM,EAAA,IAAA,CAAA;AAAA;AAEhB,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2CAAQ,MAAO,EAAA,IAAA,CAAA;AAAA;AAEjB,IAAA,2CAAQ,qBAAsB,EAAA,IAAA,CAAA;AAAA,GAChC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,QAClC,CAAC,OAAQ,CAAA,SAAS,GAAG,SAAA;AAAA,QACrB,CAAC,OAAQ,CAAA,KAAK,GAAG;AAAA,OAClB;AAAA,KAAA;AAAA,IAEA,SAAU;AAAA,GACb;AAEJ;AAEO,MAAM,iBAAoB,GAAA,IAAA;AAAA,EAC/B,CAAC,KAOK,KAAA;AACJ,IAAA,MAAM,EAAE,KAAA,EAAO,aAAe,EAAA,gBAAA,EAAqB,GAAA,KAAA;AACnD,IAAM,MAAA,OAAA,GAAU,UAAU,KAAK,CAAA;AAC/B,IAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,IACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,YAAY,KAAM,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,CAAA,CAAE,OAAO,aAAa,CAAA;AAAA,QACvD,WAAY,EAAA,UAAA;AAAA,QACZ,SAAS,EAAA;AAAA,OAAA;AAAA,MAER,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAC1B,QAAM,MAAA,WAAA,GAAc,KAAK,MAAW,KAAA,WAAA;AACpC,QAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,YAAA;AACjC,QAAM,MAAA,WAAA,GAAc,KAAK,MAAW,KAAA,WAAA;AACpC,QAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,QAAA;AACjC,QAAM,MAAA,SAAA,GAAY,KAAK,MAAW,KAAA,SAAA;AAElC,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,GAAK,EAAA,MAAA,CAAO,KAAK,CAAG,EAAA,QAAA,EAAQ,IAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAS,EAAA,MAAM,gBAAiB,CAAA,IAAA,CAAK,EAAE,CACjD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,aAAe,EAAA;AAAA,cACb,SAAW,EAAA,WAAA;AAAA,cACX,OAAO,QAAY,IAAA,WAAA;AAAA,cACnB,MAAQ,EAAA;AAAA,aACV;AAAA,YACA,iBAAmB,EAAA,qBAAA;AAAA,YACnB,WAAW,OAAQ,CAAA;AAAA,WAAA;AAAA,8CAElB,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,YAAA,EAAA,sCACrB,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAa,EAAA,EAAA,IAAA,CAAK,IAAK,CAC1C,EAAA,SAAA,mBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,SACjB,EAAA,EAAA,CAAA;AAAA,YACC;AAAA,WAEJ,CAAA,mBAEC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,MAAY,CAEhC;AAAA,SAEJ,CACF,CAAA;AAAA,OAEH;AAAA,KAEL,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"TaskStatusStepper.esm.js","sources":["../../../../../src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.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 */\nimport { useState } from 'react';\nimport { makeStyles, createStyles, Theme } from '@material-ui/core/styles';\nimport { memo } from 'react';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Stepper from '@material-ui/core/Stepper';\nimport { ScaffolderTaskStatus } from '@backstage/plugin-scaffolder-react';\nimport StepButton from '@material-ui/core/StepButton';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Cancel from '@material-ui/icons/Cancel';\nimport Check from '@material-ui/icons/Check';\nimport FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';\nimport Typography from '@material-ui/core/Typography';\nimport { DateTime, Interval } from 'luxon';\nimport useInterval from 'react-use/esm/useInterval';\nimport humanizeDuration from 'humanize-duration';\nimport classNames from 'classnames';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../../translation';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    root: {\n      width: '100%',\n    },\n    button: {\n      marginBottom: theme.spacing(2),\n      marginLeft: theme.spacing(2),\n    },\n    actionsContainer: {\n      marginBottom: theme.spacing(2),\n    },\n    resetContainer: {\n      padding: theme.spacing(3),\n    },\n    labelWrapper: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    stepWrapper: {\n      width: '100%',\n    },\n  }),\n);\n\ntype TaskStep = {\n  id: string;\n  name: string;\n  status: ScaffolderTaskStatus;\n  startedAt?: string;\n  endedAt?: string;\n};\n\nconst useStepIconStyles = makeStyles(theme =>\n  createStyles({\n    root: {\n      color: theme.palette.text.disabled,\n      display: 'flex',\n      height: 22,\n      alignItems: 'center',\n    },\n    completed: {\n      color: theme.palette.status.ok,\n    },\n    error: {\n      color: theme.palette.status.error,\n    },\n  }),\n);\n\nconst StepTimeTicker = ({ step }: { step: TaskStep }) => {\n  const [time, setTime] = useState('');\n\n  useInterval(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    const end = step.endedAt\n      ? DateTime.fromISO(step.endedAt)\n      : DateTime.local();\n\n    const startedAt = DateTime.fromISO(step.startedAt);\n    const formatted = Interval.fromDateTimes(startedAt, end)\n      .toDuration()\n      .valueOf();\n\n    setTime(humanizeDuration(formatted, { round: true }));\n  }, 1000);\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n\nfunction TaskStepIconComponent(props: StepIconProps) {\n  const classes = useStepIconStyles();\n  const { active, completed, error } = props;\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"24px\" />;\n    }\n    if (completed) {\n      return <Check />;\n    }\n    if (error) {\n      return <Cancel />;\n    }\n    return <FiberManualRecordIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n}\n\nexport const TaskStatusStepper = memo(\n  (props: {\n    steps: TaskStep[];\n    currentStepId: string | undefined;\n    onUserStepChange: (id: string) => void;\n    classes?: {\n      root?: string;\n    };\n  }) => {\n    const { steps, currentStepId, onUserStepChange } = props;\n    const classes = useStyles(props);\n    const { t } = useTranslationRef(scaffolderTranslationRef);\n\n    return (\n      <div className={classes.root}>\n        <Stepper\n          activeStep={steps.findIndex(s => s.id === currentStepId)}\n          orientation=\"vertical\"\n          nonLinear\n        >\n          {steps.map((step, index) => {\n            const isCancelled = step.status === 'cancelled';\n            const isActive = step.status === 'processing';\n            const isCompleted = step.status === 'completed';\n            const isFailed = step.status === 'failed';\n            const isSkipped = step.status === 'skipped';\n\n            return (\n              <Step key={String(index)} expanded>\n                <StepButton onClick={() => onUserStepChange(step.id)}>\n                  <StepLabel\n                    StepIconProps={{\n                      completed: isCompleted,\n                      error: isFailed || isCancelled,\n                      active: isActive,\n                    }}\n                    StepIconComponent={TaskStepIconComponent}\n                    className={classes.stepWrapper}\n                  >\n                    <div className={classes.labelWrapper}>\n                      <Typography variant=\"subtitle2\">{step.name}</Typography>\n                      {isSkipped ? (\n                        <Typography variant=\"caption\">\n                          {t(\n                            'templateEditorPage.taskStatusStepper.skippedStepTitle',\n                          )}\n                        </Typography>\n                      ) : (\n                        <StepTimeTicker step={step} />\n                      )}\n                    </div>\n                  </StepLabel>\n                </StepButton>\n              </Step>\n            );\n          })}\n        </Stepper>\n      </div>\n    );\n  },\n);\n"],"names":["Check"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { editRouteRef } from '../../../routes.esm.js';
@@ -27,22 +28,28 @@ const TemplateEditor = (props) => {
   const handleCloseDirectory = useCallback(() => {
     closeDirectory().then(() => navigate(editLink()));
   }, [closeDirectory, navigate, editLink]);
-  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement(TemplateEditorLayout, null, /* @__PURE__ */ React.createElement(TemplateEditorLayoutToolbar, null, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions }, /* @__PURE__ */ React.createElement(
-    TemplateEditorToolbarFileMenu,
-    {
-      onOpenDirectory: handleOpenDirectory,
-      onCreateDirectory: handleCreateDirectory,
-      onCloseDirectory: handleCloseDirectory
-    }
-  ))), /* @__PURE__ */ React.createElement(TemplateEditorLayoutBrowser, null, /* @__PURE__ */ React.createElement(TemplateEditorBrowser, { onClose: closeDirectory })), /* @__PURE__ */ React.createElement(TemplateEditorLayoutFiles, null, /* @__PURE__ */ React.createElement(TemplateEditorTextArea.DirectoryEditor, { errorText })), /* @__PURE__ */ React.createElement(TemplateEditorLayoutPreview, null, /* @__PURE__ */ React.createElement(
-    TemplateEditorForm.DirectoryEditorDryRun,
-    {
-      setErrorText,
-      fieldExtensions,
-      layouts,
-      formProps
-    }
-  )), /* @__PURE__ */ React.createElement(TemplateEditorLayoutConsole, null, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
+  return /* @__PURE__ */ jsx(DirectoryEditorProvider, { directory, children: /* @__PURE__ */ jsx(DryRunProvider, { children: /* @__PURE__ */ jsxs(TemplateEditorLayout, { children: [
+    /* @__PURE__ */ jsx(TemplateEditorLayoutToolbar, { children: /* @__PURE__ */ jsx(TemplateEditorToolbar, { fieldExtensions, children: /* @__PURE__ */ jsx(
+      TemplateEditorToolbarFileMenu,
+      {
+        onOpenDirectory: handleOpenDirectory,
+        onCreateDirectory: handleCreateDirectory,
+        onCloseDirectory: handleCloseDirectory
+      }
+    ) }) }),
+    /* @__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,
+      {
+        setErrorText,
+        fieldExtensions,
+        layouts,
+        formProps
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TemplateEditorLayoutConsole, { children: /* @__PURE__ */ jsx(DryRunResults, {}) })
+  ] }) }) });
 };
 
 export { TemplateEditor };

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 React, { 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,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,uBAAwB,EAAA,EAAA,SAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,eACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,6BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,mBAAA;AAAA,MACjB,iBAAmB,EAAA,qBAAA;AAAA,MACnB,gBAAkB,EAAA;AAAA;AAAA,GAEtB,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,mDACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,SAAS,cAAgB,EAAA,CAClD,mBACC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,IAAA,sCACE,sBAAuB,CAAA,eAAA,EAAvB,EAAuC,SAAsB,EAAA,CAChE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,2BACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAmB,CAAA,qBAAA;AAAA,IAAnB;AAAA,MACC,YAAA;AAAA,MACA,eAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AAAA,GAEJ,mBACC,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,sCACE,aAAc,EAAA,IAAA,CACjB,CACF,CACF,CACF,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} 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;;;;"}