diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx
index cb77689b6e..78d6a452ea 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx
@@ -41,7 +41,10 @@ export const TaskPageLinks = ({ output }: TaskPageLinksProps) => {
.filter(({ url, entityRef }) => url || entityRef)
.map(({ url, entityRef, title, icon }) => {
if (entityRef) {
- const entityName = parseEntityRef(entityRef);
+ const entityName = parseEntityRef(entityRef, {
+ defaultKind: '
',
+ defaultNamespace: '',
+ });
const target = entityRoute(entityName);
return { title, icon, url: target };
}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DirectoryEditorContext.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DirectoryEditorContext.tsx
new file mode 100644
index 0000000000..0edf390bfe
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DirectoryEditorContext.tsx
@@ -0,0 +1,243 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ErrorPanel, Progress } from '@backstage/core-components';
+import { useAsync, useRerender } from '@react-hookz/web';
+import React, { createContext, ReactNode, useContext, useEffect } from 'react';
+import {
+ TemplateDirectoryAccess,
+ TemplateFileAccess,
+} from '../../lib/filesystem';
+
+const MAX_SIZE = 1024 * 1024;
+const MAX_SIZE_MESSAGE = 'This file is too large to be displayed';
+
+interface DirectoryEditorFile {
+ /** The path of the file relative to the root directory */
+ path: string;
+ /** The staged content of the file */
+ content: string;
+ /** Whether the staged content matches what is on disk */
+ dirty: boolean;
+
+ /** Update the staged content of the file without saving */
+ updateContent(content: string): void;
+ /** Save the staged content of the file to disk */
+ save(): Promise;
+ /** Reload the staged content of the file from disk */
+ reload(): Promise;
+}
+
+interface DirectoryEditor {
+ /** A list of all files in the edited directory */
+ files: Array;
+
+ /** The currently selected file */
+ selectedFile: DirectoryEditorFile | undefined;
+ /** Switch the selected file */
+ setSelectedFile(path: string | undefined): void;
+
+ /** Save all files to disk */
+ save(): Promise;
+ /** Reload all files from disk */
+ reload(): Promise;
+
+ subscribe(listener: () => void): () => void;
+}
+
+class DirectoryEditorFileManager implements DirectoryEditorFile {
+ readonly #access: TemplateFileAccess;
+ readonly #signalUpdate: () => void;
+
+ #content?: string;
+ #savedContent?: string;
+
+ constructor(access: TemplateFileAccess, signalUpdate: () => void) {
+ this.#access = access;
+ this.#signalUpdate = signalUpdate;
+ }
+
+ get path() {
+ return this.#access.path;
+ }
+
+ get content() {
+ return this.#content ?? MAX_SIZE_MESSAGE;
+ }
+
+ updateContent(content: string): void {
+ if (this.#content === undefined) {
+ return;
+ }
+ this.#content = content;
+ this.#signalUpdate();
+ }
+
+ get dirty() {
+ return this.#content !== this.#savedContent;
+ }
+
+ async save(): Promise {
+ if (this.#content !== undefined) {
+ await this.#access.save(this.#content);
+ this.#savedContent = this.#content;
+ this.#signalUpdate();
+ }
+ }
+
+ async reload(): Promise {
+ const file = await this.#access.file();
+ if (file.size > MAX_SIZE) {
+ if (this.#content !== undefined) {
+ this.#content = undefined;
+ this.#savedContent = undefined;
+ this.#signalUpdate();
+ }
+ return;
+ }
+
+ const content = await file.text();
+ if (this.#content !== content) {
+ this.#content = content;
+ this.#savedContent = content;
+ this.#signalUpdate();
+ }
+ }
+}
+
+class DirectoryEditorManager implements DirectoryEditor {
+ readonly #access: TemplateDirectoryAccess;
+ readonly #listeners = new Set<() => void>();
+
+ #files: DirectoryEditorFile[] = [];
+ #selectedFile: DirectoryEditorFile | undefined;
+
+ constructor(access: TemplateDirectoryAccess) {
+ this.#access = access;
+ }
+
+ get files() {
+ return this.#files;
+ }
+
+ get selectedFile() {
+ return this.#selectedFile;
+ }
+
+ setSelectedFile = (path: string | undefined): void => {
+ const prev = this.#selectedFile;
+ const next = this.#files.find(file => file.path === path);
+ if (prev !== next) {
+ this.#selectedFile = next;
+ this.#signalUpdate();
+ }
+ };
+
+ get dirty() {
+ return this.#files.some(file => file.dirty);
+ }
+
+ async save(): Promise {
+ await Promise.all(this.#files.map(file => file.save()));
+ }
+
+ async reload(): Promise {
+ const selectedPath = this.#selectedFile?.path;
+
+ const files = await this.#access.listFiles();
+ const fileManagers = await Promise.all(
+ files.map(async file => {
+ const manager = new DirectoryEditorFileManager(
+ file,
+ this.#signalUpdate,
+ );
+ await manager.reload();
+ return manager;
+ }),
+ );
+ this.#files.length = 0;
+ this.#files.push(...fileManagers);
+
+ this.setSelectedFile(selectedPath);
+ this.#signalUpdate();
+ }
+
+ subscribe(listener: () => void): () => void {
+ this.#listeners.add(listener);
+ return () => {
+ this.#listeners.delete(listener);
+ };
+ }
+
+ #signalUpdate = () => {
+ this.#listeners.forEach(listener => listener());
+ };
+}
+
+const DirectoryEditorContext = createContext(
+ undefined,
+);
+
+export function useDirectoryEditor(): DirectoryEditor {
+ const value = useContext(DirectoryEditorContext);
+ const rerender = useRerender();
+
+ useEffect(() => value?.subscribe(rerender), [value, rerender]);
+
+ if (!value) {
+ throw new Error('must be used within a DirectoryEditorProvider');
+ }
+ return value;
+}
+
+interface DirectoryEditorProviderProps {
+ directory: TemplateDirectoryAccess;
+ children?: ReactNode;
+}
+
+export function DirectoryEditorProvider(props: DirectoryEditorProviderProps) {
+ const { directory } = props;
+
+ const [{ result, error }, { execute }] = useAsync(
+ async (dir: TemplateDirectoryAccess) => {
+ const manager = new DirectoryEditorManager(dir);
+ await manager.reload();
+
+ const firstYaml = manager.files.find(file => file.path.match(/\.ya?ml$/));
+ if (firstYaml) {
+ manager.setSelectedFile(firstYaml.path);
+ }
+
+ return manager;
+ },
+ );
+
+ useEffect(() => {
+ execute(directory);
+ }, [execute, directory]);
+
+ if (error) {
+ return
+ {props.children}
+
+ );
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.tsx
new file mode 100644
index 0000000000..b1fe8a19ff
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import yaml from 'yaml';
+import { useApi } from '@backstage/core-plugin-api';
+import { JsonObject } from '@backstage/types';
+import React, {
+ createContext,
+ ReactNode,
+ useCallback,
+ useContext,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { scaffolderApiRef } from '../../api';
+import { ScaffolderDryRunResponse } from '../../types';
+
+interface DryRunOptions {
+ templateContent: string;
+ values: JsonObject;
+ files: Array<{ path: string; content: string }>;
+}
+
+interface DryRunResult extends ScaffolderDryRunResponse {
+ id: number;
+}
+
+interface DryRun {
+ results: DryRunResult[];
+ selectedResult: DryRunResult | undefined;
+
+ selectResult(id: number): void;
+ deleteResult(id: number): void;
+ execute(options: DryRunOptions): Promise;
+}
+
+const DryRunContext = createContext(undefined);
+
+interface DryRunProviderProps {
+ children: ReactNode;
+}
+
+export function DryRunProvider(props: DryRunProviderProps) {
+ const scaffolderApi = useApi(scaffolderApiRef);
+
+ const [state, setState] = useState<
+ Pick
+ >({
+ results: [],
+ selectedResult: undefined,
+ });
+ const idRef = useRef(1);
+
+ const selectResult = useCallback((id: number) => {
+ setState(prevState => {
+ const result = prevState.results.find(r => r.id === id);
+ if (result === prevState.selectedResult) {
+ return prevState;
+ }
+ return {
+ results: prevState.results,
+ selectedResult: result,
+ };
+ });
+ }, []);
+
+ const deleteResult = useCallback((id: number) => {
+ setState(prevState => {
+ const index = prevState.results.findIndex(r => r.id === id);
+ if (index === -1) {
+ return prevState;
+ }
+ const newResults = prevState.results.slice();
+ const [deleted] = newResults.splice(index, 1);
+ return {
+ results: newResults,
+ selectedResult:
+ prevState.selectedResult?.id === deleted.id
+ ? newResults[0]
+ : prevState.selectedResult,
+ };
+ });
+ }, []);
+
+ const execute = useCallback(
+ async (options: DryRunOptions) => {
+ if (!scaffolderApi.dryRun) {
+ throw new Error('Scaffolder API does not support dry-run');
+ }
+
+ const parsed = yaml.parse(options.templateContent);
+
+ const response = await scaffolderApi.dryRun({
+ template: parsed,
+ values: options.values,
+ secrets: {},
+ directoryContents: options.files.map(file => ({
+ path: file.path,
+ base64Content: btoa(file.content),
+ })),
+ });
+
+ const result = {
+ ...response,
+ id: idRef.current++,
+ };
+
+ setState(prevState => ({
+ results: [...prevState.results, result],
+ selectedResult: prevState.selectedResult ?? result,
+ }));
+ },
+ [scaffolderApi],
+ );
+
+ const dryRun = useMemo(
+ () => ({
+ ...state,
+ selectResult,
+ deleteResult,
+ execute,
+ }),
+ [state, selectResult, deleteResult, execute],
+ );
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function useDryRun(): DryRun {
+ const value = useContext(DryRunContext);
+ if (!value) {
+ throw new Error('must be used within a DryRunProvider');
+ }
+ return value;
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx
new file mode 100644
index 0000000000..bc3354cc46
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { useEffect } from 'react';
+import { scaffolderApiRef } from '../../../api';
+import { DryRunProvider, useDryRun } from '../DryRunContext';
+import { DryRunResults } from './DryRunResults';
+
+function DryRunRemote({
+ execute,
+ remove,
+}: {
+ execute?: boolean;
+ remove?: boolean;
+}) {
+ const dryRun = useDryRun();
+
+ useEffect(() => {
+ if (execute) {
+ dryRun.execute({
+ templateContent: '',
+ values: {},
+ files: [],
+ });
+ }
+ if (remove) {
+ if (dryRun.selectedResult) {
+ dryRun.deleteResult(dryRun.selectedResult.id);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [execute, remove]);
+
+ return null;
+}
+
+const mockScaffolderApi = {
+ dryRun: async () => ({
+ directoryContents: [],
+ log: [],
+ output: {},
+ steps: [],
+ }),
+};
+
+describe('DryRunResults', () => {
+ it('renders without exploding', async () => {
+ await renderInTestApp(
+
+
+
+ ,
+ );
+ expect(screen.getByText('Dry-run results')).toBeInTheDocument();
+ });
+
+ it('expands when dry-run result is added and toggles on click, and disappears when results are gone', async () => {
+ const { rerender } = await renderInTestApp(
+
+
+
+ ,
+ );
+
+ expect(screen.getByText('Files')).not.toBeVisible();
+
+ await act(async () => {
+ rerender(
+
+
+
+ ,
+ );
+ });
+
+ expect(screen.getByText('Files')).toBeVisible();
+
+ await userEvent.click(screen.getByText('Dry-run results'));
+ await waitFor(() => expect(screen.getByText('Files')).not.toBeVisible());
+
+ await userEvent.click(screen.getByText('Dry-run results'));
+ expect(screen.getByText('Files')).toBeVisible();
+
+ await act(async () => {
+ rerender(
+
+
+
+ ,
+ );
+ });
+
+ await waitFor(() => expect(screen.getByText('Files')).not.toBeVisible());
+ });
+});
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.tsx
new file mode 100644
index 0000000000..ae9374438f
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BackstageTheme } from '@backstage/theme';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandLess';
+import { usePrevious } from '@react-hookz/web';
+import React, { useEffect, useState } from 'react';
+import { useDryRun } from '../DryRunContext';
+import { DryRunResultsList } from './DryRunResultsList';
+import { DryRunResultsView } from './DryRunResultsView';
+
+const useStyles = makeStyles((theme: BackstageTheme) => ({
+ header: {
+ height: 48,
+ minHeight: 0,
+ '&.Mui-expanded': {
+ height: 48,
+ minHeight: 0,
+ },
+ },
+ content: {
+ display: 'grid',
+ background: theme.palette.background.default,
+ gridTemplateColumns: '180px auto 1fr',
+ gridTemplateRows: '1fr',
+ padding: 0,
+ height: 400,
+ },
+}));
+
+export function DryRunResults() {
+ const classes = useStyles();
+ const dryRun = useDryRun();
+ const [expanded, setExpanded] = useState(false);
+ const [hidden, setHidden] = useState(true);
+
+ const resultsLength = dryRun.results.length;
+ const prevResultsLength = usePrevious(resultsLength);
+ useEffect(() => {
+ if (prevResultsLength === 0 && resultsLength === 1) {
+ setHidden(false);
+ setExpanded(true);
+ } else if (prevResultsLength === 1 && resultsLength === 0) {
+ setExpanded(false);
+ }
+ }, [prevResultsLength, resultsLength]);
+
+ return (
+ <>
+ setExpanded(exp)}
+ onTransitionEnd={() => resultsLength === 0 && setHidden(true)}
+ >
+ Dry-run results
+
+
+
+
+
+ );
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx
new file mode 100644
index 0000000000..65eb59c84a
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { useEffect } from 'react';
+import { scaffolderApiRef } from '../../../api';
+import { DryRunProvider, useDryRun } from '../DryRunContext';
+import { DryRunResultsList } from './DryRunResultsList';
+
+function DryRunRemote({ execute }: { execute?: number }) {
+ const dryRun = useDryRun();
+
+ useEffect(() => {
+ if (execute) {
+ dryRun.execute({
+ templateContent: '',
+ values: {},
+ files: [],
+ });
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [execute]);
+
+ return null;
+}
+
+const mockScaffolderApi = {
+ dryRun: async () => ({
+ directoryContents: [],
+ log: [],
+ output: {},
+ steps: [],
+ }),
+};
+
+describe('DryRunResultsList', () => {
+ it('renders without exploding', async () => {
+ const rendered = await renderInTestApp(
+
+
+
+ ,
+ );
+ expect(rendered.baseElement.querySelector('ul')).toBeEmptyDOMElement();
+ });
+
+ it('adds new result items and deletes them', async () => {
+ const { rerender } = await renderInTestApp(
+
+
+
+ ,
+ );
+
+ expect(screen.queryByText('Result 1')).toBeInTheDocument();
+ expect(screen.queryByText('Result 2')).not.toBeInTheDocument();
+
+ await act(async () => {
+ rerender(
+
+
+
+ ,
+ );
+ });
+
+ expect(screen.queryByText('Result 1')).toBeInTheDocument();
+ expect(screen.queryByText('Result 2')).toBeInTheDocument();
+
+ await userEvent.click(screen.getAllByLabelText('delete')[0]);
+
+ expect(screen.queryByText('Result 1')).not.toBeInTheDocument();
+ expect(screen.queryByText('Result 2')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx
new file mode 100644
index 0000000000..462c3b58fd
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BackstageTheme } from '@backstage/theme';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+import CancelIcon from '@material-ui/icons/Cancel';
+import CheckIcon from '@material-ui/icons/Check';
+import DeleteIcon from '@material-ui/icons/Delete';
+import React from 'react';
+import { useDryRun } from '../DryRunContext';
+
+const useStyles = makeStyles((theme: BackstageTheme) => ({
+ root: {
+ overflowY: 'auto',
+ background: theme.palette.background.default,
+ },
+ iconSuccess: {
+ minWidth: 0,
+ marginRight: theme.spacing(1),
+ color: theme.palette.status.ok,
+ },
+ iconFailure: {
+ minWidth: 0,
+ marginRight: theme.spacing(1),
+ color: theme.palette.status.error,
+ },
+}));
+
+export function DryRunResultsList() {
+ const classes = useStyles();
+ const dryRun = useDryRun();
+
+ return (
+
+ {dryRun.results.map(result => {
+ const failed = result.log.some(l => l.body.status === 'failed');
+ return (
+ dryRun.selectResult(result.id)}
+ >
+
+ {failed ?
+
+ dryRun.deleteResult(result.id)}
+ >
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx
new file mode 100644
index 0000000000..b554a1c0c0
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles } from '@material-ui/core/styles';
+import Divider from '@material-ui/core/Divider';
+import React, { Children, ReactNode } from 'react';
+import classNames from 'classnames';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: '280px auto 3fr',
+ gridTemplateRows: '1fr',
+ },
+ child: {
+ overflowY: 'auto',
+ height: '100%',
+ minHeight: 0,
+ },
+ firstChild: {
+ background: theme.palette.background.paper,
+ },
+}));
+
+export function DryRunResultsSplitView(props: { children: ReactNode }) {
+ const classes = useStyles();
+ const childArray = Children.toArray(props.children);
+
+ if (childArray.length !== 2) {
+ throw new Error('must have exactly 2 children');
+ }
+
+ return (
+
+
+ {childArray[0]}
+
+
+
{childArray[1]}
+
inside needs mocking to render in jsdom
+jest.mock('react-virtualized-auto-sizer', () => ({
+ __esModule: true,
+ default: (props: {
+ children: (size: { width: number; height: number }) => ReactNode;
+ }) => <>{props.children({ width: 400, height: 200 })},
+}));
+
+function DryRunRemote() {
+ const dryRun = useDryRun();
+
+ useEffect(() => {
+ dryRun.execute({
+ templateContent: '',
+ values: {},
+ files: [],
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return null;
+}
+
+describe('DryRunResultsView', () => {
+ it('renders a result', async () => {
+ await renderInTestApp(
+ ({
+ directoryContents: [
+ {
+ path: 'foo.txt',
+ base64Content: btoa('Foo Content'),
+ executable: false,
+ },
+ ],
+ log: [{ body: { message: 'Foo Message', stepId: 'foo' } }],
+ output: {
+ links: [{ title: 'Foo Link', url: 'http://example.com' }],
+ },
+ steps: [{ id: 'foo', action: 'foo', name: 'Foo' }],
+ }),
+ },
+ ],
+ ]}
+ >
+
+
+ ,
+ {
+ mountedRoutes: {
+ '/catalog/:kind/:namespace/:name': entityRouteRef,
+ },
+ },
+ );
+
+ expect(screen.getByText('foo.txt')).toBeInTheDocument();
+ expect(screen.getByText('Foo Content')).toBeInTheDocument();
+
+ expect(screen.queryByText('Foo Message')).not.toBeInTheDocument();
+ expect(screen.queryByText('Foo Link')).not.toBeInTheDocument();
+
+ await userEvent.click(screen.getByText('Log'));
+ expect(screen.getByText('Foo Message')).toBeInTheDocument();
+
+ await userEvent.click(screen.getByText('Output'));
+ expect(screen.getByText('Foo Link')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
new file mode 100644
index 0000000000..9c56039808
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LogViewer } from '@backstage/core-components';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+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, { useEffect, useMemo, useState } from 'react';
+import { TaskStatusStepper } from '../../TaskPage/TaskPage';
+import { TaskPageLinks } from '../../TaskPage/TaskPageLinks';
+import { useDryRun } from '../DryRunContext';
+import { FileBrowser } from '../../FileBrowser';
+import { DryRunResultsSplitView } from './DryRunResultsSplitView';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexFlow: 'column nowrap',
+ },
+ contentWrapper: {
+ flex: 1,
+ position: 'relative',
+ },
+ content: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+
+ display: 'flex',
+ '& > *': {
+ flex: 1,
+ },
+ },
+ codeMirror: {
+ height: '100%',
+ overflowY: 'auto',
+ },
+});
+
+function FilesContent() {
+ const classes = useStyles();
+ const { selectedResult } = useDryRun();
+ const [selectedPath, setSelectedPath] = useState('');
+ const selectedFile = selectedResult?.directoryContents.find(
+ f => f.path === selectedPath,
+ );
+
+ useEffect(() => {
+ if (selectedResult) {
+ const [firstFile] = selectedResult.directoryContents;
+ if (firstFile) {
+ setSelectedPath(firstFile.path);
+ } else {
+ setSelectedPath('');
+ }
+ }
+ return undefined;
+ }, [selectedResult]);
+
+ if (!selectedResult) {
+ return null;
+ }
+ return (
+
+ file.path)}
+ />
+
+ );
+}
+function LogContent() {
+ const { selectedResult } = useDryRun();
+ const [currentStepId, setUserSelectedStepId] = useState();
+
+ const steps = useMemo(() => {
+ if (!selectedResult) {
+ return [];
+ }
+ return (
+ selectedResult.steps.map(step => {
+ const stepLog = selectedResult.log.filter(
+ l => l.body.stepId === step.id,
+ );
+ return {
+ id: step.id,
+ name: step.name,
+ logString: stepLog.map(l => l.body.message).join('\n'),
+ status: stepLog[stepLog.length - 1]?.body.status ?? 'completed',
+ };
+ }) ?? []
+ );
+ }, [selectedResult]);
+
+ if (!selectedResult) {
+ return null;
+ }
+
+ const selectedStep = steps.find(s => s.id === currentStepId) ?? steps[0];
+
+ return (
+
+
+ );
+}
+
+function OutputContent() {
+ const classes = useStyles();
+ const { selectedResult } = useDryRun();
+
+ if (!selectedResult) {
+ return null;
+ }
+
+ return (
+
+
+ {selectedResult.output?.links?.length && (
+
+
+ );
+}
+
+export function DryRunResultsView() {
+ const classes = useStyles();
+ const [selectedTab, setSelectedTab] = useState<'files' | 'log' | 'output'>(
+ 'files',
+ );
+
+ return (
+
+
setSelectedTab(v)}>
+
+
+
+
+
+ {selectedTab === 'files' &&
+
+
[];
+ onClose?: () => void;
+}) => {
+ const classes = useStyles();
+
+ const [errorText, setErrorText] = useState();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx
new file mode 100644
index 0000000000..cec311a5cd
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { renderInTestApp } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MockFileSystemAccess } from '../../lib/filesystem/MockFileSystemAccess';
+import { DirectoryEditorProvider } from './DirectoryEditorContext';
+import { TemplateEditorBrowser } from './TemplateEditorBrowser';
+
+Blob.prototype.text = async function text() {
+ return new Promise(resolve => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(reader.result as string);
+ reader.readAsText(this);
+ });
+};
+
+describe('TemplateEditorBrowser', () => {
+ it('should render files and expand dirs without exploding', async () => {
+ await renderInTestApp(
+
+ ,
+ );
+
+ await expect(screen.findByText('foo.txt')).resolves.toBeInTheDocument();
+ expect(screen.getByText('dir')).toBeInTheDocument();
+ expect(screen.queryByText('bar.txt')).not.toBeInTheDocument();
+ expect(screen.queryByText('baz.txt')).not.toBeInTheDocument();
+
+ await userEvent.click(screen.getByText('dir'));
+ expect(screen.getByText('bar.txt')).toBeInTheDocument();
+ expect(screen.getByText('baz.txt')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx
new file mode 100644
index 0000000000..177ad11c2b
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Divider, IconButton, makeStyles, Tooltip } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import React from 'react';
+import { FileBrowser } from '../FileBrowser';
+import { useDirectoryEditor } from './DirectoryEditorContext';
+
+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),
+ },
+}));
+
+/** The local file browser for the template editor */
+export function TemplateEditorBrowser(props: { onClose?: () => void }) {
+ const classes = useStyles();
+ const directoryEditor = useDirectoryEditor();
+ const changedFiles = directoryEditor.files.filter(file => file.dirty);
+
+ const handleClose = () => {
+ if (!props.onClose) {
+ return;
+ }
+ if (changedFiles.length > 0) {
+ // eslint-disable-next-line no-alert
+ const accepted = window.confirm(
+ 'Are you sure? Unsaved changes will be lost',
+ );
+ if (!accepted) {
+ return;
+ }
+ }
+ props.onClose();
+ };
+
+ return (
+ <>
+
+
+ !file.dirty)}
+ onClick={() => directoryEditor.save()}
+ >
+
+
+
+ directoryEditor.reload()}
+ >
+
+
+
+
+
+
+
+
file.path)}
+ />
+
+ );
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
new file mode 100644
index 0000000000..11b4da246d
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
@@ -0,0 +1,240 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useApiHolder } from '@backstage/core-plugin-api';
+import { JsonObject, JsonValue } from '@backstage/types';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { Component, ReactNode, useMemo, useState } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
+import yaml from 'yaml';
+import { FieldExtensionOptions } from '../../extensions';
+import { TemplateParameterSchema } from '../../types';
+import { MultistepJsonForm } from '../MultistepJsonForm';
+import { createValidator } from '../TemplatePage';
+import { useDirectoryEditor } from './DirectoryEditorContext';
+import { useDryRun } from './DryRunContext';
+
+const useStyles = makeStyles({
+ containerWrapper: {
+ position: 'relative',
+ width: '100%',
+ height: '100%',
+ },
+ container: {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ overflow: 'auto',
+ },
+});
+
+interface ErrorBoundaryProps {
+ invalidator: unknown;
+ setErrorText(errorText: string | undefined): void;
+ children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+ shouldRender: boolean;
+}
+
+class ErrorBoundary extends Component {
+ state = {
+ shouldRender: true,
+ };
+
+ componentDidUpdate(prevProps: { invalidator: unknown }) {
+ if (prevProps.invalidator !== this.props.invalidator) {
+ this.setState({ shouldRender: true });
+ }
+ }
+
+ componentDidCatch(error: Error) {
+ this.props.setErrorText(error.message);
+ this.setState({ shouldRender: false });
+ }
+
+ render() {
+ return this.state.shouldRender ? this.props.children : null;
+ }
+}
+
+interface TemplateEditorFormProps {
+ content?: string;
+ /** Setting this to true will cause the content to be parsed as if it is the template entity spec */
+ contentIsSpec?: boolean;
+ data: JsonObject;
+ onUpdate: (data: JsonObject) => void;
+ setErrorText: (errorText?: string) => void;
+
+ onDryRun?: (data: JsonObject) => Promise;
+ fieldExtensions?: FieldExtensionOptions[];
+}
+
+function isJsonObject(value: JsonValue | undefined): value is JsonObject {
+ return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Shows the a template form that is parsed from the provided content */
+export function TemplateEditorForm(props: TemplateEditorFormProps) {
+ const {
+ content,
+ contentIsSpec,
+ data,
+ onUpdate,
+ onDryRun,
+ setErrorText,
+ fieldExtensions = [],
+ } = props;
+ const classes = useStyles();
+ const apiHolder = useApiHolder();
+
+ const [steps, setSteps] = useState();
+
+ const fields = useMemo(() => {
+ return Object.fromEntries(
+ fieldExtensions.map(({ name, component }) => [name, component]),
+ );
+ }, [fieldExtensions]);
+
+ useDebounce(
+ () => {
+ try {
+ if (!content) {
+ setSteps(undefined);
+ return;
+ }
+ const parsed: JsonValue = yaml.parse(content);
+
+ if (!isJsonObject(parsed)) {
+ setSteps(undefined);
+ return;
+ }
+
+ let rootObj = parsed;
+ if (!contentIsSpec) {
+ const isTemplate =
+ String(parsed.kind).toLocaleLowerCase('en-US') === 'template';
+ if (!isTemplate) {
+ setSteps(undefined);
+ return;
+ }
+
+ rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
+ }
+
+ const { parameters } = rootObj;
+ if (!Array.isArray(parameters)) {
+ setErrorText('Template parameters must be an array');
+ setSteps(undefined);
+ return;
+ }
+
+ const fieldValidators = Object.fromEntries(
+ fieldExtensions.map(({ name, validation }) => [name, validation]),
+ );
+
+ setErrorText();
+ setSteps(
+ parameters.flatMap(param =>
+ isJsonObject(param)
+ ? [
+ {
+ title: String(param.title),
+ schema: param,
+ validate: createValidator(param, fieldValidators, {
+ apiHolder,
+ }),
+ },
+ ]
+ : [],
+ ),
+ );
+ } catch (e) {
+ setErrorText(e.message);
+ }
+ },
+ 250,
+ [contentIsSpec, content, apiHolder],
+ );
+
+ if (!steps) {
+ return null;
+ }
+
+ return (
+
+
+
+ onUpdate(e.formData)}
+ onReset={() => onUpdate({})}
+ finishButtonLabel={onDryRun && 'Try It'}
+ onFinish={onDryRun && (() => onDryRun(data))}
+ />
+
+
+
,
+) {
+ const { setErrorText, fieldExtensions = [] } = props;
+ const dryRun = useDryRun();
+
+ const directoryEditor = useDirectoryEditor();
+ const { selectedFile } = directoryEditor;
+
+ const [data, setData] = useState({});
+
+ const handleDryRun = async () => {
+ if (!selectedFile) {
+ return;
+ }
+
+ await dryRun.execute({
+ templateContent: selectedFile.content,
+ values: data,
+ files: directoryEditor.files,
+ });
+ };
+
+ const content =
+ selectedFile && selectedFile.path.match(/\.ya?ml$/)
+ ? selectedFile.content
+ : undefined;
+
+ return (
+
+ props.onSelect?.('local')}
+ >
+
+
+ Load Template Directory
+
+
+ Load a local template directory, allowing you to both edit and try
+ executing your own template.
+
+
+
+ {!supportsLoad && (
+
+
+
+
+ )}
+
+ );
+
+ const cardFormEditor = (
+
+ props.onSelect?.('form')}>
+
+
+ Edit Template Form
+
+
+ Preview and edit a template form, either using a sample template or
+ by loading a template from the catalog.
+
+
+
+
+ );
+
+ return (
+
+
+ Get started by choosing one of the options below
+
+
+ {supportsLoad && cardLoadLocal}
+ {cardFormEditor}
+ {!supportsLoad && cardLoadLocal}
+
+
+ ,
+ );
+
+ await userEvent.click(screen.getByText('Edit Template Form'));
+
+ expect(screen.getByLabelText('Load Existing Template')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx
index 71c64a9fa4..fce2881190 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx
@@ -13,258 +13,76 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useCallback, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
-import useDebounce from 'react-use/lib/useDebounce';
-import { Entity } from '@backstage/catalog-model';
-import { Content, Header, InfoCard, Page } from '@backstage/core-components';
-import { alertApiRef, useApi, useApiHolder } from '@backstage/core-plugin-api';
+import React, { useState } from 'react';
+import { Content, Header, Page } from '@backstage/core-components';
import {
- catalogApiRef,
- humanizeEntityRef,
-} from '@backstage/plugin-catalog-react';
-import { JsonObject } from '@backstage/types';
-import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';
-import { showPanel } from '@codemirror/view';
-import { StreamLanguage } from '@codemirror/language';
-
-import {
- FormControl,
- Grid,
- InputLabel,
- LinearProgress,
- makeStyles,
- MenuItem,
- Select,
-} from '@material-ui/core';
-import { IChangeEvent } from '@rjsf/core';
-import CodeMirror from '@uiw/react-codemirror';
-import yaml from 'yaml';
+ TemplateDirectoryAccess,
+ WebFileSystemAccess,
+} from '../../lib/filesystem';
+import { TemplateEditorIntro } from './TemplateEditorIntro';
+import { TemplateEditor } from './TemplateEditor';
+import { TemplateFormPreviewer } from './TemplateFormPreviewer';
import { FieldExtensionOptions } from '../../extensions';
-import { TemplateParameterSchema } from '../../types';
-import { MultistepJsonForm } from '../MultistepJsonForm';
-import { createValidator } from '../TemplatePage';
-const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
-parameters:
- - title: Fill in some steps
- required:
- - name
- properties:
- name:
- title: Name
- type: string
- description: Unique name of the component
- owner:
- title: Owner
- type: string
- description: Owner of the component
- ui:field: OwnerPicker
- ui:options:
- allowedKinds:
- - Group
- - title: Choose a location
- required:
- - repoUrl
- properties:
- repoUrl:
- title: Repository Location
- type: string
- ui:field: RepoUrlPicker
- ui:options:
- allowedHosts:
- - github.com
-`;
+type Selection =
+ | {
+ type: 'local';
+ directory: TemplateDirectoryAccess;
+ }
+ | {
+ type: 'form';
+ };
-type TemplateOption = {
- label: string;
- value: Entity;
-};
-
-const useStyles = makeStyles({
- templateSelect: {
- marginBottom: '10px',
- },
- grid: {
- height: '100%',
- },
- codeMirror: {
- height: '95%',
- },
-});
-
-export const TemplateEditorPage = ({
- defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
- customFieldExtensions = [],
-}: {
+interface TemplateEditorPageProps {
defaultPreviewTemplate?: string;
customFieldExtensions?: FieldExtensionOptions[];
-}) => {
- const classes = useStyles();
- const alertApi = useApi(alertApiRef);
- const catalogApi = useApi(catalogApiRef);
- const apiHolder = useApiHolder();
- const [selectedTemplate, setSelectedTemplate] = useState('');
- const [schema, setSchema] = useState({
- title: '',
- steps: [],
- });
- const [templateOptions, setTemplateOptions] = useState([]);
- const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
- const [formState, setFormState] = useState({});
+}
- const { loading } = useAsync(
- () =>
- catalogApi
- .getEntities({
- filter: { kind: 'template' },
- fields: [
- 'kind',
- 'metadata.namespace',
- 'metadata.name',
- 'metadata.title',
- 'spec.parameters',
- ],
- })
- .then(({ items }) =>
- setTemplateOptions(
- items.map(template => ({
- label:
- template.metadata.title ??
- humanizeEntityRef(template, { defaultKind: 'template' }),
- value: template,
- })),
- ),
- )
- .catch(e =>
- alertApi.post({
- message: `Error loading exisiting templates: ${e.message}`,
- severity: 'error',
- }),
- ),
- [catalogApi],
- );
+export function TemplateEditorPage(props: TemplateEditorPageProps) {
+ const [selection, setSelection] = useState();
- const errorPanel = document.createElement('div');
- errorPanel.style.color = 'red';
-
- useDebounce(
- () => {
- try {
- const parsedTemplate = yaml.parse(templateYaml);
-
- setSchema({
- title: 'Preview',
- steps: parsedTemplate.parameters.map((param: JsonObject) => ({
- title: param.title,
- schema: param,
- })),
- });
- setFormState({});
- } catch (e) {
- errorPanel.textContent = e.message;
- }
- },
- 250,
- [setFormState, setSchema, templateYaml],
- );
-
- const handleSelectChange = useCallback(
- selected => {
- setSelectedTemplate(selected);
- setTemplateYaml(yaml.stringify(selected.spec));
- },
- [setTemplateYaml],
- );
-
- const handleFormReset = () => setFormState({});
- const handleFormChange = useCallback(
- (e: IChangeEvent) => setFormState(e.formData),
- [setFormState],
- );
-
- const handleCodeChange = useCallback(
- (code: string) => {
- setTemplateYaml(code);
- },
- [setTemplateYaml],
- );
-
- const customFieldComponents = Object.fromEntries(
- customFieldExtensions.map(({ name, component }) => [name, component]),
- );
-
- const customFieldValidators = Object.fromEntries(
- customFieldExtensions.map(({ name, validation }) => [name, validation]),
- );
+ let content: JSX.Element | null = null;
+ if (selection?.type === 'local') {
+ content = (
+ setSelection(undefined)}
+ />
+ );
+ } else if (selection?.type === 'form') {
+ content = (
+ setSelection(undefined)}
+ />
+ );
+ } else {
+ content = (
+
+ {
+ if (option === 'local') {
+ WebFileSystemAccess.requestDirectoryAccess()
+ .then(directory => setSelection({ type: 'local', directory }))
+ .catch(() => {});
+ } else if (option === 'form') {
+ setSelection({ type: 'form' });
+ }
+ }}
+ />
+
+ );
+ }
return (
-
- {loading &&
-
-
-
- Load Existing Template
-
- handleSelectChange(e.target.value)}
- >
- {templateOptions.map((option, idx) => (
-
- {option.label}
-
- ))}
-
-
- ({ dom: errorPanel, top: true })),
- ]}
- onChange={handleCodeChange}
- />
-
-
- {schema && (
-
- {
- return {
- ...step,
- validate: createValidator(
- step.schema,
- customFieldValidators,
- { apiHolder },
- ),
- };
- })}
- />
-
- )}
-
-
-
+ {content}
);
-};
+}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorTextArea.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorTextArea.tsx
new file mode 100644
index 0000000000..588b0cd4ba
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorTextArea.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';
+import { showPanel } from '@codemirror/view';
+import { IconButton, makeStyles, Paper, Tooltip } from '@material-ui/core';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import { useKeyboardEvent } from '@react-hookz/web';
+import CodeMirror from '@uiw/react-codemirror';
+import React, { useMemo } from 'react';
+import { useDirectoryEditor } from './DirectoryEditorContext';
+
+const useStyles = makeStyles(theme => ({
+ container: {
+ position: 'relative',
+ width: '100%',
+ height: '100%',
+ },
+ codeMirror: {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ errorPanel: {
+ color: theme.palette.error.main,
+ lineHeight: 2,
+ margin: theme.spacing(0, 1),
+ },
+ floatingButtons: {
+ position: 'absolute',
+ top: theme.spacing(1),
+ right: theme.spacing(3),
+ },
+ floatingButton: {
+ padding: theme.spacing(1),
+ },
+}));
+
+/** A wrapper around CodeMirror with an error panel and extra actions available */
+export function TemplateEditorTextArea(props: {
+ content?: string;
+ onUpdate?: (content: string) => void;
+ errorText?: string;
+ onSave?: () => void;
+ onReload?: () => void;
+}) {
+ const { errorText } = props;
+ const classes = useStyles();
+
+ const panelExtension = useMemo(() => {
+ if (!errorText) {
+ return showPanel.of(null);
+ }
+
+ const dom = document.createElement('div');
+ dom.classList.add(classes.errorPanel);
+ dom.textContent = errorText;
+ return showPanel.of(() => ({ dom, bottom: true }));
+ }, [classes, errorText]);
+
+ useKeyboardEvent(
+ e => e.key === 's' && (e.ctrlKey || e.metaKey),
+ e => {
+ e.preventDefault();
+ if (props.onSave) {
+ props.onSave();
+ }
+ },
+ );
+
+ return (
+
+
+ {(props.onSave || props.onReload) && (
+
+
+ {props.onSave && (
+
+ props.onSave?.()}
+ >
+
+
+ )}
+ {props.onReload && (
+
+ props.onReload?.()}
+ >
+
+
+ )}
+
+
+ )}
+
directoryEditor.selectedFile?.updateContent(content)}
+ {...actions}
+ />
+ );
+}
+
+TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
new file mode 100644
index 0000000000..bfa7071d48
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
@@ -0,0 +1,216 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Entity } from '@backstage/catalog-model';
+import { alertApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+ catalogApiRef,
+ humanizeEntityRef,
+} from '@backstage/plugin-catalog-react';
+import {
+ FormControl,
+ IconButton,
+ InputLabel,
+ LinearProgress,
+ makeStyles,
+ MenuItem,
+ Select,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useCallback, useState } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import yaml from 'yaml';
+import { FieldExtensionOptions } from '../../extensions';
+import { TemplateEditorForm } from './TemplateEditorForm';
+import { TemplateEditorTextArea } from './TemplateEditorTextArea';
+
+const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+ - title: Fill in some steps
+ required:
+ - name
+ properties:
+ name:
+ title: Name
+ type: string
+ description: Unique name of the component
+ owner:
+ title: Owner
+ type: string
+ description: Owner of the component
+ ui:field: OwnerPicker
+ ui:options:
+ allowedKinds:
+ - Group
+ - title: Choose a location
+ required:
+ - repoUrl
+ properties:
+ repoUrl:
+ title: Repository Location
+ type: string
+ ui:field: RepoUrlPicker
+ ui:options:
+ allowedHosts:
+ - github.com
+steps:
+ - id: fetch-base
+ name: Fetch Base
+ action: fetch:template
+ input:
+ url: ./template
+ values:
+ name: \${{parameters.name}}
+`;
+
+type TemplateOption = {
+ label: string;
+ value: Entity;
+};
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ gridArea: 'pageContent',
+ display: 'grid',
+ gridTemplateAreas: `
+ "controls controls"
+ "textArea preview"
+ `,
+ gridTemplateRows: 'auto 1fr',
+ gridTemplateColumns: '1fr 1fr',
+ },
+ controls: {
+ gridArea: 'controls',
+ display: 'flex',
+ flexFlow: 'row nowrap',
+ alignItems: 'center',
+ margin: theme.spacing(1),
+ },
+ textArea: {
+ gridArea: 'textArea',
+ },
+ preview: {
+ gridArea: 'preview',
+ },
+}));
+
+export const TemplateFormPreviewer = ({
+ defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
+ customFieldExtensions = [],
+ onClose,
+}: {
+ defaultPreviewTemplate?: string;
+ customFieldExtensions?: FieldExtensionOptions[];
+ onClose?: () => void;
+}) => {
+ const classes = useStyles();
+ const alertApi = useApi(alertApiRef);
+ const catalogApi = useApi(catalogApiRef);
+ const [selectedTemplate, setSelectedTemplate] = useState('');
+ const [errorText, setErrorText] = useState();
+ const [templateOptions, setTemplateOptions] = useState([]);
+ const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+ const [formState, setFormState] = useState({});
+
+ const { loading } = useAsync(
+ () =>
+ catalogApi
+ .getEntities({
+ filter: { kind: 'template' },
+ fields: [
+ 'kind',
+ 'metadata.namespace',
+ 'metadata.name',
+ 'metadata.title',
+ 'spec.parameters',
+ 'spec.steps',
+ 'spec.output',
+ ],
+ })
+ .then(({ items }) =>
+ setTemplateOptions(
+ items.map(template => ({
+ label:
+ template.metadata.title ??
+ humanizeEntityRef(template, { defaultKind: 'template' }),
+ value: template,
+ })),
+ ),
+ )
+ .catch(e =>
+ alertApi.post({
+ message: `Error loading exisiting templates: ${e.message}`,
+ severity: 'error',
+ }),
+ ),
+ [catalogApi],
+ );
+
+ const handleSelectChange = useCallback(
+ selected => {
+ setSelectedTemplate(selected);
+ setTemplateYaml(yaml.stringify(selected.spec));
+ },
+ [setTemplateYaml],
+ );
+
+ return (
+ <>
+ {loading &&
+
+
+
+ Load Existing Template
+
+ handleSelectChange(e.target.value)}
+ >
+ {templateOptions.map((option, idx) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/index.ts b/plugins/scaffolder/src/components/TemplateEditorPage/index.ts
index 506ff08f24..7ec6bddb64 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/index.ts
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/index.ts
@@ -13,4 +13,5 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
export { TemplateEditorPage } from './TemplateEditorPage';
diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts
index fc132f644c..c42dc95f9e 100644
--- a/plugins/scaffolder/src/index.ts
+++ b/plugins/scaffolder/src/index.ts
@@ -25,6 +25,8 @@ export type {
ListActionsResponse,
LogEvent,
ScaffolderApi,
+ ScaffolderDryRunOptions,
+ ScaffolderDryRunResponse,
ScaffolderGetIntegrationsListOptions,
ScaffolderGetIntegrationsListResponse,
ScaffolderOutputLink,
diff --git a/plugins/scaffolder/src/lib/filesystem/MockFileSystemAccess.ts b/plugins/scaffolder/src/lib/filesystem/MockFileSystemAccess.ts
new file mode 100644
index 0000000000..d466543dbd
--- /dev/null
+++ b/plugins/scaffolder/src/lib/filesystem/MockFileSystemAccess.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateDirectoryAccess, TemplateFileAccess } from './types';
+
+class MockFileAccess implements TemplateFileAccess {
+ constructor(readonly path: string, private content: string) {}
+
+ async file(): Promise {
+ const blob = new Blob([this.content]);
+ return Object.assign(blob, {
+ name: this.path.split('/').pop()!,
+ lastModified: Date.now(),
+ webkitRelativePath: this.path,
+ });
+ }
+
+ async save(data: string | Blob | BufferSource): Promise {
+ this.content = await new Response(data).text();
+ }
+}
+
+class MockDirectoryAccess implements TemplateDirectoryAccess {
+ private readonly files = new Array();
+
+ constructor(inputFiles: Record) {
+ this.files = Object.entries(inputFiles).map(
+ ([path, content]) => new MockFileAccess(path, content),
+ );
+ }
+
+ async listFiles(): Promise {
+ return this.files;
+ }
+}
+
+/** @internal */
+export class MockFileSystemAccess {
+ private constructor() {}
+
+ static createMockDirectory(files: Record) {
+ return new MockDirectoryAccess(files);
+ }
+}
diff --git a/plugins/scaffolder/src/lib/filesystem/WebFileSystemAccess.ts b/plugins/scaffolder/src/lib/filesystem/WebFileSystemAccess.ts
new file mode 100644
index 0000000000..36e7b11de2
--- /dev/null
+++ b/plugins/scaffolder/src/lib/filesystem/WebFileSystemAccess.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateDirectoryAccess, TemplateFileAccess } from './types';
+
+type WritableFileHandle = FileSystemFileHandle & {
+ createWritable(): Promise<{
+ write(data: string | Blob | BufferSource): Promise;
+ close(): Promise;
+ }>;
+};
+
+// A nicer type than the one from the TS lib
+interface IterableDirectoryHandle extends FileSystemDirectoryHandle {
+ values(): AsyncIterable<
+ | ({ kind: 'file' } & WritableFileHandle)
+ | ({ kind: 'directory' } & IterableDirectoryHandle)
+ >;
+}
+
+const showDirectoryPicker = (window as any).showDirectoryPicker as
+ | (() => Promise)
+ | undefined;
+
+class WebFileAccess implements TemplateFileAccess {
+ constructor(
+ readonly path: string,
+ private readonly handle: WritableFileHandle,
+ ) {}
+
+ file(): Promise {
+ return this.handle.getFile();
+ }
+
+ async save(data: string | Blob | BufferSource): Promise {
+ const writable = await this.handle.createWritable();
+ await writable.write(data);
+ await writable.close();
+ }
+}
+
+class WebDirectoryAccess implements TemplateDirectoryAccess {
+ constructor(private readonly handle: IterableDirectoryHandle) {}
+
+ async listFiles(): Promise {
+ const content = [];
+ for await (const entry of this.listDirectoryContents(this.handle)) {
+ content.push(entry);
+ }
+ return content;
+ }
+
+ private async *listDirectoryContents(
+ dirHandle: IterableDirectoryHandle,
+ basePath: string[] = [],
+ ): AsyncIterable {
+ for await (const handle of dirHandle.values()) {
+ if (handle.kind === 'file') {
+ yield new WebFileAccess([...basePath, handle.name].join('/'), handle);
+ } else if (handle.kind === 'directory') {
+ yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
+ }
+ }
+ }
+}
+
+/** @internal */
+export class WebFileSystemAccess {
+ static isSupported(): boolean {
+ return Boolean(showDirectoryPicker);
+ }
+
+ static async requestDirectoryAccess(): Promise {
+ if (!showDirectoryPicker) {
+ throw new Error('File system access is not supported');
+ }
+ const handle = await showDirectoryPicker();
+ return new WebDirectoryAccess(handle);
+ }
+
+ private constructor() {}
+}
diff --git a/plugins/scaffolder/src/lib/filesystem/helpers.ts b/plugins/scaffolder/src/lib/filesystem/helpers.ts
new file mode 100644
index 0000000000..530cf87277
--- /dev/null
+++ b/plugins/scaffolder/src/lib/filesystem/helpers.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export async function blobToBase64(file: Blob) {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ return new Promise((resolve, reject) => {
+ reader.onload = () => {
+ const uri = reader.result as string;
+ resolve(uri.slice(uri.indexOf(',') + 1));
+ };
+ reader.onerror = reject;
+ });
+}
diff --git a/plugins/scaffolder/src/lib/filesystem/index.ts b/plugins/scaffolder/src/lib/filesystem/index.ts
new file mode 100644
index 0000000000..1f485d0743
--- /dev/null
+++ b/plugins/scaffolder/src/lib/filesystem/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type { TemplateFileAccess, TemplateDirectoryAccess } from './types';
+export { blobToBase64 } from './helpers';
+export { WebFileSystemAccess } from './WebFileSystemAccess';
diff --git a/plugins/scaffolder/src/lib/filesystem/types.ts b/plugins/scaffolder/src/lib/filesystem/types.ts
new file mode 100644
index 0000000000..11de159b2a
--- /dev/null
+++ b/plugins/scaffolder/src/lib/filesystem/types.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface TemplateFileAccess {
+ path: string;
+ file(): Promise;
+ save(data: string | BufferSource | Blob): Promise;
+}
+
+export interface TemplateDirectoryAccess {
+ listFiles(): Promise>;
+}
diff --git a/plugins/scaffolder/src/setupTests.ts b/plugins/scaffolder/src/setupTests.ts
index 10252413a7..5499f969dc 100644
--- a/plugins/scaffolder/src/setupTests.ts
+++ b/plugins/scaffolder/src/setupTests.ts
@@ -19,3 +19,16 @@ import 'cross-fetch/polyfill';
const { EventSourcePolyfill } = jest.requireMock('event-source-polyfill');
global.EventSource = EventSourcePolyfill;
+
+// Patch jsdom to add feature used by CodeMirror
+document.createRange = () => {
+ const range = new Range();
+
+ range.getClientRects = () => ({
+ item: () => null,
+ length: 0,
+ [Symbol.iterator]: jest.fn(),
+ });
+
+ return range;
+};
diff --git a/plugins/scaffolder/src/types.ts b/plugins/scaffolder/src/types.ts
index bddd6a7b70..efdfcaff93 100644
--- a/plugins/scaffolder/src/types.ts
+++ b/plugins/scaffolder/src/types.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { TaskSpec } from '@backstage/plugin-scaffolder-common';
+import { TaskSpec, TaskStep } from '@backstage/plugin-scaffolder-common';
import { JsonObject, JsonValue, Observable } from '@backstage/types';
import { JSONSchema7 } from 'json-schema';
@@ -149,6 +149,27 @@ export interface ScaffolderStreamLogsOptions {
taskId: string;
after?: number;
}
+
+/** @public */
+export interface ScaffolderDryRunOptions {
+ template: JsonValue;
+ values: JsonObject;
+ secrets?: Record;
+ directoryContents: { path: string; base64Content: string }[];
+}
+
+/** @public */
+export interface ScaffolderDryRunResponse {
+ directoryContents: Array<{
+ path: string;
+ base64Content: string;
+ executable: boolean;
+ }>;
+ log: Array>;
+ steps: TaskStep[];
+ output: ScaffolderTaskOutput;
+}
+
/**
* An API to interact with the scaffolder backend.
*
@@ -181,4 +202,6 @@ export interface ScaffolderApi {
listActions(): Promise;
streamLogs(options: ScaffolderStreamLogsOptions): Observable;
+
+ dryRun?(options: ScaffolderDryRunOptions): Promise;
}