Clean code

packages/app/src/client/services/AdminUserGroupDetailContainer.js

@@ -11,7 +11,7 @@ const logger = loggerFactory('growi:services:AdminUserGroupDetailContainer');
  * Service container for admin user group detail page (UserGroupDetailPage.jsx)
  * @extends {Container} unstated Container
  */
-export default class AdminAdminUserGroupDetailContainer extends Container {
+export default class AdminUserGroupDetailContainer extends Container {
 
   constructor(appContainer) {
     super();
@@ -27,6 +27,7 @@ export default class AdminAdminUserGroupDetailContainer extends Container {
     this.state = {
       // TODO: [SPA] get userGroup from props
       userGroup: JSON.parse(rootElem.getAttribute('data-user-group')),
+      childUserGroups: JSON.parse(rootElem.getAttribute('data-child-user-groups')), // TODO 85062: pass data via swig
       userGroupRelations: [],
       relatedPages: [],
       isUserGroupUserModalOpen: false,

packages/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { TFunction } from 'i18next';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -17,8 +16,7 @@ import Xss from '~/services/xss';
  * @class GrantSelector
  * @extends {React.Component}
  */
-type Props = {
-  t: TFunction, // i18next
+interface Props extends WithTranslation {
   appContainer: AppContainer,
 
   userGroups: IUserGroup[],
@@ -27,7 +25,8 @@ type Props = {
   isShow: boolean,
   onShow?: (group: IUserGroup) => Promise<void> | void,
   onHide?: () => Promise<void> | void,
-};
+}
+
 type State = {
   actionName: string,
   transferToUserGroupId: string,

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx → packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import UserGroupEditForm from './UserGroupEditForm';
 import UserGroupUserTable from './UserGroupUserTable';
@@ -9,7 +8,9 @@ import UserGroupPageList from './UserGroupPageList';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 
-class UserGroupDetailPage extends React.Component {
+interface Props extends WithTranslation {};
+
+class UserGroupDetailPage extends React.Component<Props> {
 
   render() {
     const { t } = this.props;
@@ -20,6 +21,7 @@ class UserGroupDetailPage extends React.Component {
           <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
           {t('admin:user_group_management.back_to_list')}
         </a>
+        {/* TODO 85062: Link to the ancestors group */}
         <div className="mt-4 form-box">
           <UserGroupEditForm />
         </div>
@@ -36,14 +38,10 @@ class UserGroupDetailPage extends React.Component {
 
 }
 
-UserGroupDetailPage.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
 
 /**
  * Wrapper component for using unstated
  */
-const UserGroupDetailPageWrapper = withUnstatedContainers(UserGroupDetailPage, [AppContainer]);
+const UserGroupDetailPageWrapper = withUnstatedContainers(withTranslation()(UserGroupDetailPage), [AppContainer]);
 
-export default withTranslation()(UserGroupDetailPageWrapper);
+export default UserGroupDetailPageWrapper;