From 5edc82d02af5cf8c9a7b186be33517f6099ca4cc Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 28 Apr 2022 14:09:01 +0200 Subject: [PATCH] scaffolder: extract DryRunResultsView + refactor DryRunResults Signed-off-by: Patrik Oldsberg --- .../DryRunResults/DryRunResults.tsx | 91 +++++++++++ ...ryRunResults.tsx => DryRunResultsView.tsx} | 151 +++++------------- .../TemplateEditor/DryRunResults/index.ts | 2 +- .../TemplateEditor/TemplateEditor.tsx | 4 +- 4 files changed, 136 insertions(+), 112 deletions(-) create mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResults.tsx rename plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/{TemplateEditorDryRunResults.tsx => DryRunResultsView.tsx} (67%) diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResults.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResults.tsx new file mode 100644 index 0000000000..ae9374438f --- /dev/null +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/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 ( + <> + + + ); +} diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/TemplateEditorDryRunResults.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx similarity index 67% rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/TemplateEditorDryRunResults.tsx rename to plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx index fd49286818..1b03d80f34 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/TemplateEditorDryRunResults.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/DryRunResultsView.tsx @@ -14,56 +14,32 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core/styles'; -import Divider from '@material-ui/core/Divider'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import Typography from '@material-ui/core/Typography'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; -import Box from '@material-ui/core/Box'; -import React, { useEffect, useMemo, useState } from 'react'; -import { useDryRun } from '../DryRunContext'; -import ExpandMoreIcon from '@material-ui/icons/ExpandLess'; -import { FileBrowser } from '../FileBrowser'; -import CodeMirror from '@uiw/react-codemirror'; -import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml'; -import { StreamLanguage } from '@codemirror/language'; import { LogViewer } from '@backstage/core-components'; -import { usePrevious } from '@react-hookz/web'; +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 { BackstageTheme } from '@backstage/theme'; +import { useDryRun } from '../DryRunContext'; +import { FileBrowser } from '../FileBrowser'; import { DryRunResultsSplitView } from './DryRunResultsSplitView'; -import { DryRunResultsList } from './DryRunResultsList'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ - accordionHeader: { - height: 48, - minHeight: 0, - '&.Mui-expanded': { - height: 48, - minHeight: 0, - }, - }, - accordionContent: { - display: 'grid', - background: theme.palette.background.default, - gridTemplateColumns: '180px auto 1fr', - gridTemplateRows: '1fr', - padding: 0, - height: 400, - }, - resultView: { +const useStyles = makeStyles({ + root: { display: 'flex', flexFlow: 'column nowrap', }, - resultViewItemWrapper: { + contentWrapper: { flex: 1, position: 'relative', }, - resultViewItem: { + content: { position: 'absolute', top: 0, left: 0, @@ -79,76 +55,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ height: '100%', overflowY: 'auto', }, -})); - -export function TemplateEditorDryRunResults() { - 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 ( - <> - - - ); -} - -function ResultView() { - const classes = useStyles(); - const [selectedTab, setSelectedTab] = useState<'files' | 'log' | 'output'>( - 'files', - ); - - return ( -
- setSelectedTab(v)}> - - - - - - -
-
- {selectedTab === 'files' && } - {selectedTab === 'log' && } - {selectedTab === 'output' && } -
-
-
- ); -} +}); function FilesContent() { const classes = useStyles(); @@ -258,3 +165,29 @@ function OutputContent() { ); } + +export function DryRunResultsView() { + const classes = useStyles(); + const [selectedTab, setSelectedTab] = useState<'files' | 'log' | 'output'>( + 'files', + ); + + return ( +
+ setSelectedTab(v)}> + + + + + + +
+
+ {selectedTab === 'files' && } + {selectedTab === 'log' && } + {selectedTab === 'output' && } +
+
+
+ ); +} diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/index.ts b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/index.ts index 60ddc60026..af8ef5214f 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/index.ts +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/DryRunResults/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { TemplateEditorDryRunResults } from './TemplateEditorDryRunResults'; +export { DryRunResults } from './DryRunResults'; diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx index 7d4b44914c..be3ae84d39 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx @@ -50,7 +50,7 @@ import { useDirectoryEditor, } from './DirectoryEditorContext'; import { DryRunProvider, useDryRun } from './DryRunContext'; -import { TemplateEditorDryRunResults } from './DryRunResults'; +import { DryRunResults } from './DryRunResults'; const useStyles = makeStyles(theme => ({ // Reset and fix sizing to make sure scrolling behaves correctly @@ -151,7 +151,7 @@ export const TemplateEditor = (props: { />
- +