|
@@ -2,6 +2,7 @@ import type { JSX } from 'react';
|
|
|
import Link from 'next/link';
|
|
import Link from 'next/link';
|
|
|
import { pagePathUtils } from '@growi/core/dist/utils';
|
|
import { pagePathUtils } from '@growi/core/dist/utils';
|
|
|
import { UserPicture } from '@growi/ui/dist/components';
|
|
import { UserPicture } from '@growi/ui/dist/components';
|
|
|
|
|
+import { useAtomValue } from 'jotai';
|
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useTranslation } from 'next-i18next';
|
|
|
import {
|
|
import {
|
|
|
DropdownItem,
|
|
DropdownItem,
|
|
@@ -13,6 +14,7 @@ import {
|
|
|
import { apiv3Post } from '~/client/util/apiv3-client';
|
|
import { apiv3Post } from '~/client/util/apiv3-client';
|
|
|
import { toastError } from '~/client/util/toastr';
|
|
import { toastError } from '~/client/util/toastr';
|
|
|
import { useCurrentUser } from '~/states/global';
|
|
import { useCurrentUser } from '~/states/global';
|
|
|
|
|
+import { disableUserPagesAtom } from '~/states/server-configurations';
|
|
|
|
|
|
|
|
import { SkeletonItem } from './SkeletonItem';
|
|
import { SkeletonItem } from './SkeletonItem';
|
|
|
|
|
|
|
@@ -22,6 +24,8 @@ export const PersonalDropdown = (): JSX.Element => {
|
|
|
const { t } = useTranslation('commons');
|
|
const { t } = useTranslation('commons');
|
|
|
const currentUser = useCurrentUser();
|
|
const currentUser = useCurrentUser();
|
|
|
|
|
|
|
|
|
|
+ const disableUserPages = useAtomValue(disableUserPagesAtom);
|
|
|
|
|
+
|
|
|
if (currentUser == null) {
|
|
if (currentUser == null) {
|
|
|
return <SkeletonItem />;
|
|
return <SkeletonItem />;
|
|
|
}
|
|
}
|
|
@@ -36,41 +40,41 @@ export const PersonalDropdown = (): JSX.Element => {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
- <>
|
|
|
|
|
- <UncontrolledDropdown direction="end">
|
|
|
|
|
- <DropdownToggle
|
|
|
|
|
- className={`btn btn-primary ${styles['btn-personal-dropdown']} opacity-100`}
|
|
|
|
|
- data-testid="personal-dropdown-button"
|
|
|
|
|
- >
|
|
|
|
|
- <UserPicture user={currentUser} noLink noTooltip />
|
|
|
|
|
- </DropdownToggle>
|
|
|
|
|
|
|
+ <UncontrolledDropdown direction="end">
|
|
|
|
|
+ <DropdownToggle
|
|
|
|
|
+ className={`btn btn-primary ${styles['btn-personal-dropdown']} opacity-100`}
|
|
|
|
|
+ data-testid="personal-dropdown-button"
|
|
|
|
|
+ >
|
|
|
|
|
+ <UserPicture user={currentUser} noLink noTooltip />
|
|
|
|
|
+ </DropdownToggle>
|
|
|
|
|
|
|
|
- <DropdownMenu
|
|
|
|
|
- container="body"
|
|
|
|
|
- data-testid="personal-dropdown-menu"
|
|
|
|
|
- className={styles['personal-dropdown-menu']}
|
|
|
|
|
- >
|
|
|
|
|
- <DropdownItem className={styles['personal-dropdown-header']} header>
|
|
|
|
|
- <div className="mt-2 mb-3">
|
|
|
|
|
- <UserPicture user={currentUser} size="lg" noLink noTooltip />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="ms-1 fs-6">{currentUser.name}</div>
|
|
|
|
|
- <div className="d-flex align-items-center my-2">
|
|
|
|
|
- <small className="material-symbols-outlined me-1 pb-0 fs-6">
|
|
|
|
|
- person
|
|
|
|
|
- </small>
|
|
|
|
|
- <span>{currentUser.username}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="d-flex align-items-center">
|
|
|
|
|
- <span className="material-symbols-outlined me-1 pb-0 fs-6">
|
|
|
|
|
- mail
|
|
|
|
|
- </span>
|
|
|
|
|
- <span className="item-text-email">{currentUser.email}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </DropdownItem>
|
|
|
|
|
|
|
+ <DropdownMenu
|
|
|
|
|
+ container="body"
|
|
|
|
|
+ data-testid="personal-dropdown-menu"
|
|
|
|
|
+ className={styles['personal-dropdown-menu']}
|
|
|
|
|
+ >
|
|
|
|
|
+ <DropdownItem className={styles['personal-dropdown-header']} header>
|
|
|
|
|
+ <div className="mt-2 mb-3">
|
|
|
|
|
+ <UserPicture user={currentUser} size="lg" noLink noTooltip />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="ms-1 fs-6">{currentUser.name}</div>
|
|
|
|
|
+ <div className="d-flex align-items-center my-2">
|
|
|
|
|
+ <small className="material-symbols-outlined me-1 pb-0 fs-6">
|
|
|
|
|
+ person
|
|
|
|
|
+ </small>
|
|
|
|
|
+ <span>{currentUser.username}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="d-flex align-items-center">
|
|
|
|
|
+ <span className="material-symbols-outlined me-1 pb-0 fs-6">
|
|
|
|
|
+ mail
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span className="item-text-email">{currentUser.email}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </DropdownItem>
|
|
|
|
|
|
|
|
- <DropdownItem className="my-3" divider />
|
|
|
|
|
|
|
+ <DropdownItem className="my-3" divider />
|
|
|
|
|
|
|
|
|
|
+ {!disableUserPages && (
|
|
|
<Link
|
|
<Link
|
|
|
href={pagePathUtils.userHomepagePath(currentUser)}
|
|
href={pagePathUtils.userHomepagePath(currentUser)}
|
|
|
data-testid="grw-personal-dropdown-menu-user-home"
|
|
data-testid="grw-personal-dropdown-menu-user-home"
|
|
@@ -86,39 +90,34 @@ export const PersonalDropdown = (): JSX.Element => {
|
|
|
</span>
|
|
</span>
|
|
|
</DropdownItem>
|
|
</DropdownItem>
|
|
|
</Link>
|
|
</Link>
|
|
|
|
|
+ )}
|
|
|
|
|
|
|
|
- <Link
|
|
|
|
|
- href="/me"
|
|
|
|
|
- data-testid="grw-personal-dropdown-menu-user-settings"
|
|
|
|
|
- >
|
|
|
|
|
- <DropdownItem
|
|
|
|
|
- className={`my-1 ${styles['personal-dropdown-item']}`}
|
|
|
|
|
- >
|
|
|
|
|
- <span className="d-flex align-items-center">
|
|
|
|
|
- <span className="item-icon material-symbols-outlined me-2 pb-0 fs-6">
|
|
|
|
|
- discover_tune
|
|
|
|
|
- </span>
|
|
|
|
|
- <span className="item-text">
|
|
|
|
|
- {t('personal_dropdown.settings')}
|
|
|
|
|
- </span>
|
|
|
|
|
- </span>
|
|
|
|
|
- </DropdownItem>
|
|
|
|
|
- </Link>
|
|
|
|
|
-
|
|
|
|
|
- <DropdownItem
|
|
|
|
|
- data-testid="logout-button"
|
|
|
|
|
- onClick={logoutHandler}
|
|
|
|
|
- className={`my-1 ${styles['personal-dropdown-item']}`}
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <Link href="/me" data-testid="grw-personal-dropdown-menu-user-settings">
|
|
|
|
|
+ <DropdownItem className={`my-1 ${styles['personal-dropdown-item']}`}>
|
|
|
<span className="d-flex align-items-center">
|
|
<span className="d-flex align-items-center">
|
|
|
<span className="item-icon material-symbols-outlined me-2 pb-0 fs-6">
|
|
<span className="item-icon material-symbols-outlined me-2 pb-0 fs-6">
|
|
|
- logout
|
|
|
|
|
|
|
+ discover_tune
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span className="item-text">
|
|
|
|
|
+ {t('personal_dropdown.settings')}
|
|
|
</span>
|
|
</span>
|
|
|
- <span className="item-text">{t('Sign out')}</span>
|
|
|
|
|
</span>
|
|
</span>
|
|
|
</DropdownItem>
|
|
</DropdownItem>
|
|
|
- </DropdownMenu>
|
|
|
|
|
- </UncontrolledDropdown>
|
|
|
|
|
- </>
|
|
|
|
|
|
|
+ </Link>
|
|
|
|
|
+
|
|
|
|
|
+ <DropdownItem
|
|
|
|
|
+ data-testid="logout-button"
|
|
|
|
|
+ onClick={logoutHandler}
|
|
|
|
|
+ className={`my-1 ${styles['personal-dropdown-item']}`}
|
|
|
|
|
+ >
|
|
|
|
|
+ <span className="d-flex align-items-center">
|
|
|
|
|
+ <span className="item-icon material-symbols-outlined me-2 pb-0 fs-6">
|
|
|
|
|
+ logout
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span className="item-text">{t('Sign out')}</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </DropdownItem>
|
|
|
|
|
+ </DropdownMenu>
|
|
|
|
|
+ </UncontrolledDropdown>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|