From 5d63d15dbfe1b281d139ed8dc0e31943318989e0 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 28 Apr 2022 14:13:36 +0200 Subject: [PATCH] scaffolder: extract FileBrowser Signed-off-by: Patrik Oldsberg --- .../FileBrowser.test.tsx | 0 .../FileBrowser.tsx | 50 ++----------------- .../src/components/FileBrowser/index.ts | 17 +++++++ .../DryRunResults/DryRunResultsView.tsx | 2 +- .../TemplateEditor/TemplateEditor.tsx | 2 +- 5 files changed, 24 insertions(+), 47 deletions(-) rename plugins/scaffolder/src/components/{TemplateEditorPage/TemplateEditor => FileBrowser}/FileBrowser.test.tsx (100%) rename plugins/scaffolder/src/components/{TemplateEditorPage/TemplateEditor => FileBrowser}/FileBrowser.tsx (76%) create mode 100644 plugins/scaffolder/src/components/FileBrowser/index.ts diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/FileBrowser.test.tsx b/plugins/scaffolder/src/components/FileBrowser/FileBrowser.test.tsx similarity index 100% rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/FileBrowser.test.tsx rename to plugins/scaffolder/src/components/FileBrowser/FileBrowser.test.tsx diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/FileBrowser.tsx b/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx similarity index 76% rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/FileBrowser.tsx rename to plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx index a815fc06f2..1273b8ad09 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/FileBrowser.tsx +++ b/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx @@ -20,12 +20,6 @@ import TreeView from '@material-ui/lab/TreeView'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import TreeItem from '@material-ui/lab/TreeItem'; -import { - TemplateDirectoryAccess, - TemplateFileAccess, -} from '../../../lib/filesystem'; -import { useAsync, useMountEffect } from '@react-hookz/web'; -import { ErrorPanel, Progress } from '@backstage/core-components'; const useStyles = makeStyles({ root: { @@ -114,11 +108,15 @@ function FileTreeItem({ entry }: { entry: FileEntry }) { } interface FileBrowserProps { - selected?: string; + /** A list of all filepaths to show, directories are separated with a `/` */ filePaths: string[]; + /** The currently selected file */ + selected?: string; + /** Callback for when a file is selected */ onSelect?(filePath: string): void; } +/** A simple file browser that allows you to select individual files */ export function FileBrowser(props: FileBrowserProps) { const classes = useStyles(); @@ -145,41 +143,3 @@ export function FileBrowser(props: FileBrowserProps) { ); } - -interface TemplateDirectoryAccessBrowserProps { - directory: TemplateDirectoryAccess; - onSelect?(file: TemplateFileAccess): void; -} - -function TemplateDirectoryAccessBrowser( - props: TemplateDirectoryAccessBrowserProps, -) { - const [state, { execute }] = useAsync(async () => { - const files = await props.directory.listFiles(); - return { - filePaths: files.map(file => file.path), - getFile: (path: string) => files.find(file => file.path === path), - }; - }); - - useMountEffect(execute); - - if (state.error) { - return ; - } else if (!state.result) { - return ; - } - - const handleSelect = (path: string) => { - const file = state.result?.getFile(path); - if (file) { - props.onSelect?.(file); - } - }; - - return ( - - ); -} - -FileBrowser.TemplateDirectoryAccess = TemplateDirectoryAccessBrowser; diff --git a/plugins/scaffolder/src/components/FileBrowser/index.ts b/plugins/scaffolder/src/components/FileBrowser/index.ts new file mode 100644 index 0000000000..5d18109a9c --- /dev/null +++ b/plugins/scaffolder/src/components/FileBrowser/index.ts @@ -0,0 +1,17 @@ +/* + * 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 { FileBrowser } from './FileBrowser'; diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx index 1b03d80f34..9e0f613d91 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx @@ -27,7 +27,7 @@ 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 { FileBrowser } from '../../../FileBrowser'; import { DryRunResultsSplitView } from './DryRunResultsSplitView'; const useStyles = makeStyles({ diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx index be3ae84d39..e1900357ad 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx @@ -44,7 +44,7 @@ import { TemplateParameterSchema } from '../../../types'; import { MultistepJsonForm } from '../../MultistepJsonForm'; import { createValidator } from '../../TemplatePage'; import { TemplateDirectoryAccess } from '../../../lib/filesystem'; -import { FileBrowser } from './FileBrowser'; +import { FileBrowser } from '../../FileBrowser'; import { DirectoryEditorProvider, useDirectoryEditor,