refs 125405: rdeleteExternalUserGroupEdittModal

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

@@ -16,6 +16,7 @@ type Props = {
   onClickSubmit?: (userGroupData: Partial<IUserGroupHasId>) => Promise<IUserGroupHasId | void>
   isShow?: boolean
   onHide?: () => Promise<void> | void
+  isExternalGroup?: boolean
 };
 
 export const UserGroupModal: FC<Props> = (props: Props) => {
@@ -23,7 +24,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
   const { t } = useTranslation('admin');
 
   const {
-    userGroup, buttonLabel, onClickSubmit, isShow, onHide,
+    userGroup, buttonLabel, onClickSubmit, isShow, onHide, isExternalGroup = false,
   } = props;
 
   /*
@@ -76,7 +77,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
         </ModalHeader>
 
         <ModalBody>
-          <div className="form-group">
+          {!isExternalGroup && <div className="form-group">
             <label htmlFor="name">
               {t('user_group_management.group_name')}
             </label>
@@ -89,13 +90,18 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
               onChange={onChangeNameHandler}
               required
             />
-          </div>
+          </div>}
 
           <div className="form-group">
             <label htmlFor="description">
               {t('Description')}
             </label>
             <textarea className="form-control" name="description" value={currentDescription} onChange={onChangeDescriptionHandler} />
+            {isExternalGroup && <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.description_form_detail')}
+              </small>
+            </p>}
           </div>
 
           {/* TODO 90732: Add a drop-down to show selectable parents */}

apps/app/src/features/external-user-group/client/components/ExternalUserGroup/ExternalUserGroupEditModal.tsx

@@ -1,84 +0,0 @@
-import React, {
-  FC, useState, useEffect, useCallback,
-} from 'react';
-
-import { useTranslation } from 'next-i18next';
-import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
-
-import { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
-
-type Props = {
-  externalUserGroup?: IExternalUserGroupHasId,
-  onClickSubmit?: (userGroupData: Partial<IExternalUserGroupHasId>) => Promise<IExternalUserGroupHasId | void>
-  isOpen?: boolean
-  onHide?: () => Promise<void> | void
-};
-
-export const ExternalUserGroupEditModal: FC<Props> = (props: Props) => {
-
-  const { t } = useTranslation('admin');
-
-  const {
-    externalUserGroup, onClickSubmit, isOpen, onHide,
-  } = props;
-
-  const [currentDescription, setDescription] = useState('');
-
-  const onChangeDescriptionHandler = useCallback((e) => {
-    setDescription(e.target.value);
-  }, []);
-
-  const onSubmitHandler = useCallback(async(e) => {
-    e.preventDefault(); // no reload
-
-    if (onClickSubmit == null) {
-      return;
-    }
-
-    await onClickSubmit({
-      _id: externalUserGroup?._id,
-      description: currentDescription,
-    });
-  }, [externalUserGroup, currentDescription, onClickSubmit]);
-
-  // componentDidMount
-  useEffect(() => {
-    if (externalUserGroup != null) {
-      setDescription(externalUserGroup.description);
-    }
-  }, [externalUserGroup]);
-
-  return (
-    <Modal className="modal-md" isOpen={isOpen} toggle={onHide}>
-      <form onSubmit={onSubmitHandler}>
-        <ModalHeader tag="h4" toggle={onHide} className="bg-primary text-light">
-          {t('user_group_management.basic_info')}
-        </ModalHeader>
-
-        <ModalBody>
-          <div className="form-group">
-            <label htmlFor="description">
-              {t('Description')}
-            </label>
-            <textarea className="form-control" name="description" value={currentDescription} onChange={onChangeDescriptionHandler} />
-            <p className="form-text text-muted">
-              <small>
-                {t('external_user_group.description_form_detail')}
-              </small>
-            </p>
-          </div>
-        </ModalBody>
-
-        <ModalFooter>
-          <div className="form-group">
-            <button type="submit" className="btn btn-primary">
-              {t('Update')}
-            </button>
-          </div>
-        </ModalFooter>
-      </form>
-    </Modal>
-  );
-};

apps/app/src/features/external-user-group/client/components/ExternalUserGroup/ExternalUserGroupManagement.tsx

@@ -8,6 +8,7 @@ import { TabContent, TabPane } from 'reactstrap';
 import { apiv3Delete, apiv3Put } from '~/client/util/apiv3-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { UserGroupDeleteModal } from '~/components/Admin/UserGroup/UserGroupDeleteModal';
+import { UserGroupModal } from '~/components/Admin/UserGroup/UserGroupModal';
 import { UserGroupTable } from '~/components/Admin/UserGroup/UserGroupTable';
 import CustomNav from '~/components/CustomNavigation/CustomNav';
 import {
@@ -18,8 +19,6 @@ import {
 import { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 import { useIsAclEnabled } from '~/stores/context';
 
-
-import { ExternalUserGroupEditModal } from './ExternalUserGroupEditModal';
 import { LdapGroupManagement } from './LdapGroupManagement';
 
 export const ExternalGroupManagement: FC = () => {
@@ -143,11 +142,13 @@ export const ExternalGroupManagement: FC = () => {
       isExternalGroup={true}
     />
 
-    <ExternalUserGroupEditModal
-      externalUserGroup={selectedExternalUserGroup}
+    <UserGroupModal
+      userGroup={selectedExternalUserGroup}
+      buttonLabel={t('Update')}
       onClickSubmit={updateExternalUserGroup}
-      isOpen={isUpdateModalShown}
+      isShow={isUpdateModalShown}
       onHide={hideUpdateModal}
+      isExternalGroup={true}
     />
 
     <UserGroupDeleteModal

apps/app/src/features/external-user-group/client/components/ExternalUserGroupDetail/ExternalUserGroupDetail.tsx

@@ -12,10 +12,10 @@ import {
 } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { UserGroupDeleteModal } from '~/components/Admin/UserGroup/UserGroupDeleteModal';
+import { UserGroupModal } from '~/components/Admin/UserGroup/UserGroupModal';
 import { UserGroupTable } from '~/components/Admin/UserGroup/UserGroupTable';
 import styles from '~/components/Admin/UserGroupDetail/UserGroupDetailPage.module.scss';
 import { UserGroupUserTable } from '~/components/Admin/UserGroupDetail/UserGroupUserTable';
-import { ExternalUserGroupEditModal } from '~/features/external-user-group/client/components/ExternalUserGroup/ExternalUserGroupEditModal';
 import {
   useSWRxAncestorExternalUserGroups,
   useSWRxChildExternalUserGroupList, useSWRxExternalUserGroup, useSWRxExternalUserGroupRelationList, useSWRxExternalUserGroupRelations,
@@ -185,11 +185,13 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
 
       <h2 className="admin-setting-header mt-4">{t('user_group_management.child_group_list')}</h2>
 
-      <ExternalUserGroupEditModal
-        externalUserGroup={selectedExternalUserGroup}
+      <UserGroupModal
+        userGroup={selectedExternalUserGroup}
+        buttonLabel={t('Update')}
         onClickSubmit={updateChildExternalUserGroup}
-        isOpen={isUpdateModalShown}
+        isShow={isUpdateModalShown}
         onHide={hideUpdateModal}
+        isExternalGroup={true}
       />
 
       <UserGroupTable