imprv: New help button #10553

satof3 · 2025-11-28T10:34:42Z

Task

https://redmine.weseek.co.jp/issues/173835

Summary

画面右下に出ていたバージョン表示とショートカットのショートカットキー表示をヘルプのドロップダウンに収納
ドロップダウンのショートカットを表示からモーダルを呼び出せるように改良
Figma

miya · 2025-12-01T03:20:57Z

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

+        <DropdownItem
+          tag="a"
+          href="https://docs.growi.org"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="my-1"
+          data-testid="growi-docs-link"
+        >
+          <span className="d-flex align-items-center">
+            GROWI Docs
+            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</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>


Docs と Help は両方出さなくてもいいかと思います (Cloud ユーザーに「開発ガイド」等は不要なので)。Cloud のアプリの場合は Help でそれ以外は Docs のリンクを表示するで良いかと思います。

Help/Docs の出し分けは SecondaryItems.tsx の旧実装を参考に useGrowiCloudUri() を使えばできます。

対応しました

miya · 2025-12-01T03:23:11Z

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

 export const SecondaryItems: FC = memo(() => {

  const isAdmin = useIsAdmin();
  const growiCloudUri = useGrowiCloudUri();


growiCloudUri を使わなくなったのであれば削除お願いします (import 文も)

削除しました

miya · 2025-12-01T03:35:28Z

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

+const HelpDropdown = dynamic(() => import('./HelpDropdown').then(mod => mod.HelpDropdown), {
+  ssr: false,
+  loading: () => <SkeletonItem />,
+});


細かいですが、親コンポーネントである Sidebar.tsx が dynamic import しており、HelpDropdown は Sidebar.tsx がレンダリングされていれば必ずレンダリングされるものなのでこれは Dynamic import しなくても良いかと思います。

PersonalDropdown は isGuestUser: true という条件の時は読み込まれなくてよい (Dom に存在しなくてよい) ので dynamic import の恩恵があります。

修正しました

Copilot

Pull request overview

This PR refactors the help UI by moving the GROWI version display and keyboard shortcuts access from a fixed position at the bottom-right of the screen into a new Help dropdown menu in the sidebar navigation. The SystemVersion component is removed and replaced with a more comprehensive HelpDropdown component that provides centralized access to documentation, shortcuts, and version information.

Key changes:

Replaces the SystemVersion component with a new HelpDropdown component in the sidebar
Consolidates help resources (GROWI Docs, GROWI.cloud Help, shortcuts modal, and version info) into a single dropdown menu
Adds translations for the new dropdown labels in 5 languages (en_US, ja_JP, fr_FR, ko_KR, zh_CN)

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`apps/app/src/components/Layout/ShareLinkLayout.tsx`	Removes SystemVersion component import and usage
`apps/app/src/components/Layout/BasicLayout.tsx`	Removes SystemVersion component import and usage
`apps/app/src/components/Layout/AdminLayout.tsx`	Removes SystemVersion component import and usage
`apps/app/src/client/components/SystemVersion.tsx`	Deletes the entire SystemVersion component file
`apps/app/src/client/components/SystemVersion.module.scss`	Deletes the SystemVersion styles file
`apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx`	Replaces simple Help link with new HelpDropdown component
`apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.tsx`	Adds new HelpDropdown component with documentation links, shortcuts, and version display
`apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.module.scss`	Adds styles for the new HelpDropdown component
`apps/app/public/static/locales/{lang}/translation.json`	Adds translations for help dropdown labels in 5 languages

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-01T03:41:23Z

apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.module.scss

+}
+
+.help-dropdown-menu :global {


The .help-dropdown-menu :global selector is duplicated. Lines 7-9 and 11-14 both target the same selector. These should be merged into a single block:

.help-dropdown-menu :global { @include modifier-keys.modifier-key; --bs-dropdown-font-size: 14px; min-width: 240px; }

Suggested change

}

.help-dropdown-menu :global {

Copilot · 2025-12-01T03:41:23Z

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

+        <DropdownItem
+          tag="a"
+          href="https://docs.growi.org"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="my-1"
+          data-testid="growi-docs-link"
+        >
+          <span className="d-flex align-items-center">
+            GROWI Docs
+            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</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>


The HelpDropdown component shows both GROWI Docs and GROWI.cloud Help links unconditionally, but the original behavior (see SecondaryItems.tsx line 56 in the diff) was to show different help URLs based on whether growiCloudUri exists.

The component should conditionally render help links:

If growiCloudUri exists: show GROWI.cloud Help

Otherwise: show GROWI Docs

Consider using the existing useGrowiDocumentationUrl() hook from ~/states/context which already handles this logic, or implement similar conditional logic using useGrowiCloudUri().

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

yuki-takei · 2025-12-03T10:52:51Z

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

+        data-testid="help-dropdown-button"
+      >
+        <span className="material-symbols-outlined">help</span>
+      </DropdownToggle>


テーマ統一のため、SecondaryItem を利用すべきだと思う

Claude に聞いた所 SecondaryItem はリンクベースでhrefを受け取るのでドロップダウンには使えないと言われました
onClick や Children で無理やりやってみましたがposition-absolute でアイコンを重ねる形になってしまうためホバー時のスタイルがばらついてしまいました

satof3 added 8 commits November 7, 2025 10:22

Create HelpDropdown

bd81186

Add shortcut menu

fabb2a9

Merge branch 'dev/7.4.x' into imprv/173835-new-help-button

63df54c

Apply jotai

a1a4f3a

Delete SystemVersion layout

5717647

Adjust style

0da23a5

Remove growi.org link

55bc9e6

Translation

07d739e

satof3 requested a review from miya November 28, 2025 10:34

satof3 self-assigned this Nov 28, 2025

github-actions bot added the type/improvement label Nov 28, 2025

miya requested changes Dec 1, 2025

View reviewed changes

miya requested review from Copilot and yuki-takei December 1, 2025 03:37

Copilot started reviewing on behalf of miya December 1, 2025 03:38 View session

Copilot finished reviewing on behalf of miya December 1, 2025 03:40

Copilot AI reviewed Dec 1, 2025

View reviewed changes

satof3 added 2 commits December 2, 2025 07:52

Apply FB

d4a3583

Merge branch 'dev/7.4.x' into imprv/173835-new-help-button

f537346

yuki-takei requested changes Dec 3, 2025

View reviewed changes

Merge branch 'dev/7.4.x' into imprv/173835-new-help-button

6eeb472

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

imprv: New help button #10553

imprv: New help button #10553

Uh oh!

satof3 commented Nov 28, 2025

Uh oh!

miya Dec 1, 2025

Uh oh!

satof3 Dec 2, 2025

Uh oh!

miya Dec 1, 2025

Uh oh!

satof3 Dec 2, 2025

Uh oh!

miya Dec 1, 2025

Uh oh!

satof3 Dec 2, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Uh oh!

yuki-takei Dec 3, 2025

Uh oh!

satof3 Dec 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

imprv: New help button #10553

Are you sure you want to change the base?

imprv: New help button #10553

Uh oh!

Conversation

satof3 commented Nov 28, 2025

Task

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants