Fix: invite (#1064)

apps/web/src/components/workspace-modal/WorkspaceCard.tsx

@@ -19,22 +19,22 @@ const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
 
   if (workspaceData.provider === 'local') {
     return (
-      <p>
+      <p title={t('Local Workspace')}>
         <LocalWorkspaceIcon />
-        {t('Local Workspace')}
+        <span>{t('Local Workspace')}</span>
       </p>
     );
   }
 
   return isOwner ? (
-    <p>
+    <p title={t('Cloud Workspace')}>
       <CloudWorkspaceIcon />
-      {t('Cloud Workspace')}
+      <span>{t('Cloud Workspace')}</span>
     </p>
   ) : (
-    <p>
+    <p title={t('Joined Workspace')}>
       <JoinedWorkspaceIcon />
-      {t('Joined Workspace')}
+      <span>{t('Joined Workspace')}</span>
     </p>
   );
 };
@@ -66,15 +66,15 @@ export const WorkspaceCard = ({
         </StyleWorkspaceTitle>
         <WorkspaceType workspaceData={workspaceData} />
         {workspaceData.provider === 'local' && (
-          <p>
+          <p title={t('Available Offline')}>
             <LocalDataIcon />
-            {t('Available Offline')}
+            <span>{t('Available Offline')}</span>
           </p>
         )}
         {workspaceData.published && (
-          <p>
+          <p title={t('Published to Web')}>
             <PublishIcon />
-            {t('Published to Web')}
+            <span>{t('Published to Web')}</span>
           </p>
         )}
       </StyleWorkspaceInfo>

apps/web/src/components/workspace-modal/styles.ts

@@ -18,6 +18,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
 export const StyleWorkspaceInfo = styled.div(({ theme }) => {
   return {
     marginLeft: '15px',
+    width: '202px',
     p: {
       color: theme.colors.popoverColor,
       height: '20px',
@@ -27,6 +28,11 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
     svg: {
       marginRight: '10px',
       fontSize: '16px',
+      flexShrink: 0,
+    },
+    span: {
+      flexGrow: 1,
+      ...textEllipsis(1),
     },
   };
 });

apps/web/src/components/workspace-setting/general/General.tsx

@@ -5,7 +5,7 @@ import {
   StyledEditButton,
 } from './style';
 import { StyledSettingKey, StyledRow } from '../style';
-import { FlexWrapper } from '@affine/component';
+import { FlexWrapper, MuiAvatar } from '@affine/component';
 
 import { useCallback, useState } from 'react';
 import { Button } from '@affine/component';
@@ -24,6 +24,7 @@ import { CameraIcon } from './icons';
 import { Upload } from '@/components/file-upload';
 import { MuiFade } from '@affine/component';
 import { useGlobalState } from '@/store/app';
+import { EmailIcon } from '@blocksuite/icons';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -143,6 +144,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         </div>
       </StyledRow>
 
+      {!isOwner && (
+        <StyledRow>
+          <StyledSettingKey>{t('Workspace Owner')}</StyledSettingKey>
+          <FlexWrapper alignItems="center">
+            <MuiAvatar
+              sx={{ width: 72, height: 72, marginRight: '12px' }}
+              alt="owner avatar"
+              src={currentWorkspace?.owner?.avatar}
+            >
+              <EmailIcon />
+            </MuiAvatar>
+            <span>{currentWorkspace?.owner?.name}</span>
+          </FlexWrapper>
+        </StyledRow>
+      )}
+      {!isOwner && (
+        <StyledRow>
+          <StyledSettingKey>{t('Members')}</StyledSettingKey>
+          <FlexWrapper alignItems="center">
+            <span>{currentWorkspace?.memberCount}</span>
+          </FlexWrapper>
+        </StyledRow>
+      )}
+
       <StyledRow>
         <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
         {isOwner ? (

apps/web/src/components/workspace-setting/style.ts

@@ -47,7 +47,6 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
 export const StyledSettingKey = styled.div(({ theme }) => {
   return {
     width: '140px',
-    textAlign: 'right',
     fontSize: theme.font.base,
     fontWeight: 500,
     marginRight: '56px',

apps/web/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -1,12 +1,18 @@
 import { MuiAvatar, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
-export const SelectorWrapper = styled('div')({
+export const SelectorWrapper = styled('div')(({ theme }) => {
-  height: '100%',
+  return {
-  display: 'flex',
+    height: '42px',
-  alignItems: 'center',
+    display: 'flex',
-  ':hover': {
+    alignItems: 'center',
-    cursor: 'pointer',
+    padding: '0 12px',
-  },
+    borderRadius: '5px',
+    color: theme.colors.textColor,
+    ':hover': {
+      cursor: 'pointer',
+      background: theme.colors.hoverBackground,
+    },
+  };
 });
 
 export const Avatar = styled(MuiAvatar)({
@@ -19,7 +25,6 @@ export const WorkspaceName = styled('span')(({ theme }) => {
     marginLeft: '12px',
     fontSize: theme.font.h6,
     fontWeight: 500,
-    color: theme.colors.iconColor,
     marginTop: '4px',
     flexGrow: 1,
     ...textEllipsis(1),

apps/web/src/components/workspace-slider-bar/index.tsx

@@ -4,7 +4,6 @@ import {
   StyledArrowButton,
   StyledLink,
   StyledListItem,
-  StyledListItemForWorkspace,
   StyledNewPageButton,
   StyledSliderBar,
   StyledSliderBarWrapper,
@@ -112,9 +111,8 @@ export const WorkSpaceSliderBar = () => {
         </Tooltip>
 
         <StyledSliderBarWrapper data-testid="sliderBar">
-          <StyledListItemForWorkspace>
+          <WorkspaceSelector />
-            <WorkspaceSelector />
+
-          </StyledListItemForWorkspace>
           <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}

apps/web/src/components/workspace-slider-bar/style.ts

@@ -82,11 +82,6 @@ export const StyledListItem = styled.div<{
   };
 });
 
-export const StyledListItemForWorkspace = styled.div({
-  height: '42px',
-  padding: '0 12px',
-});
-
 export const StyledLink = styled(Link)(() => {
   return {
     flexGrow: 1,

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -31,10 +31,12 @@ const useTabMap = () => {
   const { t } = useTranslation();
   const isOwner = useGlobalState(store => store.isOwner);
   const tabMap: {
+    id: string;
     name: string;
     panelRender: (workspace: WorkspaceUnit) => ReactNode;
   }[] = [
     {
+      id: 'General',
       name: t('General'),
       panelRender: workspace => <GeneralPage workspace={workspace} />,
     },
@@ -44,40 +46,37 @@ const useTabMap = () => {
     //   panelRender: workspace => <SyncPage workspace={workspace} />,
     // },
     {
+      id: 'Collaboration',
       name: t('Collaboration'),
       panelRender: workspace => <MembersPage workspace={workspace} />,
     },
     {
+      id: 'Publish',
       name: t('Publish'),
       panelRender: workspace => <PublishPage workspace={workspace} />,
     },
     // TODO: next version will finish this feature
     {
+      id: 'Export',
       name: t('Export'),
       panelRender: workspace => <ExportPage workspace={workspace} />,
     },
   ];
-  const [activeTab, setActiveTab] = useState<string>(tabMap[0].name);
+  const [activeTab, setActiveTab] = useState<string>(tabMap[0].id);
-  const handleTabChange = (tab: string) => {
+  const handleTabChange = (tabId: string) => {
-    setActiveTab(tab);
+    setActiveTab(tabId);
   };
 
   const activeTabPanelRender = tabMap.find(
-    tab => tab.name === activeTab
+    tab => tab.id === activeTab
   )?.panelRender;
-  let tableArr: {
+
-    name: string;
+  return {
-    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+    activeTabPanelRender,
-  }[] = tabMap;
+    tabMap: isOwner ? tabMap : tabMap.slice(0, 1),
-  if (!isOwner) {
+    handleTabChange,
-    tableArr = [
+    activeTab,
-      {
+  };
-        name: 'General',
-        panelRender: workspace => <GeneralPage workspace={workspace} />,
-      },
-    ];
-  }
-  return { activeTabPanelRender, tableArr, handleTabChange, activeTab };
 };
 
 const StyledIndicator = styled.div(({ theme }) => {
@@ -101,8 +100,9 @@ const WorkspaceSetting = () => {
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
-  const { activeTabPanelRender, tableArr, handleTabChange, activeTab } =
+  const { activeTabPanelRender, tabMap, handleTabChange, activeTab } =
     useTabMap();
+
   const [indicatorState, setIndicatorState] = useState<
     Pick<CSSProperties, 'left' | 'width'>
   >({
@@ -133,14 +133,14 @@ const WorkspaceSetting = () => {
 
       <StyledSettingContainer>
         <StyledTabButtonWrapper>
-          {tableArr.map(({ name }) => {
+          {tabMap.map(({ id, name }) => {
             return (
               <WorkspaceSettingTagItem
-                key={name}
+                key={id}
-                isActive={activeTab === name}
+                isActive={activeTab === id}
-                data-setting-tab-button={name}
+                data-setting-tab-button={id}
                 onClick={() => {
-                  handleTabChange(name);
+                  handleTabChange(id);
                 }}
               >
                 {name}

apps/web/src/store/app/datacenter/index.tsx

@@ -55,9 +55,8 @@ export const createDataCenterActions: GlobalActionsCreator<
       // isOwner is useful only in the cloud
       isOwner = true;
     } else {
-      const userInfo = get().user;
+      const userInfo = get().user; // We must ensure workspace.owner exists, then ensure id same.
-      // We must ensure workspace.owner exists, then ensure id same.
+      isOwner = isOwner = userInfo?.id === workspace?.owner?.id;
-      isOwner = workspace?.owner && userInfo?.id === workspace.owner.id;
     }
 
     const pageList =

apps/web/src/store/app/user/index.ts

@@ -23,15 +23,25 @@ export const createUserActions: GlobalActionsCreator<UserActions> = (
 ) => {
   return {
     login: async () => {
-      const { dataCenter } = get();
+      const { dataCenter, currentDataCenterWorkspace: workspace } = get();
       try {
         await dataCenter.login();
         const user = (await dataCenter.getUserInfo()) as User;
+
         if (!user) {
           // Add ErrorBoundary
           throw new Error('User info not found');
         }
-        set({ user });
+
+        let isOwner;
+        if (workspace?.provider === 'local') {
+          // isOwner is useful only in the cloud
+          isOwner = true;
+        } else {
+          isOwner = user?.id === workspace?.owner?.id;
+        }
+
+        set({ user, isOwner });
         return user;
       } catch (error) {
         return null; // login failed

packages/i18n/src/resources/en.json

@@ -190,5 +190,7 @@
   "Edit": "Edit",
   "Sign out description": "Signing out will cause the unsynchronised content to be lost.",
   "Help and Feedback": "Help and Feedback",
-  "Please make sure you are online": "Please make sure you are online"
+  "Please make sure you are online": "Please make sure you are online",
+  "Workspace Owner": "Workspace Owner",
+  "Members": "Members"
 }