pass AppSettingsPageContents as props

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { isClient, objectIdUtils } from '@growi/core';
 import {
@@ -59,7 +59,7 @@ const AppSettingsPageContents = dynamic(() => import('./App/AppSettingsPageConte
 // const ManageExternalAccount = dynamic(() => import('./ManageExternalAccount'), { ssr: false });
 // const ElasticsearchManagement = dynamic(() => import('./ElasticsearchManagement/ElasticsearchManagement'), { ssr: false });
 // const UserGroupDetailPage = dynamic(() => import('./UserGroupDetail/UserGroupDetailPage'), { ssr: false });
-// const AdminLayout = dynamic(() => import('../Layout/AdminLayout'), { ssr: false });
+const AdminLayout = dynamic(() => import('../Layout/AdminLayout'), { ssr: false });
 // // named export
 // const UserGroupPage = dynamic(() => import('./UserGroup/UserGroupPage').then(mod => mod.UserGroupPage), { ssr: false });
 // const AuditLogManagement = dynamic(() => import('./AuditLogManagement').then(mod => mod.AuditLogManagement), { ssr: false });
@@ -69,6 +69,9 @@ const AppSettingsPageContents = dynamic(() => import('./App/AppSettingsPageConte
 type Props = CommonProps & {
   currentUser: any,
 
+  title: string
+  component: ReactNode,
+
   nodeVersion: string,
   npmVersion: string,
   yarnVersion: string,
@@ -272,11 +275,9 @@ const AdminPage: NextPage<Props> = (props: Props) => {
 
   return (
     <Provider inject={[...injectableContainers, ...adminSecurityContainers]}>
-      {/* <AdminLayout title={useCustomTitle(props, targetPage.title)} selectedNavOpt={firstPath} componentTitle={targetPage.title}> */}
-      {/* <AdminLayout title={useCustomTitle(props, t('commons:headers.app_settings'))} selectedNavOpt={firstPath} componentTitle={targetPage.title}> */}
-      {/* {targetPage.component} */}
-      <AppSettingsPageContents />
-      {/* </AdminLayout> */}
+      <AdminLayout title={useCustomTitle(props, props.title)} componentTitle={props.title} >
+        {props.component}
+      </AdminLayout>
     </Provider>
   );
 };

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/app.page.tsx

@@ -1,6 +1,8 @@
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
 
 import AdminPage from '~/components/Admin/AdminPage';
 import { SupportedActionType } from '~/interfaces/activity';
@@ -8,6 +10,8 @@ import { CommonProps } from '~/pages/utils/commons';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
 
+const AppSettingsPageContents = dynamic(() => import('~/components/Admin/App/AppSettingsPageContents'), { ssr: false });
+
 
 type Props = CommonProps & {
   currentUser: any,
@@ -30,7 +34,8 @@ type Props = CommonProps & {
 
 
 const AdminAppPage: NextPage<Props> = (props) => {
-  return <AdminPage {...props}/>;
+  const { t } = useTranslation();
+  return <AdminPage title={t('commons:headers.app_settings')} component={<AppSettingsPageContents />} {...props}/>;
 
 };