create PluginsExtensionPage

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const PluginCard = () => {
+  return (
+    <div>
+      <div>
+        <strong>Plugin Name</strong>
+        <small>Discription</small>
+        <span>version</span>
+        <span>tags</span>
+      </div>
+      <div>
+        <span>URL</span>
+        <span>DeleteButton</span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+
+// TODO: error notification (toast, loggerFactory)
+// TODO: i18n
+
+export const PluginInstallerForm = () => {
+
+  // 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]);
+
+  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>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            // defaultValue={adminAppContainer.state.title || ''}
+            // onChange={(e) => {
+            //   adminAppContainer.changeTitle(e.target.value);
+            // }}
+            placeholder="GROWI"
+          />
+          <p className="form-text text-muted">{t('admin:app_setting.sitename_change')}</p>
+        </div>
+      </div>
+
+      {/* <AdminUpdateButtonRow onClick={submitHandler} disabled={adminAppContainer.state.retrieveError != null} /> */}
+    </>
+  );
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { PluginCard } from './PluginCard';
+import { PluginInstallerForm } from './PluginInstallerForm';
+
+// TODO: i18n
+
+export const PluginExtensionsPageContents = (): JSX.Element => {
+  return (
+    <div>
+      <div className="row">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">Plugins Installer</h2>
+          <PluginInstallerForm />
+        </div>
+      </div>
+      <div>
+        <PluginCard />
+      </div>
+    </div>
+  );
+};

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

@@ -64,6 +64,7 @@ const AdminLayout = dynamic(() => import('../../components/Layout/AdminLayout'),
 // named export
 const UserGroupPage = dynamic(() => import('../../components/Admin/UserGroup/UserGroupPage').then(mod => mod.UserGroupPage), { ssr: false });
 const AuditLogManagement = dynamic(() => import('../../components/Admin/AuditLogManagement').then(mod => mod.AuditLogManagement), { ssr: false });
+const PluginsExtensionPageContents = dynamic(() => import('../../components/Admin/PluginsExtension/PluginsExtensionPageContents').then(mod => mod.PluginsExtensionPageContents), { ssr: false });
 
 const pluginUtils = new PluginUtils();
 
@@ -181,6 +182,10 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
       title: t('audit_log_management.audit_log'),
       component: <AuditLogManagement />,
     },
+    'plugins-extension': {
+      title: t('plugins_extension.title'),
+      component: <PluginsExtensionPageContents />,
+    },
   };
 
   const getTargetPageToRender = (pagesMap, keys): {title: string, component: JSX.Element} => {