feat: move member list to workspace setting

web/.eslintrc.json

@@ -22,7 +22,8 @@
       }
     ],
     "@typescript-eslint/no-explicit-any": ["off"],
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-no-target-blank": "off"
   },
   "settings": {
     "react": {

web/src/components/ShortcutListView.tsx

@@ -82,7 +82,7 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
                   </button>
                 </Tooltip>
                 <Tooltip title="Go to link" variant="solid" placement="top">
-                  <a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link} rel="noreferrer">
+                  <a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link}>
                     <Icon.ExternalLink className="w-5 h-auto" />
                   </a>
                 </Tooltip>

web/src/components/WorkspaceSetting.tsx

@@ -8,8 +8,10 @@ import { useAppSelector } from "../store";
 import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
 import { showCommonDialog } from "./Alert";
 import toastHelper from "./Toast";
-import CreateWorkspaceDialog from "./CreateWorkspaceDialog";
 import Icon from "./Icon";
+import CreateWorkspaceDialog from "./CreateWorkspaceDialog";
+import UpsertWorkspaceUserDialog from "./UpsertWorkspaceUserDialog";
+import MemberListView from "./MemberListView";
 
 interface Props {
   workspaceId: WorkspaceId;
@@ -17,6 +19,7 @@ interface Props {
 
 interface State {
   showEditWorkspaceDialog: boolean;
+  showUpsertWorkspaceUserDialog: boolean;
 }
 
 const WorkspaceSetting: React.FC<Props> = (props: Props) => {
@@ -25,6 +28,7 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
   const user = useAppSelector((state) => state.user.user) as User;
   const [state, setState] = useState<State>({
     showEditWorkspaceDialog: false,
+    showUpsertWorkspaceUserDialog: false,
   });
   const { workspaceList } = useAppSelector((state) => state.workspace);
   const loadingState = useLoading();
@@ -48,6 +52,13 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
     });
   };
 
+  const handleUpsertWorkspaceMemberButtonClick = () => {
+    setState({
+      ...state,
+      showUpsertWorkspaceUserDialog: true,
+    });
+  };
+
   const handleEditWorkspaceDialogConfirm = async () => {
     setState({
       ...state,
@@ -87,7 +98,8 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="w-full flex flex-col justify-start items-start">
-        <p className="text-3xl mt-4 mb-4">
+        <span className="mb-4 text-gray-500">Basic</span>
+        <p className="text-3xl mb-4">
           {workspace.title}
           <span className="text-lg ml-1 font-mono text-gray-400">({workspace.name})</span>
         </p>
@@ -116,6 +128,19 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
         </div>
       </div>
 
+      <div className="w-full flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-between items-center">
+          <span className="mt-8 mb-4 text-gray-500">Member list</span>
+          {workspaceUser.role === "ADMIN" && (
+            <Button variant="soft" onClick={handleUpsertWorkspaceMemberButtonClick}>
+              <Icon.Plus className="w-4 h-auto mr-1" />
+              New member
+            </Button>
+          )}
+        </div>
+        <MemberListView workspaceId={workspaceId} />
+      </div>
+
       {state.showEditWorkspaceDialog && (
         <CreateWorkspaceDialog
           workspaceId={workspace.id}
@@ -128,6 +153,27 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
           onConfirm={() => handleEditWorkspaceDialogConfirm()}
         />
       )}
+
+      {state.showUpsertWorkspaceUserDialog && (
+        <UpsertWorkspaceUserDialog
+          workspaceId={workspace.id}
+          onClose={() => {
+            setState({
+              ...state,
+              showUpsertWorkspaceUserDialog: false,
+            });
+          }}
+          onConfirm={async () => {
+            setState({
+              ...state,
+              showUpsertWorkspaceUserDialog: false,
+            });
+            if (location.hash !== "#members") {
+              navigate("#members");
+            }
+          }}
+        />
+      )}
     </>
   );
 };

web/src/pages/WorkspaceDetail.tsx

@@ -2,36 +2,30 @@ import { useEffect, useState } from "react";
 import { NavLink, useLocation, useNavigate, useParams } from "react-router-dom";
 import { shortcutService, userService } from "../services";
 import { useAppSelector } from "../store";
-import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
+import { unknownWorkspace } from "../store/modules/workspace";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
 import ShortcutListView from "../components/ShortcutListView";
-import MemberListView from "../components/MemberListView";
 import WorkspaceSetting from "../components/WorkspaceSetting";
 import CreateShortcutDialog from "../components/CreateShortcutDialog";
-import UpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
 
 interface State {
   showCreateShortcutDialog: boolean;
-  showUpsertWorkspaceUserDialog: boolean;
 }
 
 const WorkspaceDetail: React.FC = () => {
   const navigate = useNavigate();
   const params = useParams();
   const location = useLocation();
-  const user = useAppSelector((state) => state.user.user) as User;
   const { workspaceList } = useAppSelector((state) => state.workspace);
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
-    showUpsertWorkspaceUserDialog: false,
   });
   const loadingState = useLoading();
   const workspace = workspaceList.find((workspace) => workspace.name === params.workspaceName) ?? unknownWorkspace;
-  const workspaceUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser;
 
   useEffect(() => {
     if (!userService.getState().user) {
@@ -50,7 +44,7 @@ const WorkspaceDetail: React.FC = () => {
   }, [params.workspaceName]);
 
   useEffect(() => {
-    if (location.hash !== "#shortcuts" && location.hash !== "#members" && location.hash !== "#setting") {
+    if (location.hash !== "#shortcuts" && location.hash !== "#setting") {
       navigate("#shortcuts");
     }
   }, [location.hash]);
@@ -62,13 +56,6 @@ const WorkspaceDetail: React.FC = () => {
     });
   };
 
-  const handleUpsertWorkspaceMemberButtonClick = () => {
-    setState({
-      ...state,
-      showUpsertWorkspaceUserDialog: true,
-    });
-  };
-
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
@@ -82,14 +69,6 @@ const WorkspaceDetail: React.FC = () => {
             >
               Shortcuts
             </NavLink>
-            <NavLink
-              to="#members"
-              className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
-                location.hash === "#members" && "!border-b-black text-black"
-              }`}
-            >
-              Members
-            </NavLink>
             <NavLink
               to="#setting"
               className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
@@ -114,14 +93,6 @@ const WorkspaceDetail: React.FC = () => {
                   >
                     Shortcut
                   </button>
-                  {workspaceUser.role === "ADMIN" && (
-                    <button
-                      className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                      onClick={handleUpsertWorkspaceMemberButtonClick}
-                    >
-                      Member
-                    </button>
-                  )}
                 </>
               }
               actionsClassName="!w-32"
@@ -150,7 +121,6 @@ const WorkspaceDetail: React.FC = () => {
               ) : (
                 <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
               ))}
-            {location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
             {location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
           </>
         )}
@@ -176,27 +146,6 @@ const WorkspaceDetail: React.FC = () => {
           }}
         />
       )}
-
-      {state.showUpsertWorkspaceUserDialog && (
-        <UpsertWorkspaceUserDialog
-          workspaceId={workspace.id}
-          onClose={() => {
-            setState({
-              ...state,
-              showUpsertWorkspaceUserDialog: false,
-            });
-          }}
-          onConfirm={async () => {
-            setState({
-              ...state,
-              showUpsertWorkspaceUserDialog: false,
-            });
-            if (location.hash !== "#members") {
-              navigate("#members");
-            }
-          }}
-        />
-      )}
     </>
   );
 };