@backstage/plugin-scaffolder 1.25.0 → 1.26.0-next.0

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

@@ -0,0 +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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"}

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

@@ -0,0 +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,UAAA;AAAA,KACjB;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,QAAA,GAAW,CACtB,KAKG,KAAA;AACH,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAc,GAAA,KAAA,CAAA;AAE3C,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;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,CAAA;AAEJ;;;;"}

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

@@ -0,0 +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,CAAA;AACvB,EAAA,MAAM,MAAM,MAAO,EAAA,CAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA,CAAA;AAE9C,EAAM,MAAA,YAAA,GAAe,CAAC,GACpB,KAAA,GAAA,GAAM,IAAI,aAAc,CAAA,GAAG,KAAK,YAAe,GAAA,YAAA,CAAA;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,WAAA;AAAA,OACnB,CAAA,CAAA;AACD,MAAM,MAAA,MAAA,GAAS,YAAY,UAAU,CAAA,CAAA;AACrC,MAAA,OAAO,EAAE,KAAA,EAAO,IAAM,EAAA,GAAA,EAAK,MAAO,EAAA,CAAA;AAAA,KACpC;AACA,IAAO,OAAA,EAAE,KAAO,EAAA,IAAA,EAAM,GAAU,EAAA,CAAA;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,QAAA;AAAA,KAAA;AAAA,GAEV,CACL,CAAA,CAAA;AAEJ;;;;"}

package/dist/{next → alpha/components}/TemplateEditorPage/DryRunResults/TaskStatusStepper.esm.js

@@ -14,7 +14,7 @@ import useInterval from 'react-use/esm/useInterval';
 import humanizeDuration from 'humanize-duration';
 import classNames from 'classnames';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { scaffolderTranslationRef } from '../../../../translation.esm.js';
 
 const useStyles = makeStyles(
   (theme) => createStyles({

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,94 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useState } from 'react';
+import Paper from '@material-ui/core/Paper';
+import { DirectoryEditorProvider } from './DirectoryEditorContext.esm.js';
+import { TemplateEditorToolbar } from './TemplateEditorToolbar.esm.js';
+import { TemplateEditorBrowser } from './TemplateEditorBrowser.esm.js';
+import { DryRunProvider } from './DryRunContext.esm.js';
+import { TemplateEditorTextArea } from './TemplateEditorTextArea.esm.js';
+import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
+import { DryRunResults } from './DryRunResults/DryRunResults.esm.js';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    // Reset and fix sizing to make sure scrolling behaves correctly
+    root: {
+      height: "100%",
+      gridArea: "pageContent",
+      display: "grid",
+      gridTemplateAreas: `
+      "toolbar toolbar toolbar"
+      "browser editor preview"
+      "results results results"
+    `,
+      gridTemplateColumns: "1fr 3fr 2fr",
+      gridTemplateRows: "auto 1fr auto"
+    },
+    toolbar: {
+      gridArea: "toolbar"
+    },
+    browser: {
+      gridArea: "browser",
+      overflow: "auto"
+    },
+    editor: {
+      gridArea: "editor",
+      overflow: "auto",
+      borderLeft: `1px solid ${theme.palette.divider}`
+    },
+    preview: {
+      gridArea: "preview",
+      position: "relative",
+      borderLeft: `1px solid ${theme.palette.divider}`,
+      backgroundColor: theme.palette.background.default
+    },
+    scroll: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: theme.spacing(1),
+      overflow: "auto"
+    },
+    results: {
+      gridArea: "results"
+    }
+  }),
+  { name: "ScaffolderTemplateEditor" }
+);
+const TemplateEditor = (props) => {
+  const classes = useStyles();
+  const [errorText, setErrorText] = useState();
+  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory: props.directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement(
+    Paper,
+    {
+      className: classes.root,
+      component: "main",
+      variant: "outlined",
+      square: true
+    },
+    /* @__PURE__ */ React.createElement("section", { className: classes.toolbar }, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions: props.fieldExtensions })),
+    /* @__PURE__ */ React.createElement("section", { className: classes.browser }, /* @__PURE__ */ React.createElement(TemplateEditorBrowser, { onClose: props.onClose })),
+    /* @__PURE__ */ React.createElement("section", { className: classes.editor }, /* @__PURE__ */ React.createElement(
+      TemplateEditorTextArea.DirectoryEditor,
+      {
+        errorText,
+        onLoad: props.onLoad
+      }
+    )),
+    /* @__PURE__ */ React.createElement("section", { className: classes.preview }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, /* @__PURE__ */ React.createElement(
+      TemplateEditorForm.DirectoryEditorDryRun,
+      {
+        setErrorText,
+        fieldExtensions: props.fieldExtensions,
+        layouts: props.layouts,
+        formProps: props.formProps
+      }
+    ))),
+    /* @__PURE__ */ React.createElement("section", { className: classes.results }, /* @__PURE__ */ React.createElement(DryRunResults, null))
+  )));
+};
+
+export { TemplateEditor };
+//# sourceMappingURL=TemplateEditor.esm.js.map

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

@@ -0,0 +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 { makeStyles } from '@material-ui/core/styles';\nimport React, { useState } from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport type {\n  FormProps,\n  LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { TemplateDirectoryAccess } from '../../../lib/filesystem';\nimport { DirectoryEditorProvider } from './DirectoryEditorContext';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorBrowser } from './TemplateEditorBrowser';\nimport { DryRunProvider } from './DryRunContext';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { DryRunResults } from './DryRunResults';\n\n/** @public */\nexport type ScaffolderTemplateEditorClassKey =\n  | 'root'\n  | 'browser'\n  | 'editor'\n  | 'preview'\n  | 'results';\n\nconst useStyles = makeStyles(\n  theme => ({\n    // Reset and fix sizing to make sure scrolling behaves correctly\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\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    toolbar: {\n      gridArea: 'toolbar',\n    },\n    browser: {\n      gridArea: 'browser',\n      overflow: 'auto',\n    },\n    editor: {\n      gridArea: 'editor',\n      overflow: 'auto',\n      borderLeft: `1px solid ${theme.palette.divider}`,\n    },\n    preview: {\n      gridArea: 'preview',\n      position: 'relative',\n      borderLeft: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.default,\n    },\n    scroll: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      padding: theme.spacing(1),\n      overflow: 'auto',\n    },\n    results: {\n      gridArea: 'results',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditor' },\n);\n\nexport const TemplateEditor = (props: {\n  directory?: TemplateDirectoryAccess;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  onClose?: () => void;\n  formProps?: FormProps;\n  onLoad?: () => void;\n}) => {\n  const classes = useStyles();\n  const [errorText, setErrorText] = useState<string>();\n\n  return (\n    <DirectoryEditorProvider directory={props.directory}>\n      <DryRunProvider>\n        <Paper\n          className={classes.root}\n          component=\"main\"\n          variant=\"outlined\"\n          square\n        >\n          <section className={classes.toolbar}>\n            <TemplateEditorToolbar fieldExtensions={props.fieldExtensions} />\n          </section>\n          <section className={classes.browser}>\n            <TemplateEditorBrowser onClose={props.onClose} />\n          </section>\n          <section className={classes.editor}>\n            <TemplateEditorTextArea.DirectoryEditor\n              errorText={errorText}\n              onLoad={props.onLoad}\n            />\n          </section>\n          <section className={classes.preview}>\n            <div className={classes.scroll}>\n              <TemplateEditorForm.DirectoryEditorDryRun\n                setErrorText={setErrorText}\n                fieldExtensions={props.fieldExtensions}\n                layouts={props.layouts}\n                formProps={props.formProps}\n              />\n            </div>\n          </section>\n          <section className={classes.results}>\n            <DryRunResults />\n          </section>\n        </Paper>\n      </DryRunProvider>\n    </DirectoryEditorProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/{next → alpha/components}/TemplateEditorPage/TemplateEditorBrowser.esm.js

@@ -1,3 +1,4 @@
+import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -7,37 +8,33 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
 import React from 'react';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
-import { FileBrowser } from '../../components/FileBrowser/FileBrowser.esm.js';
+import { FileBrowser } from '../../../components/FileBrowser/FileBrowser.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { scaffolderTranslationRef } from '../../translation.esm.js';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  button: {
-    padding: theme.spacing(1)
-  },
-  buttons: {
-    display: "flex",
-    flexFlow: "row nowrap",
-    alignItems: "center",
-    justifyContent: "flex-start"
-  },
-  buttonsGap: {
-    flex: "1 1 auto"
-  },
-  buttonsDivider: {
-    marginBottom: theme.spacing(1)
-  }
-}));
+const useStyles = makeStyles(
+  (theme) => ({
+    grid: {
+      "& svg": {
+        margin: theme.spacing(1)
+      }
+    },
+    closeButton: {
+      marginLeft: "auto"
+    }
+  }),
+  { name: "ScaffolderTemplateEditorBrowser" }
+);
 function TemplateEditorBrowser(props) {
   const classes = useStyles();
   const directoryEditor = useDirectoryEditor();
-  const changedFiles = directoryEditor.files.filter((file) => file.dirty);
+  const changedFiles = directoryEditor?.files.filter((file) => file.dirty);
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const handleClose = () => {
     if (!props.onClose) {
       return;
     }
-    if (changedFiles.length > 0) {
+    if (changedFiles?.length) {
       const accepted = window.confirm(
         t("templateEditorPage.templateEditorBrowser.closeConfirmMessage")
       );
@@ -47,7 +44,7 @@ function TemplateEditorBrowser(props) {
     }
     props.onClose();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { className: classes.grid, container: true, spacing: 0, alignItems: "center" }, /* @__PURE__ */ React.createElement(
     Tooltip,
     {
       title: t("templateEditorPage.templateEditorBrowser.saveIconTooltip")
@@ -55,9 +52,9 @@ function TemplateEditorBrowser(props) {
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        className: classes.button,
-        disabled: directoryEditor.files.every((file) => !file.dirty),
-        onClick: () => directoryEditor.save()
+        size: "small",
+        disabled: directoryEditor?.files.every((file) => !file.dirty),
+        onClick: () => directoryEditor?.save()
       },
       /* @__PURE__ */ React.createElement(SaveIcon, null)
     )
@@ -68,26 +65,27 @@ function TemplateEditorBrowser(props) {
         "templateEditorPage.templateEditorBrowser.reloadIconTooltip"
       )
     },
+    /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => directoryEditor?.reload() }, /* @__PURE__ */ React.createElement(RefreshIcon, null))
+  ), /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: t("templateEditorPage.templateEditorBrowser.closeIconTooltip")
+    },
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        className: classes.button,
-        onClick: () => directoryEditor.reload()
+        size: "small",
+        className: classes.closeButton,
+        onClick: handleClose
       },
-      /* @__PURE__ */ React.createElement(RefreshIcon, null)
+      /* @__PURE__ */ React.createElement(CloseIcon, null)
     )
-  ), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t("templateEditorPage.templateEditorBrowser.closeIconTooltip")
-    },
-    /* @__PURE__ */ React.createElement(IconButton, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))
-  )), /* @__PURE__ */ React.createElement(Divider, { className: classes.buttonsDivider }), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
     FileBrowser,
     {
-      selected: directoryEditor.selectedFile?.path ?? "",
-      onSelect: directoryEditor.setSelectedFile,
-      filePaths: directoryEditor.files.map((file) => file.path)
+      selected: directoryEditor?.selectedFile?.path ?? "",
+      onSelect: directoryEditor?.setSelectedFile,
+      filePaths: directoryEditor?.files.map((file) => file.path) ?? []
     }
   ));
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorBrowser.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.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 Grid from '@material-ui/core/Grid';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport React from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { FileBrowser } from '../../../components/FileBrowser';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(\n  theme => ({\n    grid: {\n      '& svg': {\n        margin: theme.spacing(1),\n      },\n    },\n    closeButton: {\n      marginLeft: 'auto',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorBrowser' },\n);\n\n/** The local file browser for the template editor */\nexport function TemplateEditorBrowser(props: { onClose?: () => void }) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const changedFiles = directoryEditor?.files.filter(file => file.dirty);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = () => {\n    if (!props.onClose) {\n      return;\n    }\n    if (changedFiles?.length) {\n      // eslint-disable-next-line no-alert\n      const accepted = window.confirm(\n        t('templateEditorPage.templateEditorBrowser.closeConfirmMessage'),\n      );\n      if (!accepted) {\n        return;\n      }\n    }\n    props.onClose();\n  };\n\n  return (\n    <>\n      <Grid className={classes.grid} container spacing={0} alignItems=\"center\">\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.saveIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            disabled={directoryEditor?.files.every(file => !file.dirty)}\n            onClick={() => directoryEditor?.save()}\n          >\n            <SaveIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t(\n            'templateEditorPage.templateEditorBrowser.reloadIconTooltip',\n          )}\n        >\n          <IconButton size=\"small\" onClick={() => directoryEditor?.reload()}>\n            <RefreshIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.closeIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            className={classes.closeButton}\n            onClick={handleClose}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n      <Divider />\n      <FileBrowser\n        selected={directoryEditor?.selectedFile?.path ?? ''}\n        onSelect={directoryEditor?.setSelectedFile}\n        filePaths={directoryEditor?.files.map(file => file.path) ?? []}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{next → alpha/components}/TemplateEditorPage/TemplateEditorForm.esm.js

@@ -1,25 +1,19 @@
 import { useApiHolder } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 import React, { useState, useMemo, Component } from 'react';
 import useDebounce from 'react-use/esm/useDebounce';
 import yaml from 'yaml';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { createAsyncValidators, Stepper } from '@backstage/plugin-scaffolder-react/alpha';
 import { useDryRun } from './DryRunContext.esm.js';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const useStyles = makeStyles({
   containerWrapper: {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  },
-  container: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "auto"
+    width: "100%"
   }
 });
 class ErrorBoundary extends Component {
@@ -53,6 +47,7 @@ function TemplateEditorForm(props) {
   } = props;
   const classes = useStyles();
   const apiHolder = useApiHolder();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const [steps, setSteps] = useState();
   const fields = useMemo(() => {
     return Object.fromEntries(
@@ -110,10 +105,7 @@ function TemplateEditorForm(props) {
     250,
     [contentIsSpec, content, apiHolder]
   );
-  if (!steps) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: classes.containerWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(ErrorBoundary, { invalidator: steps, setErrorText }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: classes.containerWrapper }, steps ? /* @__PURE__ */ React.createElement(Paper, { variant: "outlined" }, /* @__PURE__ */ React.createElement(ErrorBoundary, { invalidator: steps, setErrorText }, /* @__PURE__ */ React.createElement(
     Stepper,
     {
       manifest: { steps, title: "Template Editor" },
@@ -125,13 +117,13 @@ function TemplateEditorForm(props) {
       layouts,
       formProps: props.formProps
     }
-  ))));
+  ))) : /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, t("templateEditorForm.stepper.emptyText")));
 }
 function TemplateEditorFormDirectoryEditorDryRun(props) {
   const { setErrorText, fieldExtensions = [], layouts } = props;
   const dryRun = useDryRun();
   const directoryEditor = useDirectoryEditor();
-  const { selectedFile } = directoryEditor;
+  const { selectedFile } = directoryEditor ?? {};
   const handleDryRun = async (data) => {
     if (!selectedFile) {
       return;
@@ -140,7 +132,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
       await dryRun.execute({
         templateContent: selectedFile.content,
         values: data,
-        files: directoryEditor.files
+        files: directoryEditor?.files ?? []
       });
       setErrorText();
     } catch (e) {
@@ -149,7 +141,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
     }
   };
   const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
-  return /* @__PURE__ */ React.createElement(
+  return directoryEditor ? /* @__PURE__ */ React.createElement(
     TemplateEditorForm,
     {
       onDryRun: handleDryRun,
@@ -159,7 +151,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
       layouts,
       formProps: props.formProps
     }
-  );
+  ) : null;
 }
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorForm.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 { useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonObject, JsonValue } from '@backstage/types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport React, { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  Stepper,\n  createAsyncValidators,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useDryRun } from './DryRunContext';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    width: '100%',\n  },\n});\n\ninterface ErrorBoundaryProps {\n  invalidator: unknown;\n  setErrorText(errorText: string | undefined): void;\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  shouldRender: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state = {\n    shouldRender: true,\n  };\n\n  componentDidUpdate(prevProps: { invalidator: unknown }) {\n    if (prevProps.invalidator !== this.props.invalidator) {\n      this.setState({ shouldRender: true });\n    }\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.setErrorText(error.message);\n    this.setState({ shouldRender: false });\n  }\n\n  render() {\n    return this.state.shouldRender ? this.props.children : null;\n  }\n}\n\ninterface TemplateEditorFormProps {\n  content?: string;\n  /** Setting this to true will cause the content to be parsed as if it is the template entity spec */\n  contentIsSpec?: boolean;\n  setErrorText: (errorText?: string) => void;\n\n  onDryRun?: (data: JsonObject) => Promise<void>;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}\n\nfunction isJsonObject(value: JsonValue | undefined): value is JsonObject {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/** Shows the a template form that is parsed from the provided content */\nexport function TemplateEditorForm(props: TemplateEditorFormProps) {\n  const {\n    content,\n    contentIsSpec,\n    onDryRun,\n    setErrorText,\n    fieldExtensions = [],\n    layouts = [],\n  } = props;\n  const classes = useStyles();\n  const apiHolder = useApiHolder();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();\n\n  const fields = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  useDebounce(\n    () => {\n      try {\n        if (!content) {\n          setSteps(undefined);\n          return;\n        }\n        const parsed: JsonValue = yaml\n          .parseAllDocuments(content)\n          .filter(c => c)\n          .map(c => c.toJSON())[0];\n\n        if (!isJsonObject(parsed)) {\n          setSteps(undefined);\n          return;\n        }\n\n        let rootObj = parsed;\n        if (!contentIsSpec) {\n          const isTemplate =\n            String(parsed.kind).toLocaleLowerCase('en-US') === 'template';\n          if (!isTemplate) {\n            setSteps(undefined);\n            return;\n          }\n\n          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};\n        }\n\n        const { parameters } = rootObj;\n\n        if (!Array.isArray(parameters)) {\n          setErrorText('Template parameters must be an array');\n          setSteps(undefined);\n          return;\n        }\n\n        const fieldValidators = Object.fromEntries(\n          fieldExtensions.map(({ name, validation }) => [name, validation]),\n        );\n\n        setErrorText();\n        setSteps(\n          parameters.flatMap(param =>\n            isJsonObject(param)\n              ? [\n                  {\n                    title: String(param.title),\n                    schema: param,\n                    validate: createAsyncValidators(param, fieldValidators, {\n                      apiHolder,\n                    }),\n                  },\n                ]\n              : [],\n          ),\n        );\n      } catch (e) {\n        setErrorText(e.message);\n      }\n    },\n    250,\n    [contentIsSpec, content, apiHolder],\n  );\n\n  return (\n    <div className={classes.containerWrapper}>\n      {steps ? (\n        <Paper variant=\"outlined\">\n          <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>\n            <Stepper\n              manifest={{ steps, title: 'Template Editor' }}\n              extensions={fieldExtensions}\n              components={fields}\n              onCreate={async options => {\n                await onDryRun?.(options);\n              }}\n              layouts={layouts}\n              formProps={props.formProps}\n            />\n          </ErrorBoundary>\n        </Paper>\n      ) : (\n        <Typography variant=\"body1\" color=\"textSecondary\">\n          {t('templateEditorForm.stepper.emptyText')}\n        </Typography>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */\nexport function TemplateEditorFormDirectoryEditorDryRun(\n  props: Pick<\n    TemplateEditorFormProps,\n    'setErrorText' | 'fieldExtensions' | 'layouts' | 'formProps'\n  >,\n) {\n  const { setErrorText, fieldExtensions = [], layouts } = props;\n  const dryRun = useDryRun();\n\n  const directoryEditor = useDirectoryEditor();\n  const { selectedFile } = directoryEditor ?? {};\n\n  const handleDryRun = async (data: JsonObject) => {\n    if (!selectedFile) {\n      return;\n    }\n\n    try {\n      await dryRun.execute({\n        templateContent: selectedFile.content,\n        values: data,\n        files: directoryEditor?.files ?? [],\n      });\n      setErrorText();\n    } catch (e) {\n      setErrorText(String(e.cause || e));\n      throw e;\n    }\n  };\n\n  const content =\n    selectedFile && selectedFile.path.match(/\\.ya?ml$/)\n      ? selectedFile.content\n      : undefined;\n\n  return directoryEditor ? (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n      formProps={props.formProps}\n    />\n  ) : null;\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}

package/dist/{next → alpha/components}/TemplateEditorPage/TemplateEditorIntro.esm.js

@@ -6,9 +6,9 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import { makeStyles } from '@material-ui/core/styles';
-import { WebFileSystemAccess } from '../../lib/filesystem/WebFileSystemAccess.esm.js';
+import { WebFileSystemAccess } from '../../../lib/filesystem/WebFileSystemAccess.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { scaffolderTranslationRef } from '../../translation.esm.js';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   introText: {
@@ -65,6 +65,42 @@ function TemplateEditorIntro(props) {
     },
     /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
   )));
+  const cardCreateLocal = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
+    CardActionArea,
+    {
+      disabled: !supportsLoad,
+      onClick: () => props.onSelect?.("create-template")
+    },
+    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "h4",
+        component: "h3",
+        gutterBottom: true,
+        color: supportsLoad ? void 0 : "textSecondary",
+        style: { display: "flex", flexFlow: "row nowrap" }
+      },
+      t("templateEditorPage.templateEditorIntro.createLocal.title")
+    ), /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body1",
+        color: supportsLoad ? void 0 : "textSecondary"
+      },
+      t(
+        "templateEditorPage.templateEditorIntro.createLocal.description"
+      )
+    ))
+  ), !supportsLoad && /* @__PURE__ */ React.createElement("div", { className: classes.infoIcon }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      placement: "top",
+      title: t(
+        "templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip"
+      )
+    },
+    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
+  )));
   const cardFormEditor = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => props.onSelect?.("form") }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, t("templateEditorPage.templateEditorIntro.formEditor.title")), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t("templateEditorPage.templateEditorIntro.formEditor.description")))));
   const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => props.onSelect?.("field-explorer") }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, t("templateEditorPage.templateEditorIntro.fieldExplorer.title")), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t(
     "templateEditorPage.templateEditorIntro.fieldExplorer.description"
@@ -81,6 +117,7 @@ function TemplateEditorIntro(props) {
       }
     },
     supportsLoad && cardLoadLocal,
+    supportsLoad && cardCreateLocal,
     cardFormEditor,
     !supportsLoad && cardLoadLocal,
     cardFieldExplorer

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorIntro.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 React from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  card: {\n    position: 'relative',\n    maxWidth: 340,\n    marginTop: theme.spacing(4),\n    margin: theme.spacing(0, 2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (\n    option: 'create-template' | 'local' | 'form' | 'field-explorer',\n  ) => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const cardLoadLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('local')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            {t('templateEditorPage.templateEditorIntro.loadLocal.title')}\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {t('templateEditorPage.templateEditorIntro.loadLocal.description')}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title={t(\n              'templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip',\n            )}\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardCreateLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('create-template')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            {t('templateEditorPage.templateEditorIntro.createLocal.title')}\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {t(\n              'templateEditorPage.templateEditorIntro.createLocal.description',\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title={t(\n              'templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip',\n            )}\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardFormEditor = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('form')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            {t('templateEditorPage.templateEditorIntro.formEditor.title')}\n          </Typography>\n          <Typography variant=\"body1\">\n            {t('templateEditorPage.templateEditorIntro.formEditor.description')}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  const cardFieldExplorer = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            {t('templateEditorPage.templateEditorIntro.fieldExplorer.title')}\n          </Typography>\n          <Typography variant=\"body1\">\n            {t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.description',\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        {t('templateEditorPage.templateEditorIntro.title')}\n      </Typography>\n      <div\n        style={{\n          display: 'flex',\n          flexFlow: 'row wrap',\n          alignItems: 'flex-start',\n          justifyContent: 'center',\n          alignContent: 'flex-start',\n        }}\n      >\n        {supportsLoad && cardLoadLocal}\n        {supportsLoad && cardCreateLocal}\n        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,SAAW,EAAA,QAAA;AAAA,IACX,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GAC5B;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,UAAA;AAAA,IACV,QAAU,EAAA,GAAA;AAAA,IACV,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,GAC5B;AAAA,EACA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,UAAA;AAAA,IACV,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACxB;AACF,CAAE,CAAA,CAAA,CAAA;AASK,SAAS,oBAAoB,KAAyB,EAAA;AAC3D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,YAAA,GAAe,oBAAoB,WAAY,EAAA,CAAA;AACrD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAA,MAAM,gCACH,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAW,OAAQ,CAAA,IAAA,EAAM,WAAW,CACxC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAU,CAAC,YAAA;AAAA,MACX,OAAS,EAAA,MAAM,KAAM,CAAA,QAAA,GAAW,OAAO,CAAA;AAAA,KAAA;AAAA,wCAEtC,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,IAAA;AAAA,QACV,YAAY,EAAA,IAAA;AAAA,QACZ,KAAA,EAAO,eAAe,KAAY,CAAA,GAAA,eAAA;AAAA,QAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,UAAU,YAAa,EAAA;AAAA,OAAA;AAAA,MAEhD,EAAE,wDAAwD,CAAA;AAAA,KAE7D,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAA,EAAO,eAAe,KAAY,CAAA,GAAA,eAAA;AAAA,OAAA;AAAA,MAEjC,EAAE,8DAA8D,CAAA;AAAA,KAErE,CAAA;AAAA,KAED,CAAC,YAAA,wCACC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,QACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA,CAAA;AAAA,QACL,qEAAA;AAAA,OACF;AAAA,KAAA;AAAA,wCAEC,gBAAiB,EAAA,IAAA,CAAA;AAAA,GAEtB,CAEJ,CAAA,CAAA;AAGF,EAAA,MAAM,kCACH,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAW,OAAQ,CAAA,IAAA,EAAM,WAAW,CACxC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAU,CAAC,YAAA;AAAA,MACX,OAAS,EAAA,MAAM,KAAM,CAAA,QAAA,GAAW,iBAAiB,CAAA;AAAA,KAAA;AAAA,wCAEhD,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,IAAA;AAAA,QACV,YAAY,EAAA,IAAA;AAAA,QACZ,KAAA,EAAO,eAAe,KAAY,CAAA,GAAA,eAAA;AAAA,QAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,UAAU,YAAa,EAAA;AAAA,OAAA;AAAA,MAEhD,EAAE,0DAA0D,CAAA;AAAA,KAE/D,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAA,EAAO,eAAe,KAAY,CAAA,GAAA,eAAA;AAAA,OAAA;AAAA,MAEjC,CAAA;AAAA,QACC,gEAAA;AAAA,OACF;AAAA,KAEJ,CAAA;AAAA,KAED,CAAC,YAAA,wCACC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,QACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA,CAAA;AAAA,QACL,uEAAA;AAAA,OACF;AAAA,KAAA;AAAA,wCAEC,gBAAiB,EAAA,IAAA,CAAA;AAAA,GAEtB,CAEJ,CAAA,CAAA;AAGF,EAAA,MAAM,iCACH,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,MAAM,SAAW,EAAA,CAAA,EAAA,kBACvC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,SAAS,MAAM,KAAA,CAAM,WAAW,MAAM,CAAA,EAAA,sCACnD,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,IAAA,EAAK,cAAY,IACjD,EAAA,EAAA,CAAA,CAAE,yDAAyD,CAC9D,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OACjB,EAAA,EAAA,CAAA,CAAE,+DAA+D,CACpE,CACF,CACF,CACF,CAAA,CAAA;AAGF,EAAA,MAAM,iBACJ,mBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,SAAA,EAAW,CACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAS,MAAM,KAAA,CAAM,WAAW,gBAAgB,CAAA,EAAA,kBAC7D,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAK,WAAU,IAAK,EAAA,YAAA,EAAY,IACjD,EAAA,EAAA,CAAA,CAAE,4DAA4D,CACjE,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OACjB,EAAA,EAAA,CAAA;AAAA,IACC,kEAAA;AAAA,GAEJ,CACF,CACF,CACF,CAAA,CAAA;AAGF,EAAA,2CACG,KAAI,EAAA,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAA,sCACf,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,SAAA,EAAU,MAAK,SAAW,EAAA,OAAA,CAAQ,aACxD,CAAE,CAAA,8CAA8C,CACnD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,QACV,UAAY,EAAA,YAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,YAAc,EAAA,YAAA;AAAA,OAChB;AAAA,KAAA;AAAA,IAEC,YAAgB,IAAA,aAAA;AAAA,IAChB,YAAgB,IAAA,eAAA;AAAA,IAChB,cAAA;AAAA,IACA,CAAC,YAAgB,IAAA,aAAA;AAAA,IACjB,iBAAA;AAAA,GAEL,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Page, Header, Content } from '@backstage/core-components';
+import { WebFileSystemAccess, WebFileSystemStore } from '../../../lib/filesystem/WebFileSystemAccess.esm.js';
+import { TemplateEditorIntro } from './TemplateEditorIntro.esm.js';
+import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { actionsRouteRef, scaffolderListTaskRouteRef, rootRouteRef, editorRouteRef, customFieldsRouteRef, templateFormRouteRef } from '../../../routes.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { createExampleTemplate } from '../../../lib/filesystem/createExampleTemplate.esm.js';
+
+function TemplateEditorPage() {
+  const navigate = useNavigate();
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+  const editorLink = useRouteRef(editorRouteRef);
+  const customFieldsLink = useRouteRef(customFieldsRouteRef);
+  const templateFormLink = useRouteRef(templateFormRouteRef);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: void 0,
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink())
+  };
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: t("templateEditorPage.title"),
+      subtitle: t("templateEditorPage.subtitle")
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+    TemplateEditorIntro,
+    {
+      onSelect: (option) => {
+        if (option === "local") {
+          WebFileSystemAccess.requestDirectoryAccess().then((directory) => WebFileSystemStore.setDirectory(directory)).then(() => navigate(editorLink())).catch(() => {
+          });
+        } else if (option === "create-template") {
+          WebFileSystemAccess.requestDirectoryAccess().then((directory) => {
+            createExampleTemplate(directory).then(() => {
+              WebFileSystemStore.setDirectory(directory);
+              navigate(editorLink());
+            });
+          }).catch(() => {
+          });
+        } else if (option === "form") {
+          navigate(templateFormLink());
+        } else if (option === "field-explorer") {
+          navigate(customFieldsLink());
+        }
+      }
+    }
+  )));
+}
+
+export { TemplateEditorPage };
+//# sourceMappingURL=TemplateEditorPage.esm.js.map