Merge pull request #6818 from weseek/imprv/107127-refactoring-adminPagesMap

imprv: Refactoring admin pages

packages/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettings.jsx

@@ -5,8 +5,6 @@ import PropTypes from 'prop-types';
 
 import { useAppTitle } from '~/stores/context';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
 import CustomBotWithoutProxyConnectionStatus from './CustomBotWithoutProxyConnectionStatus';
 import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
 

packages/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -12,7 +12,6 @@ import { apiv3Put, apiv3Post } from '~/client/util/apiv3-client';
 import { useSiteUrl } from '~/stores/context';
 import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
 import Accordion from '../Common/Accordion';
 
 import ManageCommandsProcess from './ManageCommandsProcess';
@@ -143,7 +142,7 @@ const CustomCopyToClipBoard = (props) => {
   );
 };
 
-const GeneratingTokensAndRegisteringProxyServiceProcess = withUnstatedContainers((props) => {
+const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
   const { t } = useTranslation();
   const { slackAppIntegrationId } = props;
 
@@ -231,7 +230,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = withUnstatedContainers
     </div>
 
   );
-}, []);
+};
 
 const TestProcess = ({
   slackAppIntegrationId, onSubmitForm, onSubmitFormFailed, isLatestConnectionSuccess,

packages/app/src/components/Layout/AdminLayout.tsx

@@ -17,18 +17,12 @@ const AdminNotFoundPage = dynamic(() => import('../Admin/NotFoundPage').then(mod
 type Props = {
   title: string
   componentTitle: string
-  /**
-   * Set the current option of AdminNavigation
-   * Expected it is in ["home", "app", "security", "markdown", "customize", "importer", "export",
-   * "notification", 'global-notification', "users", "user-groups", "search"]
-   */
-  selectedNavOpt: string
   children?: ReactNode
 }
 
 
 const AdminLayout = ({
-  children, title, selectedNavOpt, componentTitle,
+  children, title, componentTitle,
 }: Props): JSX.Element => {
 
   const AdminNavigation = dynamic(() => import('~/components/Admin/Common/AdminNavigation'), { ssr: false });
@@ -46,7 +40,7 @@ const AdminLayout = ({
           <div className="container-fluid">
             <div className="row">
               <div className="col-lg-3">
-                <AdminNavigation selected={selectedNavOpt} />
+                <AdminNavigation />
               </div>
               <div className="col-lg-9">
                 {children || <AdminNotFoundPage />}

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

@@ -1,347 +0,0 @@
-import React from 'react';
-
-import { isClient, objectIdUtils } from '@growi/core';
-import {
-  NextPage, GetServerSideProps, GetServerSidePropsContext,
-} from 'next';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import dynamic from 'next/dynamic';
-import { useRouter } from 'next/router';
-import { Container, Provider } from 'unstated';
-
-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 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 { SupportedActionType } from '~/interfaces/activity';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import PluginUtils from '~/server/plugins/plugin-utils';
-import ConfigLoader from '~/server/service/config-loader';
-import {
-  useCurrentUser, /* useSearchServiceConfigured, */ useIsAclEnabled, useIsMailerSetup, useIsSearchServiceReachable, useSiteUrl,
-  useAuditLogEnabled, useAuditLogAvailableActions, useIsSearchPage, useCustomizeTitle,
-} from '~/stores/context';
-import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
-
-import {
-  CommonProps, getServerSideCommonProps, getNextI18NextConfig, useCustomTitle,
-} from '../utils/commons';
-
-
-// import { useEnvVars } from '~/stores/admin-context';
-
-const AdminHome = dynamic(() => import('../../components/Admin/AdminHome/AdminHome'), { ssr: false });
-const AppSettingsPageContents = dynamic(() => import('../../components/Admin/App/AppSettingsPageContents'), { ssr: false });
-const SecurityManagement = dynamic(() => import('../../components/Admin/Security/SecurityManagement'), { ssr: false });
-const MarkDownSettingContents = dynamic(() => import('../../components/Admin/MarkdownSetting/MarkDownSettingContents'), { ssr: false });
-const CustomizeSettingContents = dynamic(() => import('../../components/Admin/Customize/Customize'), { ssr: false });
-const DataImportPageContents = dynamic(() => import('../../components/Admin/ImportData/ImportDataPageContents'), { ssr: false });
-const ExportArchiveDataPage = dynamic(() => import('../../components/Admin/ExportArchiveDataPage'), { ssr: false });
-const NotificationSetting = dynamic(() => import('../../components/Admin/Notification/NotificationSetting'), { ssr: false });
-const ManageGlobalNotification = dynamic(() => import('../../components/Admin/Notification/ManageGlobalNotification'), { ssr: false });
-const SlackIntegration = dynamic(() => import('../../components/Admin/SlackIntegration/SlackIntegration'), { ssr: false });
-const LegacySlackIntegration = dynamic(() => import('../../components/Admin/LegacySlackIntegration/LegacySlackIntegration'), { ssr: false });
-const UserManagement = dynamic(() => import('../../components/Admin/UserManagement'), { ssr: false });
-const ManageExternalAccount = dynamic(() => import('../../components/Admin/ManageExternalAccount'), { ssr: false });
-const FullTextSearchManagement = dynamic(
-  () => import('../../components/Admin/FullTextSearchManagement').then(mod => mod.FullTextSearchManagement), { ssr: false },
-);
-const UserGroupDetailPage = dynamic(() => import('../../components/Admin/UserGroupDetail/UserGroupDetailPage'), { ssr: false });
-const AdminLayout = dynamic(() => import('../../components/Layout/AdminLayout'), { ssr: false });
-// 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 pluginUtils = new PluginUtils();
-
-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 AdminPage: NextPage<Props> = (props: Props) => {
-
-  const { t } = useTranslation('admin');
-  const router = useRouter();
-  const { path } = router.query;
-  const pagePathKeys: string[] = Array.isArray(path) ? path : ['home'];
-
-  /*
-  * Set userGroupId as a adminPagesMap key
-  * eg) In case that url is `/user-group-detail/62e8388a9a649bea5e703ef7`, userGroupId will be 62e8388a9a649bea5e703ef7
-  */
-  let userGroupId;
-  const [firstPath, secondPath] = pagePathKeys;
-  if (firstPath === 'user-group-detail') {
-    userGroupId = objectIdUtils.isValidObjectId(secondPath) ? secondPath : undefined;
-  }
-
-  // TODO: refactoring adminPagesMap => https://redmine.weseek.co.jp/issues/102694
-  const adminPagesMap = {
-    home: {
-      title:  t('wiki_management_home_page'),
-      component: <AdminHome
-        nodeVersion={props.nodeVersion}
-        npmVersion={props.npmVersion}
-        yarnVersion={props.yarnVersion}
-        installedPlugins={props.installedPlugins}
-      />,
-    },
-    app: {
-      title: t('commons:headers.app_settings'),
-      component: <AppSettingsPageContents />,
-    },
-    security: {
-      title: t('security_settings.security_settings'),
-      component: <SecurityManagement />,
-    },
-    markdown: {
-      title: t('markdown_settings.markdown_settings'),
-      component: <MarkDownSettingContents />,
-    },
-    customize: {
-      title: t('customize_settings.customize_settings'),
-      component: <CustomizeSettingContents />,
-    },
-    importer: {
-      title: t('importer_management.import_data'),
-      component: <DataImportPageContents />,
-    },
-    export: {
-      title: t('export_archive_data'),
-      component: <ExportArchiveDataPage />,
-    },
-    notification: {
-      title: t('external_notification.external_notification'),
-      component: <NotificationSetting />,
-    },
-    'global-notification': {
-      new: {
-        title: t('external_notification.external_notification'),
-        component: <ManageGlobalNotification />,
-      },
-    },
-    'slack-integration': {
-      title: t('slack_integration.slack_integration'),
-      component: <SlackIntegration />,
-    },
-    'slack-integration-legacy': {
-      title: t('slack_integration_legacy.slack_integration_legacy'),
-      component: <LegacySlackIntegration />,
-    },
-    users: {
-      title: t('user_management.user_management'),
-      component: <UserManagement />,
-      'external-accounts': {
-        title: t('user_management.external_account'),
-        component: <ManageExternalAccount />,
-      },
-    },
-    'user-groups': {
-      title:  t('user_group_management.user_group_management'),
-      component: <UserGroupPage />,
-    },
-    'user-group-detail': {
-      [userGroupId]: {
-        title: t('user_group_management.user_group_management'),
-        component: <UserGroupDetailPage userGroupId={userGroupId} />,
-      },
-    },
-    search: {
-      title: t('full_text_search_management.full_text_search_management'),
-      component: <FullTextSearchManagement />,
-    },
-    'audit-log': {
-      title: t('audit_log_management.audit_log'),
-      component: <AuditLogManagement />,
-    },
-  };
-
-  const getTargetPageToRender = (pagesMap, keys): {title: string, component: JSX.Element} => {
-    return keys.reduce((pagesMap, key) => {
-      return pagesMap[key];
-    }, pagesMap);
-  };
-
-  const targetPage = getTargetPageToRender(adminPagesMap, pagePathKeys);
-
-  useIsSearchPage(false);
-  useCurrentUser(props.currentUser != null ? JSON.parse(props.currentUser) : null);
-  useIsMailerSetup(props.isMailerSetup);
-  useIsMaintenanceMode(props.isMaintenanceMode);
-
-  // useSearchServiceConfigured(props.isSearchServiceConfigured);
-  useIsSearchServiceReachable(props.isSearchServiceReachable);
-
-  useIsAclEnabled(props.isAclEnabled);
-  useSiteUrl(props.siteUrl);
-
-  // useEnvVars(props.envVars);
-
-  useAuditLogEnabled(props.auditLogEnabled);
-  useAuditLogAvailableActions(props.auditLogAvailableActions);
-
-  useCustomizeTitle(props.customizeTitle);
-
-  const injectableContainers: Container<any>[] = [];
-
-  if (isClient()) {
-    // Create unstated container instances (except Security)
-    const adminAppContainer = new AdminAppContainer();
-    const adminImportContainer = new AdminImportContainer();
-    const adminHomeContainer = new AdminHomeContainer();
-    const adminCustomizeContainer = new AdminCustomizeContainer();
-    const adminUsersContainer = new AdminUsersContainer();
-    const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
-    const adminNotificationContainer = new AdminNotificationContainer();
-    const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
-    const adminMarkDownContainer = new AdminMarkDownContainer();
-
-    injectableContainers.push(
-      adminAppContainer,
-      adminImportContainer,
-      adminHomeContainer,
-      adminCustomizeContainer,
-      adminUsersContainer,
-      adminExternalAccountsContainer,
-      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,
-      );
-    }
-  }
-
-
-  return (
-    <Provider inject={[...injectableContainers, ...adminSecurityContainers]}>
-      <AdminLayout title={useCustomTitle(props, targetPage.title)} selectedNavOpt={firstPath} componentTitle={targetPage.title}>
-        {targetPage.component}
-      </AdminLayout>
-    </Provider>
-  );
-};
-
-
-async function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): Promise<void> {
-  const req: CrowiRequest = context.req as CrowiRequest;
-  const { crowi } = req;
-  const {
-    appService, mailService, aclService, searchService, activityService,
-  } = crowi;
-
-  props.siteUrl = appService.getSiteUrl();
-  props.nodeVersion = crowi.runtimeVersions.versions.node ? crowi.runtimeVersions.versions.node.version.version : null;
-  props.npmVersion = crowi.runtimeVersions.versions.npm ? crowi.runtimeVersions.versions.npm.version.version : null;
-  props.yarnVersion = crowi.runtimeVersions.versions.yarn ? crowi.runtimeVersions.versions.yarn.version.version : null;
-  props.installedPlugins = pluginUtils.listPlugins();
-  props.envVars = await ConfigLoader.getEnvVarsForDisplay(true);
-  props.isAclEnabled = aclService.isAclEnabled();
-
-  props.isSearchServiceConfigured = searchService.isConfigured;
-  props.isSearchServiceReachable = searchService.isReachable;
-
-  props.isMailerSetup = mailService.isMailerSetup;
-
-  props.auditLogEnabled = crowi.configManager.getConfig('crowi', 'app:auditLogEnabled');
-  props.auditLogAvailableActions = activityService.getAvailableActions(false);
-  props.customizeTitle = crowi.configManager.getConfig('crowi', 'customize:title');
-}
-
-/**
- * for Server Side Translations
- * @param context
- * @param props
- * @param namespacesRequired
- */
-async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
-  // preload all languages because of language lists in user setting
-  const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired, true);
-  props._nextI18Next = nextI18NextConfig._nextI18Next;
-}
-
-export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
-  const req: CrowiRequest = context.req as CrowiRequest;
-
-  const { user } = req;
-  const result = await getServerSideCommonProps(context);
-
-  // check for presence
-  // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
-  if (!('props' in result)) {
-    throw new Error('invalid getSSP result');
-  }
-  const props: Props = result.props as Props;
-  if (user != null) {
-    // props.currentUser = JSON.stringify(user.toObject());
-    props.currentUser = JSON.stringify(user);
-  }
-
-  injectServerConfigurations(context, props);
-  await injectNextI18NextConfigurations(context, props, ['admin', 'commons']);
-
-  return {
-    props,
-  };
-};
-
-export default AdminPage;

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

@@ -0,0 +1,46 @@
+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 { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
+
+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 AdminAppPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+  useIsMaintenanceMode(props.isMaintenanceMode);
+
+  const title = t('commons:headers.app_settings');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminAppContainer = new AdminAppContainer();
+    injectableContainers.push(adminAppContainer);
+  }
+
+  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/audit-log.page.tsx

@@ -0,0 +1,56 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { SupportedActionType } from '~/interfaces/activity';
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useAuditLogEnabled, useAuditLogAvailableActions } from '~/stores/context';
+
+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 & {
+  auditLogEnabled: boolean,
+  auditLogAvailableActions: SupportedActionType[],
+};
+
+
+const AdminAuditLogPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useAuditLogEnabled(props.auditLogEnabled);
+  useAuditLogAvailableActions(props.auditLogAvailableActions);
+
+  const title = t('audit_log_management.audit_log');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <AuditLogManagement />
+    </AdminLayout>
+  );
+
+};
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { activityService } = crowi;
+
+  props.auditLogEnabled = crowi.configManager.getConfig('crowi', 'app:auditLogEnabled');
+  props.auditLogAvailableActions = activityService.getAvailableActions(false);
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminAuditLogPage;

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

@@ -0,0 +1,62 @@
+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 { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useCustomizeTitle } from '~/stores/context';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const CustomizeSettingContents = dynamic(() => import('~/components/Admin//Customize/Customize'), { ssr: false });
+
+
+type Props = CommonProps & {
+  customizeTitle: string,
+};
+
+
+const AdminCustomizeSettingsPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useCustomizeTitle(props.customizeTitle);
+
+  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} >
+        <CustomizeSettingContents />
+      </AdminLayout>
+    </Provider>
+  );
+};
+
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+
+  props.customizeTitle = crowi.configManager.getConfig('crowi', 'customize:title');
+};
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminCustomizeSettingsPage;

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

@@ -0,0 +1,45 @@
+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 { 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 });
+
+
+const AdminExportDataArchivePage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  const title = t('export_management.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 AdminExportDataArchivePage;

packages/app/src/pages/admin/global-notification/new.page.tsx

@@ -0,0 +1,46 @@
+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 { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { retrieveServerSideProps } from '../../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const ManageGlobalNotification = dynamic(() => import('~/components/Admin/Notification/ManageGlobalNotification'), { ssr: false });
+
+
+const AdminGlobalNotificationNewPage: NextPage<CommonProps> = (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} >
+        <ManageGlobalNotification />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminGlobalNotificationNewPage;

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

@@ -0,0 +1,47 @@
+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 { 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 });
+
+
+const AdminDataImportPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  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 AdminDataImportPage;

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

@@ -0,0 +1,74 @@
+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 AdminHomeContainer from '~/client/services/AdminHomeContainer';
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import PluginUtils from '~/server/plugins/plugin-utils';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const AdminHome = dynamic(() => import('~/components/Admin/AdminHome/AdminHome'), { ssr: false });
+
+
+type Props = CommonProps & {
+  nodeVersion: string,
+  npmVersion: string,
+  yarnVersion: string,
+  installedPlugins: any,
+};
+
+
+const AdminHomePage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+
+  const title = t('wiki_management_home_page');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminHomeContainer = new AdminHomeContainer();
+
+    injectableContainers.push(adminHomeContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <AdminHome
+          nodeVersion={props.nodeVersion}
+          npmVersion={props.npmVersion}
+          yarnVersion={props.yarnVersion}
+          installedPlugins={props.installedPlugins}
+        />
+      </AdminLayout>
+    </Provider>
+  );
+};
+
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const pluginUtils = new PluginUtils();
+
+  props.nodeVersion = crowi.runtimeVersions.versions.node ? crowi.runtimeVersions.versions.node.version.version : null;
+  props.npmVersion = crowi.runtimeVersions.versions.npm ? crowi.runtimeVersions.versions.npm.version.version : null;
+  props.yarnVersion = crowi.runtimeVersions.versions.yarn ? crowi.runtimeVersions.versions.yarn.version.version : null;
+  props.installedPlugins = pluginUtils.listPlugins();
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminHomePage;

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

@@ -0,0 +1,47 @@
+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 { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const MarkDownSettingContents = dynamic(() => import('~/components/Admin/MarkdownSetting/MarkDownSettingContents'), { ssr: false });
+
+
+const AdminMarkdownPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  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 AdminMarkdownPage;

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

@@ -0,0 +1,48 @@
+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 { 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 });
+
+
+const AdminExternalNotificationPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  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 AdminExternalNotificationPage;

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

@@ -0,0 +1,52 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useIsSearchServiceReachable } from '~/stores/context';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const FullTextSearchManagement = dynamic(
+  () => import('~/components/Admin//FullTextSearchManagement').then(mod => mod.FullTextSearchManagement), { ssr: false },
+);
+
+
+type Props = CommonProps & {
+  isSearchServiceReachable: boolean,
+};
+
+
+const AdminFullTextSearchManagementPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useIsSearchServiceReachable(props.isSearchServiceReachable);
+
+  const title = t('full_text_search_management.full_text_search_management');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <FullTextSearchManagement />
+    </AdminLayout>
+  );
+};
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { searchService } = crowi;
+
+  props.isSearchServiceReachable = searchService.isReachable;
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminFullTextSearchManagementPage;

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

@@ -0,0 +1,98 @@
+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 AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
+import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
+import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
+import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
+import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
+import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
+import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
+import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
+import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useIsMailerSetup, useSiteUrl } from '~/stores/context';
+
+import { retrieveServerSideProps } from '../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const SecurityManagement = dynamic(() => import('~/components/Admin/Security/SecurityManagement'), { ssr: false });
+
+
+type Props = CommonProps & {
+  isMailerSetup: boolean,
+  siteUrl: string,
+};
+
+
+const AdminSecuritySettingsPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useSiteUrl(props.siteUrl);
+  useIsMailerSetup(props.isMailerSetup);
+
+
+  const title = t('security_settings.security_settings');
+  const adminSecurityContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminSecuritySettingElem = document.getElementById('admin-security-setting');
+
+    if (adminSecuritySettingElem != null) {
+      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 (
+    <Provider inject={[...adminSecurityContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <SecurityManagement />
+      </AdminLayout>
+    </Provider>
+  );
+};
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { appService, mailService } = crowi;
+
+  props.siteUrl = appService.getSiteUrl();
+  props.isMailerSetup = mailService.isMailerSetup;
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminSecuritySettingsPage;

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

@@ -0,0 +1,47 @@
+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 { 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 });
+
+
+const AdminLegacySlackIntegrationPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  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 AdminLegacySlackIntegrationPage;

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

@@ -0,0 +1,52 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useSiteUrl } from '~/stores/context';
+
+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 & {
+  siteUrl: string
+};
+
+
+const AdminSlackIntegrationPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useSiteUrl(props.siteUrl);
+
+  const title = t('slack_integration.slack_integration');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <SlackIntegration />
+    </AdminLayout>
+  );
+};
+
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { appService } = crowi;
+
+  props.siteUrl = appService.getSiteUrl();
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminSlackIntegrationPage;

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

@@ -0,0 +1,50 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useIsAclEnabled } from '~/stores/context';
+
+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 & {
+  isAclEnabled: boolean
+};
+
+
+const AdminUserGroupPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useIsAclEnabled(props.isAclEnabled);
+
+  const title = t('user_group_management.user_group_management');
+
+  return (
+    <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+      <UserGroupPage />
+    </AdminLayout>
+  );
+};
+
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { aclService } = crowi;
+
+  props.isAclEnabled = aclService.isAclEnabled();
+};
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminUserGroupPage;

packages/app/src/pages/admin/users/external-accounts.page.tsx

@@ -0,0 +1,50 @@
+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 AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const ManageExternalAccount = dynamic(() => import('~/components/Admin/ManageExternalAccount'), { ssr: false });
+
+
+const AdminUserManagementPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+
+  const title = t('user_management.external_account');
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
+
+    injectableContainers.push(
+      adminExternalAccountsContainer,
+    );
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={useCustomTitle(props, title)} componentTitle={title} >
+        <ManageExternalAccount />
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminUserManagementPage;

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

@@ -0,0 +1,69 @@
+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 { CrowiRequest } from '~/interfaces/crowi-request';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useCurrentUser, useIsMailerSetup } from '~/stores/context';
+
+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,
+  isMailerSetup: boolean,
+};
+
+
+const AdminUserManagementPage: NextPage<Props> = (props) => {
+  const { t } = useTranslation('admin');
+  useCurrentUser(props.currentUser != null ? JSON.parse(props.currentUser) : null);
+  useIsMailerSetup(props.isMailerSetup);
+
+  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>
+  );
+
+};
+
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi, user } = req;
+  const { mailService } = crowi;
+
+  if (user != null) {
+    props.currentUser = JSON.stringify(user);
+  }
+  props.isMailerSetup = mailService.isMailerSetup;
+};
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context, injectServerConfigurations);
+  return props;
+};
+
+
+export default AdminUserManagementPage;

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

@@ -47,7 +47,7 @@ const MaintenancePage: NextPage<CommonProps> = (props: Props) => {
               && (
                 <p>
                   <i className="icon-arrow-right"></i>
-                  <a className="btn btn-link" href="/admin/home">{ t('maintenance_mode.admin_page') }</a>
+                  <a className="btn btn-link" href="/admin">{ t('maintenance_mode.admin_page') }</a>
                 </p>
               )}
                 {props.currentUser != null

packages/app/src/utils/admin-page-util.ts

@@ -0,0 +1,41 @@
+import { GetServerSidePropsContext } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
+import {
+  getServerSideCommonProps, getNextI18NextConfig,
+} from '~/pages/utils/commons';
+
+/**
+ * for Server Side Translations
+ * @param context
+ * @param props
+ * @param namespacesRequired
+ */
+async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props, namespacesRequired?: string[] | undefined): Promise<void> {
+  // preload all languages because of language lists in user setting
+  const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired, true);
+  props._nextI18Next = nextI18NextConfig._nextI18Next;
+}
+
+
+export const retrieveServerSideProps: any = async(
+    context: GetServerSidePropsContext, injectServerConfigurations?:(context: GetServerSidePropsContext, props) => Promise<void>,
+) => {
+  const result = await getServerSideCommonProps(context);
+
+  // check for presence
+  // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
+  if (!('props' in result)) {
+    throw new Error('invalid getSSP result');
+  }
+
+  const props = result.props;
+  if (injectServerConfigurations != null) {
+    await injectServerConfigurations(context, props);
+  }
+  await injectNextI18NextConfigurations(context, props, ['admin', 'commons']);
+
+  return {
+    props,
+  };
+};