create create modal

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

@@ -0,0 +1,119 @@
+import React, { FC, useState, useCallback } from 'react';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import dateFnsFormat from 'date-fns/format';
+import { TFunctionResult } from 'i18next';
+
+
+import { IUserGroup, IUserGroupHasId } from '~/interfaces/user';
+import { CustomWindow } from '~/interfaces/global';
+import Xss from '~/services/xss';
+
+type Props = {
+  userGroup?: IUserGroupHasId,
+  submitButtonLabel: TFunctionResult;
+  onSubmit?: (userGroupData: Partial<IUserGroup>) => Promise<IUserGroupHasId | void>
+};
+
+const UserGroupModal: FC<Props> = (props: Props) => {
+  const xss: Xss = (window as CustomWindow).xss;
+
+  const { t } = useTranslation();
+
+  const { userGroup, submitButtonLabel, onSubmit } = props;
+
+  /*
+   * State
+   */
+  const [currentName, setName] = useState(userGroup != null ? userGroup.name : '');
+  const [currentDescription, setDescription] = useState(userGroup != null ? userGroup.description : '');
+  const [currentParent, setParent] = useState(userGroup != null ? userGroup.parent : '');
+
+  /*
+     * Function
+     */
+  const onChangeNameHandler = useCallback((e) => {
+    setName(e.target.value);
+  }, []);
+
+  const onChangeDescriptionHandler = useCallback((e) => {
+    setDescription(e.target.value);
+  }, []);
+
+  const onSubmitHandler = useCallback(async(e) => {
+    e.preventDefault(); // no reload
+
+    if (onSubmit == null) {
+      return;
+    }
+
+    await onSubmit({ name: currentName, description: currentDescription, parent: currentParent });
+  }, [currentName, currentDescription, currentParent, onSubmit]);
+
+
+  return (
+    <Modal className="modal-md" isOpen>
+      <ModalHeader tag="h4" className="bg-danger text-light">
+        Create user groups
+      </ModalHeader>
+
+      <ModalBody>
+
+        <form onSubmit={onSubmitHandler}>
+
+          <fieldset>
+            <h2 className="admin-setting-header">{t('admin:user_group_management.basic_info')}</h2>
+            {/* TODO 85062: improve style */}
+            {
+              userGroup?.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(userGroup.createdAt), 'yyyy-MM-dd')}</p>
+                </div>
+              )
+            }
+            <div className="form-group row">
+              <label htmlFor="name" className="col-md-2 col-form-label">
+                {t('admin:user_group_management.group_name')}
+              </label>
+              <div className="col-md-4">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="name"
+                  placeholder={t('admin:user_group_management.group_example')}
+                  value={currentName}
+                  onChange={onChangeNameHandler}
+                  required
+                />
+              </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={onChangeDescriptionHandler} required />
+              </div>
+            </div>
+
+            {/* TODO 85062: select parent dropdown */}
+
+            <div className="form-group row">
+              <div className="offset-md-2 col-md-10">
+                <button type="submit" className="btn btn-primary">
+                  {submitButtonLabel}
+                </button>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default UserGroupModal;

packages/app/src/components/Admin/UserGroup/UserGroupPage.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import UserGroupTable from './UserGroupTable';
 import UserGroupForm from './UserGroupForm';
+import UserGroupModal from './UserGroupModal';
 import UserGroupDeleteModal from './UserGroupDeleteModal';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -112,7 +113,7 @@ const UserGroupPage: FC<Props> = (props: Props) => {
 
   return (
     <div data-testid="admin-user-groups">
-      {
+      {/* {
         isAclEnabled ? (
           <div className="mb-2">
             <button type="button" className="btn btn-outline-secondary" data-toggle="collapse" data-target="#createGroupForm">
@@ -128,7 +129,11 @@ const UserGroupPage: FC<Props> = (props: Props) => {
         ) : (
           t('admin:user_group_management.deny_create_group')
         )
-      }
+      } */}
+      <UserGroupModal
+        submitButtonLabel={t('Create')}
+        onSubmit={createUserGroup}
+      />
       <>
         <UserGroupTable
           headerLabel={t('admin:user_group_management.group_list')}