feat: back transition from validate to configure (#2982)

frontend/src/component/project/Project/Import/ImportModal.tsx

@@ -1,11 +1,18 @@
 import { styled } from '@mui/material';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ImportTimeline } from './ImportTimeline';
 import { ImportStage } from './ImportStage';
-import { ConfigurationStage } from './configure/ConfigurationStage';
+import {
+    Actions,
+    ConfigurationStage,
+    ConfigurationTabs,
+    ImportArea,
+    ImportMode,
+} from './configure/ConfigurationStage';
 import { ValidationStage } from './validate/ValidationStage';
+import { ImportOptions } from './configure/ImportOptions';
 
 const ModalContentContainer = styled('div')(({ theme }) => ({
     minHeight: '100vh',
@@ -27,6 +34,15 @@ const TimelineHeader = styled('div')(({ theme }) => ({
     marginBottom: theme.spacing(4),
 }));
 
+const isValidJSON = (json: string) => {
+    try {
+        JSON.parse(json);
+        return true;
+    } catch (e) {
+        return false;
+    }
+};
+
 interface IImportModalProps {
     open: boolean;
     setOpen: (value: boolean) => void;
@@ -34,9 +50,10 @@ interface IImportModalProps {
 }
 
 export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
-    const [importStage, setImportStage] = useState<ImportStage>({
+    const [importStage, setImportStage] = useState<ImportStage>('configure');
-        name: 'configure',
+    const [environment, setEnvironment] = useState('');
-    });
+    const [importPayload, setImportPayload] = useState('');
+    const [activeTab, setActiveTab] = useState<ImportMode>('file');
 
     return (
         <SidebarModal
@@ -49,29 +66,49 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
             <ModalContentContainer>
                 <TimelineContainer>
                     <TimelineHeader>Process</TimelineHeader>
-                    <ImportTimeline stage={importStage.name} />
+                    <ImportTimeline stage={importStage} />
                 </TimelineContainer>
                 <ConditionallyRender
-                    condition={importStage.name === 'configure'}
+                    condition={importStage === 'configure'}
                     show={
                         <ConfigurationStage
+                            tabs={
+                                <ConfigurationTabs
+                                    activeTab={activeTab}
+                                    setActiveTab={setActiveTab}
+                                />
+                            }
+                            importOptions={
+                                <ImportOptions
                                     project={project}
+                                    environment={environment}
+                                    onChange={setEnvironment}
+                                />
+                            }
+                            importArea={
+                                <ImportArea
+                                    activeTab={activeTab}
+                                    setActiveTab={setActiveTab}
+                                    importPayload={importPayload}
+                                    setImportPayload={setImportPayload}
+                                />
+                            }
+                            actions={
+                                <Actions
+                                    disabled={!isValidJSON(importPayload)}
+                                    onSubmit={() => setImportStage('validate')}
                                     onClose={() => setOpen(false)}
-                            onSubmit={configuration =>
+                                />
-                                setImportStage({
-                                    name: 'validate',
-                                    ...configuration,
-                                })
                             }
                         />
                     }
                 />
-                {importStage.name === 'validate' ? (
+                {importStage === 'validate' ? (
                     <ValidationStage
                         project={project}
-                        environment={importStage.environment}
+                        environment={environment}
-                        payload={JSON.parse(importStage.payload)}
+                        payload={JSON.parse(importPayload)}
-                        onBack={() => setImportStage({ name: 'configure' })}
+                        onBack={() => setImportStage('configure')}
                         onClose={() => setOpen(false)}
                     />
                 ) : (

frontend/src/component/project/Project/Import/ImportStage.ts

@@ -1,4 +1 @@
-export type ImportStage =
+export type ImportStage = 'configure' | 'validate' | 'import';
-    | { name: 'configure' }
-    | { name: 'validate'; environment: string; payload: string }
-    | { name: 'import' };

frontend/src/component/project/Project/Import/ImportTimeline.tsx

@@ -55,7 +55,7 @@ const TimelineItemDescription = styled(Box)(({ theme }) => ({
 }));
 
 export const ImportTimeline: FC<{
-    stage: ImportStage['name'];
+    stage: ImportStage;
 }> = ({ stage }) => {
     return (
         <StyledTimeline>

frontend/src/component/project/Project/Import/configure/ConfigurationStage.tsx

@@ -7,13 +7,12 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
-import { ImportOptions } from './ImportOptions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StyledFileDropZone } from './StyledFileDropZone';
 import { PulsingAvatar } from './PulsingAvatar';
 import { ArrowUpward } from '@mui/icons-material';
 import { ImportExplanation } from './ImportExplanation';
-import React, { FC, useState } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import useToast from 'hooks/useToast';
 import { ImportLayoutContainer } from '../ImportLayoutContainer';
 import { ActionsContainer } from '../ActionsContainer';
@@ -38,35 +37,12 @@ const MaxSizeMessage = styled(Typography)(({ theme }) => ({
     color: theme.palette.text.secondary,
 }));
 
-type ImportMode = 'file' | 'code';
+export type ImportMode = 'file' | 'code';
 
-const isValidJSON = (json: string) => {
+export const ConfigurationTabs: FC<{
-    try {
+    activeTab: ImportMode;
-        JSON.parse(json);
+    setActiveTab: (mode: ImportMode) => void;
-        return true;
+}> = ({ activeTab, setActiveTab }) => (
-    } catch (e) {
-        return false;
-    }
-};
-
-interface IConfigurationSettings {
-    environment: string;
-    payload: string;
-}
-
-export const ConfigurationStage: FC<{
-    project: string;
-    onClose: () => void;
-    onSubmit: (props: IConfigurationSettings) => void;
-}> = ({ project, onClose, onSubmit }) => {
-    const [environment, setEnvironment] = useState('');
-    const [importPayload, setImportPayload] = useState('');
-    const [activeTab, setActiveTab] = useState<ImportMode>('file');
-    const [dragActive, setDragActive] = useState(false);
-    const { setToastData } = useToast();
-
-    return (
-        <ImportLayoutContainer>
     <Box
         sx={{
             borderBottom: 1,
@@ -86,11 +62,18 @@ export const ConfigurationStage: FC<{
             />
         </Tabs>
     </Box>
-            <ImportOptions
+);
-                project={project}
+
-                environment={environment}
+export const ImportArea: FC<{
-                onChange={setEnvironment}
+    activeTab: ImportMode;
-            />
+    setActiveTab: (mode: ImportMode) => void;
+    importPayload: string;
+    setImportPayload: (payload: string) => void;
+}> = ({ activeTab, setActiveTab, importPayload, setImportPayload }) => {
+    const [dragActive, setDragActive] = useState(false);
+    const { setToastData } = useToast();
+
+    return (
         <ConditionallyRender
             condition={activeTab === 'file'}
             show={
@@ -139,16 +122,21 @@ export const ConfigurationStage: FC<{
                 />
             }
         />
-            <ImportExplanation />
+    );
+};
+
+export const Actions: FC<{
+    onSubmit: () => void;
+    onClose: () => void;
+    disabled: boolean;
+}> = ({ onSubmit, onClose, disabled }) => (
     <ActionsContainer>
         <Button
             sx={{ position: 'static' }}
             variant="contained"
             type="submit"
-                    onClick={() =>
+            onClick={onSubmit}
-                        onSubmit({ payload: importPayload, environment })
+            disabled={disabled}
-                    }
-                    disabled={!isValidJSON(importPayload)}
         >
             Validate
         </Button>
@@ -161,6 +149,21 @@ export const ConfigurationStage: FC<{
             Cancel import
         </Button>
     </ActionsContainer>
+);
+
+export const ConfigurationStage: FC<{
+    tabs: ReactNode;
+    importOptions: ReactNode;
+    importArea: ReactNode;
+    actions: ReactNode;
+}> = ({ tabs, importOptions, importArea, actions }) => {
+    return (
+        <ImportLayoutContainer>
+            {tabs}
+            {importOptions}
+            {importArea}
+            <ImportExplanation />
+            {actions}
         </ImportLayoutContainer>
     );
 };

frontend/src/component/project/Project/Import/configure/ImportOptions.tsx

@@ -39,10 +39,6 @@ export const ImportOptions: FC<IImportOptionsProps> = ({
             title: environment.name,
         }));
 
-    useEffect(() => {
-        onChange(environmentOptions[0]?.key);
-    }, [JSON.stringify(environmentOptions)]);
-
     return (
         <ImportOptionsContainer>
             <ImportOptionsHeader>Import options</ImportOptionsHeader>
@@ -54,7 +50,7 @@ export const ImportOptions: FC<IImportOptionsProps> = ({
                 options={environmentOptions}
                 onChange={onChange}
                 label={'Environment'}
-                value={environment}
+                value={environment || environmentOptions[0]?.key}
                 IconComponent={KeyboardArrowDownOutlined}
                 fullWidth
             />

frontend/src/component/project/Project/Import/validate/ValidationStage.tsx

@@ -92,16 +92,18 @@ export const ValidationStage: FC<{
     const [validationResult, setValidationResult] = useState<IValidationSchema>(
         { errors: [], warnings: [] }
     );
+    const [validJSON, setValidJSON] = useState(true);
 
     useEffect(() => {
         validateImport({ environment, project, data: payload })
             .then(setValidationResult)
-            .catch(error =>
+            .catch(error => {
+                setValidJSON(false);
                 setToastData({
                     type: 'error',
                     title: formatUnknownError(error),
-                })
+                });
-            );
+            });
     }, []);
 
     return (
@@ -185,7 +187,7 @@ export const ValidationStage: FC<{
                     sx={{ position: 'static' }}
                     variant="contained"
                     type="submit"
-                    disabled={validationResult.errors.length > 0}
+                    disabled={validationResult.errors.length > 0 || !validJSON}
                 >
                     Import configuration
                 </Button>