feat:add isOwner

packages/app/src/components/workspace-setting/general/General.tsx

@@ -21,9 +21,8 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
   const { updateWorkspace } = useWorkspaceHelper();
-  const isOwner = true;
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
   };
@@ -72,16 +71,19 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           placeholder="Workspace Name"
           maxLength={14}
           minLength={1}
+          disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
         ></Input>
-        <TextButton
-          onClick={() => {
-            handleUpdateWorkspaceName();
-          }}
-          style={{ marginLeft: '0px' }}
-        >
-          ✔️
-        </TextButton>
+        {isOwner ? (
+          <TextButton
+            onClick={() => {
+              handleUpdateWorkspaceName();
+            }}
+            style={{ marginLeft: '0px' }}
+          >
+            ✔️
+          </TextButton>
+        ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
       <StyledSettingInputContainer>

packages/app/src/pages/new-workspace/index.tsx

@@ -1,47 +0,0 @@
-import { WorkspaceModal } from '@/components/workspace-modal';
-import { getWorkspaces } from '@/hooks/mock-data/mock';
-import { useEffect, useState } from 'react';
-import { styled } from '@/styles';
-import Button from '@/ui/button/Button';
-
-const Page = () => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const data = getWorkspaces();
-    if (!data.length) {
-      setOpen(true);
-    }
-  }, []);
-  return (
-    <Workspace>
-      <h1>workspace</h1>
-      <div>
-        <Button
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          View Workspace List
-        </Button>
-      </div>
-      <WorkspaceModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-      ></WorkspaceModal>
-    </Workspace>
-  );
-};
-export default Page;
-
-const Workspace = styled.div(({ theme }) => {
-  return {
-    height: '100vh',
-    background: theme.colors.pageBackground,
-    color: '#FFFFFF',
-    fontSize: '18px',
-    fontWeight: 500,
-  };
-});

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -60,7 +60,7 @@ const tabMap: {
 ];
 
 const WorkspaceSetting = () => {
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
 
   const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
   const handleTabChange = (tab: TabNames) => {
@@ -70,7 +70,20 @@ const WorkspaceSetting = () => {
   const activeTabPanelRender = tabMap.find(
     tab => tab.name === activeTab
   )?.panelRender;
-
+  let tableArr: {
+    name: TabNames;
+    icon: ReactNode;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = tabMap;
+  if (!isOwner) {
+    tableArr = [
+      {
+        name: 'general',
+        icon: <EditIcon />,
+        panelRender: workspace => <GeneralPage workspace={workspace} />,
+      },
+    ];
+  }
   return (
     <StyledSettingContainer>
       <StyledSettingSidebar>
@@ -78,7 +91,7 @@ const WorkspaceSetting = () => {
           Workspace Settings
         </StyledSettingSidebarHeader>
         <StyledSettingTabContainer>
-          {tabMap.map(({ icon, name }) => {
+          {tableArr.map(({ icon, name }) => {
             return (
               <WorkspaceSettingTagItem
                 key={name}

packages/app/src/providers/app-state-provider/Provider.tsx

@@ -37,6 +37,7 @@ export const AppStateProvider = ({
         currentPage: null,
         editor: null,
         synced: true,
+        isOwner: false,
       });
     };
 
@@ -91,7 +92,7 @@ export const AppStateProvider = ({
 
   const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
   loadWorkspace.current = async (workspaceId: string) => {
-    const { dataCenter, workspaceList, currentWorkspace } = appState;
+    const { dataCenter, workspaceList, currentWorkspace, user } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
       return null;
     }
@@ -99,6 +100,13 @@ export const AppStateProvider = ({
       return currentWorkspace;
     }
     const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+    let isOwner;
+    if (workspace.provider === 'local') {
+      // isOwner is useful only in the cloud
+      isOwner = true;
+    } else {
+      isOwner = workspace?.owner && user?.id === workspace?.owner?.id;
+    }
     const pageList =
       (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
     setAppState({
@@ -107,6 +115,7 @@ export const AppStateProvider = ({
       pageList: pageList,
       currentPage: null,
       editor: null,
+      isOwner,
     });
 
     return workspace;

packages/app/src/providers/app-state-provider/interface.ts

@@ -23,6 +23,7 @@ export type AppStateValue = {
   currentPage: StorePage | null;
   editor?: EditorContainer | null;
   synced: boolean;
+  isOwner?: boolean;
 };
 
 export type AppStateFunction = {