refs 125405: disable forms for external user group

apps/app/public/static/locales/en_US/admin.json

@@ -1047,6 +1047,7 @@
     "sync": "Sync",
     "invalid_sync_settings": "Invalid sync settings",
     "description_form_detail": "Please note that edited value will be overwritten on next sync if description mapper is set in sync settings",
+    "only_description_edit_allowed": "Only description can be edited for external user groups",
     "ldap": {
       "group_sync_settings": "LDAP Group Sync Settings",
       "group_search_base_DN": "Group Search Base DN",

apps/app/public/static/locales/ja_JP/admin.json

@@ -1055,6 +1055,7 @@
     "sync": "同期",
     "invalid_sync_settings": "同期設定に誤りがあります",
     "description_form_detail": "同期設定で「説明」の mapper が設定されている場合、編集内容は再同期によって上書きされることに注意してください",
+    "only_description_edit_allowed": "外部グループは説明の編集のみが可能です",
     "ldap": {
       "group_sync_settings": "LDAP グループ同期設定",
       "group_search_base_DN": "グループ検索ベース DN",

apps/app/public/static/locales/zh_CN/admin.json

@@ -1055,6 +1055,7 @@
     "sync": "Sync",
     "invalid_sync_settings": "Invalid sync settings",
     "description_form_detail": "Please note that edited value will be overwritten on next sync if description mapper is set in sync settings",
+    "only_description_edit_allowed": "Only description can be edited for external user groups",
     "ldap": {
       "group_sync_settings": "LDAP Group Sync Settings",
       "group_search_base_DN": "Group Search Base DN",

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

@@ -1,4 +1,6 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, {
+  FC, useCallback, useEffect, useState,
+} from 'react';
 
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
@@ -26,7 +28,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
    */
   const [currentName, setName] = useState<string>(userGroup.name);
   const [currentDescription, setDescription] = useState<string>(userGroup.description);
-  const [selectedParent, setSelectedParent] = useState<IUserGroupHasId | undefined>(parentUserGroup);
+  const [selectedParent, setSelectedParent] = useState<IUserGroupHasId | undefined>();
   /*
    * Function
    */
@@ -38,12 +40,16 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
     setDescription(e.target.value);
   }, []);
 
-  const onChangeParerentButtonHandler = useCallback((userGroup: IUserGroupHasId) => {
+  const onChangeParentButtonHandler = useCallback((userGroup: IUserGroupHasId) => {
     if (userGroup._id !== selectedParent?._id) {
       setSelectedParent(userGroup);
     }
   }, [selectedParent, setSelectedParent]);
 
+  useEffect(() => {
+    setSelectedParent(parentUserGroup);
+  }, [parentUserGroup]);
+
   const isSelectableParentUserGroups = selectableParentUserGroups != null && selectableParentUserGroups.length > 0;
 
   return (
@@ -59,7 +65,10 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
 
       <fieldset>
         <h2 className="admin-setting-header">{t('user_group_management.basic_info')}</h2>
-
+        {isExternalGroup
+        && <div className='mb-3'>
+          <small className="text-muted">{t('external_user_group.only_description_edit_allowed')}</small>
+        </div>}
         {
           userGroup?.createdAt != null && (
             <div className="form-group row">
@@ -74,16 +83,16 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
             {t('user_group_management.group_name')}
           </label>
           <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
-              />}
+            <input
+              className="form-control"
+              type="text"
+              name="name"
+              placeholder={t('user_group_management.group_example')}
+              value={currentName}
+              onChange={onChangeNameHandler}
+              required
+              disabled={isExternalGroup}
+            />
           </div>
         </div>
 
@@ -100,48 +109,46 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           <label htmlFor="parent" className="col-md-2 col-form-label">
             {t('user_group_management.parent_group')}
           </label>
-          {isExternalGroup ? <div className="col-md-4 my-auto">{parentUserGroup?.name}</div>
-            : <div className="dropdown col-md-4">
+          <div className="dropdown col-md-4">
+            <button
+              type="button"
+              id="dropdownMenuButton"
+              data-toggle="dropdown"
+              className="btn btn-outline-secondary dropdown-toggle mb-3"
+              disabled={isExternalGroup || !isSelectableParentUserGroups}
+            >
+              {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={() => onChangeParentButtonHandler(userGroup)}
+                        >
+                          {userGroup.name}
+                        </button>
+                      ))
+                    }
+                  </>
+                )
+              }
+
+              <div className="dropdown-divider" />
+
               <button
+                className="dropdown-item"
                 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')}
+                onClick={() => { setSelectedParent(undefined) }}
+              >{t('user_group_management.release_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" />
-
-                <button
-                  className="dropdown-item"
-                  type="button"
-                  onClick={() => { setSelectedParent(undefined) }}
-                >{t('user_group_management.release_parent_group')}
-                </button>
-              </div>
-            </div>}
+            </div>
+          </div>
         </div>
 
         <div className="form-group row">

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

@@ -77,7 +77,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
         </ModalHeader>
 
         <ModalBody>
-          {!isExternalGroup && <div className="form-group">
+          <div className="form-group">
             <label htmlFor="name">
               {t('user_group_management.group_name')}
             </label>
@@ -89,8 +89,9 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
               value={currentName}
               onChange={onChangeNameHandler}
               required
+              disabled={isExternalGroup}
             />
-          </div>}
+          </div>
 
           <div className="form-group">
             <label htmlFor="description">

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

@@ -67,6 +67,11 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
 
   const { data: isAclEnabled } = useIsAclEnabled();
 
+  const parentUserGroup = ancestorExternalUserGroups != null && ancestorExternalUserGroups.length > 1
+    ? ancestorExternalUserGroups[ancestorExternalUserGroups.length - 2] : undefined;
+
+  const selectableParentUserGroups = parentUserGroup != null ? [parentUserGroup] : [];
+
   const showUpdateModal = useCallback((group: IExternalUserGroupHasId) => {
     setUpdateModalShown(true);
     setSelectedExternalUserGroup(group);
@@ -183,8 +188,8 @@ const ExternalUserGroupDetailPage = (props: Props): JSX.Element => {
       <div className="mt-4 form-box">
         <UserGroupForm
           userGroup={currentExternalUserGroup}
-          parentUserGroup={ancestorExternalUserGroups != null && ancestorExternalUserGroups.length > 1
-            ? ancestorExternalUserGroups[ancestorExternalUserGroups.length - 2] : undefined}
+          parentUserGroup={parentUserGroup}
+          selectableParentUserGroups={selectableParentUserGroups}
           submitButtonLabel={t('Update')}
           onSubmit={onClickSubmitForm}
           isExternalGroup