Browse Source

feat(page-create-modal): add template help link icon

Add a help icon (?) next to the template section heading in the
page create modal. Clicking it opens the template documentation
page, with the URL determined by whether the instance is GROWI
or GROWI.cloud.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
VANELLOPE\tomoyuki-t 2 months ago
parent
commit
239c9ad92b
1 changed files with 18 additions and 1 deletions
  1. 18 1
      apps/app/src/client/components/PageCreateModal.tsx

+ 18 - 1
apps/app/src/client/components/PageCreateModal.tsx

@@ -21,7 +21,7 @@ import { debounce } from 'throttle-debounce';
 import { useCreateTemplatePage } from '~/client/services/create-page';
 import { useCreateTemplatePage } from '~/client/services/create-page';
 import { useCreatePage } from '~/client/services/create-page/use-create-page';
 import { useCreatePage } from '~/client/services/create-page/use-create-page';
 import { useToastrOnError } from '~/client/services/use-toastr-on-error';
 import { useToastrOnError } from '~/client/services/use-toastr-on-error';
-import { useCurrentUser } from '~/states/global';
+import { useCurrentUser, useGrowiCloudUri } from '~/states/global';
 import { isSearchServiceReachableAtom } from '~/states/server-configurations';
 import { isSearchServiceReachableAtom } from '~/states/server-configurations';
 import {
 import {
   usePageCreateModalActions,
   usePageCreateModalActions,
@@ -38,6 +38,7 @@ const PageCreateModal: React.FC = () => {
   const { t } = useTranslation();
   const { t } = useTranslation();
 
 
   const currentUser = useCurrentUser();
   const currentUser = useCurrentUser();
+  const growiCloudUri = useGrowiCloudUri();
 
 
   const { isOpened, path: pathname = '' } = usePageCreateModalStatus();
   const { isOpened, path: pathname = '' } = usePageCreateModalStatus();
   const { close: closeCreateModal } = usePageCreateModalActions();
   const { close: closeCreateModal } = usePageCreateModalActions();
@@ -71,6 +72,11 @@ const PageCreateModal: React.FC = () => {
     [userHomepagePath, t, now],
     [userHomepagePath, t, now],
   );
   );
 
 
+  const templateHelpUrl =
+    growiCloudUri != null
+      ? 'https://growi.cloud/help/ja/guide/features/template.html'
+      : 'https://docs.growi.org/ja/guide/features/template.html';
+
   const [todayInput, setTodayInput] = useState('');
   const [todayInput, setTodayInput] = useState('');
   const [pageNameInput, setPageNameInput] = useState(pageNameInputInitialValue);
   const [pageNameInput, setPageNameInput] = useState(pageNameInputInitialValue);
   const [template, setTemplate] = useState(null);
   const [template, setTemplate] = useState(null);
@@ -295,6 +301,16 @@ const PageCreateModal: React.FC = () => {
         <fieldset className="col-12">
         <fieldset className="col-12">
           <h3 className="pb-2">
           <h3 className="pb-2">
             {t('template.modal_label.Create template under')}
             {t('template.modal_label.Create template under')}
+            <a
+              href={templateHelpUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="ms-1"
+            >
+              <span className="material-symbols-outlined fs-6 text-secondary">
+                help
+              </span>
+            </a>
             <br />
             <br />
             <code className="h6" data-testid="grw-page-create-modal-path-name">
             <code className="h6" data-testid="grw-page-create-modal-path-name">
               {pathname}
               {pathname}
@@ -353,6 +369,7 @@ const PageCreateModal: React.FC = () => {
     isOpened,
     isOpened,
     pathname,
     pathname,
     template,
     template,
+    templateHelpUrl,
     onChangeTemplateHandler,
     onChangeTemplateHandler,
     createTemplateWithToastr,
     createTemplateWithToastr,
     t,
     t,