fix: ui style issues for schema and data page

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

client/src/pages/databases/Databases.tsx

@@ -226,7 +226,7 @@ const Databases = () => {
       // if query state not found, and the schema is ready, create new query state
       if (!query && c.schema) {
         setQueryState(prevState => {
-          const fields = [...c.schema.fields, ...c.schema.dynamicFields].filter(
+          const fields = [...c.schema.fields].filter(
             f => !f.is_function_output
           );
           return [

client/src/pages/databases/StyledComponents.ts

@@ -37,15 +37,6 @@ export const Toolbar = styled(Box)(({ theme }) => ({
     gap: theme.spacing(1),
   },
 
-  '& .selector': {
-    width: 160,
-  },
-
-  '& .outputs': {
-    height: 56,
-    width: 140,
-  },
-
   '& .btn': {
     height: 56,
     width: 80,

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -21,12 +21,18 @@ import {
   CONSISTENCY_LEVEL_OPTIONS,
   ConsistencyLevelEnum,
 } from '@/consts';
-import CustomSelector from '@/components/customSelector/CustomSelector';
+import {
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Checkbox,
+  ListItemText,
+} from '@mui/material';
 import EmptyDataDialog from '@/pages/dialogs/EmptyDataDialog';
 import ImportSampleDialog from '@/pages/dialogs/ImportSampleDialog';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import CustomInput from '@/components/customInput/CustomInput';
-import CustomMultiSelector from '@/components/customSelector/CustomMultiSelector';
 import CollectionColHeader from '../CollectionColHeader';
 import DataView from '@/components/DataView/DataView';
 import DataListView from '@/components/DataListView/DataListView';
@@ -457,75 +463,116 @@ const CollectionData = (props: CollectionDataProps) => {
                 checkValid={() => true}
               />
 
-              <CustomSelector
-                options={CONSISTENCY_LEVEL_OPTIONS}
-                value={queryState.consistencyLevel}
-                label={collectionTrans('consistency')}
-                wrapperClass="selector"
-                disabled={!collection.loaded}
+              <FormControl
                 variant="filled"
-                onChange={(e: { target: { value: unknown } }) => {
-                  const consistency = e.target.value as string;
-                  setQueryState({
-                    ...queryState,
-                    consistencyLevel: consistency,
-                  });
-                }}
-              />
+                className="selector"
+                disabled={!collection.loaded}
+                sx={{ minWidth: 120 }}
+              >
+                <InputLabel>{collectionTrans('consistency')}</InputLabel>
+                <Select
+                  value={queryState.consistencyLevel}
+                  label={collectionTrans('consistency')}
+                  onChange={e => {
+                    const consistency = e.target.value as string;
+                    setQueryState({
+                      ...queryState,
+                      consistencyLevel: consistency,
+                    });
+                  }}
+                >
+                  {CONSISTENCY_LEVEL_OPTIONS.map(option => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
             </div>
 
             <div className="right">
-              <CustomMultiSelector
-                className="outputs"
-                options={queryState.fields.map(f => {
-                  return {
-                    label:
-                      f.name === DYNAMIC_FIELD
-                        ? searchTrans('dynamicFields')
-                        : f.name,
-                    value: f.name,
-                  };
-                })}
-                values={queryState.outputFields}
-                renderValue={selected => (
-                  <span>{`${(selected as string[]).length} ${commonTrans(
-                    (selected as string[]).length > 1
-                      ? 'grid.fields'
-                      : 'grid.field'
-                  )}`}</span>
-                )}
-                label={searchTrans('outputFields')}
-                wrapperClass="selector"
+              <FormControl
                 variant="filled"
-                onChange={(e: { target: { value: unknown } }) => {
-                  // add value to output fields if not exist, remove if exist
-                  const newOutputFields = [...queryState.outputFields];
-                  const values = e.target.value as string[];
-                  const newFields = values.filter(
-                    v => !newOutputFields.includes(v as string)
-                  );
-                  const removeFields = newOutputFields.filter(
-                    v => !values.includes(v as string)
-                  );
-                  newOutputFields.push(...newFields);
-                  removeFields.forEach(f => {
-                    const index = newOutputFields.indexOf(f);
-                    newOutputFields.splice(index, 1);
-                  });
-
-                  // sort output fields by schema order
-                  newOutputFields.sort(
-                    (a, b) =>
-                      queryState.fields.findIndex(f => f.name === a) -
-                      queryState.fields.findIndex(f => f.name === b)
-                  );
-
-                  setQueryState({
-                    ...queryState,
-                    outputFields: newOutputFields,
-                  });
+                className="outputs selector"
+                sx={{
+                  minWidth: 200,
+                  '& .MuiSelect-select': {
+                    fontSize: '14px',
+                  },
+                  '& .MuiInputLabel-root': {
+                    fontSize: '14px',
+                  },
+                  '& .MuiMenuItem-root': {
+                    padding: '2px 14px',
+                    minHeight: '32px',
+                    fontSize: '14px',
+                  },
+                  '& .MuiCheckbox-root': {
+                    padding: '4px',
+                  },
+                  '& .MuiListItemText-root': {
+                    margin: '0',
+                  },
                 }}
-              />
+              >
+                <InputLabel>{searchTrans('outputFields')}</InputLabel>
+                <Select
+                  multiple
+                  value={queryState.outputFields}
+                  label={searchTrans('outputFields')}
+                  onChange={e => {
+                    const values = e.target.value as string[];
+                    // sort output fields by schema order
+                    const newOutputFields = [...values].sort(
+                      (a, b) =>
+                        queryState.fields.findIndex(f => f.name === a) -
+                        queryState.fields.findIndex(f => f.name === b)
+                    );
+
+                    setQueryState({
+                      ...queryState,
+                      outputFields: newOutputFields,
+                    });
+                  }}
+                  renderValue={selected => (
+                    <span>{`${selected.length} ${commonTrans(
+                      selected.length > 1 ? 'grid.fields' : 'grid.field'
+                    )}`}</span>
+                  )}
+                  MenuProps={{
+                    PaperProps: {
+                      style: {
+                        maxHeight: 300,
+                      },
+                    },
+                  }}
+                >
+                  {queryState.fields.map(field => (
+                    <MenuItem
+                      key={field.name}
+                      value={field.name}
+                      sx={{
+                        padding: '0 12px',
+                      }}
+                    >
+                      <Checkbox
+                        checked={
+                          queryState.outputFields.indexOf(field.name) > -1
+                        }
+                        size="small"
+                      />
+                      <ListItemText
+                        primary={
+                          field.name === DYNAMIC_FIELD
+                            ? searchTrans('dynamicFields')
+                            : field.name
+                        }
+                        primaryTypographyProps={{ fontSize: '14px' }}
+                      />
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
               <CustomButton
                 className="btn"
                 onClick={handleFilterReset}

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

@@ -165,7 +165,11 @@ const Overview = () => {
       align: 'left',
       disablePadding: false,
       formatter(f) {
-        return <Typography variant="body1"><DataTypeChip size="small" label={formatFieldType(f)} /></Typography>;
+        return (
+          <Typography variant="body1" component="div">
+            <DataTypeChip size="small" label={formatFieldType(f)} />
+          </Typography>
+        );
       },
       label: collectionTrans('fieldType'),
     },
@@ -192,7 +196,9 @@ const Overview = () => {
       disablePadding: false,
       label: collectionTrans('defaultValue'),
       formatter(f) {
-        return <Typography variant="body1">{f.default_value || '--'}</Typography>;
+        return (
+          <Typography variant="body1">{f.default_value || '--'}</Typography>
+        );
       },
     },
     {
@@ -212,7 +218,7 @@ const Overview = () => {
       notSort: true,
       formatter(f) {
         return (
-          <Typography variant="body1">
+          <Typography variant="body1" component="div">
             <IndexTypeElement
               field={f}
               collectionName={collectionName}
@@ -232,7 +238,7 @@ const Overview = () => {
       notSort: true,
       formatter(f) {
         return (
-          <Typography variant="body1">
+          <Typography variant="body1" component="div">
             {f.index ? (
               <ParamWrapper>
                 {f.index.indexParameterPairs.length > 0 ? (

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

@@ -76,6 +76,7 @@ export const InfoValue = styled(Box)(({ theme }) => ({
   flex: 1,
   minWidth: 0,
   flexWrap: 'nowrap',
+  overflow: 'hidden',
   [theme.breakpoints.down('md')]: {
     fontSize: 13,
     gap: theme.spacing(0.5),
@@ -102,6 +103,8 @@ export const ActionWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(0.5),
+  position: 'relative',
+  top: '-4px',
   marginLeft: 'auto',
   [theme.breakpoints.down('md')]: {
     gap: theme.spacing(0.25),