update dialog code mode

client/src/components/code/CodeView.tsx

@@ -1,8 +1,9 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
 import CodeBlock from './CodeBlock';
-import { CodeLanguageEnum } from './Types';
+import { CodeLanguageEnum, CodeViewProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -86,7 +87,7 @@ a = 2
 b = 4
 print(maximum(a, b))`;
 
-const CodeView = () => {
+const CodeView: FC<CodeViewProps> = ({ wrapperClass = '' }) => {
   const classes = getStyles();
   const { t: commonTrans } = useTranslation();
 
@@ -104,7 +105,7 @@ const CodeView = () => {
   ];
 
   return (
-    <section className={classes.wrapper}>
+    <section className={`${classes.wrapper} ${wrapperClass}`}>
       <Typography variant="h5" className={classes.title}>
         {commonTrans('code')}
       </Typography>

client/src/components/code/Types.ts

@@ -1,3 +1,7 @@
+export interface CodeViewProps {
+  wrapperClass?: string;
+}
+
 export enum CodeLanguageEnum {
   javascript = 'javascript',
   python = 'python',

client/src/components/customDialog/CustomDialog.tsx

@@ -16,12 +16,15 @@ import CustomDialogTitle from './CustomDialogTitle';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     paper: {
-      minWidth: '480px',
-      borderRadius: '8px',
+      minWidth: 480,
+      borderRadius: 8,
       padding: 0,
+
+      backgroundColor: 'transparent',
+      boxShadow: 'initial',
     },
     noticePaper: {
-      maxWidth: '480px',
+      maxWidth: 480,
     },
     paperSm: {
       maxWidth: '80%',
@@ -31,12 +34,12 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     title: {
       '& p': {
-        fontWeight: '500',
+        fontWeight: 500,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        maxWidth: '300px',
-        fontSize: '20px',
+        maxWidth: 300,
+        fontSize: 20,
       },
     },
     padding: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -9,8 +9,22 @@ import {
 import { DialogContainerProps } from './Types';
 import CustomDialogTitle from './CustomDialogTitle';
 import CustomButton from '../customButton/CustomButton';
+import CodeView from '../code/CodeView';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  wrapper: {
+    display: 'flex',
+  },
+  block: {
+    borderRadius: 8,
+    backgroundColor: '#fff',
+  },
+  dialog: {
+    minWidth: 480,
+  },
+  code: {
+    height: '100%',
+  },
   actions: {
     paddingTop: theme.spacing(2),
     justifyContent: 'space-between',
@@ -30,6 +44,9 @@ const DialogTemplate: FC<DialogContainerProps> = ({
   showCancel = true,
   showCloseIcon = true,
   leftActions,
+  // needed for code mode
+  showCode = false,
+  codeBlocksData = [],
 }) => {
   const { t } = useTranslation('btn');
   const cancel = cancelLabel || t('cancel');
@@ -38,33 +55,38 @@ const DialogTemplate: FC<DialogContainerProps> = ({
   const onCancel = handleCancel || handleClose;
 
   return (
-    <>
-      <CustomDialogTitle onClose={handleClose} showCloseIcon={showCloseIcon}>
-        {title}
-      </CustomDialogTitle>
-      <DialogContent>{children}</DialogContent>
-      {showActions && (
-        <DialogActions className={classes.actions}>
-          <div>{leftActions}</div>
-          <div>
-            {showCancel && (
-              <CustomButton onClick={onCancel} color="default" name="cancel">
-                {cancel}
+    <section className={classes.wrapper}>
+      <div className={`${classes.dialog} ${classes.block}`}>
+        <CustomDialogTitle onClose={handleClose} showCloseIcon={showCloseIcon}>
+          {title}
+        </CustomDialogTitle>
+        <DialogContent>{children}</DialogContent>
+        {showActions && (
+          <DialogActions className={classes.actions}>
+            <div>{leftActions}</div>
+            <div>
+              {showCancel && (
+                <CustomButton onClick={onCancel} color="default" name="cancel">
+                  {cancel}
+                </CustomButton>
+              )}
+              <CustomButton
+                variant="contained"
+                onClick={handleConfirm}
+                color="primary"
+                disabled={confirmDisabled}
+                name="confirm"
+              >
+                {confirm}
               </CustomButton>
-            )}
-            <CustomButton
-              variant="contained"
-              onClick={handleConfirm}
-              color="primary"
-              disabled={confirmDisabled}
-              name="confirm"
-            >
-              {confirm}
-            </CustomButton>
-          </div>
-        </DialogActions>
-      )}
-    </>
+            </div>
+          </DialogActions>
+        )}
+      </div>
+      <div className={classes.block}>
+        {showCode && <CodeView wrapperClass={classes.code} />}
+      </div>
+    </section>
   );
 };
 

client/src/components/customDialog/Types.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { DialogType } from '../../context/Types';
+import { CodeBlockProps } from '../code/Types';
 export type CustomDialogType = DialogType & {
   onClose: () => void;
   containerClass?: string;
@@ -32,4 +33,7 @@ export type DialogContainerProps = {
   showActions?: boolean;
   showCancel?: boolean;
   leftActions?: ReactElement;
+  // code mode requirement
+  showCode?: boolean;
+  codeBlocksData?: CodeBlockProps[];
 };

client/src/context/Root.tsx

@@ -87,6 +87,7 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
   );
 
   const handleCloseDialog = () => {
+    console.log('---- handle close dialog', dialog);
     setDialog({
       ...dialog,
       open: false,

client/src/pages/schema/Create.tsx

@@ -1,7 +1,6 @@
 import { Switch } from '@material-ui/core';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import CodeView from '../../components/code/CodeView';
 import DialogTemplate from '../../components/customDialog/DialogTemplate';
 import {
   INDEX_CONFIG,
@@ -151,30 +150,29 @@ const CreateIndex = (props: {
   };
 
   return (
-    <>
-      <DialogTemplate
-        title={dialogTrans('createTitle', {
-          type: indexTrans('index'),
-          name: collectionName,
-        })}
-        handleClose={handleCancel}
-        confirmLabel={btnTrans('create')}
-        handleConfirm={handleCreateIndex}
-        confirmDisabled={disabled}
-        leftActions={<Switch />}
-      >
-        <CreateForm
-          updateForm={updateStepTwoForm}
-          metricOptions={metricOptions}
-          indexOptions={indexOptions}
-          formValue={indexSetting}
-          checkIsValid={checkIsValid}
-          validation={validation}
-          indexParams={indexCreateParams}
-          indexTypeChange={onIndexTypeChange}
-        />
-      </DialogTemplate>
-    </>
+    <DialogTemplate
+      title={dialogTrans('createTitle', {
+        type: indexTrans('index'),
+        name: collectionName,
+      })}
+      handleClose={handleCancel}
+      confirmLabel={btnTrans('create')}
+      handleConfirm={handleCreateIndex}
+      confirmDisabled={disabled}
+      leftActions={<Switch />}
+      showCode={true}
+    >
+      <CreateForm
+        updateForm={updateStepTwoForm}
+        metricOptions={metricOptions}
+        indexOptions={indexOptions}
+        formValue={indexSetting}
+        checkIsValid={checkIsValid}
+        validation={validation}
+        indexParams={indexCreateParams}
+        indexTypeChange={onIndexTypeChange}
+      />
+    </DialogTemplate>
   );
 };