refs 125405: delete ExternalUserGroupEditForm

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

@@ -11,6 +11,7 @@ type Props = {
   selectableParentUserGroups?: IUserGroupHasId[],
   submitButtonLabel: string;
   onSubmit: (targetGroup: IUserGroupHasId, userGroupData: Partial<IUserGroupHasId>) => Promise<void>
+  isExternalGroup?: boolean
 };
 
 export const UserGroupForm: FC<Props> = (props: Props) => {
@@ -18,7 +19,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
   const { t } = useTranslation('admin');
 
   const {
-    userGroup, parentUserGroup, selectableParentUserGroups, submitButtonLabel, onSubmit,
+    userGroup, parentUserGroup, selectableParentUserGroups, submitButtonLabel, onSubmit, isExternalGroup = false,
   } = props;
   /*
    * State
@@ -72,16 +73,17 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           <label htmlFor="name" className="col-md-2 col-form-label">
             {t('user_group_management.group_name')}
           </label>
-          <div className="col-md-4">
-            <input
-              className="form-control"
-              type="text"
-              name="name"
-              placeholder={t('user_group_management.group_example')}
-              value={currentName}
-              onChange={onChangeNameHandler}
-              required
-            />
+          <div className="col-md-4 my-auto">
+            {isExternalGroup ? currentName
+              : <input
+                className="form-control"
+                type="text"
+                name="name"
+                placeholder={t('user_group_management.group_example')}
+                value={currentName}
+                onChange={onChangeNameHandler}
+                required
+              />}
           </div>
         </div>
 
@@ -98,47 +100,48 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           <label htmlFor="parent" className="col-md-2 col-form-label">
             {t('user_group_management.parent_group')}
           </label>
-          <div className="dropdown col-md-4">
-            <button
-              type="button"
-              id="dropdownMenuButton"
-              data-toggle="dropdown"
-              className={`
-                btn btn-outline-secondary dropdown-toggle mb-3 ${isSelectableParentUserGroups ? '' : 'disabled'}
-              `}
-            >
-              {selectedParent?.name ?? t('user_group_management.select_parent_group')}
-            </button>
-            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              {
-                isSelectableParentUserGroups && (
-                  <>
-                    {
-                      selectableParentUserGroups.map(userGroup => (
-                        <button
-                          key={userGroup._id}
-                          type="button"
-                          className={`dropdown-item ${selectedParent?._id === userGroup._id ? 'active' : ''}`}
-                          onClick={() => onChangeParerentButtonHandler(userGroup)}
-                        >
-                          {userGroup.name}
-                        </button>
-                      ))
-                    }
-                  </>
-                )
-              }
-
-              <div className="dropdown-divider" />
-
+          {isExternalGroup ? <div className="col-md-4 my-auto">{parentUserGroup?.name}</div>
+            : <div className="dropdown col-md-4">
               <button
-                className="dropdown-item"
                 type="button"
-                onClick={() => { setSelectedParent(undefined) }}
-              >{t('user_group_management.release_parent_group')}
+                id="dropdownMenuButton"
+                data-toggle="dropdown"
+                className={`
+                btn btn-outline-secondary dropdown-toggle mb-3 ${isSelectableParentUserGroups ? '' : 'disabled'}
+              `}
+              >
+                {selectedParent?.name ?? t('user_group_management.select_parent_group')}
               </button>
-            </div>
-          </div>
+              <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                {
+                  isSelectableParentUserGroups && (
+                    <>
+                      {
+                        selectableParentUserGroups.map(userGroup => (
+                          <button
+                            key={userGroup._id}
+                            type="button"
+                            className={`dropdown-item ${selectedParent?._id === userGroup._id ? 'active' : ''}`}
+                            onClick={() => onChangeParerentButtonHandler(userGroup)}
+                          >
+                            {userGroup.name}
+                          </button>
+                        ))
+                      }
+                    </>
+                  )
+                }
+
+                <div className="dropdown-divider" />
+
+                <button
+                  className="dropdown-item"
+                  type="button"
+                  onClick={() => { setSelectedParent(undefined) }}
+                >{t('user_group_management.release_parent_group')}
+                </button>
+              </div>
+            </div>}
         </div>
 
         <div className="form-group row">

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

@@ -12,6 +12,7 @@ import {
 } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { UserGroupDeleteModal } from '~/components/Admin/UserGroup/UserGroupDeleteModal';
+import { UserGroupForm } from '~/components/Admin/UserGroup/UserGroupForm';
 import { UserGroupModal } from '~/components/Admin/UserGroup/UserGroupModal';
 import { UserGroupTable } from '~/components/Admin/UserGroup/UserGroupTable';
 import styles from '~/components/Admin/UserGroupDetail/UserGroupDetailPage.module.scss';
@@ -23,10 +24,6 @@ import {
 import { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 import { useIsAclEnabled } from '~/stores/context';
 
-
-import { ExternalUserGroupEditForm } from './ExternalUserGroupEditForm';
-
-
 type Props = {
   externalUserGroupId: string,
 }
@@ -128,6 +125,18 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
     }
   }, [mutateExternalChildUserGroups, setSelectedExternalUserGroup, setDeleteModalShown]);
 
+  const onClickSubmitForm = useCallback(async(targetGroup: IExternalUserGroupHasId, userGroupData: IExternalUserGroupHasId) => {
+    try {
+      await apiv3Put(`/external-user-groups/${targetGroup._id}`, {
+        description: userGroupData.description,
+      });
+      toastSuccess(t('toaster.update_successed', { target: t('ExternalUserGroup'), ns: 'commons' }));
+    }
+    catch {
+      toastError(t('toaster.update_failed', { target: t('ExternalUserGroup'), ns: 'commons' }));
+    }
+  }, [t]);
+
   /*
    * Dependencies
    */
@@ -172,10 +181,14 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
       </nav>
 
       <div className="mt-4 form-box">
-        <ExternalUserGroupEditForm externalUserGroup={currentExternalUserGroup} parent={
-          ancestorExternalUserGroups != null && ancestorExternalUserGroups.length > 0
-            ? ancestorExternalUserGroups[ancestorExternalUserGroups.length - 1] : undefined
-        }/>
+        <UserGroupForm
+          userGroup={currentExternalUserGroup}
+          parentUserGroup={ancestorExternalUserGroups != null && ancestorExternalUserGroups.length > 1
+            ? ancestorExternalUserGroups[ancestorExternalUserGroups.length - 2] : undefined}
+          submitButtonLabel={t('Update')}
+          onSubmit={onClickSubmitForm}
+          isExternalGroup={true}
+        />
       </div>
       <h2 className="admin-setting-header mt-4">{t('user_group_management.user_list')}</h2>
       <UserGroupUserTable

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

@@ -1,86 +0,0 @@
-import { FC, useCallback, useState } from 'react';
-
-import dateFnsFormat from 'date-fns/format';
-import { useTranslation } from 'react-i18next';
-
-import { apiv3Put } from '~/client/util/apiv3-client';
-import { toastError, toastSuccess } from '~/client/util/toastr';
-import { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
-
-type Props = {
-  externalUserGroup: IExternalUserGroupHasId,
-  parent?: IExternalUserGroupHasId,
-};
-
-export const ExternalUserGroupEditForm: FC<Props> = ({ externalUserGroup, parent }: Props) => {
-  const { t } = useTranslation('admin');
-
-  const [currentDescription, setDescription] = useState(externalUserGroup != null ? externalUserGroup.description : '');
-
-  const onSubmit = useCallback(async(e): Promise<void> => {
-    e.preventDefault();
-    try {
-      await apiv3Put(`/external-user-groups/${externalUserGroup._id}`, {
-        description: currentDescription,
-      });
-      toastSuccess(t('toaster.update_successed', { target: t('ExternalUserGroup'), ns: 'commons' }));
-    }
-    catch {
-      toastError(t('toaster.update_failed', { target: t('ExternalUserGroup'), ns: 'commons' }));
-    }
-  }, [t, currentDescription, externalUserGroup._id]);
-
-  return <form onSubmit={onSubmit}
-  >
-
-    <fieldset>
-      <h2 className="admin-setting-header">{t('user_group_management.basic_info')}</h2>
-
-      {
-        externalUserGroup?.createdAt != null && (
-          <div className="form-group row">
-            <p className="col-md-2 col-form-label">{t('Created')}</p>
-            <p className="col-md-4 my-auto">{dateFnsFormat(new Date(externalUserGroup.createdAt), 'yyyy-MM-dd')}</p>
-          </div>
-        )
-      }
-
-      <div className="form-group row">
-        <label htmlFor="name" className="col-md-2 col-form-label">
-          {t('user_group_management.group_name')}
-        </label>
-        <div className="col-md-4 my-auto">
-          {externalUserGroup.name}
-        </div>
-      </div>
-
-      <div className="form-group row">
-        <label htmlFor="description" className="col-md-2 col-form-label">
-          {t('Description')}
-        </label>
-        <div className="col-md-4">
-          <textarea className="form-control" name="description" value={currentDescription} onChange={(e) => {
-            setDescription(e.target.value);
-          }} />
-        </div>
-      </div>
-
-      <div className="form-group row">
-        <label htmlFor="parent" className="col-md-2 col-form-label">
-          {t('user_group_management.parent_group')}
-        </label>
-        <div className="col-md-4 my-auto">
-          {parent?.name}
-        </div>
-      </div>
-
-      <div className="form-group row">
-        <div className="offset-md-2 col-md-10">
-          <button type="submit" className="btn btn-primary">
-            {t('Update')}
-          </button>
-        </div>
-      </div>
-    </fieldset>
-  </form>;
-};

apps/app/src/pages/admin/user-group-detail/[userGroupId].page.tsx

@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import ExternalUserGroupDetailPage from '~/features/external-user-group/client/components/ExternalUserGroupDetail/ExternalUserGroupDetail';
+import ExternalUserGroupDetailPage from '~/features/external-user-group/client/components/ExternalUserGroupDetail';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
 import { useIsAclEnabled, useCurrentUser } from '~/stores/context';