scaffolder: extract FileBrowser

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

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) {
     </TreeView>
   );
 }
-
-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 <ErrorPanel error={state.error!} />;
-  } else if (!state.result) {
-    return <Progress />;
-  }
-
-  const handleSelect = (path: string) => {
-    const file = state.result?.getFile(path);
-    if (file) {
-      props.onSelect?.(file);
-    }
-  };
-
-  return (
-    <FileBrowser filePaths={state.result.filePaths} onSelect={handleSelect} />
-  );
-}
-
-FileBrowser.TemplateDirectoryAccess = TemplateDirectoryAccessBrowser;

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';

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({

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,