update create collection dialog UI (#723)

Signed-off-by: shanghaikid <jiangruiyi@gmail.com>

client/src/i18n/cn/collection.ts

@@ -36,7 +36,7 @@ const collectionTrans = {
   modifyReplicaTooltip: '调整副本数量',
 
   // create dialog
-  createTitle: '创建Collection',
+  createTitle: '创建Collection {{name}}',
   idAndVectorFields: 'ID、向量或可用 BM25 算法处理的文本字段',
   scalarFields: '标量字段',
   schema: 'schema',

client/src/i18n/en/collection.ts

@@ -37,8 +37,8 @@ const collectionTrans = {
   modifyReplicaTooltip: 'Modify Replica Number',
 
   // create dialog
-  createTitle: 'Create Collection',
-  idAndVectorFields: 'ID, Vector, or VarChar Fields for BM25 Processing',
+  createTitle: 'Create Collection {{name}}',
+  idAndVectorFields: 'Primary Key, Vector, or BM25(VarChar) Fields',
   scalarFields: 'Scalar Fields',
   schema: 'Schema',
   consistency: 'Consistency',

client/src/pages/databases/collections/schema/Schema.tsx

@@ -5,7 +5,12 @@ import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
 import Icons from '@/components/icons/Icons';
-import { formatFieldType, formatNumber, findKeyValue } from '@/utils';
+import {
+  formatFieldType,
+  formatNumber,
+  findKeyValue,
+  isVectorType,
+} from '@/utils';
 import { dataContext, rootContext, systemContext } from '@/context';
 import IndexTypeElement from './IndexTypeElement';
 import { getLabelDisplayedRows } from '@/pages/search/Utils';
@@ -144,7 +149,13 @@ const Overview = () => {
       align: 'left',
       disablePadding: false,
       formatter(f) {
-        return formatFieldType(f);
+        return (
+          <Chip
+            className={`${classes.chip} ${classes.dataTypeChip}`}
+            size="small"
+            label={formatFieldType(f)}
+          />
+        );
       },
       label: collectionTrans('fieldType'),
     },

client/src/pages/databases/collections/schema/Styles.tsx

@@ -77,11 +77,13 @@ export const useStyles = makeStyles((theme: Theme) => ({
   chip: {
     fontSize: '12px',
     color: theme.palette.text.primary,
-    border: 'none',
     cursor: 'normal',
     marginRight: 4,
     marginLeft: 4,
   },
+  dataTypeChip: {
+    backgroundColor: theme.palette.background.grey,
+  },
   featureChip: {
     border: 'none',
     marginLeft: 0,

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -5,6 +5,7 @@ import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CustomInput from '@/components/customInput/CustomInput';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import { ITextfieldConfig } from '@/components/customInput/Types';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { rootContext, dataContext } from '@/context';
 import { useFormValidation } from '@/hooks';
 import { formatForm, getAnalyzerParams, TypeEnum } from '@/utils';
@@ -24,36 +25,49 @@ import { CONSISTENCY_LEVEL_OPTIONS } from './create/Constants';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  fieldset: {
-    width: '100%',
+  dialog: {
+    minWidth: 880,
+  },
+  container: {
     display: 'flex',
-    alignItems: 'center',
-    '&:nth-last-child(3)': {
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      marginBottom: '0',
-    },
-    '& legend': {
-      lineHeight: '20px',
-      fontSize: '14px',
+    flexDirection: 'column',
+
+    '& section': {
+      display: 'flex',
+      '& fieldset': {},
     },
   },
   generalInfo: {
+    '& fieldset': {
+      gap: 16,
+      display: 'flex',
+      width: '100%',
+    },
+  },
+  schemaInfo: {
+    background: theme.palette.background.grey,
+    padding: '16px',
+    borderRadius: 8,
+  },
+  extraInfo: {
+    marginTop: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
     gap: 8,
+
+    '& input': {
+      marginLeft: 0,
+    },
   },
   input: {
     width: '100%',
   },
-  select: {
-    '&:first-child': {
-      marginLeft: 0,
-    },
+  dynamicField: {
+    fontSize: 14,
+    marginLeft: -8,
   },
   consistencySelect: {
-    marginTop: theme.spacing(2),
-  },
-  dialog: {
-    minWidth: 880,
+    width: '50%',
   },
 }));
 
@@ -307,7 +321,7 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
 
   return (
     <DialogTemplate
-      title={collectionTrans('createTitle')}
+      title={collectionTrans('createTitle', { name: form.collection_name })}
       handleClose={() => {
         handleCloseDialog();
       }}
@@ -316,52 +330,62 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
       confirmDisabled={disabled || !allFieldsValid}
       dialogClass={classes.dialog}
     >
-      <>
-        <fieldset className={`${classes.fieldset} ${classes.generalInfo}`}>
-          {generalInfoConfigs.map(config => (
-            <CustomInput
-              key={config.key}
-              type="text"
-              textConfig={config}
-              checkValid={checkIsValid}
-              validInfo={validation}
+      <div className={classes.container}>
+        <section className={classes.generalInfo}>
+          <fieldset>
+            {generalInfoConfigs.map(config => (
+              <CustomInput
+                key={config.key}
+                type="text"
+                textConfig={config}
+                checkValid={checkIsValid}
+                validInfo={validation}
+              />
+            ))}
+          </fieldset>
+        </section>
+
+        <section className={classes.schemaInfo}>
+          <fieldset>
+            {/* <legend>{collectionTrans('schema')}</legend> */}
+            <CreateFields
+              fields={fields}
+              setFields={setFields}
+              setFieldsValidation={setFieldsValidation}
+              autoID={form.autoID}
+              setAutoID={changeIsAutoID}
+            />
+          </fieldset>
+        </section>
+
+        <section className={classes.extraInfo}>
+          <fieldset>
+            <CustomSelector
+              wrapperClass={classes.consistencySelect}
+              size="small"
+              options={CONSISTENCY_LEVEL_OPTIONS}
+              onChange={e => {
+                setConsistencyLevel(e.target.value as ConsistencyLevelEnum);
+              }}
+              label={collectionTrans('consistency')}
+              value={consistencyLevel}
+              variant="filled"
             />
-          ))}
-        </fieldset>
-
-        <fieldset className={classes.fieldset}>
-          {/* <legend>{collectionTrans('schema')}</legend> */}
-          <CreateFields
-            fields={fields}
-            setFields={setFields}
-            setFieldsValidation={setFieldsValidation}
-            autoID={form.autoID}
-            setAutoID={changeIsAutoID}
-          />
-        </fieldset>
-        <fieldset className={classes.fieldset}>
-          <FormControlLabel
-            checked={form.enableDynamicField}
-            control={<Checkbox size="small" />}
-            onChange={changeEnableDynamicField}
-            label={collectionTrans('enableDynamicSchema')}
-          />
-        </fieldset>
-
-        <fieldset className={classes.fieldset}>
-          <CustomSelector
-            wrapperClass={`${classes.select} ${classes.consistencySelect}`}
-            size="small"
-            options={CONSISTENCY_LEVEL_OPTIONS}
-            onChange={e => {
-              setConsistencyLevel(e.target.value as ConsistencyLevelEnum);
-            }}
-            label={collectionTrans('consistency')}
-            value={consistencyLevel}
-            variant="filled"
-          />
-        </fieldset>
-      </>
+          </fieldset>
+          <fieldset className={classes.dynamicField}>
+            <CustomToolTip title={collectionTrans('partitionKeyTooltip')}>
+              <>
+                <Checkbox
+                  checked={!!form.enableDynamicField}
+                  size="small"
+                  onChange={changeEnableDynamicField}
+                />
+                {collectionTrans('enableDynamicSchema')}
+              </>
+            </CustomToolTip>
+          </fieldset>
+        </section>
+      </div>
     </DialogTemplate>
   );
 };

client/src/pages/dialogs/create/Constants.ts

@@ -42,7 +42,7 @@ export const VECTOR_FIELDS_OPTIONS: LabelValuePair[] = [
     value: DataTypeEnum.SparseFloatVector,
   },
   {
-    label: 'VarChar(BM25)',
+    label: 'BM25(VarChar)',
     value: DataTypeEnum.VarCharBM25,
   },
 ];

client/src/pages/dialogs/create/CreateFields.tsx

@@ -49,6 +49,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflowY: 'auto',
   },
   title: {
+    marginTop: theme.spacing(2),
     '& button': {
       position: 'relative',
       top: '-1px',
@@ -365,7 +366,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
   };
 
   const generateDimension = (field: FieldType) => {
-    // sparse dont support dimension
+    // sparse doesn't support dimension
     if (field.data_type === DataTypeEnum.SparseFloatVector) {
       return null;
     }

client/src/styles/theme.ts

@@ -1,4 +1,5 @@
 import { PaletteMode } from '@mui/material';
+import { grey } from '@mui/material/colors';
 
 declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
@@ -6,6 +7,16 @@ declare module '@mui/material/Typography' {
   }
 }
 
+declare module '@mui/material/styles' {
+  interface TypeBackground {
+    light?: string; // Adding the light property to the TypeBackground interface
+    grey?: string;
+  }
+  interface Palette {
+    background: TypeBackground; // Ensure the background interface uses the updated TypeBackground
+  }
+}
+
 const getCommonThemes = (mode: PaletteMode) => ({
   typography: {
     fontFamily: [
@@ -41,7 +52,7 @@ const getCommonThemes = (mode: PaletteMode) => ({
     background: {
       default: mode === 'light' ? '#f5f5f5' : '#121212',
       paper: mode === 'light' ? '#ffffff' : '#1e1e1e',
-      light: mode === 'light' ? '#f5f5f5' : '#121212',
+      grey: mode === 'light' ? grey[200] : grey[800],
     },
   },
   spacing: (factor: number) => `${8 * factor}px`,