feat: update storage setting section (#1140)

server/system.go

@@ -99,7 +99,7 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 					systemStatus.CustomizedProfile.ExternalURL = v.(string)
 				}
 			} else if systemSetting.Name == api.SystemSettingStorageServiceIDName {
-				systemStatus.StorageServiceID = value.(int)
+				systemStatus.StorageServiceID = int(value.(float64))
 			}
 		}
 

web/src/components/CreateIdentityProviderDialog.tsx

@@ -191,11 +191,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
       console.error(error);
       toastHelper.error(error.response.data.message);
     }
-    destroy();
-
     if (confirmCallback) {
       confirmCallback();
     }
+    destroy();
   };
 
   const setPartialOAuth2Config = (state: Partial<IdentityProviderOAuth2Config>) => {

web/src/components/CreateStorageServiceDialog.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Input, Typography } from "@mui/joy";
-import { useStorageStore } from "../store/module";
+import * as api from "../helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
-import { showCommonDialog } from "./Dialog/CommonDialog";
 
 interface Props extends DialogProps {
   storage?: Storage;
+  confirmCallback?: () => void;
 }
 
 const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
-  const { destroy, storage } = props;
+  const { destroy, storage, confirmCallback } = props;
   const { t } = useTranslation();
-  const storageStore = useStorageStore();
   const [storageCreate, setStorageCreate] = useState<StorageCreate>({
     name: "",
     endPoint: "",
@@ -53,9 +52,9 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
   const handleConfirmBtnClick = async () => {
     try {
       if (isCreating) {
-        await storageStore.createStorage(storageCreate);
+        await api.createStorage(storageCreate);
       } else {
-        await storageStore.patchStorage({
+        await api.patchStorage({
           id: storage.id,
           ...storageCreate,
         });
@@ -64,29 +63,10 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
       console.error(error);
       toastHelper.error(error.response.data.message);
     }
-    destroy();
-  };
-
-  const handleDeleteBtnClick = async () => {
-    if (isCreating) {
-      return;
+    if (confirmCallback) {
+      confirmCallback();
     }
-
-    showCommonDialog({
-      title: t("setting.storage-section.delete-storage"),
-      content: t("setting.storage-section.warning-text"),
-      style: "warning",
-      dialogName: "delete-storage-dialog",
-      onConfirm: async () => {
-        try {
-          await storageStore.deleteStorageById(storage.id);
-        } catch (error: any) {
-          console.error(error);
-          toastHelper.error(error.response.data.message);
-        }
-        destroy();
-      },
-    });
+    destroy();
   };
 
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -195,11 +175,6 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
           <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
             Cancel
           </Button>
-          {!isCreating && (
-            <Button color="danger" onClick={handleDeleteBtnClick}>
-              Delete
-            </Button>
-          )}
           <Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
             {isCreating ? "Create" : "Update"}
           </Button>
@@ -209,14 +184,14 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
   );
 };
 
-function showCreateStorageServiceDialog(storage?: Storage) {
+function showCreateStorageServiceDialog(storage?: Storage, confirmCallback?: () => void) {
   generateDialog(
     {
       className: "create-storage-service-dialog",
       dialogName: "create-storage-service-dialog",
     },
     CreateStorageServiceDialog,
-    { storage }
+    { storage, confirmCallback }
   );
 }
 

web/src/components/Settings/StorageSection.tsx

-import { Radio } from "@mui/joy";
-import React, { useEffect, useState } from "react";
+import { Divider, Select, Option } from "@mui/joy";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useGlobalStore, useStorageStore } from "../../store/module";
+import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
+import Dropdown from "../common/Dropdown";
+import { showCommonDialog } from "../Dialog/CommonDialog";
+import toastHelper from "../Toast";
 
 const StorageSection = () => {
   const { t } = useTranslation();
-  const storageStore = useStorageStore();
-  const storages = storageStore.state.storages;
   const globalStore = useGlobalStore();
   const systemStatus = globalStore.state.systemStatus;
   const [storageServiceId, setStorageServiceId] = useState(systemStatus.storageServiceId);
+  const [storageList, setStorageList] = useState<Storage[]>([]);
 
   useEffect(() => {
-    storageStore.fetchStorages();
-    globalStore.fetchSystemStatus();
+    fetchStorageList();
   }, []);
 
   useEffect(() => {
     setStorageServiceId(systemStatus.storageServiceId);
   }, [systemStatus]);
 
-  const handleActiveStorageServiceChanged = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value);
-    setStorageServiceId(value);
+  const fetchStorageList = async () => {
+    const {
+      data: { data: storageList },
+    } = await api.getStorageList();
+    setStorageList(storageList);
+  };
+
+  const handleActiveStorageServiceChanged = async (storageId: StorageId) => {
     await api.upsertSystemSetting({
       name: "storageServiceId",
-      value: JSON.stringify(value),
+      value: JSON.stringify(storageId),
     });
+    setStorageServiceId(storageId);
   };
 
-  const handleStorageServiceUpdate = async (event: React.MouseEvent, storage: Storage) => {
-    event.preventDefault();
-    showCreateStorageServiceDialog(storage);
+  const handleDeleteStorage = (storage: Storage) => {
+    showCommonDialog({
+      title: t("setting.storage-section.delete-storage"),
+      content: t("setting.storage-section.warning-text"),
+      style: "warning",
+      dialogName: "delete-storage-dialog",
+      onConfirm: async () => {
+        try {
+          await api.deleteStorage(storage.id);
+        } catch (error: any) {
+          console.error(error);
+          toastHelper.error(error.response.data.message);
+        }
+        await fetchStorageList();
+      },
+    });
   };
 
   return (
     <div className="section-container">
+      <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
+        <span className="font-mono text-sm text-gray-400 mr-2">Current storage</span>
+      </div>
+      <Select
+        className="w-full mb-4"
+        value={storageServiceId}
+        onChange={(_, storageId) => {
+          handleActiveStorageServiceChanged(storageId || 0);
+        }}
+      >
+        {storageList.map((storage) => (
+          <Option key={storage.id} value={storage.id}>
+            {storage.name}
+          </Option>
+        ))}
+        <Option value={0}>Database</Option>
+      </Select>
+      <Divider />
       <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
         <span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.storage-services-list")}</span>
-        <button className="btn-normal px-2 py-0 leading-7" onClick={() => showCreateStorageServiceDialog()}>
+        <button className="btn-normal px-2 py-0 leading-7" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
           {t("common.create")}
         </button>
       </div>
-      {storages.map((storage) => (
-        <label className="w-full my-2 flex flex-row justify-between items-center" key={storage.id}>
-          <span className="mr-2 text-sm underline cursor-pointer" onClick={(event) => handleStorageServiceUpdate(event, storage)}>
-            {storage.name}
-          </span>
-          <Radio value={storage.id} checked={storageServiceId === storage.id} onChange={handleActiveStorageServiceChanged} />
-        </label>
-      ))}
-      <label className="w-full my-2 flex flex-row justify-between items-center">
-        <span className="mr-2 text-sm">{t("common.database")}</span>
-        <Radio value={0} checked={storageServiceId === 0} onChange={handleActiveStorageServiceChanged} />
-      </label>
+      <div className="mt-2 w-full flex flex-col">
+        {storageList.map((storage) => (
+          <div key={storage.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center">
+              <p className="ml-2">{storage.name}</p>
+            </div>
+            <div className="flex flex-row items-center">
+              <Dropdown
+                actionsClassName="!w-28"
+                actions={
+                  <>
+                    <button
+                      className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                      onClick={() => showCreateStorageServiceDialog(storage, fetchStorageList)}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
+                      onClick={() => handleDeleteStorage(storage)}
+                    >
+                      {t("common.delete")}
+                    </button>
+                  </>
+                }
+              />
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

web/src/store/index.ts

@@ -9,7 +9,6 @@ import locationReducer from "./reducer/location";
 import resourceReducer from "./reducer/resource";
 import dialogReducer from "./reducer/dialog";
 import tagReducer from "./reducer/tag";
-import storageReducer from "./reducer/storage";
 
 const store = configureStore({
   reducer: {
@@ -22,7 +21,6 @@ const store = configureStore({
     location: locationReducer,
     resource: resourceReducer,
     dialog: dialogReducer,
-    storage: storageReducer,
   },
 });
 

web/src/store/module/index.ts

@@ -7,4 +7,3 @@ export * from "./resource";
 export * from "./shortcut";
 export * from "./user";
 export * from "./dialog";
-export * from "./storage";

web/src/store/module/storage.ts

-import store, { useAppSelector } from "..";
-import * as api from "../../helpers/api";
-import { setStorages, createStorage, patchStorage, deleteStorage } from "../reducer/storage";
-
-export const useStorageStore = () => {
-  const state = useAppSelector((state) => state.storage);
-  return {
-    state,
-    getState: () => {
-      return store.getState().storage;
-    },
-    fetchStorages: async () => {
-      const { data } = (await api.getStorageList()).data;
-      store.dispatch(setStorages(data));
-    },
-    createStorage: async (storageCreate: StorageCreate) => {
-      const { data: storage } = (await api.createStorage(storageCreate)).data;
-      store.dispatch(createStorage(storage));
-      return storage;
-    },
-    patchStorage: async (storagePatch: StoragePatch) => {
-      const { data: storage } = (await api.patchStorage(storagePatch)).data;
-      store.dispatch(patchStorage(storage));
-      return storage;
-    },
-    deleteStorageById: async (storageId: StorageId) => {
-      await api.deleteStorage(storageId);
-      store.dispatch(deleteStorage(storageId));
-    },
-  };
-};

web/src/store/reducer/storage.ts

-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-interface State {
-  storages: Storage[];
-}
-
-const storageSlice = createSlice({
-  name: "storage",
-  initialState: {
-    storages: [],
-  } as State,
-  reducers: {
-    setStorages: (state, action: PayloadAction<Storage[]>) => {
-      return {
-        ...state,
-        storages: action.payload,
-      };
-    },
-    createStorage: (state, action: PayloadAction<Storage>) => {
-      return {
-        ...state,
-        storages: [action.payload].concat(state.storages),
-      };
-    },
-    patchStorage: (state, action: PayloadAction<Partial<Storage>>) => {
-      return {
-        ...state,
-        storages: state.storages.map((storage) => {
-          if (storage.id === action.payload.id) {
-            return {
-              ...storage,
-              ...action.payload,
-            };
-          } else {
-            return storage;
-          }
-        }),
-      };
-    },
-    deleteStorage: (state, action: PayloadAction<StorageId>) => {
-      return {
-        ...state,
-        storages: state.storages.filter((storage) => {
-          return storage.id !== action.payload;
-        }),
-      };
-    },
-  },
-});
-
-export const { setStorages, createStorage, patchStorage, deleteStorage } = storageSlice.actions;
-
-export default storageSlice.reducer;