fix: missing db selector for database privilage group selections (#869)

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

client/src/pages/user/dialogs/DBCollectionSelector.tsx

@@ -318,17 +318,43 @@ export default function DBCollectionsSelector(
       )}
 
       {tabValue === 1 && (
-        <PrivilegeSelector
-          privilegeOptions={databasePrivilegeOptions}
-          selected={selected}
-          selectedDB={{ name: userTrans('allDatabases'), value: '*' }}
-          selectedCollection={'*'}
-          handlePrivilegeChange={handlePrivilegeChange}
-          isCategoryAllSelected={isCategoryAllSelected}
-          isCategorySomeSelected={isCategorySomeSelected}
-          handleSelectAll={handleSelectAll}
-          privilegeOptionType={privilegeOptionType}
-        />
+        <div>
+          <Autocomplete
+            className={classes.selectorDB}
+            options={dbOptions}
+            loading={loading}
+            value={selectedDB || null}
+            onChange={(_, value) => {
+              if (!value) return;
+              handleDBChange(value);
+            }}
+            getOptionLabel={option => option.name}
+            isOptionEqualToValue={(option, value) =>
+              option.value === value.value
+            }
+            renderInput={params => (
+              <TextField
+                {...params}
+                label={userTrans('databases')}
+                variant="filled"
+              />
+            )}
+            noOptionsText={
+              loading ? searchTrans('loading') : searchTrans('noOptions')
+            }
+          />
+          <PrivilegeSelector
+            privilegeOptions={databasePrivilegeOptions}
+            selected={selected}
+            selectedDB={selectedDB}
+            selectedCollection={'*'}
+            handlePrivilegeChange={handlePrivilegeChange}
+            isCategoryAllSelected={isCategoryAllSelected}
+            isCategorySomeSelected={isCategorySomeSelected}
+            handleSelectAll={handleSelectAll}
+            privilegeOptionType={privilegeOptionType}
+          />
+        </div>
       )}
 
       {tabValue === 0 && (

client/src/styles/theme.ts

@@ -13,6 +13,7 @@ declare module '@mui/material/styles' {
   interface TypeBackground {
     lightGrey?: string; // Adding the light property to the TypeBackground interface
     grey?: string;
+    light?: string;
   }
   interface Palette {
     background: TypeBackground; // Ensure the background interface uses the updated TypeBackground