refs 125405: remove ExternalUserGroupUserTable

apps/app/src/components/Admin/ExternalUserGroupDetail/ExternalUserGroupDetail.tsx

@@ -22,9 +22,9 @@ import {
 import { ExternalUserGroupEditModal } from '../UserGroup/ExternalUserGroup/ExternalUserGroupEditModal';
 import { UserGroupDeleteModal } from '../UserGroup/UserGroupDeleteModal';
 import { UserGroupTable } from '../UserGroup/UserGroupTable';
+import { UserGroupUserTable } from '../UserGroupDetail/UserGroupUserTable';
 
 import { ExternalUserGroupEditForm } from './ExternalUserGroupEditForm';
-import { ExternalUserGroupUserTable } from './ExternalUserGroupUserTable';
 
 import styles from '../UserGroupDetail/UserGroupDetailPage.module.scss';
 
@@ -174,8 +174,9 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
         }/>
       </div>
       <h2 className="admin-setting-header mt-4">{t('user_group_management.user_list')}</h2>
-      <ExternalUserGroupUserTable
-        externalUserGroupRelations={externalUserGroupRelations}
+      <UserGroupUserTable
+        userGroupRelations={externalUserGroupRelations}
+        isExternalGroup={true}
       />
 
       <h2 className="admin-setting-header mt-4">{t('user_group_management.child_group_list')}</h2>
@@ -194,7 +195,7 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
         onEdit={showUpdateModal}
         onDelete={showDeleteModal}
         userGroupRelations={childUserGroupRelations}
-        isExternal={true}
+        isExternalGroup={true}
       />
 
       <UserGroupDeleteModal

apps/app/src/components/Admin/ExternalUserGroupDetail/ExternalUserGroupUserTable.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
-import dateFnsFormat from 'date-fns/format';
-import { useTranslation } from 'next-i18next';
-
-import type { IUserGroupRelationHasIdPopulatedUser } from '~/interfaces/user-group-response';
-
-type Props = {
-  externalUserGroupRelations: IUserGroupRelationHasIdPopulatedUser[] | undefined,
-}
-
-export const ExternalUserGroupUserTable = ({
-  externalUserGroupRelations,
-}: Props): JSX.Element => {
-  const { t } = useTranslation('admin');
-
-  return (
-    <table className="table table-bordered table-user-list">
-      <thead>
-        <tr>
-          <th style={{ width: '100px' }}>#</th>
-          <th>
-            {t('username')}
-          </th>
-          <th>{t('Name')}</th>
-          <th style={{ width: '100px' }}>{t('Created')}</th>
-          <th style={{ width: '160px' }}>{t('last_login')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {externalUserGroupRelations != null && externalUserGroupRelations.map((relation) => {
-          const { relatedUser } = relation;
-
-          return (
-            <tr key={relation._id}>
-              <td>
-                <UserPicture user={relatedUser} />
-              </td>
-              <td>
-                <strong>{relatedUser.username}</strong>
-              </td>
-              <td>{relatedUser.name}</td>
-              <td>{relatedUser.createdAt ? dateFnsFormat(new Date(relatedUser.createdAt), 'yyyy-MM-dd') : ''}</td>
-              <td>{relatedUser.lastLoginAt ? dateFnsFormat(new Date(relatedUser.lastLoginAt), 'yyyy-MM-dd HH:mm:ss') : ''}</td>
-            </tr>
-          );
-        })}
-
-      </tbody>
-    </table>
-  );
-};

apps/app/src/components/Admin/UserGroup/ExternalUserGroup/ExternalUserGroupManagement.tsx

@@ -136,7 +136,7 @@ export const ExternalGroupManagement: FC = () => {
       onEdit={showUpdateModal}
       onDelete={showDeleteModal}
       userGroupRelations={externalUserGroupRelations}
-      isExternal={true}
+      isExternalGroup={true}
     />
 
     <ExternalUserGroupEditModal

apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -16,7 +16,7 @@ type Props = {
   onEdit?: (userGroup: IUserGroupHasId) => void | Promise<void>,
   onRemove?: (userGroup: IUserGroupHasId) => void | Promise<void>,
   onDelete?: (userGroup: IUserGroupHasId) => void | Promise<void>,
-  isExternal?: boolean
+  isExternalGroup?: boolean
 };
 
 /*
@@ -62,7 +62,7 @@ export const UserGroupTable: FC<Props> = ({
   onEdit,
   onRemove,
   onDelete,
-  isExternal = false,
+  isExternalGroup = false,
 }: Props) => {
   const { t } = useTranslation('admin');
 
@@ -127,7 +127,7 @@ export const UserGroupTable: FC<Props> = ({
     onDelete(userGroup);
   };
 
-  const groupDetailPageName = isExternal ? 'external-user-group-detail' : 'user-group-detail';
+  const groupDetailPageName = isExternalGroup ? 'external-user-group-detail' : 'user-group-detail';
 
   /*
    * useEffect

apps/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -25,7 +25,7 @@ import {
 import styles from './UserGroupDetailPage.module.scss';
 
 const UserGroupPageList = dynamic(() => import('./UserGroupPageList'), { ssr: false });
-const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable'), { ssr: false });
+const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable').then(mod => mod.UserGroupUserTable), { ssr: false });
 
 const UserGroupUserModal = dynamic(() => import('./UserGroupUserModal'), { ssr: false });
 

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -10,15 +10,15 @@ type Props = {
   userGroupRelations: IUserGroupRelationHasIdPopulatedUser[] | undefined,
   onClickRemoveUserBtn: (username: string) => Promise<void>,
   onClickPlusBtn: () => void,
+  isExternalGroup?: false
+} | {
+  userGroupRelations: IUserGroupRelationHasIdPopulatedUser[] | undefined,
+  isExternalGroup: true
 }
 
 export const UserGroupUserTable = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
 
-  const {
-    userGroupRelations, onClickRemoveUserBtn, onClickPlusBtn,
-  } = props;
-
   return (
     <table className="table table-bordered table-user-list">
       <thead>
@@ -30,11 +30,11 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
           <th>{t('Name')}</th>
           <th style={{ width: '100px' }}>{t('Created')}</th>
           <th style={{ width: '160px' }}>{t('last_login')}</th>
-          <th style={{ width: '70px' }}></th>
+          {!props.isExternalGroup && <th style={{ width: '70px' }}></th>}
         </tr>
       </thead>
       <tbody>
-        {userGroupRelations != null && userGroupRelations.map((relation) => {
+        {props.userGroupRelations != null && props.userGroupRelations.map((relation) => {
           const { relatedUser } = relation;
 
           return (
@@ -48,7 +48,7 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
               <td>{relatedUser.name}</td>
               <td>{relatedUser.createdAt ? dateFnsFormat(new Date(relatedUser.createdAt), 'yyyy-MM-dd') : ''}</td>
               <td>{relatedUser.lastLoginAt ? dateFnsFormat(new Date(relatedUser.lastLoginAt), 'yyyy-MM-dd HH:mm:ss') : ''}</td>
-              <td>
+              {!props.isExternalGroup && <td>
                 <div className="btn-group admin-user-menu">
                   <button
                     type="button"
@@ -62,21 +62,21 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
                     <button
                       className="dropdown-item"
                       type="button"
-                      onClick={() => onClickRemoveUserBtn(relatedUser.username)}
+                      onClick={() => props.onClickRemoveUserBtn(relatedUser.username)}
                     >
                       <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_group_management.remove_from_group')}
                     </button>
                   </div>
                 </div>
-              </td>
+              </td>}
             </tr>
           );
         })}
 
-        <tr>
+        {!props.isExternalGroup && <tr>
           <td></td>
           <td className="text-center">
-            <button className="btn btn-outline-secondary" type="button" onClick={onClickPlusBtn}>
+            <button className="btn btn-outline-secondary" type="button" onClick={props.onClickPlusBtn}>
               <i className="ti ti-plus"></i>
             </button>
           </td>
@@ -84,11 +84,9 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
           <td></td>
           <td></td>
           <td></td>
-        </tr>
+        </tr>}
 
       </tbody>
     </table>
   );
 };
-
-export default UserGroupUserTable;

apps/app/src/server/service/user-group.ts

@@ -117,9 +117,9 @@ class UserGroupService {
     return userGroup.save();
   }
 
-  async removeCompletelyByRootGroupId(deleteRootGroupId, action, transferToUserGroupId, user, isExternal = false) {
-    const userGroupModel = isExternal ? ExternalUserGroup : UserGroup;
-    const userGroupRelationModel = isExternal ? ExternalUserGroupRelation : UserGroupRelation;
+  async removeCompletelyByRootGroupId(deleteRootGroupId, action, transferToUserGroupId, user, isExternalGroup = false) {
+    const userGroupModel = isExternalGroup ? ExternalUserGroup : UserGroup;
+    const userGroupRelationModel = isExternalGroup ? ExternalUserGroupRelation : UserGroupRelation;
 
     const rootGroup = await userGroupModel.findById(deleteRootGroupId);
     if (rootGroup == null) {