From f4a888ad260843426ca6ccbbaab8de0549f0e2a8 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic2@gmail.com>
Date: Wed, 13 Jul 2022 11:40:12 +0200
Subject: [PATCH 1/5] wip for create batch users modal

---
 src/modules/users/Users.tsx                   |  19 ++-
 .../MultipleUsersModal/MultipleUsersModal.tsx | 124 ++++++++++++++++++
 .../components/MultipleUsersModal/index.ts    |   1 +
 .../components/MultipleUsersModal/types.ts    |   5 +
 .../components/MultipleUsersModal/utils.ts    |  14 ++
 src/modules/users/components/index.ts         |   1 +
 6 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
 create mode 100644 src/modules/users/components/MultipleUsersModal/index.ts
 create mode 100644 src/modules/users/components/MultipleUsersModal/types.ts
 create mode 100644 src/modules/users/components/MultipleUsersModal/utils.ts
 create mode 100644 src/modules/users/components/index.ts

diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx
index c40cc79..814c4c9 100644
--- a/src/modules/users/Users.tsx
+++ b/src/modules/users/Users.tsx
@@ -4,14 +4,16 @@ import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
-import { debounce } from 'lodash';
+import _, { debounce } from 'lodash';
 import { useAuth } from 'src/services/auth';
 
 import { UserModal } from '../../components/UserModal';
+import { MultipleUsersModal } from './components';
 
 export const Users: React.FC = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
   const [configureModal, setConfigureModal] = useState(false);
+  const [multipleUsersModal, setMultipleUsersModal] = useState(false);
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
   const { users, loadUsers, userTableLoading } = useUsers();
@@ -106,6 +108,14 @@ export const Users: React.FC = () => {
                 <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
                 Add new user
               </button>
+              <button
+                onClick={() => setMultipleUsersModal(true)}
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
+              >
+                <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Add new users
+              </button>
             </div>
           )}
         </div>
@@ -166,6 +176,13 @@ export const Users: React.FC = () => {
         {configureModal && (
           <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
         )}
+        {multipleUsersModal && (
+          <MultipleUsersModal
+            open={multipleUsersModal}
+            onClose={() => setMultipleUsersModal(false)}
+            onUpload={_.noop}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
new file mode 100644
index 0000000..f57e28d
--- /dev/null
+++ b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@@ -0,0 +1,124 @@
+import React, { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import _ from 'lodash';
+// import { TrashIcon } from '@heroicons/react/outline';
+// import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { Modal, Tabs } from 'src/components';
+// import { Input, Select } from 'src/components/Form';
+import { useUsers } from 'src/services/users';
+import { useAuth } from 'src/services/auth';
+import { MultipleUsersModalProps } from './types';
+import { csvFileToArray } from './utils';
+
+export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersModalProps) => {
+  const [file, setFile] = useState<File>();
+  const { userModalLoading } = useUsers();
+  const { currentUser, isAdmin } = useAuth();
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFile(_.get(e.target, 'files[0]'));
+    console.log(_.get(e.target, 'files[0]'));
+  };
+
+  const handleSubmit = () => {
+    // e.preventDefault();
+
+    if (file) {
+      const formData = new FormData();
+      formData.append('image', file, file.name);
+
+      // console.log('csv to array', csvFileToArray(file));
+      console.log('submit', formData);
+    } else {
+      console.log('nothing in file?');
+    }
+  };
+
+  const renderUpload = () => {
+    return (
+      <div>
+        <div>Please upload CSV file using , as a delimiter</div>
+        <div>
+          <input type="file" id="csvFileInput" accept=".csv" onChange={handleOnChange} />
+          <button onClick={handleSubmit}>IMPORT CSV</button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderMultilineInput = () => {
+    return (
+      <div>
+        <textarea
+          rows={5}
+          name="description"
+          className="w-full rounded-md border-gray-700 focus:border-gray-700 shadow-none focus:shadow-slate-800"
+        >
+          Enter details here...
+        </textarea>
+      </div>
+    );
+  };
+
+  const handleSave = async () => {
+    // try {
+    //   if (userId) {
+    //     await handleSubmit((data) => editUserById(data))();
+    //   } else {
+    //     await handleSubmit((data) => createNewUser(data))();
+    //   }
+    // } catch (e: any) {
+    //   // Continue
+    // }
+
+    onUpload();
+
+    onClose();
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <Modal
+        onClose={handleClose}
+        open={open}
+        onSave={handleSave}
+        isLoading={userModalLoading}
+        // leftActions={
+        //   userId &&
+        //   user.email !== currentUser?.email && (
+        //     <button
+        //       onClick={deleteModalOpen}
+        //       type="button"
+        //       className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+        //     >
+        //       <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+        //       Delete
+        //     </button>
+        //   )
+        // }
+        useCancelButton
+      >
+        <div className="bg-white px-4">
+          <div className="space-y-10 divide-y divide-gray-200">
+            <div>
+              <div>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
+              </div>
+              <div className="sm:p-6">
+                <Tabs
+                  tabs={[
+                    { name: 'Add users', component: renderMultilineInput() },
+                    { name: 'Import from file', component: renderUpload() },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/modules/users/components/MultipleUsersModal/index.ts b/src/modules/users/components/MultipleUsersModal/index.ts
new file mode 100644
index 0000000..b8c3b1a
--- /dev/null
+++ b/src/modules/users/components/MultipleUsersModal/index.ts
@@ -0,0 +1 @@
+export { MultipleUsersModal } from './MultipleUsersModal';
diff --git a/src/modules/users/components/MultipleUsersModal/types.ts b/src/modules/users/components/MultipleUsersModal/types.ts
new file mode 100644
index 0000000..2a3a280
--- /dev/null
+++ b/src/modules/users/components/MultipleUsersModal/types.ts
@@ -0,0 +1,5 @@
+export type MultipleUsersModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onUpload: () => void;
+};
diff --git a/src/modules/users/components/MultipleUsersModal/utils.ts b/src/modules/users/components/MultipleUsersModal/utils.ts
new file mode 100644
index 0000000..7934b5d
--- /dev/null
+++ b/src/modules/users/components/MultipleUsersModal/utils.ts
@@ -0,0 +1,14 @@
+import { User } from 'src/services/users';
+
+export const csvFileToArray = (csvData: string) => {
+  const csvRows = csvData.slice(csvData.indexOf('\n') + 1).split('\n');
+
+  const array = csvRows.map((i) => {
+    const values = i.split(',');
+    const email = values[0];
+    const name = values[1];
+    return { email, name, app_roles: [], preferredUsername: '', status: '', id: '' } as User;
+  });
+
+  return array;
+};
diff --git a/src/modules/users/components/index.ts b/src/modules/users/components/index.ts
new file mode 100644
index 0000000..b8c3b1a
--- /dev/null
+++ b/src/modules/users/components/index.ts
@@ -0,0 +1 @@
+export { MultipleUsersModal } from './MultipleUsersModal';

From 4431d72e09e4f851baa091e894afc39fbb81a8aa Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic2@gmail.com>
Date: Sun, 17 Jul 2022 20:00:50 +0200
Subject: [PATCH 2/5] modify frontend for add multiple users

---
 src/components/Form/TextArea/index.ts         |   1 +
 src/components/Form/TextArea/textarea.tsx     |  43 ++++
 src/components/Form/index.ts                  |   1 +
 src/components/UserModal/consts.ts            |  19 +-
 src/modules/users/Users.tsx                   |  19 +-
 .../MultipleUsersModal/MultipleUsersModal.tsx | 200 +++++++++---------
 .../components/MultipleUsersModal/types.ts    |   7 +-
 .../components/MultipleUsersModal/utils.ts    |  14 --
 src/services/users/hooks/use-users.ts         |   6 +
 src/services/users/redux/actions.ts           |  54 ++++-
 src/services/users/redux/reducers.ts          |   1 +
 src/services/users/transformations.ts         |  30 ++-
 src/services/users/types.ts                   |   5 +
 13 files changed, 265 insertions(+), 135 deletions(-)
 create mode 100644 src/components/Form/TextArea/index.ts
 create mode 100644 src/components/Form/TextArea/textarea.tsx
 delete mode 100644 src/modules/users/components/MultipleUsersModal/utils.ts

diff --git a/src/components/Form/TextArea/index.ts b/src/components/Form/TextArea/index.ts
new file mode 100644
index 0000000..9f93c0d
--- /dev/null
+++ b/src/components/Form/TextArea/index.ts
@@ -0,0 +1 @@
+export { TextArea } from './textarea';
diff --git a/src/components/Form/TextArea/textarea.tsx b/src/components/Form/TextArea/textarea.tsx
new file mode 100644
index 0000000..2dfa188
--- /dev/null
+++ b/src/components/Form/TextArea/textarea.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useController } from 'react-hook-form';
+
+/* eslint-disable react/react-in-jsx-scope */
+export const TextArea = ({ control, name, label, required, ...props }: TextAreaProps) => {
+  const {
+    field,
+    // fieldState: { invalid, isTouched, isDirty },
+    // formState: { touchedFields, dirtyFields },
+  } = useController({
+    name,
+    control,
+    rules: { required },
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+        </label>
+      )}
+      <textarea
+        id={name}
+        onChange={field.onChange} // send value to hook form
+        onBlur={field.onBlur} // notify when input is touched/blur
+        value={field.value ? field.value.toString() : ''} // input value
+        name={name} // send down the input name
+        ref={field.ref} // send input ref, so we can focus on input when error appear
+        autoComplete="given-name"
+        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        {...props}
+      />
+    </>
+  );
+};
+
+type TextAreaProps = {
+  control: any;
+  name: string;
+  label?: string;
+} & React.HTMLProps<HTMLTextAreaElement>;
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index ad493dd..2cc9298 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,2 +1,3 @@
 export { Input } from './Input';
 export { Select } from './Select';
+export { TextArea } from './TextArea';
diff --git a/src/components/UserModal/consts.ts b/src/components/UserModal/consts.ts
index 7304a41..2229a23 100644
--- a/src/components/UserModal/consts.ts
+++ b/src/components/UserModal/consts.ts
@@ -23,26 +23,35 @@ export const appAccessList = [
   },
 ];
 
-const initialAppRoles = [
+export const allAppAccessList = [
+  ...appAccessList,
+  {
+    name: 'dashboard',
+    image: '/assets/logo-small.svg',
+    label: 'Dashboard',
+  },
+];
+
+export const initialAppRoles = [
   {
     name: 'dashboard',
     role: UserRole.User,
   },
   {
     name: 'wekan',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'wordpress',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'nextcloud',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'zulip',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
 ];
 
diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx
index 814c4c9..41cfafb 100644
--- a/src/modules/users/Users.tsx
+++ b/src/modules/users/Users.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
+import { SearchIcon, PlusIcon, ViewGridAddIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
-import _, { debounce } from 'lodash';
+import { debounce } from 'lodash';
 import { useAuth } from 'src/services/auth';
 
 import { UserModal } from '../../components/UserModal';
@@ -41,8 +41,11 @@ export const Users: React.FC = () => {
     setUserId(id);
     setConfigureModal(true);
   };
+
   const configureModalClose = () => setConfigureModal(false);
 
+  const multipleUsersModalClose = () => setMultipleUsersModal(false);
+
   const columns: any = React.useMemo(
     () => [
       {
@@ -103,7 +106,7 @@ export const Users: React.FC = () => {
               <button
                 onClick={() => configureModalOpen(null)}
                 type="button"
-                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
+                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800 mx-5 "
               >
                 <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
                 Add new user
@@ -113,7 +116,7 @@ export const Users: React.FC = () => {
                 type="button"
                 className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
               >
-                <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                <ViewGridAddIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
                 Add new users
               </button>
             </div>
@@ -176,13 +179,7 @@ export const Users: React.FC = () => {
         {configureModal && (
           <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
         )}
-        {multipleUsersModal && (
-          <MultipleUsersModal
-            open={multipleUsersModal}
-            onClose={() => setMultipleUsersModal(false)}
-            onUpload={_.noop}
-          />
-        )}
+        {multipleUsersModal && <MultipleUsersModal open={multipleUsersModal} onClose={multipleUsersModalClose} />}
       </div>
     </div>
   );
diff --git a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
index f57e28d..63e3021 100644
--- a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
+++ b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@@ -1,76 +1,31 @@
-import React, { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import React from 'react';
 import _ from 'lodash';
-// import { TrashIcon } from '@heroicons/react/outline';
-// import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
+
 import { Modal, Tabs } from 'src/components';
-// import { Input, Select } from 'src/components/Form';
-import { useUsers } from 'src/services/users';
-import { useAuth } from 'src/services/auth';
-import { MultipleUsersModalProps } from './types';
-import { csvFileToArray } from './utils';
+import { Select, TextArea } from 'src/components/Form';
+import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
+import { allAppAccessList } from 'src/components/UserModal/consts';
+import { initialMultipleUsersForm, MultipleUsersModalProps } from './types';
 
-export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersModalProps) => {
-  const [file, setFile] = useState<File>();
-  const { userModalLoading } = useUsers();
-  const { currentUser, isAdmin } = useAuth();
+export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) => {
+  const { createUsers, userModalLoading } = useUsers();
 
-  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setFile(_.get(e.target, 'files[0]'));
-    console.log(_.get(e.target, 'files[0]'));
-  };
+  const { control, handleSubmit } = useForm<MultipleUsersData>({
+    defaultValues: initialMultipleUsersForm,
+  });
 
-  const handleSubmit = () => {
-    // e.preventDefault();
-
-    if (file) {
-      const formData = new FormData();
-      formData.append('image', file, file.name);
-
-      // console.log('csv to array', csvFileToArray(file));
-      console.log('submit', formData);
-    } else {
-      console.log('nothing in file?');
-    }
-  };
-
-  const renderUpload = () => {
-    return (
-      <div>
-        <div>Please upload CSV file using , as a delimiter</div>
-        <div>
-          <input type="file" id="csvFileInput" accept=".csv" onChange={handleOnChange} />
-          <button onClick={handleSubmit}>IMPORT CSV</button>
-        </div>
-      </div>
-    );
-  };
-
-  const renderMultilineInput = () => {
-    return (
-      <div>
-        <textarea
-          rows={5}
-          name="description"
-          className="w-full rounded-md border-gray-700 focus:border-gray-700 shadow-none focus:shadow-slate-800"
-        >
-          Enter details here...
-        </textarea>
-      </div>
-    );
-  };
+  const { fields } = useFieldArray({
+    control,
+    name: 'appRoles',
+  });
 
   const handleSave = async () => {
-    // try {
-    //   if (userId) {
-    //     await handleSubmit((data) => editUserById(data))();
-    //   } else {
-    //     await handleSubmit((data) => createNewUser(data))();
-    //   }
-    // } catch (e: any) {
-    //   // Continue
-    // }
-
-    onUpload();
+    try {
+      await handleSubmit((data) => createUsers(data))();
+    } catch (e: any) {
+      // Continue
+    }
 
     onClose();
   };
@@ -79,46 +34,87 @@ export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersMod
     onClose();
   };
 
+  const renderUsersCsvDataInput = () => {
+    return (
+      <div>
+        <TextArea
+          control={control}
+          name="csvUserData"
+          label="CSV user data"
+          placeholder="Please paste users in CSV format: email,name"
+          rows={15}
+          required
+        />
+      </div>
+    );
+  };
+
+  const renderAppAccess = () => {
+    return (
+      <div>
+        <div className="mt-8">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+        </div>
+
+        <div>
+          <div className="flow-root mt-6">
+            <ul className="-my-5 divide-y divide-gray-200 ">
+              {fields.map((item, index) => {
+                return (
+                  <li className="py-4" key={item.name}>
+                    <div className="flex items-center space-x-4">
+                      <div className="flex-shrink-0 flex-1 flex items-center">
+                        <img
+                          className="h-10 w-10 rounded-md overflow-hidden"
+                          src={_.find(allAppAccessList, ['name', item.name!])?.image}
+                          alt={item.name ?? 'Image'}
+                        />
+                        <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                          {_.find(allAppAccessList, ['name', item.name!])?.label}
+                        </h3>
+                      </div>
+                      <div>
+                        <Select
+                          key={item.id}
+                          control={control}
+                          name={`appRoles.${index}.role`}
+                          options={[
+                            { value: UserRole.NoAccess, name: 'No Access' },
+                            { value: UserRole.User, name: 'User' },
+                            { value: UserRole.Admin, name: 'Admin' },
+                          ]}
+                        />
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <>
-      <Modal
-        onClose={handleClose}
-        open={open}
-        onSave={handleSave}
-        isLoading={userModalLoading}
-        // leftActions={
-        //   userId &&
-        //   user.email !== currentUser?.email && (
-        //     <button
-        //       onClick={deleteModalOpen}
-        //       type="button"
-        //       className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-        //     >
-        //       <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-        //       Delete
-        //     </button>
-        //   )
-        // }
-        useCancelButton
-      >
-        <div className="bg-white px-4">
-          <div className="space-y-10 divide-y divide-gray-200">
+    <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
+      <div className="bg-white px-4">
+        <div className="space-y-10 divide-y divide-gray-200">
+          <div>
             <div>
-              <div>
-                <h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
-              </div>
-              <div className="sm:p-6">
-                <Tabs
-                  tabs={[
-                    { name: 'Add users', component: renderMultilineInput() },
-                    { name: 'Import from file', component: renderUpload() },
-                  ]}
-                />
-              </div>
+              <h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
+            </div>
+            <div className="sm:p-6">
+              <Tabs
+                tabs={[
+                  { name: 'Add users', component: renderUsersCsvDataInput() },
+                  { name: 'App access roles', component: renderAppAccess() },
+                ]}
+              />
             </div>
           </div>
         </div>
-      </Modal>
-    </>
+      </div>
+    </Modal>
   );
 };
diff --git a/src/modules/users/components/MultipleUsersModal/types.ts b/src/modules/users/components/MultipleUsersModal/types.ts
index 2a3a280..643f10c 100644
--- a/src/modules/users/components/MultipleUsersModal/types.ts
+++ b/src/modules/users/components/MultipleUsersModal/types.ts
@@ -1,5 +1,10 @@
+import { initialAppRoles } from 'src/components/UserModal/consts';
+
 export type MultipleUsersModalProps = {
   open: boolean;
   onClose: () => void;
-  onUpload: () => void;
+};
+
+export const initialMultipleUsersForm = {
+  appRoles: initialAppRoles,
 };
diff --git a/src/modules/users/components/MultipleUsersModal/utils.ts b/src/modules/users/components/MultipleUsersModal/utils.ts
deleted file mode 100644
index 7934b5d..0000000
--- a/src/modules/users/components/MultipleUsersModal/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { User } from 'src/services/users';
-
-export const csvFileToArray = (csvData: string) => {
-  const csvRows = csvData.slice(csvData.indexOf('\n') + 1).split('\n');
-
-  const array = csvRows.map((i) => {
-    const values = i.split(',');
-    const email = values[0];
-    const name = values[1];
-    return { email, name, app_roles: [], preferredUsername: '', status: '', id: '' } as User;
-  });
-
-  return array;
-};
diff --git a/src/services/users/hooks/use-users.ts b/src/services/users/hooks/use-users.ts
index 0e5dd35..f5079b8 100644
--- a/src/services/users/hooks/use-users.ts
+++ b/src/services/users/hooks/use-users.ts
@@ -7,6 +7,7 @@ import {
   createUser,
   deleteUser,
   clearCurrentUser,
+  createBatchUsers,
 } from '../redux';
 import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
@@ -37,6 +38,10 @@ export function useUsers() {
     return dispatch(createUser(data));
   }
 
+  function createUsers(data: any) {
+    return dispatch(createBatchUsers(data));
+  }
+
   function deleteUserById(id: string) {
     return dispatch(deleteUser(id));
   }
@@ -52,5 +57,6 @@ export function useUsers() {
     createNewUser,
     deleteUserById,
     clearSelectedUser,
+    createUsers,
   };
 }
diff --git a/src/services/users/redux/actions.ts b/src/services/users/redux/actions.ts
index 7c35034..4ac3932 100644
--- a/src/services/users/redux/actions.ts
+++ b/src/services/users/redux/actions.ts
@@ -1,9 +1,15 @@
+import _ from 'lodash';
 import { Dispatch } from 'redux';
 import { showToast, ToastType } from 'src/common/util/show-toast';
 import { State } from 'src/redux/types';
 import { performApiCall } from 'src/services/api';
 import { AuthActionTypes } from 'src/services/auth';
-import { transformRequestUser, transformUser } from '../transformations';
+import {
+  transformBatchResponse,
+  transformRequestMultipleUsers,
+  transformRequestUser,
+  transformUser,
+} from '../transformations';
 
 export enum UserActionTypes {
   FETCH_USERS = 'users/fetch_users',
@@ -13,6 +19,7 @@ export enum UserActionTypes {
   DELETE_USER = 'users/delete_user',
   SET_USER_MODAL_LOADING = 'users/user_modal_loading',
   SET_USERS_LOADING = 'users/users_loading',
+  CREATE_BATCH_USERS = 'users/create_batch_users',
 }
 
 export const setUsersLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
@@ -154,6 +161,51 @@ export const deleteUser = (id: string) => async (dispatch: Dispatch<any>) => {
   dispatch(setUserModalLoading(false));
 };
 
+export const createBatchUsers = (users: any) => async (dispatch: Dispatch<any>) => {
+  dispatch(setUserModalLoading(true));
+
+  try {
+    const { data } = await performApiCall({
+      path: '/users-batch',
+      method: 'POST',
+      body: transformRequestMultipleUsers(users),
+    });
+
+    const responseData = transformBatchResponse(data);
+
+    dispatch({
+      type: UserActionTypes.CREATE_BATCH_USERS,
+      payload: responseData,
+    });
+
+    // show information about created users
+    const createdUsersNumber = _.size(responseData.createdUsers);
+    if (createdUsersNumber > 0) {
+      showToast(
+        `${_.size(responseData.createdUsers)} ${createdUsersNumber > 1 ? 'users' : 'user'} created successfully.`,
+        ToastType.Success,
+      );
+    }
+    const notCreatedUsersNumber = _.size(responseData.notCreatedUsers);
+    if (notCreatedUsersNumber > 0) {
+      showToast(
+        `${_.size(responseData.notCreatedUsers)} 
+        ${notCreatedUsersNumber > 1 ? 'users' : 'user'} not created with 
+        ${notCreatedUsersNumber > 1 ? 'emails' : 'email'}: \n${responseData.notCreatedUsers.join(',\n')}`,
+        ToastType.Error,
+      );
+    }
+
+    dispatch(fetchUsers());
+  } catch (err: any) {
+    dispatch(setUserModalLoading(false));
+    showToast(`${err}`, ToastType.Error);
+    throw err;
+  }
+
+  dispatch(setUserModalLoading(false));
+};
+
 export const clearCurrentUser = () => (dispatch: Dispatch<any>) => {
   dispatch({
     type: UserActionTypes.DELETE_USER,
diff --git a/src/services/users/redux/reducers.ts b/src/services/users/redux/reducers.ts
index 71ff2fa..2d02771 100644
--- a/src/services/users/redux/reducers.ts
+++ b/src/services/users/redux/reducers.ts
@@ -27,6 +27,7 @@ const usersReducer = (state: any = initialUsersState, action: any) => {
     case UserActionTypes.FETCH_USER:
     case UserActionTypes.UPDATE_USER:
     case UserActionTypes.CREATE_USER:
+    case UserActionTypes.CREATE_BATCH_USERS:
       return {
         ...state,
         isModalVisible: false,
diff --git a/src/services/users/transformations.ts b/src/services/users/transformations.ts
index bc2bd05..65b869c 100644
--- a/src/services/users/transformations.ts
+++ b/src/services/users/transformations.ts
@@ -1,4 +1,5 @@
-import { AppRoles, User, UserRole } from './types';
+import _ from 'lodash';
+import { AppRoles, MultipleUsersData, User, UserRole } from './types';
 
 const transformRoleById = (roleId: any): UserRole => {
   switch (roleId) {
@@ -62,3 +63,30 @@ export const transformRequestUser = (data: Pick<User, 'app_roles' | 'name' | 'em
     name: data.name ?? '',
   };
 };
+
+const extractUsersFromCsv = (csvData: string) => {
+  const csvRows = csvData.split('\n');
+
+  return _.map(csvRows, (row) => {
+    const values = row.split(',');
+    const email = values[0].trim();
+    const name = !_.isNil(values[1]) ? values[1].trim() : '';
+    return { email, name, app_roles: [] };
+  });
+};
+
+export const transformRequestMultipleUsers = (data: MultipleUsersData) => {
+  const batchUsers = extractUsersFromCsv(data.csvUserData);
+  return {
+    users: _.map(batchUsers, (user) =>
+      transformRequestUser({ app_roles: data.appRoles, name: user.name, email: user.email } as User),
+    ),
+  };
+};
+
+export const transformBatchResponse = (response: any): any => {
+  return {
+    createdUsers: response.created_users,
+    notCreatedUsers: response.not_created_users,
+  };
+};
diff --git a/src/services/users/types.ts b/src/services/users/types.ts
index f97f435..d22811c 100644
--- a/src/services/users/types.ts
+++ b/src/services/users/types.ts
@@ -29,3 +29,8 @@ export interface UserApiRequest {
   name: string;
   status: string;
 }
+
+export interface MultipleUsersData {
+  csvUserData: string;
+  appRoles: AppRoles[];
+}

From bc1a07251522af0e747b1f8ed797b4767e32bf05 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic2@gmail.com>
Date: Tue, 19 Jul 2022 00:21:06 +0200
Subject: [PATCH 3/5] implement progress steps component

---
 src/components/Form/Select/Select.tsx         |   2 +-
 src/components/Modal/Modal/Modal.tsx          |   6 +-
 src/components/Modal/Modal/types.ts           |   1 +
 src/components/Steps/ProgressSteps.tsx        | 107 ++++++++
 src/components/Steps/index.ts                 |   1 +
 src/components/Steps/types.ts                 |  20 ++
 src/components/UserModal/consts.ts            |   2 +-
 src/components/index.ts                       |   1 +
 .../MultipleUsersModal/MultipleUsersModal.tsx | 251 +++++++++++++-----
 9 files changed, 318 insertions(+), 73 deletions(-)
 create mode 100644 src/components/Steps/ProgressSteps.tsx
 create mode 100644 src/components/Steps/index.ts
 create mode 100644 src/components/Steps/types.ts

diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx
index aad51fa..06a5322 100644
--- a/src/components/Form/Select/Select.tsx
+++ b/src/components/Form/Select/Select.tsx
@@ -26,7 +26,7 @@ export const Select = ({ control, name, label, options, disabled = false }: Sele
         value={field.value ? field.value : ''} // input value
         name={name} // send down the input name
         ref={field.ref} // send input ref, so we can focus on input when error appear
-        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        className="block shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
         disabled={disabled}
       >
         {options?.map((option) => (
diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
index 048b315..e61aaee 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal/Modal.tsx
@@ -12,6 +12,7 @@ export const Modal: React.FC<ModalProps> = ({
   useCancelButton = false,
   isLoading = false,
   leftActions = <></>,
+  saveButtonDisabled = false,
 }) => {
   const cancelButtonRef = useRef(null);
   const saveButtonRef = useRef(null);
@@ -86,9 +87,12 @@ export const Modal: React.FC<ModalProps> = ({
                   <div className="ml-auto sm:flex sm:flex-row-reverse">
                     <button
                       type="button"
-                      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
+                        saveButtonDisabled ? 'opacity-50' : ''
+                      }`}
                       onClick={onSave}
                       ref={saveButtonRef}
+                      disabled={saveButtonDisabled}
                     >
                       Save Changes
                     </button>
diff --git a/src/components/Modal/Modal/types.ts b/src/components/Modal/Modal/types.ts
index afd720c..e679e69 100644
--- a/src/components/Modal/Modal/types.ts
+++ b/src/components/Modal/Modal/types.ts
@@ -8,4 +8,5 @@ export type ModalProps = {
   useCancelButton?: boolean;
   isLoading?: boolean;
   leftActions?: React.ReactNode;
+  saveButtonDisabled?: boolean;
 };
diff --git a/src/components/Steps/ProgressSteps.tsx b/src/components/Steps/ProgressSteps.tsx
new file mode 100644
index 0000000..2a24d67
--- /dev/null
+++ b/src/components/Steps/ProgressSteps.tsx
@@ -0,0 +1,107 @@
+import _ from 'lodash';
+import React from 'react';
+import { ProgressStepsProps, ProgressStepStatus } from './types';
+
+export const ProgressSteps: React.FC<ProgressStepsProps> = ({ steps, onNext, onPrevious, onStepClick, children }) => {
+  const handleNext = () => {
+    if (onNext) {
+      onNext();
+    }
+  };
+  const handlePrevious = () => {
+    if (onPrevious) {
+      onPrevious();
+    }
+  };
+
+  const showNextPage = () => {
+    if (onNext) {
+      return _.some(steps, { status: ProgressStepStatus.Upcoming });
+    }
+    return false;
+  };
+
+  const showPreviousPage = () => {
+    if (onPrevious) {
+      return _.some(steps, { status: ProgressStepStatus.Complete });
+    }
+    return false;
+  };
+
+  const handleStepClick = (stepId: string) => {
+    if (onStepClick) {
+      onStepClick(stepId);
+    }
+  };
+
+  return (
+    <>
+      <nav aria-label="Progress">
+        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+        <ol role="list" className="space-y-4 md:flex md:space-y-0 md:space-x-8 mb-4">
+          {steps.map((step) => (
+            <li key={step.name} className="md:flex-1" onClick={() => handleStepClick(step.id)}>
+              {step.status === ProgressStepStatus.Complete ? (
+                <a
+                  href={step.href}
+                  className="group pl-4 py-2 flex flex-col border-l-4 border-primary-500 md:pl-0 md:pb-0 md:border-l-0 md:border-t-4"
+                >
+                  <span className="text-xs text-primary-600 font-semibold tracking-wide uppercase group-hover:text-primary-800">
+                    {step.id}
+                  </span>
+                  <span className="text-sm font-medium">{step.name}</span>
+                </a>
+              ) : step.status === ProgressStepStatus.Current ? (
+                <a
+                  href={step.href}
+                  className="pl-4 py-2 flex flex-col border-l-4 border-primary-500 md:pl-0 md:pb-0 md:border-l-0 md:border-t-4"
+                  aria-current="step"
+                >
+                  <span className="text-xs text-primary-600 font-semibold tracking-wide uppercase">{step.id}</span>
+                  <span className="text-sm font-medium">{step.name}</span>
+                </a>
+              ) : (
+                <a
+                  href={step.href}
+                  className="group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pb-0 md:border-l-0 md:border-t-4"
+                >
+                  <span className="text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700">
+                    {step.id}
+                  </span>
+                  <span className="text-sm font-medium">{step.name}</span>
+                </a>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+
+      {children}
+
+      {(showNextPage() || showPreviousPage()) && (
+        <div className="pt-4 sm sm:flex">
+          <div className="ml-auto sm:flex sm:flex-row-reverse">
+            {showNextPage() && (
+              <button
+                type="button"
+                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                onClick={handleNext}
+              >
+                Next
+              </button>
+            )}
+            {showPreviousPage() && (
+              <button
+                type="button"
+                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                onClick={handlePrevious}
+              >
+                Previous
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/Steps/index.ts b/src/components/Steps/index.ts
new file mode 100644
index 0000000..2bc8859
--- /dev/null
+++ b/src/components/Steps/index.ts
@@ -0,0 +1 @@
+export { ProgressSteps } from './ProgressSteps';
diff --git a/src/components/Steps/types.ts b/src/components/Steps/types.ts
new file mode 100644
index 0000000..3eed8b3
--- /dev/null
+++ b/src/components/Steps/types.ts
@@ -0,0 +1,20 @@
+export type ProgressStepsProps = {
+  steps: ProgressStepInfo[];
+  onNext?: () => void;
+  onPrevious?: () => void;
+  onStepClick?: (stepId: string) => void;
+};
+
+export interface ProgressStepInfo {
+  id: string;
+  name: string;
+  status: ProgressStepStatus;
+  component?: React.ReactNode;
+  href?: string;
+}
+
+export enum ProgressStepStatus {
+  Complete = 0,
+  Current = 1,
+  Upcoming = 2,
+}
diff --git a/src/components/UserModal/consts.ts b/src/components/UserModal/consts.ts
index 2229a23..f156652 100644
--- a/src/components/UserModal/consts.ts
+++ b/src/components/UserModal/consts.ts
@@ -24,12 +24,12 @@ export const appAccessList = [
 ];
 
 export const allAppAccessList = [
-  ...appAccessList,
   {
     name: 'dashboard',
     image: '/assets/logo-small.svg',
     label: 'Dashboard',
   },
+  ...appAccessList,
 ];
 
 export const initialAppRoles = [
diff --git a/src/components/index.ts b/src/components/index.ts
index 565e17d..aff49e2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,3 +5,4 @@ export { Banner } from './Banner';
 export { Tabs } from './Tabs';
 export { Modal, ConfirmationModal } from './Modal';
 export { UserModal } from './UserModal';
+export { ProgressSteps } from './Steps';
diff --git a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
index 63e3021..02200e8 100644
--- a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
+++ b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@@ -1,25 +1,172 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 
-import { Modal, Tabs } from 'src/components';
+import { Banner, Modal, ProgressSteps } from 'src/components';
 import { Select, TextArea } from 'src/components/Form';
 import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
 import { allAppAccessList } from 'src/components/UserModal/consts';
+import { ProgressStepInfo, ProgressStepStatus } from 'src/components/Steps/types';
 import { initialMultipleUsersForm, MultipleUsersModalProps } from './types';
 
 export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) => {
+  const [steps, setSteps] = useState<ProgressStepInfo[]>([]);
+  const [isAdminRoleSelected, setAdminRoleSelected] = useState(false);
   const { createUsers, userModalLoading } = useUsers();
 
   const { control, handleSubmit } = useForm<MultipleUsersData>({
     defaultValues: initialMultipleUsersForm,
   });
 
-  const { fields } = useFieldArray({
+  const { fields, update } = useFieldArray({
     control,
     name: 'appRoles',
   });
 
+  const dashboardRole = useWatch({
+    control,
+    name: 'appRoles.0.role',
+  });
+
+  const csvDataWatch = useWatch({
+    control,
+    name: 'csvUserData',
+  });
+
+  useEffect(() => {
+    const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin;
+    setAdminRoleSelected(isAdminDashboardRoleSelected);
+    if (isAdminDashboardRoleSelected) {
+      fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
+    } else {
+      fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.User }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboardRole]);
+
+  const renderUsersCsvDataInput = () => {
+    return (
+      <div>
+        <div className="mt-8">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">CSV data</h3>
+        </div>
+        <div className="mt-6">
+          <TextArea
+            control={control}
+            name="csvUserData"
+            placeholder={`Please paste users in CSV format: email, name\nuser1@example.com,User One\nuser2@example.com,User Two`}
+            rows={15}
+            required
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderAppAccess = () => {
+    return (
+      <div>
+        <div className="mt-8">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+        </div>
+
+        {isAdminRoleSelected && (
+          <div className="sm:col-span-6">
+            <Banner title="Admin users automatically have admin-level access to all apps." titleSm="Admin user" />
+          </div>
+        )}
+
+        <div>
+          <div className="flow-root mt-6">
+            <ul className="-my-5 divide-y divide-gray-200">
+              {fields
+                .filter((field) => field.name === 'dashboard')
+                .map((item, index) => (
+                  <li className="py-4" key={item.name}>
+                    <div className="flex items-center space-x-4">
+                      <div className="flex-shrink-0 flex-1 flex items-center">
+                        <img
+                          className="h-10 w-10 rounded-md overflow-hidden"
+                          src={_.find(allAppAccessList, ['name', item.name!])?.image}
+                          alt={item.name ?? 'Image'}
+                        />
+                        <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                          {_.find(allAppAccessList, ['name', item.name!])?.label}
+                        </h3>
+                      </div>
+                      <div className="sm:col-span-2">
+                        <Select
+                          key={item.id}
+                          control={control}
+                          name={`appRoles.${index}.role`}
+                          options={[
+                            { value: UserRole.User, name: 'User' },
+                            { value: UserRole.Admin, name: 'Admin' },
+                          ]}
+                        />
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              {!isAdminRoleSelected &&
+                fields.map((item, index) => {
+                  if (item.name === 'dashboard') {
+                    return null;
+                  }
+
+                  return (
+                    <li className="py-4" key={item.name}>
+                      <div className="flex items-center space-x-4">
+                        <div className="flex-shrink-0 flex-1 flex items-center">
+                          <img
+                            className="h-10 w-10 rounded-md overflow-hidden"
+                            src={_.find(allAppAccessList, ['name', item.name!])?.image}
+                            alt={item.name ?? 'Image'}
+                          />
+                          <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                            {_.find(allAppAccessList, ['name', item.name!])?.label}
+                          </h3>
+                        </div>
+                        <div className="sm:col-span-2">
+                          <Select
+                            key={item.id}
+                            control={control}
+                            name={`appRoles.${index}.role`}
+                            disabled={isAdminRoleSelected}
+                            options={[
+                              { value: UserRole.NoAccess, name: 'No Access' },
+                              { value: UserRole.User, name: 'User' },
+                              { value: UserRole.Admin, name: 'Admin' },
+                            ]}
+                          />
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    setSteps([
+      {
+        id: 'Step 1',
+        name: 'Enter CSV user data',
+        status: ProgressStepStatus.Current,
+      },
+      {
+        id: 'Step 2',
+        name: 'Define app access roles',
+        status: ProgressStepStatus.Upcoming,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
   const handleSave = async () => {
     try {
       await handleSubmit((data) => createUsers(data))();
@@ -34,83 +181,47 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
     onClose();
   };
 
-  const renderUsersCsvDataInput = () => {
-    return (
-      <div>
-        <TextArea
-          control={control}
-          name="csvUserData"
-          label="CSV user data"
-          placeholder="Please paste users in CSV format: email,name"
-          rows={15}
-          required
-        />
-      </div>
-    );
+  const updateStepsStatus = (nextIndex: number) => {
+    const updatedSteps = [...steps];
+    _.forEach(updatedSteps, (step, index) => {
+      if (index < nextIndex) {
+        step.status = ProgressStepStatus.Complete;
+      } else if (index === nextIndex) {
+        step.status = ProgressStepStatus.Current;
+      } else {
+        step.status = ProgressStepStatus.Upcoming;
+      }
+    });
+    setSteps(updatedSteps);
   };
 
-  const renderAppAccess = () => {
-    return (
-      <div>
-        <div className="mt-8">
-          <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
-        </div>
-
-        <div>
-          <div className="flow-root mt-6">
-            <ul className="-my-5 divide-y divide-gray-200 ">
-              {fields.map((item, index) => {
-                return (
-                  <li className="py-4" key={item.name}>
-                    <div className="flex items-center space-x-4">
-                      <div className="flex-shrink-0 flex-1 flex items-center">
-                        <img
-                          className="h-10 w-10 rounded-md overflow-hidden"
-                          src={_.find(allAppAccessList, ['name', item.name!])?.image}
-                          alt={item.name ?? 'Image'}
-                        />
-                        <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
-                          {_.find(allAppAccessList, ['name', item.name!])?.label}
-                        </h3>
-                      </div>
-                      <div>
-                        <Select
-                          key={item.id}
-                          control={control}
-                          name={`appRoles.${index}.role`}
-                          options={[
-                            { value: UserRole.NoAccess, name: 'No Access' },
-                            { value: UserRole.User, name: 'User' },
-                            { value: UserRole.Admin, name: 'Admin' },
-                          ]}
-                        />
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    );
+  const handleStepClick = (stepId: string) => {
+    const activeStepIndex = _.findIndex(steps, { id: stepId });
+    updateStepsStatus(activeStepIndex);
   };
 
+  const getActiveStepIndex = _.findIndex(steps, { status: ProgressStepStatus.Current });
+  const disableSave = _.isEmpty(csvDataWatch) || _.some(steps, { status: ProgressStepStatus.Upcoming });
+
   return (
-    <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
+    <Modal
+      onClose={handleClose}
+      open={open}
+      onSave={handleSave}
+      isLoading={userModalLoading}
+      useCancelButton
+      saveButtonDisabled={disableSave}
+    >
       <div className="bg-white px-4">
         <div className="space-y-10 divide-y divide-gray-200">
           <div>
             <div>
               <h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
             </div>
-            <div className="sm:p-6">
-              <Tabs
-                tabs={[
-                  { name: 'Add users', component: renderUsersCsvDataInput() },
-                  { name: 'App access roles', component: renderAppAccess() },
-                ]}
-              />
+            <div className="sm:px-6 pt-6">
+              <ProgressSteps steps={steps} onStepClick={handleStepClick}>
+                {getActiveStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
+              </ProgressSteps>
             </div>
           </div>
         </div>

From e830a095b809044502a527e8309061f73678b911 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic2@gmail.com>
Date: Tue, 19 Jul 2022 16:47:50 +0200
Subject: [PATCH 4/5] added steps modal with next and previous buttons -
 changes for improve app access setting flow

---
 .../Modal/StepsModal/StepsModal.tsx           | 143 ++++++++++++++++++
 src/components/Modal/StepsModal/index.ts      |   1 +
 src/components/Modal/StepsModal/types.ts      |  16 ++
 src/components/Modal/index.ts                 |   1 +
 .../ProgressSteps.tsx                         |   0
 .../{Steps => ProgressSteps}/index.ts         |   0
 .../{Steps => ProgressSteps}/types.ts         |   0
 src/components/UserModal/UserModal.tsx        |   2 +
 src/components/index.ts                       |   4 +-
 .../MultipleUsersModal/MultipleUsersModal.tsx |  33 +++-
 src/services/users/redux/actions.ts           |  21 +--
 src/services/users/transformations.ts         |   5 +-
 12 files changed, 200 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Modal/StepsModal/StepsModal.tsx
 create mode 100644 src/components/Modal/StepsModal/index.ts
 create mode 100644 src/components/Modal/StepsModal/types.ts
 rename src/components/{Steps => ProgressSteps}/ProgressSteps.tsx (100%)
 rename src/components/{Steps => ProgressSteps}/index.ts (100%)
 rename src/components/{Steps => ProgressSteps}/types.ts (100%)

diff --git a/src/components/Modal/StepsModal/StepsModal.tsx b/src/components/Modal/StepsModal/StepsModal.tsx
new file mode 100644
index 0000000..7e2135b
--- /dev/null
+++ b/src/components/Modal/StepsModal/StepsModal.tsx
@@ -0,0 +1,143 @@
+import React, { Fragment, useRef } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { XIcon } from '@heroicons/react/solid';
+import { StepsModalProps } from './types';
+
+export const StepsModal: React.FC<StepsModalProps> = ({
+  open,
+  onClose,
+  onSave,
+  onNext,
+  onPrevious,
+  children,
+  title = '',
+  useCancelButton = false,
+  isLoading = false,
+  leftActions = <></>,
+  showSaveButton = false,
+  showPreviousButton = false,
+  saveButtonDisabled = false,
+}) => {
+  const cancelButtonRef = useRef(null);
+  const saveButtonRef = useRef(null);
+  const nextButtonRef = useRef(null);
+  const previousButtonRef = useRef(null);
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => {}}>
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
+              {isLoading && (
+                <Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
+                  <svg
+                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                  </svg>
+                </Dialog.Overlay>
+              )}
+
+              {!useCancelButton && (
+                <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
+                  <div>{title}</div>
+                  <button
+                    type="button"
+                    className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                    onClick={onClose}
+                    ref={cancelButtonRef}
+                  >
+                    <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                  </button>
+                </div>
+              )}
+
+              <div className="bg-white px-4 p-6">{children}</div>
+              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex">
+                {leftActions}
+                <div className="ml-auto sm:flex sm:flex-row-reverse">
+                  {showSaveButton && onSave && (
+                    <button
+                      type="button"
+                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
+                        saveButtonDisabled ? 'opacity-50' : ''
+                      }`}
+                      onClick={onSave}
+                      ref={saveButtonRef}
+                      disabled={saveButtonDisabled}
+                    >
+                      Save Changes
+                    </button>
+                  )}
+                  {!showSaveButton && (
+                    <button
+                      type="button"
+                      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={onNext}
+                      ref={nextButtonRef}
+                    >
+                      Next
+                    </button>
+                  )}
+                  {showPreviousButton && (
+                    <button
+                      type="button"
+                      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={onPrevious}
+                      ref={previousButtonRef}
+                    >
+                      Previous
+                    </button>
+                  )}
+                  {useCancelButton && (
+                    <button
+                      type="button"
+                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={onClose}
+                      ref={cancelButtonRef}
+                    >
+                      Cancel
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/src/components/Modal/StepsModal/index.ts b/src/components/Modal/StepsModal/index.ts
new file mode 100644
index 0000000..7c9bae5
--- /dev/null
+++ b/src/components/Modal/StepsModal/index.ts
@@ -0,0 +1 @@
+export { StepsModal } from './StepsModal';
diff --git a/src/components/Modal/StepsModal/types.ts b/src/components/Modal/StepsModal/types.ts
new file mode 100644
index 0000000..f0b5bbd
--- /dev/null
+++ b/src/components/Modal/StepsModal/types.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export type StepsModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onNext: () => void;
+  onPrevious: () => void;
+  title?: string;
+  onSave?: () => void;
+  useCancelButton?: boolean;
+  isLoading?: boolean;
+  leftActions?: React.ReactNode;
+  showSaveButton?: boolean;
+  showPreviousButton?: boolean;
+  saveButtonDisabled?: boolean;
+};
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 4ef3e38..e5800df 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,2 +1,3 @@
 export { ConfirmationModal } from './ConfirmationModal';
 export { Modal } from './Modal';
+export { StepsModal } from './StepsModal';
diff --git a/src/components/Steps/ProgressSteps.tsx b/src/components/ProgressSteps/ProgressSteps.tsx
similarity index 100%
rename from src/components/Steps/ProgressSteps.tsx
rename to src/components/ProgressSteps/ProgressSteps.tsx
diff --git a/src/components/Steps/index.ts b/src/components/ProgressSteps/index.ts
similarity index 100%
rename from src/components/Steps/index.ts
rename to src/components/ProgressSteps/index.ts
diff --git a/src/components/Steps/types.ts b/src/components/ProgressSteps/types.ts
similarity index 100%
rename from src/components/Steps/types.ts
rename to src/components/ProgressSteps/types.ts
diff --git a/src/components/UserModal/UserModal.tsx b/src/components/UserModal/UserModal.tsx
index 0993b94..404db4b 100644
--- a/src/components/UserModal/UserModal.tsx
+++ b/src/components/UserModal/UserModal.tsx
@@ -68,6 +68,8 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
     setAdminRoleSelected(isAdminDashboardRoleSelected);
     if (isAdminDashboardRoleSelected) {
       fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
+    } else {
+      fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.User }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dashboardRole]);
diff --git a/src/components/index.ts b/src/components/index.ts
index aff49e2..9a2f607 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,6 @@ export { Header } from './Header';
 export { Table } from './Table';
 export { Banner } from './Banner';
 export { Tabs } from './Tabs';
-export { Modal, ConfirmationModal } from './Modal';
+export { Modal, ConfirmationModal, StepsModal } from './Modal';
 export { UserModal } from './UserModal';
-export { ProgressSteps } from './Steps';
+export { ProgressSteps } from './ProgressSteps';
diff --git a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
index 02200e8..74f60c6 100644
--- a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
+++ b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 
-import { Banner, Modal, ProgressSteps } from 'src/components';
+import { Banner, StepsModal, ProgressSteps } from 'src/components';
 import { Select, TextArea } from 'src/components/Form';
 import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
 import { allAppAccessList } from 'src/components/UserModal/consts';
-import { ProgressStepInfo, ProgressStepStatus } from 'src/components/Steps/types';
+import { ProgressStepInfo, ProgressStepStatus } from 'src/components/ProgressSteps/types';
 import { initialMultipleUsersForm, MultipleUsersModalProps } from './types';
 
 export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) => {
@@ -181,6 +181,8 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
     onClose();
   };
 
+  const getActiveStepIndex = () => _.findIndex(steps, { status: ProgressStepStatus.Current });
+
   const updateStepsStatus = (nextIndex: number) => {
     const updatedSteps = [...steps];
     _.forEach(updatedSteps, (step, index) => {
@@ -200,17 +202,32 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
     updateStepsStatus(activeStepIndex);
   };
 
-  const getActiveStepIndex = _.findIndex(steps, { status: ProgressStepStatus.Current });
-  const disableSave = _.isEmpty(csvDataWatch) || _.some(steps, { status: ProgressStepStatus.Upcoming });
+  const handleNext = () => {
+    const nextIndex = getActiveStepIndex() + 1;
+    updateStepsStatus(nextIndex);
+  };
+
+  const handlePrevious = () => {
+    const nextIndex = getActiveStepIndex() - 1;
+    updateStepsStatus(nextIndex);
+  };
+
+  const activeStepIndex = getActiveStepIndex();
+  const showSave = !_.some(steps, { status: ProgressStepStatus.Upcoming });
+  const showPrevious = _.some(steps, { status: ProgressStepStatus.Complete });
 
   return (
-    <Modal
+    <StepsModal
       onClose={handleClose}
       open={open}
       onSave={handleSave}
+      onNext={handleNext}
+      onPrevious={handlePrevious}
+      showPreviousButton={showPrevious}
       isLoading={userModalLoading}
       useCancelButton
-      saveButtonDisabled={disableSave}
+      showSaveButton={showSave}
+      saveButtonDisabled={_.isEmpty(csvDataWatch)}
     >
       <div className="bg-white px-4">
         <div className="space-y-10 divide-y divide-gray-200">
@@ -220,12 +237,12 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
             </div>
             <div className="sm:px-6 pt-6">
               <ProgressSteps steps={steps} onStepClick={handleStepClick}>
-                {getActiveStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
+                {activeStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
               </ProgressSteps>
             </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </StepsModal>
   );
 };
diff --git a/src/services/users/redux/actions.ts b/src/services/users/redux/actions.ts
index ac5adc9..a09b590 100644
--- a/src/services/users/redux/actions.ts
+++ b/src/services/users/redux/actions.ts
@@ -227,21 +227,14 @@ export const createBatchUsers = (users: any) => async (dispatch: Dispatch<any>)
     });
 
     // show information about created users
-    const createdUsersNumber = _.size(responseData.createdUsers);
-    if (createdUsersNumber > 0) {
-      showToast(
-        `${_.size(responseData.createdUsers)} ${createdUsersNumber > 1 ? 'users' : 'user'} created successfully.`,
-        ToastType.Success,
-      );
+    if (!_.isEmpty(responseData.success)) {
+      showToast(responseData.success.message, ToastType.Success);
     }
-    const notCreatedUsersNumber = _.size(responseData.notCreatedUsers);
-    if (notCreatedUsersNumber > 0) {
-      showToast(
-        `${_.size(responseData.notCreatedUsers)} 
-        ${notCreatedUsersNumber > 1 ? 'users' : 'user'} not created with 
-        ${notCreatedUsersNumber > 1 ? 'emails' : 'email'}: \n${responseData.notCreatedUsers.join(',\n')}`,
-        ToastType.Error,
-      );
+    if (!_.isEmpty(responseData.existing)) {
+      showToast(responseData.existing.message, ToastType.Error);
+    }
+    if (!_.isEmpty(responseData.failed)) {
+      showToast(responseData.failed.message, ToastType.Error);
     }
 
     dispatch(fetchUsers());
diff --git a/src/services/users/transformations.ts b/src/services/users/transformations.ts
index 65b869c..21e7db4 100644
--- a/src/services/users/transformations.ts
+++ b/src/services/users/transformations.ts
@@ -86,7 +86,8 @@ export const transformRequestMultipleUsers = (data: MultipleUsersData) => {
 
 export const transformBatchResponse = (response: any): any => {
   return {
-    createdUsers: response.created_users,
-    notCreatedUsers: response.not_created_users,
+    success: response.success,
+    existing: response.existing,
+    failed: response.failed,
   };
 };

From d57fe9f48853f54731a6389a8a2bdfa0dc98eaac Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic@init.hr>
Date: Wed, 27 Jul 2022 13:44:00 +0200
Subject: [PATCH 5/5] add duration to toast show until closed for batch users

---
 src/common/util/show-toast.tsx      | 6 +++---
 src/services/users/redux/actions.ts | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/common/util/show-toast.tsx b/src/common/util/show-toast.tsx
index 351a985..0ab0f3c 100644
--- a/src/common/util/show-toast.tsx
+++ b/src/common/util/show-toast.tsx
@@ -9,7 +9,7 @@ export enum ToastType {
   Error = 'error',
 }
 
-export const showToast = (text: string, type?: ToastType) => {
+export const showToast = (text: string, type?: ToastType, duration?: number) => {
   switch (type) {
     case ToastType.Error:
       toast.custom(
@@ -47,7 +47,7 @@ export const showToast = (text: string, type?: ToastType) => {
             </div>
           </Transition>
         ),
-        { position: 'top-right' },
+        { position: 'top-right', duration },
       );
       break;
     default:
@@ -86,7 +86,7 @@ export const showToast = (text: string, type?: ToastType) => {
             </div>
           </Transition>
         ),
-        { position: 'top-right' },
+        { position: 'top-right', duration },
       );
   }
 };
diff --git a/src/services/users/redux/actions.ts b/src/services/users/redux/actions.ts
index a09b590..7643b41 100644
--- a/src/services/users/redux/actions.ts
+++ b/src/services/users/redux/actions.ts
@@ -228,13 +228,13 @@ export const createBatchUsers = (users: any) => async (dispatch: Dispatch<any>)
 
     // show information about created users
     if (!_.isEmpty(responseData.success)) {
-      showToast(responseData.success.message, ToastType.Success);
+      showToast(responseData.success.message, ToastType.Success, Infinity);
     }
     if (!_.isEmpty(responseData.existing)) {
-      showToast(responseData.existing.message, ToastType.Error);
+      showToast(responseData.existing.message, ToastType.Error, Infinity);
     }
     if (!_.isEmpty(responseData.failed)) {
-      showToast(responseData.failed.message, ToastType.Error);
+      showToast(responseData.failed.message, ToastType.Error, Infinity);
     }
 
     dispatch(fetchUsers());