show each admin page

packages/app/src/components/Admin/AdminPage.tsx

@@ -7,24 +7,24 @@ import {
 import dynamic from 'next/dynamic';
 import { Container, Provider } from 'unstated';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
-import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
+// import AdminAppContainer from '~/client/services/AdminAppContainer';
+// import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
+// import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
-import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
-import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
-import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
+// import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
+// import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
+// import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
 import AdminHomeContainer from '~/client/services/AdminHomeContainer';
-import AdminImportContainer from '~/client/services/AdminImportContainer';
-import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
-import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
-import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
-import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
-import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
-import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
-import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
-import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+// import AdminImportContainer from '~/client/services/AdminImportContainer';
+// import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
+// import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
+// import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
+// import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
+// import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
+// import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
+// import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
+// import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
+// import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import { SupportedActionType } from '~/interfaces/activity';
 import {
   CommonProps, useCustomTitle,
@@ -209,60 +209,60 @@ const AdminPage: NextPage<Props> = (props: Props) => {
 
   if (isClient()) {
     // Create unstated container instances (except Security)
-    const adminAppContainer = new AdminAppContainer();
-    const adminImportContainer = new AdminImportContainer();
+    // const adminAppContainer = new AdminAppContainer();
+    // const adminImportContainer = new AdminImportContainer();
     const adminHomeContainer = new AdminHomeContainer();
-    const adminCustomizeContainer = new AdminCustomizeContainer();
-    const adminUsersContainer = new AdminUsersContainer();
+    // const adminCustomizeContainer = new AdminCustomizeContainer();
+    // const adminUsersContainer = new AdminUsersContainer();
     const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
-    const adminNotificationContainer = new AdminNotificationContainer();
-    const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
-    const adminMarkDownContainer = new AdminMarkDownContainer();
+    // const adminNotificationContainer = new AdminNotificationContainer();
+    // const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
+    // const adminMarkDownContainer = new AdminMarkDownContainer();
 
     injectableContainers.push(
-      adminAppContainer,
-      adminImportContainer,
+      // adminAppContainer,
+      // adminImportContainer,
       adminHomeContainer,
-      adminCustomizeContainer,
-      adminUsersContainer,
+      // adminCustomizeContainer,
+      // adminUsersContainer,
       adminExternalAccountsContainer,
-      adminNotificationContainer,
-      adminSlackIntegrationLegacyContainer,
-      adminMarkDownContainer,
+      // adminNotificationContainer,
+      // adminSlackIntegrationLegacyContainer,
+      // adminMarkDownContainer,
     );
   }
 
 
   const adminSecurityContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminSecuritySettingElem = document.getElementById('admin-security-setting');
-
-    if (adminSecuritySettingElem != null) {
-      // Create unstated container instances (Security)
-      const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
-      const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
-      const adminLdapSecurityContainer = new AdminLdapSecurityContainer();
-      const adminSamlSecurityContainer = new AdminSamlSecurityContainer();
-      const adminOidcSecurityContainer = new AdminOidcSecurityContainer();
-      const adminBasicSecurityContainer = new AdminBasicSecurityContainer();
-      const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer();
-      const adminGitHubSecurityContainer = new AdminGitHubSecurityContainer();
-      const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer();
-
-      adminSecurityContainers.push(
-        adminGeneralSecurityContainer,
-        adminLocalSecurityContainer,
-        adminLdapSecurityContainer,
-        adminSamlSecurityContainer,
-        adminOidcSecurityContainer,
-        adminBasicSecurityContainer,
-        adminGoogleSecurityContainer,
-        adminGitHubSecurityContainer,
-        adminTwitterSecurityContainer,
-      );
-    }
-  }
+  // if (isClient()) {
+  //   const adminSecuritySettingElem = document.getElementById('admin-security-setting');
+
+  //   if (adminSecuritySettingElem != null) {
+  //     // Create unstated container instances (Security)
+  //     const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
+  //     const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
+  //     const adminLdapSecurityContainer = new AdminLdapSecurityContainer();
+  //     const adminSamlSecurityContainer = new AdminSamlSecurityContainer();
+  //     const adminOidcSecurityContainer = new AdminOidcSecurityContainer();
+  //     const adminBasicSecurityContainer = new AdminBasicSecurityContainer();
+  //     const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer();
+  //     const adminGitHubSecurityContainer = new AdminGitHubSecurityContainer();
+  //     const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer();
+
+  //     adminSecurityContainers.push(
+  //       adminGeneralSecurityContainer,
+  //       adminLocalSecurityContainer,
+  //       adminLdapSecurityContainer,
+  //       adminSamlSecurityContainer,
+  //       adminOidcSecurityContainer,
+  //       adminBasicSecurityContainer,
+  //       adminGoogleSecurityContainer,
+  //       adminGitHubSecurityContainer,
+  //       adminTwitterSecurityContainer,
+  //     );
+  //   }
+  // }
 
 
   return (

packages/app/src/pages/admin/app.page.tsx

@@ -44,7 +44,6 @@ const AdminAppPage: NextPage<Props> = (props) => {
   const injectableContainers: Container<any>[] = [];
 
   if (isClient()) {
-    // Create unstated container instances (except Security)
     const adminAppContainer = new AdminAppContainer();
 
     injectableContainers.push(adminAppContainer);

packages/app/src/pages/admin/audit-log.page.tsx

@@ -0,0 +1,57 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const AuditLogManagement = dynamic(() => import('~/components/Admin/AuditLogManagement').then(mod => mod.AuditLogManagement), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+  const title = t('audit_log_management.audit_log');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <AuditLogManagement />
+    </AdminLayout>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/customize.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const AppSettingsPageContents = dynamic(() => import('~/components/Admin/App/AppSettingsPageContents'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('customize_settings.customize_settings');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminCustomizeContainer = new AdminCustomizeContainer();
+
+    injectableContainers.push(adminCustomizeContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <AppSettingsPageContents />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/export.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminAppContainer from '~/client/services/AdminAppContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const ExportArchiveDataPage = dynamic(() => import('~/components/Admin/ExportArchiveDataPage'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('export_archive_data'), ;
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminAppContainer = new AdminAppContainer();
+
+    injectableContainers.push(adminAppContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <ExportArchiveDataPage />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/importer.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminImportContainer from '~/client/services/AdminImportContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const DataImportPageContents = dynamic(() => import('~/components/Admin/ImportData/ImportDataPageContents'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('importer_management.import_data');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminImportContainer = new AdminImportContainer();
+
+    injectableContainers.push(adminImportContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <DataImportPageContents />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/markdown.page.tsx

@@ -0,0 +1,71 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+// const AppSettingsPageContents = dynamic(() => import('~/components/Admin/App/AppSettingsPageContents'), { ssr: false });
+const MarkDownSettingContents = dynamic(() => import('~/components/Admin/MarkdownSetting/MarkDownSettingContents'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('markdown_settings.markdown_settings');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminMarkDownContainer = new AdminMarkDownContainer();
+
+    injectableContainers.push(adminMarkDownContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <MarkDownSettingContents />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/notification.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const NotificationSetting = dynamic(() => import('~/components/Admin/Notification/NotificationSetting'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('external_notification.external_notification');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminNotificationContainer = new AdminNotificationContainer();
+
+    injectableContainers.push(adminNotificationContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <NotificationSetting />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/search.page.tsx

@@ -0,0 +1,58 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminAppContainer from '~/client/services/AdminAppContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const ElasticsearchManagement = dynamic(() => import('~/components/Admin/ElasticsearchManagement/ElasticsearchManagement'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+  const title = t('full_text_search_management.full_text_search_management');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <ElasticsearchManagement />
+    </AdminLayout>
+  );
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/security.page.tsx

@@ -56,7 +56,6 @@ const AdminAppPage: NextPage<Props> = (props) => {
     const adminSecuritySettingElem = document.getElementById('admin-security-setting');
 
     if (adminSecuritySettingElem != null) {
-      // Create unstated container instances (Security)
       const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
       const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
       const adminLdapSecurityContainer = new AdminLdapSecurityContainer();

packages/app/src/pages/admin/slack-integration-legacy.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const LegacySlackIntegration = dynamic(() => import('~/components/Admin/LegacySlackIntegration/LegacySlackIntegration'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('slack_integration_legacy.slack_integration_legacy');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
+
+    injectableContainers.push(adminSlackIntegrationLegacyContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <LegacySlackIntegration />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/slack-integration.page.tsx

@@ -0,0 +1,55 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const SlackIntegration = dynamic(() => import('~/components/Admin/SlackIntegration/SlackIntegration'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+  const title = t('slack_integration.slack_integration');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <SlackIntegration />
+    </AdminLayout>
+  );
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/user-groups.page.tsx

@@ -0,0 +1,55 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const UserGroupPage = dynamic(() => import('~/components/Admin/UserGroup/UserGroupPage').then(mod => mod.UserGroupPage), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+  const title = t('user_group_management.user_group_management');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <UserGroupPage />
+    </AdminLayout>
+  );
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;

packages/app/src/pages/admin/users.page.tsx

@@ -0,0 +1,70 @@
+import { isClient } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { Container, Provider } from 'unstated';
+
+import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import { SupportedActionType } from '~/interfaces/activity';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+
+const UserManagement = dynamic(() => import('~/components/Admin/UserManagement'), { ssr: false });
+
+
+type Props = CommonProps & {
+  currentUser: any,
+
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+  envVars: any,
+  isAclEnabled: boolean,
+  isSearchServiceConfigured: boolean,
+  isSearchServiceReachable: boolean,
+  isMailerSetup: boolean,
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+
+  customizeTitle: string,
+  siteUrl: string,
+};
+
+
+const AdminAppPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const title = t('user_management.user_management');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminUsersContainer = new AdminUsersContainer();
+
+    injectableContainers.push(adminUsersContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <UserManagement />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminAppPage;