update

packages/app/public/static/locales/ja_JP/admin.json

@@ -847,6 +847,10 @@
       "force_update_parents_description": "このオプションを有効化すると、親グループ変更後に祖先グループに足りないユーザーが存在した場合にそれらのユーザーを強制的に追加することができます"
     }
   },
+  "plugins-extention": {
+    "title": "プラグイン拡張",
+    "plugin_url": "プラグイン URL",
+  },
   "audit_log_management": {
     "audit_log": "監査ログ",
     "audit_log_settings": "監査ログ設定",

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -38,6 +38,7 @@ const AdminNavigation = (props) => {
         { t('full_text_search_management.full_text_search_management') }</>;
       // TODO: Consider where to place the "AuditLog"
       case 'audit-log':                return <><i className="icon-fw icon-feed"></i>            { t('audit_log_management.audit_log')}</>;
+      case 'plugins-extention':        return <><i className="icon-fw icon-plugin"></i>          { t('plugins-extention.title')}</>;
       case 'cloud':                    return <><i className="icon-fw icon-share-alt"></i>       { t('to_cloud_settings')} </>;
       default:                         return <><i className="icon-fw icon-home"></i>            { t('wiki_management_home_page') }</>;
       /* eslint-enable no-multi-spaces */
@@ -94,6 +95,7 @@ const AdminNavigation = (props) => {
         <MenuLink menu="user-groups"  isListGroupItems isActive={isActiveMenu('/user-groups')} />
         <MenuLink menu="search"       isListGroupItems isActive={isActiveMenu('/search')} />
         <MenuLink menu="audit-log"    isListGroupItems isActive={isActiveMenu('/audit-log')} />
+        <MenuLink menu="plugins-extention"    isListGroupItems isActive={isActiveMenu('/plugins-extention')} />
         {/* {growiCloudUri != null && growiAppIdForGrowiCloud != null
           && (
             <a
@@ -142,6 +144,7 @@ const AdminNavigation = (props) => {
             {isActiveMenu('/user-groups') &&       <MenuLabel menu="user-groups" />}
             {isActiveMenu('/search') &&            <MenuLabel menu="search" />}
             {isActiveMenu('/audit-log') &&         <MenuLabel menu="audit-log" />}
+            {isActiveMenu('/plugins-extention') && <MenuLabel menu="plugins-extention" />}
             {/* eslint-enable no-multi-spaces */}
           </span>
         </button>

packages/app/src/components/Admin/PluginsExtension/PluginInstallerForm.tsx

@@ -1,25 +1,63 @@
 import React, { useCallback } from 'react';
 
+import { useTranslation } from 'react-i18next';
+
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 // TODO: error notification (toast, loggerFactory)
 // TODO: i18n
 
-export const PluginInstallerForm = () => {
+export const PluginInstallerForm = (): JSX.Element => {
+  const { t } = useTranslation('admin');
 
-  // const submitHandler = useCallback(async() => {
-  //   try {
-  //     await adminAppContainer.updateAppSettingHandler();
-  //     // toastSuccess(t('toaster.update_successed', { target: t('app_settings') }));
-  //   }
-  //   catch (err) {
-  //     toastError(err);
-  //     logger.error(err);
-  //   }
-  // }, [adminAppContainer, t]);
+  const submitHandler = useCallback(async() => {
+    try {
+      // await adminAppContainer.updateAppSettingHandler();
+      toastSuccess(t('toaster.update_successed', { target: t('app_settings') }));
+    }
+    catch (err) {
+      toastError(err);
+      // logger.error(err);
+    }
+  }, [t]);
 
   return (
     <>
       <div className='form-group row'>
-        <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
+        <label className="text-left text-md-right col-md-3 col-form-label">Plugin URL</label>
+        {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:plugins_extention.plugin_url')}</label> */}
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            // defaultValue={adminAppContainer.state.title || ''}
+            // onChange={(e) => {
+            //   adminAppContainer.changeTitle(e.target.value);
+            // }}
+            placeholder="https://github.com/weseek/growi-plugins/vibrant-dark-ui"
+          />
+          <p className="form-text text-muted">Install the plugin in GROWI: Enter the URL of the plugin repository and press the Update.</p>
+          {/* <p className="form-text text-muted">{t('admin:app_setting.sitename_change')}</p> */}
+        </div>
+      </div>
+      <div className='form-group row'>
+        <label className="text-left text-md-right col-md-3 col-form-label">branch</label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            // defaultValue={adminAppContainer.state.title || ''}
+            // onChange={(e) => {
+            //   adminAppContainer.changeTitle(e.target.value);
+            // }}
+            placeholder="main"
+          />
+          <p className="form-text text-muted">branch name</p>
+        </div>
+      </div>
+      <div className='form-group row'>
+        <label className="text-left text-md-right col-md-3 col-form-label">tag</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -28,12 +66,13 @@ export const PluginInstallerForm = () => {
             // onChange={(e) => {
             //   adminAppContainer.changeTitle(e.target.value);
             // }}
-            placeholder="GROWI"
+            placeholder="tags"
           />
-          <p className="form-text text-muted">{t('admin:app_setting.sitename_change')}</p>
+          <p className="form-text text-muted">tag name</p>
         </div>
       </div>
 
+      <AdminUpdateButtonRow onClick={submitHandler} disabled={false}/>
       {/* <AdminUpdateButtonRow onClick={submitHandler} disabled={adminAppContainer.state.retrieveError != null} /> */}
     </>
   );

packages/app/src/components/Admin/PluginsExtension/PluginsExtensionPageContents.tsx

@@ -5,7 +5,7 @@ import { PluginInstallerForm } from './PluginInstallerForm';
 
 // TODO: i18n
 
-export const PluginExtensionsPageContents = (): JSX.Element => {
+export const PluginsExtensionPageContents = (): JSX.Element => {
   return (
     <div>
       <div className="row">

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -182,8 +182,8 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
       title: t('audit_log_management.audit_log'),
       component: <AuditLogManagement />,
     },
-    'plugins-extension': {
-      title: t('plugins_extension.title'),
+    'plugins-extention': {
+      title: t('plugins-extention.title'),
       component: <PluginsExtensionPageContents />,
     },
   };