Fix: invite (#1064)

2026-02-13 21:05:19 +00:00 · 2023-02-16 20:22:38 +08:00
parent 657681e5e1
commit 27b1196111
11 changed files with 97 additions and 58 deletions
--- a/apps/web/src/components/workspace-modal/WorkspaceCard.tsx
+++ b/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>
--- a/apps/web/src/components/workspace-modal/styles.ts
+++ b/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),
    },
  };
 });
--- a/apps/web/src/components/workspace-setting/general/General.tsx
+++ b/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 ? (
--- a/apps/web/src/components/workspace-setting/style.ts
+++ b/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',
--- a/apps/web/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/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')({
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  ':hover': {
-    cursor: 'pointer',
-  },
+export const SelectorWrapper = styled('div')(({ theme }) => {
+  return {
+    height: '42px',
+    display: 'flex',
+    alignItems: 'center',
+    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),
--- a/apps/web/src/components/workspace-slider-bar/index.tsx
+++ b/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 />
-          </StyledListItemForWorkspace>
+          <WorkspaceSelector />
+
          <StyledListItem
            data-testid="sliderBar-quickSearchButton"
            style={{ cursor: 'pointer' }}
--- a/apps/web/src/components/workspace-slider-bar/style.ts
+++ b/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,
--- a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/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 handleTabChange = (tab: string) => {
-    setActiveTab(tab);
+  const [activeTab, setActiveTab] = useState<string>(tabMap[0].id);
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
  };

  const activeTabPanelRender = tabMap.find(
-    tab => tab.name === activeTab
+    tab => tab.id === activeTab
  )?.panelRender;
-  let tableArr: {
-    name: string;
-    panelRender: (workspace: WorkspaceUnit) => ReactNode;
-  }[] = tabMap;
-  if (!isOwner) {
-    tableArr = [
-      {
-        name: 'General',
-        panelRender: workspace => <GeneralPage workspace={workspace} />,
-      },
-    ];
-  }
-  return { activeTabPanelRender, tableArr, handleTabChange, activeTab };
+
+  return {
+    activeTabPanelRender,
+    tabMap: isOwner ? tabMap : tabMap.slice(0, 1),
+    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}
-                isActive={activeTab === name}
-                data-setting-tab-button={name}
+                key={id}
+                isActive={activeTab === id}
+                data-setting-tab-button={id}
                onClick={() => {
-                  handleTabChange(name);
+                  handleTabChange(id);
                }}
              >
                {name}
--- a/apps/web/src/store/app/datacenter/index.tsx
+++ b/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;
-      // We must ensure workspace.owner exists, then ensure id same.
-      isOwner = workspace?.owner && userInfo?.id === workspace.owner.id;
+      const userInfo = get().user; // We must ensure workspace.owner exists, then ensure id same.
+      isOwner = isOwner = userInfo?.id === workspace?.owner?.id;
    }

    const pageList =
--- a/apps/web/src/store/app/user/index.ts
+++ b/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