#57 add the modals layout component

MetaCell · Jun 9, 2023 · 8c16a17 · 8c16a17
1 parent b1fa70f
commit 8c16a17
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 124 deletions.
diff --git a/src/client/components/common/CondaSelectionDialog.js b/src/client/components/common/CondaSelectionDialog.js
@@ -11,6 +11,9 @@ const {
 } = vars;
 
 export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
+  const onSelectChange = (event) => {
+    setState({condaEnv: event.target.value})
+  }
   return (
   <ModalsLayout hasClosingIcon={true}>
     <Stack spacing={4}>
@@ -24,7 +27,14 @@ export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
       >
         {'Select conda environment:'}
       </Typography>
-      <CustomSelect state={state} setState={(val) => setState(val)} getMenuItems={getMenuItems} />
+      <CustomSelect
+        setState={(val) => setState(val)}
+        getMenuItems={getMenuItems}
+        placeholder="Conda environment"
+        value={state.condaEnv}
+        options={state.condaEnvs}
+        onSelectChange={(val) => onSelectChange(val)}
+      />
     </Stack>
 
     <Button

diff --git a/src/client/components/common/Layout.js b/src/client/components/common/Layout.js
@@ -40,7 +40,7 @@ class Layout extends React.Component {
       modalDialogValue: '',
       condaEnvs: undefined,
       dependenciesFound: true,
-      condaEnvSelection: false,
+      condaEnvSelection: true,
       showRunModalDialog: false,
       spinnerEnabled: !isFrontendDev,
       modalDialogOptions: Object.values(selectModalOptions),

diff --git a/src/client/components/common/ModalsLayout.js b/src/client/components/common/ModalsLayout.js
@@ -57,6 +57,17 @@ export const ModalsLayout = ({children, hasClosingIcon = false}) => {
           justifyContent: 'space-between',
           textAlign: 'left',
           padding: '80px',
+
+          "& .MuiInputBase-root": {
+            "&:hover": {
+              border: 0,
+
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: '2px solid #18A0FB',
+
+              }
+            }
+          }
         }}
       >
         {children}

diff --git a/src/client/components/common/RunModalDialog.js b/src/client/components/common/RunModalDialog.js
@@ -1,11 +1,11 @@
 import React  from "react";
-import { Box, Button, IconButton, Paper, Typography, TextField } from "@mui/material";
+import { Button, Typography, TextField } from "@mui/material";
 import {messageTypes} from "../../../messageTypes";
 import vars from "../../assets/styles/variables";
-import {CloseModalIcon} from "../views/visualiseView/icons/layoutIcons";
 import {CustomSelect} from "./CustomSelect";
 import {Stack} from "@mui/system";
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import {ModalsLayout} from "./ModalsLayout";
 const {
   lightBlack,
   listItemActiveBg,
@@ -28,128 +28,69 @@ export const RunModalDialog = ({state, setState, getMenuItems, selectModalOption
     setState({ [field]: event.target.value })
   }
 
-  return <Paper
-    id='pnl-wall'
-    open={true}
-    sx={{
-      position: 'absolute',
-      top: 50,
-      left: 0,
-      width: 'calc(100VW)',
-      maxWidth: 'calc(100VW)',
-      height: 'calc(100Vh)',
-      border: '0px transparent',
-      background: 'rgba(0, 0, 0, 0.5)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    <Paper
-      elevation={4}
-      id='pnl-wall'
-      open={true}
-      hideBackdrop
-      sx={{
-        position: 'fixed',
-        background: "#fff",
-        borderRadius: '0.75rem',
-        zIndex: 1305,
-        width: '640px',
-        height: '640px',
-      }}
-    >
-      <IconButton
-        sx={{
-          padding: 0,
-          margin: '1rem'
-        }}
-      >
-        <CloseModalIcon />
-      </IconButton>
-      <Box
-        height={.895}
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'inherit',
-          justifyContent: 'space-between',
-          padding: '80px',
-          paddingTop: '25px',
-
-          "& .MuiInputBase-root": {
-            "&:hover": {
-              border: 0,
-
-              "& .MuiOutlinedInput-notchedOutline": {
-                border: '2px solid #18A0FB',
-
-              }
-            }
+  return (
+    <ModalsLayout hasClosingIcon>
+        <Stack spacing={2}>
+          <Typography
+            sx={{
+              fontSize: '2.5rem',
+              fontWeight: 600,
+              color: lightBlack,
+              lineHeight: 1.2
+            }}
+          >
+            {'Run your model'}
+          </Typography>
+          <CustomSelect
+            setState={(val) => setState(val)}
+            getMenuItems={getMenuItems}
+            placeholder="Select an option"
+            value={state.modalDialogValue}
+            showShrunkLabel={false}
+            options={state.modalDialogOptions}
+            onSelectChange={(val) => onSelectChange(val)}
+          />
+          {
+            state.modalDialogValue === selectModalOptions.PNL_input &&
+            <TextField
+              id="PNL_input"
+              placeholder="Insert the PNL"
+              multiline
+              rows={10}
+              onChange={(e) => onInputChange(e, 'PNL_input')}
+            />
           }
-        }}
-      >
-          <Stack spacing={2}>
-            <Typography
+          {
+            state.modalDialogValue === selectModalOptions.file_path &&
+            <Button
+              variant="contained"
+              width={1}
+              onClick={onOpenFile}
               sx={{
-                fontSize: '2.5rem',
-                fontWeight: 600,
-                color: lightBlack,
-                lineHeight: 1.2
+                height: '2.5rem',
+                boxShadow: 'none',
+                backgroundColor: elementBorderColor,
+                border: 0,
+                color: textBlack,
+
+                "&:hover": {
+                  color: textWhite,
+                  boxShadow: 'none',
+                }
               }}
             >
-              {'Run your model'}
-            </Typography>
-            <CustomSelect
-              setState={(val) => setState(val)}
-              getMenuItems={getMenuItems}
-              placeholder="Select an option"
-              value={state.modalDialogValue}
-              showShrunkLabel={false}
-              options={state.modalDialogOptions}
-              onSelectChange={(val) => onSelectChange(val)}
+              Open File
+            </Button>
+          }
+          {
+            state.modalDialogValue === selectModalOptions.python_object_name &&
+            <TextField
+              id="python_object_name"
+              placeholder="Name of a Python object"
+              onChange={(e) => onInputChange(e, 'python_object_name')}
             />
-            {
-              state.modalDialogValue === selectModalOptions.PNL_input &&
-              <TextField
-                id="PNL_input"
-                placeholder="Insert the PNL"
-                multiline
-                rows={10}
-                onChange={(e) => onInputChange(e, 'PNL_input')}
-              />
-            }
-            {
-              state.modalDialogValue === selectModalOptions.file_path &&
-              <Button
-                variant="contained"
-                width={1}
-                onClick={onOpenFile}
-                sx={{
-                  height: '2.5rem',
-                  boxShadow: 'none',
-                  backgroundColor: elementBorderColor,
-                  border: 0,
-                  color: textBlack,
-
-                  "&:hover": {
-                    color: textWhite,
-                    boxShadow: 'none',
-                  }
-                }}
-              >
-                Open File
-              </Button>
-            }
-            {
-              state.modalDialogValue === selectModalOptions.python_object_name &&
-              <TextField
-                id="python_object_name"
-                placeholder="Name of a Python object"
-                onChange={(e) => onInputChange(e, 'python_object_name')}
-              />
-            }
-          </Stack>
+          }
+        </Stack>
 
         <Button
           size="small"
@@ -177,7 +118,5 @@ export const RunModalDialog = ({state, setState, getMenuItems, selectModalOption
         >
           Run your model
         </Button>
-      </Box>
-    </Paper>
-  </Paper>
+  </ModalsLayout>)
 }