add custom switch and update code dialog style

client/src/components/code/CodeView.tsx

@@ -2,13 +2,14 @@ import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
+import { ITab } from '../customTabList/Types';
 import CodeBlock from './CodeBlock';
-import { CodeLanguageEnum, CodeViewProps } from './Types';
+import { CodeViewProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     boxSizing: 'border-box',
-    width: 480,
+    width: '100%',
 
     padding: theme.spacing(4),
     backgroundColor: theme.palette.milvusDark.main,
@@ -67,49 +68,21 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const jsCode = `const a = 2;
-const testFunction = (input) => {
-  console.log(input)
-}
-testFunction(a)`;
-
-const pyCode = `# Python program to find the
-# maximum of two numbers
-  
-def maximum(a, b):
-  if a >= b:
-      return a
-  else:
-      return b
-      
-# Driver code
-a = 2
-b = 4
-print(maximum(a, b))`;
-
-const CodeView: FC<CodeViewProps> = ({ wrapperClass = '' }) => {
+const CodeView: FC<CodeViewProps> = ({ wrapperClass = '', data }) => {
   const classes = getStyles();
   const { t: commonTrans } = useTranslation();
 
-  const mockTabs = [
-    {
-      label: 'node.js',
-      component: (
-        <CodeBlock language={CodeLanguageEnum.javascript} code={jsCode} />
-      ),
-    },
-    {
-      label: 'python',
-      component: <CodeBlock language={CodeLanguageEnum.python} code={pyCode} />,
-    },
-  ];
+  const tabs: ITab[] = data.map(item => ({
+    label: item.label,
+    component: <CodeBlock language={item.language} code={item.code} />,
+  }));
 
   return (
     <section className={`${classes.wrapper} ${wrapperClass}`}>
       <Typography variant="h5" className={classes.title}>
         {commonTrans('code')}
       </Typography>
-      <CustomTabList tabs={mockTabs} wrapperClass={classes.tabs} />
+      <CustomTabList tabs={tabs} wrapperClass={classes.tabs} />
     </section>
   );
 };

client/src/components/code/Types.ts

@@ -1,14 +1,18 @@
 export interface CodeViewProps {
   wrapperClass?: string;
+  data: CodeViewData[];
 }
 
 export enum CodeLanguageEnum {
   javascript = 'javascript',
   python = 'python',
-  go = 'go',
 }
 
 export interface CodeBlockProps {
   code: string;
   language: CodeLanguageEnum;
 }
+
+export interface CodeViewData extends CodeBlockProps {
+  label: string;
+}

client/src/components/customDialog/CustomDialog.tsx

@@ -21,9 +21,9 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: 0,
 
       backgroundColor: 'transparent',
-      boxShadow: 'initial',
     },
     noticePaper: {
+      backgroundColor: '#fff',
       maxWidth: 480,
     },
     paperSm: {

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -16,6 +16,7 @@ import { rootContext } from '../../context/Root';
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     maxWidth: '480px',
+    backgroundColor: '#fff',
   },
   mb: {
     marginBottom: theme.spacing(2.5),

client/src/components/customDialog/DialogTemplate.tsx

@@ -22,8 +22,15 @@ const useStyles = makeStyles((theme: Theme) => ({
   dialog: {
     minWidth: 480,
   },
+  codeWrapper: {
+    width: (props: { showCode: boolean }) => (props.showCode ? 480 : 0),
+    transition: 'width 0.2s',
+  },
   code: {
     height: '100%',
+    // set code view padding 0 if not show
+    padding: (props: { showCode: boolean }) =>
+      props.showCode ? theme.spacing(4) : 0,
   },
   actions: {
     paddingTop: theme.spacing(2),
@@ -51,7 +58,7 @@ const DialogTemplate: FC<DialogContainerProps> = ({
   const { t } = useTranslation('btn');
   const cancel = cancelLabel || t('cancel');
   const confirm = confirmLabel || t('confirm');
-  const classes = useStyles();
+  const classes = useStyles({ showCode });
   const onCancel = handleCancel || handleClose;
 
   return (
@@ -83,8 +90,11 @@ const DialogTemplate: FC<DialogContainerProps> = ({
           </DialogActions>
         )}
       </div>
-      <div className={classes.block}>
-        {showCode && <CodeView wrapperClass={classes.code} />}
+
+      <div className={`${classes.block} ${classes.codeWrapper}`}>
+        {showCode && (
+          <CodeView wrapperClass={classes.code} data={codeBlocksData} />
+        )}
       </div>
     </section>
   );

client/src/components/customDialog/Types.ts

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

client/src/components/customSwitch/CustomSwitch.tsx

@@ -0,0 +1,33 @@
+import { FormControlLabel, makeStyles, Switch, Theme } from '@material-ui/core';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CustomSwitchProps } from './Types';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  label: {
+    color: '#757575',
+  },
+
+  placement: {
+    marginLeft: 0,
+  },
+}));
+
+const CustomSwitch: FC<CustomSwitchProps> = ({ onChange }) => {
+  const classes = getStyles();
+  const { t: commonTrans } = useTranslation();
+
+  return (
+    <FormControlLabel
+      classes={{
+        label: classes.label,
+        labelPlacementStart: classes.placement,
+      }}
+      label={commonTrans('view')}
+      labelPlacement="start"
+      control={<Switch color="primary" onChange={onChange} />}
+    />
+  );
+};
+
+export default CustomSwitch;

client/src/components/customSwitch/Types.ts

@@ -0,0 +1,3 @@
+export interface CustomSwitchProps {
+  onChange: (event: React.ChangeEvent<{ checked: boolean }>) => void;
+}

client/src/i18n/cn/common.ts

@@ -25,6 +25,9 @@ const commonTrans = {
   param: 'Parameter',
   search: 'Search by name',
   code: 'Code View',
+  view: 'View Code',
+  js: 'NODE.JS',
+  py: 'PYTHON',
 };
 
 export default commonTrans;

client/src/i18n/en/common.ts

@@ -25,6 +25,9 @@ const commonTrans = {
   param: 'Parameter',
   search: 'Search by name',
   code: 'Code View',
+  view: 'View Code',
+  js: 'NODE.JS',
+  py: 'PYTHON',
 };
 
 export default commonTrans;

client/src/pages/schema/Create.tsx

@@ -1,7 +1,8 @@
-import { Switch } from '@material-ui/core';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { CodeLanguageEnum, CodeViewData } from '../../components/code/Types';
 import DialogTemplate from '../../components/customDialog/DialogTemplate';
+import CustomSwitch from '../../components/customSwitch/CustomSwitch';
 import {
   INDEX_CONFIG,
   INDEX_OPTIONS_MAP,
@@ -9,6 +10,7 @@ import {
   METRIC_TYPES_VALUES,
 } from '../../consts/Milvus';
 import { useFormValidation } from '../../hooks/Form';
+import { getCreateIndexJSCode, getCreateIndexPYCode } from '../../utils/Code';
 import { formatForm, getMetricOptions } from '../../utils/Form';
 import { getEmbeddingType } from '../../utils/search';
 import { DataType } from '../collections/Types';
@@ -26,6 +28,7 @@ const CreateIndex = (props: {
   const { t: indexTrans } = useTranslation('index');
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: btnTrans } = useTranslation('btn');
+  const { t: commonTrans } = useTranslation();
 
   const defaultIndexType =
     fieldType === 'BinaryVector'
@@ -54,6 +57,9 @@ const CreateIndex = (props: {
     knng: '',
   });
 
+  // control whether show code mode
+  const [showCode, setShowCode] = useState<boolean>(false);
+
   const indexCreateParams = useMemo(() => {
     if (!INDEX_CONFIG[indexSetting.index_type]) {
       return [];
@@ -88,6 +94,25 @@ const CreateIndex = (props: {
     return form;
   }, [indexSetting, indexCreateParams]);
 
+  /**
+   * create index code mode
+   */
+  const codeBlockData: CodeViewData[] = useMemo(
+    () => [
+      {
+        label: commonTrans('js'),
+        language: CodeLanguageEnum.javascript,
+        code: getCreateIndexJSCode(),
+      },
+      {
+        label: commonTrans('py'),
+        language: CodeLanguageEnum.python,
+        code: getCreateIndexPYCode(),
+      },
+    ],
+    [commonTrans]
+  );
+
   const { validation, checkIsValid, disabled, setDisabled, resetValidation } =
     useFormValidation(checkedForm);
 
@@ -149,6 +174,11 @@ const CreateIndex = (props: {
     handleCreate(params);
   };
 
+  const handleShowCode = (event: React.ChangeEvent<{ checked: boolean }>) => {
+    const isChecked = event.target.checked;
+    setShowCode(isChecked);
+  };
+
   return (
     <DialogTemplate
       title={dialogTrans('createTitle', {
@@ -159,8 +189,9 @@ const CreateIndex = (props: {
       confirmLabel={btnTrans('create')}
       handleConfirm={handleCreateIndex}
       confirmDisabled={disabled}
-      leftActions={<Switch />}
-      showCode={true}
+      leftActions={<CustomSwitch onChange={handleShowCode} />}
+      showCode={showCode}
+      codeBlocksData={codeBlockData}
     >
       <CreateForm
         updateForm={updateStepTwoForm}

client/src/utils/Code.ts

@@ -0,0 +1,27 @@
+export const getCreateIndexJSCode = () => {
+  const jsCode = `const a = 2;
+const testFunction = (input) => {
+  console.log(input)
+}
+testFunction(a)`;
+
+  return jsCode;
+};
+
+export const getCreateIndexPYCode = () => {
+  const pyCode = `# Python program to find the
+# maximum of two numbers
+  
+def maximum(a, b):
+  if a >= b:
+      return a
+  else:
+      return b
+      
+# Driver code
+a = 2
+b = 4
+print(maximum(a, b))`;
+
+  return pyCode;
+};