update insert container and its children props types

client/src/components/insert/Container.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme } from '@material-ui/core';
-import { useContext, useMemo, useState } from 'react';
+import { FC, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DialogTemplate from '../customDialog/DialogTemplate';
 import icons from '../icons/Icons';
@@ -7,7 +7,12 @@ import { rootContext } from '../../context/Root';
 import InsertImport from './Import';
 import InsertPreview from './Preview';
 import InsertStatus from './Status';
-import { InsertStatusEnum, InsertStepperEnum } from './Types';
+import {
+  InsertContentProps,
+  InsertStatusEnum,
+  InsertStepperEnum,
+} from './Types';
+import { Option } from '../customSelector/Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   icon: {
@@ -20,9 +25,30 @@ const getStyles = makeStyles((theme: Theme) => ({
  * all datas and methods passed in as props, no interactions with server done in it
  */
 
-const InsertContainer = () => {
+const InsertContainer: FC<InsertContentProps> = ({
+  collections,
+  selectedCollection,
+  partitions,
+  selectedPartition,
+  schema,
+  handleInsert,
+}) => {
   const classes = getStyles();
 
+  // props children component needed:
+  const collectionOptions: Option[] = collections.map(c => ({
+    label: c._name,
+    value: c._name,
+  }));
+  const partitionOptions: Option[] = partitions.map(p => ({
+    label: p._name,
+    value: p._name,
+  }));
+  const schemaOptions: Option[] = schema.map(s => ({
+    label: s._fieldName,
+    value: s._fieldId,
+  }));
+
   const { t: insertTrans } = useTranslation('insert');
   const { t: btnTrans } = useTranslation('btn');
   const { handleCloseDialog } = useContext(rootContext);
@@ -75,6 +101,7 @@ const InsertContainer = () => {
   const handleInsertData = () => {
     // mock status change
     setInsertStauts(InsertStatusEnum.loading);
+    handleInsert();
     setTimeout(() => {
       setInsertStauts(InsertStatusEnum.success);
     }, 500);
@@ -87,7 +114,6 @@ const InsertContainer = () => {
         break;
       case InsertStepperEnum.preview:
         setActiveStep(activeStep => activeStep + 1);
-        // @TODO insert interactions
         handleInsertData();
         break;
       // default represent InsertStepperEnum.status
@@ -104,7 +130,6 @@ const InsertContainer = () => {
         break;
       case InsertStepperEnum.preview:
         setActiveStep(activeStep => activeStep - 1);
-        // @TODO reset uploaded file?
         break;
       // default represent InsertStepperEnum.status
       // status don't have cancel button
@@ -116,12 +141,19 @@ const InsertContainer = () => {
   const generateContent = (activeStep: InsertStepperEnum) => {
     switch (activeStep) {
       case InsertStepperEnum.import:
-        return <InsertImport />;
+        return (
+          <InsertImport
+            collectionOptions={collectionOptions}
+            selectedCollection={selectedCollection}
+            partitionOptions={partitionOptions}
+            selectedPartition={selectedPartition}
+          />
+        );
       case InsertStepperEnum.preview:
-        return <InsertPreview />;
+        return <InsertPreview schemaOptions={schemaOptions} />;
       // default represents InsertStepperEnum.status
       default:
-        return <InsertStatus />;
+        return <InsertStatus status={insertStatus} />;
     }
   };
 

client/src/components/insert/Import.tsx

@@ -2,7 +2,8 @@ import { useTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, Theme, Divider } from '@material-ui/core';
 import CustomSelector from '../customSelector/CustomSelector';
-import { Option } from '../customSelector/Types';
+import { FC } from 'react';
+import { InsertImportProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   tip: {
@@ -30,33 +31,17 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const InsertImport = () => {
+const InsertImport: FC<InsertImportProps> = ({
+  collectionOptions,
+  partitionOptions,
+  selectedCollection,
+  selectedPartition,
+}) => {
   const { t: insertTrans } = useTranslation('insert');
   const { t: collectionTrans } = useTranslation('collection');
   const { t: partitionTrans } = useTranslation('partition');
   const classes = getStyles();
 
-  const collectionOptions: Option[] = [
-    {
-      label: 'a',
-      value: 'a',
-    },
-    {
-      label: 'b',
-      value: 'b',
-    },
-  ];
-  const partitionOptions: Option[] = [
-    {
-      label: 'a',
-      value: 'a',
-    },
-    {
-      label: 'b',
-      value: 'b',
-    },
-  ];
-
   const handleCollectionChange = () => {};
   const handlePartitionChange = () => {};
 
@@ -70,7 +55,7 @@ const InsertImport = () => {
         <CustomSelector
           options={collectionOptions}
           classes={{ root: 'selector' }}
-          value={''}
+          value={selectedCollection}
           variant="filled"
           label={collectionTrans('collection')}
           onChange={handleCollectionChange}
@@ -79,14 +64,14 @@ const InsertImport = () => {
         <CustomSelector
           options={partitionOptions}
           classes={{ root: 'selector' }}
-          value={''}
+          value={selectedPartition}
           variant="filled"
           label={partitionTrans('partition')}
           onChange={handlePartitionChange}
         />
       </form>
 
-      <div className={classes.uploadWrapper}></div>
+      <div className={classes.uploadWrapper}>uploader</div>
     </section>
   );
 };

client/src/components/insert/Preview.tsx

@@ -1,5 +1,7 @@
-const InsertPreview = () => {
-  console.log('enter preview');
+import { FC } from 'react';
+import { InsertPreviewProps } from './Types';
+
+const InsertPreview: FC<InsertPreviewProps> = ({ schemaOptions }) => {
   return <div>preview</div>;
 };
 

client/src/components/insert/Status.tsx

@@ -1,5 +1,7 @@
-const InsertStatus = () => {
-  console.log('enter insert status');
+import { FC } from 'react';
+import { InsertStatusProps } from './Types';
+
+const InsertStatus: FC<InsertStatusProps> = ({ status }) => {
   return <div>status</div>;
 };
 

client/src/components/insert/Types.ts

@@ -1,3 +1,17 @@
+import { CollectionData } from '../../pages/collections/Types';
+import { PartitionData } from '../../pages/partitions/Types';
+import { FieldData } from '../../pages/schema/Types';
+import { Option } from '../customSelector/Types';
+
+export interface InsertContentProps {
+  collections: CollectionData[];
+  selectedCollection: string;
+  partitions: PartitionData[];
+  selectedPartition: string;
+  schema: FieldData[];
+  handleInsert: () => void;
+}
+
 export enum InsertStepperEnum {
   import,
   preview,
@@ -11,3 +25,18 @@ export enum InsertStatusEnum {
   success = 'success',
   error = 'error',
 }
+
+export interface InsertImportProps {
+  collectionOptions: Option[];
+  partitionOptions: Option[];
+  selectedCollection: string;
+  selectedPartition: string;
+}
+
+export interface InsertPreviewProps {
+  schemaOptions: Option[];
+}
+
+export interface InsertStatusProps {
+  status: InsertStatusEnum;
+}

client/src/pages/collections/Collections.tsx

@@ -22,7 +22,7 @@ import { CollectionHttp } from '../../http/Collection';
 import { useLoadAndReleaseHook } from '../../hooks/ReleaseAndLoad';
 import Highlighter from 'react-highlight-words';
 import { parseLocationSearch } from '../../utils/Format';
-import InsertContainer from '../insert/Container';
+// import InsertContainer from '../../components/insert/Container';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -225,26 +225,26 @@ const Collections = () => {
       },
       icon: 'add',
     },
-    {
-      label: btnTrans('insert'),
-      onClick: () => {
-        setDialog({
-          open: true,
-          type: 'custom',
-          params: {
-            component: <InsertContainer />,
-          },
-        });
-      },
-      /**
-       * insert validation:
-       * 1. At least 1 available collection
-       * 2. selected collections quantity shouldn't over 1
-       */
-      disabled: () =>
-        collectionList.length === 0 || selectedCollections.length > 1,
-      icon: 'upload',
-    },
+    // {
+    //   label: btnTrans('insert'),
+    //   onClick: () => {
+    //     setDialog({
+    //       open: true,
+    //       type: 'custom',
+    //       params: {
+    //         component: <InsertContainer />,
+    //       },
+    //     });
+    //   },
+    //   /**
+    //    * insert validation:
+    //    * 1. At least 1 available collection
+    //    * 2. selected collections quantity shouldn't over 1
+    //    */
+    //   disabled: () =>
+    //     collectionList.length === 0 || selectedCollections.length > 1,
+    //   icon: 'upload',
+    // },
     {
       type: 'iconBtn',
       onClick: () => {

client/src/pages/schema/Types.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { ManageRequestMethods } from '../../types/Common';
 import { DataType } from '../collections/Types';
 
 export enum INDEX_TYPES_ENUM {