fix lint errors

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

@@ -68,9 +68,11 @@ 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>}
+        && (
+          <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">

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

@@ -96,11 +96,13 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
               {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>}
+            {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/components/Admin/UserGroup/UserGroupTable.tsx

@@ -209,9 +209,11 @@ export const UserGroupTable: FC<Props> = ({
                             <i className="icon-fw icon-note"></i> {t('Edit')}
                           </button>
                           {onRemove != null
-                          && <button className="dropdown-item" type="button" role="button" onClick={onClickRemove} data-user-group-id={group._id}>
-                            <i className="icon-fw fa fa-chain-broken"></i> {t('admin:user_group_management.remove_child_group')}
-                          </button>}
+                          && (
+                            <button className="dropdown-item" type="button" role="button" onClick={onClickRemove} data-user-group-id={group._id}>
+                              <i className="icon-fw fa fa-chain-broken"></i> {t('admin:user_group_management.remove_child_group')}
+                            </button>
+                          )}
                           <button className="dropdown-item" type="button" role="button" onClick={onClickDelete} data-user-group-id={group._id}>
                             <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                           </button>

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

@@ -365,7 +365,8 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
                   <Link href={{
                     pathname: `/admin/user-group-detail/${ancestorUserGroup._id}`,
                     query: { isExternalGroup: 'true' },
-                  }}>
+                  }}
+                  >
                     {ancestorUserGroup.name}
                   </Link>
                 ) }
@@ -408,11 +409,13 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
       />
 
       <h2 className="admin-setting-header mt-4">{t('user_group_management.child_group_list')}</h2>
-      {!isExternalGroup && <UserGroupDropdown
-        selectableUserGroups={selectableChildUserGroups}
-        onClickAddExistingUserGroupButton={onClickAddExistingUserGroupButtonHandler}
-        onClickCreateUserGroupButton={showCreateModal}
-      />}
+      {!isExternalGroup && (
+        <UserGroupDropdown
+          selectableUserGroups={selectableChildUserGroups}
+          onClickAddExistingUserGroupButton={onClickAddExistingUserGroupButtonHandler}
+          onClickCreateUserGroupButton={showCreateModal}
+        />
+      )}
 
       <UserGroupModal
         userGroup={selectedUserGroup}

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

@@ -125,47 +125,49 @@ export const ExternalGroupManagement: FC = () => {
     };
   }, []);
 
-  return <>
-    <h2 className="border-bottom">{t('external_user_group.management')}</h2>
-    <UserGroupTable
-      headerLabel={t('admin:user_group_management.group_list')}
-      userGroups={externalUserGroups}
-      childUserGroups={childExternalUserGroups}
-      isAclEnabled={isAclEnabled ?? false}
-      onEdit={showUpdateModal}
-      onDelete={showDeleteModal}
-      userGroupRelations={externalUserGroupRelations}
-      isExternalGroup
-    />
-
-    <UserGroupModal
-      userGroup={selectedExternalUserGroup}
-      buttonLabel={t('Update')}
-      onClickSubmit={updateExternalUserGroup}
-      isShow={isUpdateModalShown}
-      onHide={hideUpdateModal}
-      isExternalGroup
-    />
-
-    <UserGroupDeleteModal
-      userGroups={externalUserGroups}
-      deleteUserGroup={selectedExternalUserGroup}
-      onDelete={deleteExternalUserGroupById}
-      isShow={isDeleteModalShown}
-      onHide={hideDeleteModal}
-    />
-
-    <CustomNav
-      activeTab={activeTab}
-      navTabMapping={navTabMapping}
-      onNavSelected={switchActiveTab}
-      hideBorderBottom
-      breakpointToSwitchDropdownDown="md"
-    />
-    <TabContent activeTab={activeTab} className="p-5">
-      <TabPane tabId="ldap">
-        {activeComponents.has('ldap') && <LdapGroupManagement />}
-      </TabPane>
-    </TabContent>
-  </>;
+  return (
+    <>
+      <h2 className="border-bottom">{t('external_user_group.management')}</h2>
+      <UserGroupTable
+        headerLabel={t('admin:user_group_management.group_list')}
+        userGroups={externalUserGroups}
+        childUserGroups={childExternalUserGroups}
+        isAclEnabled={isAclEnabled ?? false}
+        onEdit={showUpdateModal}
+        onDelete={showDeleteModal}
+        userGroupRelations={externalUserGroupRelations}
+        isExternalGroup
+      />
+
+      <UserGroupModal
+        userGroup={selectedExternalUserGroup}
+        buttonLabel={t('Update')}
+        onClickSubmit={updateExternalUserGroup}
+        isShow={isUpdateModalShown}
+        onHide={hideUpdateModal}
+        isExternalGroup
+      />
+
+      <UserGroupDeleteModal
+        userGroups={externalUserGroups}
+        deleteUserGroup={selectedExternalUserGroup}
+        onDelete={deleteExternalUserGroupById}
+        isShow={isDeleteModalShown}
+        onHide={hideDeleteModal}
+      />
+
+      <CustomNav
+        activeTab={activeTab}
+        navTabMapping={navTabMapping}
+        onNavSelected={switchActiveTab}
+        hideBorderBottom
+        breakpointToSwitchDropdownDown="md"
+      />
+      <TabContent activeTab={activeTab} className="p-5">
+        <TabPane tabId="ldap">
+          {activeComponents.has('ldap') && <LdapGroupManagement />}
+        </TabPane>
+      </TabContent>
+    </>
+  );
 };

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

@@ -44,28 +44,32 @@ export const LdapGroupManagement: FC = () => {
     }
   }, [t, isUserBind]);
 
-  return <>
-    <LdapGroupSyncSettingsForm />
-    <h3 className="border-bottom mb-3">{t('external_user_group.execute_sync')}</h3>
-    <form onSubmit={onSyncBtnClick}>
-      {isUserBind && <div className="row form-group">
-        <label htmlFor="ldapGroupSyncPassword" className="text-left text-md-right col-md-3 col-form-label">{t('external_user_group.ldap.password')}</label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            type="password"
-            name="password"
-            id="ldapGroupSyncPassword"
-          />
-          <p className="form-text text-muted">
-            <small>{t('external_user_group.ldap.password_detail')}</small>
-          </p>
+  return (
+    <>
+      <LdapGroupSyncSettingsForm />
+      <h3 className="border-bottom mb-3">{t('external_user_group.execute_sync')}</h3>
+      <form onSubmit={onSyncBtnClick}>
+        {isUserBind && (
+          <div className="row form-group">
+            <label htmlFor="ldapGroupSyncPassword" className="text-left text-md-right col-md-3 col-form-label">{t('external_user_group.ldap.password')}</label>
+            <div className="col-md-6">
+              <input
+                className="form-control"
+                type="password"
+                name="password"
+                id="ldapGroupSyncPassword"
+              />
+              <p className="form-text text-muted">
+                <small>{t('external_user_group.ldap.password_detail')}</small>
+              </p>
+            </div>
+          </div>
+        )}
+        <div className="row">
+          <div className="col-md-3"></div>
+          <div className="col-md-6"><button className="btn btn-primary" type="submit">{t('external_user_group.sync')}</button></div>
         </div>
-      </div>}
-      <div className="row">
-        <div className="col-md-3"></div>
-        <div className="col-md-6"><button className="btn btn-primary" type="submit">{t('external_user_group.sync')}</button></div>
-      </div>
-    </form>
-  </>;
+      </form>
+    </>
+  );
 };

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

@@ -42,201 +42,206 @@ export const LdapGroupSyncSettingsForm: FC = () => {
     }
   }, [formValues, t]);
 
-  return <>
-    <h3 className="border-bottom mb-3">{t('external_user_group.ldap.group_sync_settings')}</h3>
-    <form onSubmit={submitHandler}>
-      <div className="row form-group">
-        <label
-          htmlFor="ldapGroupSearchBase"
-          className="text-left text-md-right col-md-3 col-form-label">
-          {t('external_user_group.ldap.group_search_base_DN')}
-        </label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            type="text"
-            name="ldapGroupSearchBase"
-            id="ldapGroupSearchBase"
-            value={formValues.ldapGroupSearchBase}
-            onChange={e => setFormValues({ ...formValues, ldapGroupSearchBase: e.target.value })}
-          />
-          <p className="form-text text-muted">
-            <small>{t('external_user_group.ldap.group_search_base_dn_detail')}</small>
-          </p>
-        </div>
-      </div>
-      <div className="row form-group">
-        <label htmlFor="ldapGroupMembershipAttribute" className="text-left text-md-right col-md-3 col-form-label">
-          {t('external_user_group.ldap.membership_attribute')}
-        </label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            required
-            type="text"
-            name="ldapGroupMembershipAttribute"
-            id="ldapGroupMembershipAttribute"
-            value={formValues.ldapGroupMembershipAttribute}
-            onChange={e => setFormValues({ ...formValues, ldapGroupMembershipAttribute: e.target.value })}
-          />
-          <p className="form-text text-muted">
-            <small>
-              {t('external_user_group.ldap.membership_attribute_detail')} <br />
-              e.g.) <code>member</code>, <code>memberUid</code>
-            </small>
-          </p>
-        </div>
-      </div>
-      <div className="row form-group">
-        <label htmlFor="ldapGroupMembershipAttributeType" className="text-left text-md-right col-md-3 col-form-label">
-          {t('external_user_group.ldap.membership_attribute_type')}
-        </label>
-        <div className="col-md-6">
-          <select
-            className="form-control"
-            required
-            name="ldapGroupMembershipAttributeType"
-            id="ldapGroupMembershipAttributeType"
-            value={formValues.ldapGroupMembershipAttributeType}
-            onChange={(e) => {
-              if (e.target.value === LdapGroupMembershipAttributeType.dn || e.target.value === LdapGroupMembershipAttributeType.uid) {
-                setFormValues({ ...formValues, ldapGroupMembershipAttributeType: e.target.value });
-              }
-            }}>
-            <option value="DN">DN</option>
-            <option value="UID">UID</option>
-          </select>
-          <p className="form-text text-muted">
-            <small>
-              {t('external_user_group.ldap.membership_attribute_type_detail')}
-            </small>
-          </p>
-        </div>
-      </div>
-      <div className="row form-group">
-        <label htmlFor="ldapGroupChildGroupAttribute" className="text-left text-md-right col-md-3 col-form-label">
-          {t('external_user_group.ldap.child_group_attribute')}
-        </label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            required
-            type="text"
-            name="ldapGroupChildGroupAttribute"
-            id="ldapGroupChildGroupAttribute"
-            value={formValues.ldapGroupChildGroupAttribute}
-            onChange={e => setFormValues({ ...formValues, ldapGroupChildGroupAttribute: e.target.value })}/>
-          <p className="form-text text-muted">
-            <small>
-              {t('external_user_group.ldap.child_group_attribute_detail')}<br />
-            e.g.) <code>member</code>
-            </small>
-          </p>
+  return (
+    <>
+      <h3 className="border-bottom mb-3">{t('external_user_group.ldap.group_sync_settings')}</h3>
+      <form onSubmit={submitHandler}>
+        <div className="row form-group">
+          <label
+            htmlFor="ldapGroupSearchBase"
+            className="text-left text-md-right col-md-3 col-form-label"
+          >
+            {t('external_user_group.ldap.group_search_base_DN')}
+          </label>
+          <div className="col-md-6">
+            <input
+              className="form-control"
+              type="text"
+              name="ldapGroupSearchBase"
+              id="ldapGroupSearchBase"
+              value={formValues.ldapGroupSearchBase}
+              onChange={e => setFormValues({ ...formValues, ldapGroupSearchBase: e.target.value })}
+            />
+            <p className="form-text text-muted">
+              <small>{t('external_user_group.ldap.group_search_base_dn_detail')}</small>
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="row form-group">
-        <label
-          className="text-left text-md-right col-md-3 col-form-label"
-        >
-          {/* {t('external_user_group.ldap.auto_generate_user_on_sync')} */}
-        </label>
-        <div className="col-md-6">
-          <div className="custom-control custom-checkbox custom-checkbox-info">
+        <div className="row form-group">
+          <label htmlFor="ldapGroupMembershipAttribute" className="text-left text-md-right col-md-3 col-form-label">
+            {t('external_user_group.ldap.membership_attribute')}
+          </label>
+          <div className="col-md-6">
             <input
-              type="checkbox"
-              className="custom-control-input"
-              name="autoGenerateUserOnLdapGroupSync"
-              id="autoGenerateUserOnLdapGroupSync"
-              checked={formValues.autoGenerateUserOnLdapGroupSync}
-              onChange={() => setFormValues({ ...formValues, autoGenerateUserOnLdapGroupSync: !formValues.autoGenerateUserOnLdapGroupSync })}
+              className="form-control"
+              required
+              type="text"
+              name="ldapGroupMembershipAttribute"
+              id="ldapGroupMembershipAttribute"
+              value={formValues.ldapGroupMembershipAttribute}
+              onChange={e => setFormValues({ ...formValues, ldapGroupMembershipAttribute: e.target.value })}
             />
-            <label
-              className="custom-control-label"
-              htmlFor="autoGenerateUserOnLdapGroupSync"
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.ldap.membership_attribute_detail')} <br />
+                e.g.) <code>member</code>, <code>memberUid</code>
+              </small>
+            </p>
+          </div>
+        </div>
+        <div className="row form-group">
+          <label htmlFor="ldapGroupMembershipAttributeType" className="text-left text-md-right col-md-3 col-form-label">
+            {t('external_user_group.ldap.membership_attribute_type')}
+          </label>
+          <div className="col-md-6">
+            <select
+              className="form-control"
+              required
+              name="ldapGroupMembershipAttributeType"
+              id="ldapGroupMembershipAttributeType"
+              value={formValues.ldapGroupMembershipAttributeType}
+              onChange={(e) => {
+                if (e.target.value === LdapGroupMembershipAttributeType.dn || e.target.value === LdapGroupMembershipAttributeType.uid) {
+                  setFormValues({ ...formValues, ldapGroupMembershipAttributeType: e.target.value });
+                }
+              }}
             >
-              {t('external_user_group.ldap.auto_generate_user_on_sync')}
-            </label>
+              <option value="DN">DN</option>
+              <option value="UID">UID</option>
+            </select>
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.ldap.membership_attribute_type_detail')}
+              </small>
+            </p>
           </div>
         </div>
-      </div>
-      <div className="row form-group">
-        <label
-          className="text-left text-md-right col-md-3 col-form-label"
-        >
-          {/* {t('external_user_group.ldap.preserve_deleted_ldap_groups')} */}
-        </label>
-        <div className="col-md-6">
-          <div className="custom-control custom-checkbox custom-checkbox-info">
+        <div className="row form-group">
+          <label htmlFor="ldapGroupChildGroupAttribute" className="text-left text-md-right col-md-3 col-form-label">
+            {t('external_user_group.ldap.child_group_attribute')}
+          </label>
+          <div className="col-md-6">
             <input
-              type="checkbox"
-              className="custom-control-input"
-              name="preserveDeletedLdapGroups"
-              id="preserveDeletedLdapGroups"
-              checked={formValues.preserveDeletedLdapGroups}
-              onChange={() => setFormValues({ ...formValues, preserveDeletedLdapGroups: !formValues.preserveDeletedLdapGroups })}
+              className="form-control"
+              required
+              type="text"
+              name="ldapGroupChildGroupAttribute"
+              id="ldapGroupChildGroupAttribute"
+              value={formValues.ldapGroupChildGroupAttribute}
+              onChange={e => setFormValues({ ...formValues, ldapGroupChildGroupAttribute: e.target.value })}
             />
-            <label
-              className="custom-control-label"
-              htmlFor="preserveDeletedLdapGroups"
-            >
-              {t('external_user_group.ldap.preserve_deleted_ldap_groups')}
-            </label>
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.ldap.child_group_attribute_detail')}<br />
+                e.g.) <code>member</code>
+              </small>
+            </p>
+          </div>
+        </div>
+        <div className="row form-group">
+          <label
+            className="text-left text-md-right col-md-3 col-form-label"
+          >
+            {/* {t('external_user_group.ldap.auto_generate_user_on_sync')} */}
+          </label>
+          <div className="col-md-6">
+            <div className="custom-control custom-checkbox custom-checkbox-info">
+              <input
+                type="checkbox"
+                className="custom-control-input"
+                name="autoGenerateUserOnLdapGroupSync"
+                id="autoGenerateUserOnLdapGroupSync"
+                checked={formValues.autoGenerateUserOnLdapGroupSync}
+                onChange={() => setFormValues({ ...formValues, autoGenerateUserOnLdapGroupSync: !formValues.autoGenerateUserOnLdapGroupSync })}
+              />
+              <label
+                className="custom-control-label"
+                htmlFor="autoGenerateUserOnLdapGroupSync"
+              >
+                {t('external_user_group.ldap.auto_generate_user_on_sync')}
+              </label>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="px-5">
-        <h4 className="border-bottom mb-3">Attribute Mapping ({t('optional')})</h4>
-      </div>
-      <div className="row form-group">
-        <label htmlFor="ldapGroupNameAttribute" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            type="text"
-            name="ldapGroupNameAttribute"
-            id="ldapGroupNameAttribute"
-            value={formValues.ldapGroupNameAttribute}
-            onChange={e => setFormValues({ ...formValues, ldapGroupNameAttribute: e.target.value })}
-            placeholder="Default: cn"
-          />
-          <p className="form-text text-muted">
-            <small>
-              {t('external_user_group.ldap.name_mapper_detail')}
-            </small>
-          </p>
+        <div className="row form-group">
+          <label
+            className="text-left text-md-right col-md-3 col-form-label"
+          >
+            {/* {t('external_user_group.ldap.preserve_deleted_ldap_groups')} */}
+          </label>
+          <div className="col-md-6">
+            <div className="custom-control custom-checkbox custom-checkbox-info">
+              <input
+                type="checkbox"
+                className="custom-control-input"
+                name="preserveDeletedLdapGroups"
+                id="preserveDeletedLdapGroups"
+                checked={formValues.preserveDeletedLdapGroups}
+                onChange={() => setFormValues({ ...formValues, preserveDeletedLdapGroups: !formValues.preserveDeletedLdapGroups })}
+              />
+              <label
+                className="custom-control-label"
+                htmlFor="preserveDeletedLdapGroups"
+              >
+                {t('external_user_group.ldap.preserve_deleted_ldap_groups')}
+              </label>
+            </div>
+          </div>
         </div>
-      </div>
-      <div className="row form-group">
-        <label htmlFor="ldapGroupDescriptionAttribute" className="text-left text-md-right col-md-3 col-form-label">
-          {t('Description')}
-        </label>
-        <div className="col-md-6">
-          <input
-            className="form-control"
-            type="text"
-            name="ldapGroupDescriptionAttribute"
-            id="ldapGroupDescriptionAttribute"
-            value={formValues.ldapGroupDescriptionAttribute || ''}
-            onChange={e => setFormValues({ ...formValues, ldapGroupDescriptionAttribute: e.target.value })}
-          />
-          <p className="form-text text-muted">
-            <small>
-              {t('external_user_group.ldap.description_mapper_detail')}
-            </small>
-          </p>
+        <div className="px-5">
+          <h4 className="border-bottom mb-3">Attribute Mapping ({t('optional')})</h4>
+        </div>
+        <div className="row form-group">
+          <label htmlFor="ldapGroupNameAttribute" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+          <div className="col-md-6">
+            <input
+              className="form-control"
+              type="text"
+              name="ldapGroupNameAttribute"
+              id="ldapGroupNameAttribute"
+              value={formValues.ldapGroupNameAttribute}
+              onChange={e => setFormValues({ ...formValues, ldapGroupNameAttribute: e.target.value })}
+              placeholder="Default: cn"
+            />
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.ldap.name_mapper_detail')}
+              </small>
+            </p>
+          </div>
+        </div>
+        <div className="row form-group">
+          <label htmlFor="ldapGroupDescriptionAttribute" className="text-left text-md-right col-md-3 col-form-label">
+            {t('Description')}
+          </label>
+          <div className="col-md-6">
+            <input
+              className="form-control"
+              type="text"
+              name="ldapGroupDescriptionAttribute"
+              id="ldapGroupDescriptionAttribute"
+              value={formValues.ldapGroupDescriptionAttribute || ''}
+              onChange={e => setFormValues({ ...formValues, ldapGroupDescriptionAttribute: e.target.value })}
+            />
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.ldap.description_mapper_detail')}
+              </small>
+            </p>
+          </div>
         </div>
-      </div>
 
-      <div className="row my-3">
-        <div className="offset-3 col-5">
-          <button
-            type="submit"
-            className="btn btn-primary"
-          >
-            {t('Update')}
-          </button>
+        <div className="row my-3">
+          <div className="offset-3 col-5">
+            <button
+              type="submit"
+              className="btn btn-primary"
+            >
+              {t('Update')}
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-  </>;
+      </form>
+    </>
+  );
 };