Apply FB

apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.tsx

@@ -6,7 +6,7 @@ import {
   UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import { useGrowiVersion } from '~/states/global';
+import { useGrowiVersion, useGrowiCloudUri } from '~/states/global';
 import { useShortcutsModalActions } from '~/states/ui/modal/shortcuts';
 
 import { SkeletonItem } from './SkeletonItem';
@@ -18,6 +18,7 @@ export const HelpDropdown: FC = memo(() => {
   const { t } = useTranslation();
   const growiVersion = useGrowiVersion();
   const { open: openShortcutsModal } = useShortcutsModalActions();
+  const growiCloudUri = useGrowiCloudUri();
 
   if (growiVersion == null) {
     return <SkeletonItem />;
@@ -28,6 +29,11 @@ export const HelpDropdown: FC = memo(() => {
   const isMac = (platform.indexOf('mac') > -1);
   const os = isMac ? 'mac' : 'win';
 
+  // Cloud users see Help, others see Docs
+  const isCloudUser = growiCloudUri != null;
+  const helpUrl = isCloudUser ? 'https://growi.cloud/help/' : 'https://docs.growi.org';
+  const helpLabel = isCloudUser ? t('Help') : 'GROWI Docs';
+
   return (
     <UncontrolledDropdown direction="end" className={styles['help-dropdown']}>
       <DropdownToggle
@@ -47,31 +53,18 @@ export const HelpDropdown: FC = memo(() => {
         </DropdownItem>
         <DropdownItem
           tag="a"
-          href="https://docs.growi.org"
+          href={helpUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="my-1"
-          data-testid="growi-docs-link"
+          data-testid="help-link"
         >
           <span className="d-flex align-items-center">
-            GROWI Docs
-            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</span>
+            {helpLabel}
+            <span className="growi-custom-icons ms-1 small">external_link</span>
           </span>
         </DropdownItem>
 
-        <DropdownItem
-          tag="a"
-          href="https://growi.cloud/help/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="my-1"
-          data-testid="growi-cloud-help-link"
-        >
-          <span className="d-flex align-items-center">
-            {t('help_dropdown.growi_cloud_help')}
-            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</span>
-          </span>
-        </DropdownItem>
         <DropdownItem
           className="my-1"
           onClick={() => openShortcutsModal()}

apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx

@@ -5,8 +5,8 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';
 
 import { useIsAdmin, useIsGuestUser } from '~/states/context';
-import { useGrowiCloudUri } from '~/states/global';
 
+import { HelpDropdown } from './HelpDropdown';
 import { SkeletonItem } from './SkeletonItem';
 
 import styles from './SecondaryItems.module.scss';
@@ -17,11 +17,6 @@ const PersonalDropdown = dynamic(() => import('./PersonalDropdown').then(mod =>
   loading: () => <SkeletonItem />,
 });
 
-const HelpDropdown = dynamic(() => import('./HelpDropdown').then(mod => mod.HelpDropdown), {
-  ssr: false,
-  loading: () => <SkeletonItem />,
-});
-
 
 type SecondaryItemProps = {
   label: string,
@@ -48,7 +43,6 @@ const SecondaryItem: FC<SecondaryItemProps> = (props: SecondaryItemProps) => {
 export const SecondaryItems: FC = memo(() => {
 
   const isAdmin = useIsAdmin();
-  const growiCloudUri = useGrowiCloudUri();
   const isGuestUser = useIsGuestUser();
 
   return (