Merge branch 'feat/batch-create-users' into 'main'

Batch create users

See merge request stackspin/dashboard!48

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 },
       );
   }
 };

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) => (

src/components/Form/TextArea/index.ts

@@ -0,0 +1 @@
+export { TextArea } from './textarea';

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>;

src/components/Form/index.ts

@@ -1,2 +1,3 @@
 export { Input } from './Input';
 export { Select } from './Select';
+export { TextArea } from './TextArea';

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>

src/components/Modal/Modal/types.ts

@@ -8,4 +8,5 @@ export type ModalProps = {
   useCancelButton?: boolean;
   isLoading?: boolean;
   leftActions?: React.ReactNode;
+  saveButtonDisabled?: boolean;
 };

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>
+  );
+};

src/components/Modal/StepsModal/index.ts

@@ -0,0 +1 @@
+export { StepsModal } from './StepsModal';

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;
+};

src/components/Modal/index.ts

@@ -1,2 +1,3 @@
 export { ConfirmationModal } from './ConfirmationModal';
 export { Modal } from './Modal';
+export { StepsModal } from './StepsModal';

src/components/ProgressSteps/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>
+      )}
+    </>
+  );
+};

src/components/ProgressSteps/index.ts

@@ -0,0 +1 @@
+export { ProgressSteps } from './ProgressSteps';

src/components/ProgressSteps/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,
+}

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]);

src/components/UserModal/consts.ts

@@ -23,26 +23,35 @@ export const appAccessList = [
   },
 ];
 
-const initialAppRoles = [
+export const allAppAccessList = [
+  {
+    name: 'dashboard',
+    image: '/assets/logo-small.svg',
+    label: 'Dashboard',
+  },
+  ...appAccessList,
+];
+
+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,
   },
 ];
 

src/components/index.ts

@@ -3,5 +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 './ProgressSteps';

src/modules/users/Users.tsx

@@ -1,6 +1,6 @@
 /* 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';
@@ -8,10 +8,12 @@ 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();
@@ -39,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(
     () => [
       {
@@ -101,11 +106,19 @@ 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
               </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"
+              >
+                <ViewGridAddIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Add new users
+              </button>
             </div>
           )}
         </div>
@@ -166,6 +179,7 @@ export const Users: React.FC = () => {
         {configureModal && (
           <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
         )}
+        {multipleUsersModal && <MultipleUsersModal open={multipleUsersModal} onClose={multipleUsersModalClose} />}
       </div>
     </div>
   );

src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+
+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/ProgressSteps/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, 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))();
+    } catch (e: any) {
+      // Continue
+    }
+
+    onClose();
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const getActiveStepIndex = () => _.findIndex(steps, { status: ProgressStepStatus.Current });
+
+  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 handleStepClick = (stepId: string) => {
+    const activeStepIndex = _.findIndex(steps, { id: stepId });
+    updateStepsStatus(activeStepIndex);
+  };
+
+  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 (
+    <StepsModal
+      onClose={handleClose}
+      open={open}
+      onSave={handleSave}
+      onNext={handleNext}
+      onPrevious={handlePrevious}
+      showPreviousButton={showPrevious}
+      isLoading={userModalLoading}
+      useCancelButton
+      showSaveButton={showSave}
+      saveButtonDisabled={_.isEmpty(csvDataWatch)}
+    >
+      <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:px-6 pt-6">
+              <ProgressSteps steps={steps} onStepClick={handleStepClick}>
+                {activeStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
+              </ProgressSteps>
+            </div>
+          </div>
+        </div>
+      </div>
+    </StepsModal>
+  );
+};

src/modules/users/components/MultipleUsersModal/index.ts

@@ -0,0 +1 @@
+export { MultipleUsersModal } from './MultipleUsersModal';

src/modules/users/components/MultipleUsersModal/types.ts

@@ -0,0 +1,10 @@
+import { initialAppRoles } from 'src/components/UserModal/consts';
+
+export type MultipleUsersModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export const initialMultipleUsersForm = {
+  appRoles: initialAppRoles,
+};

src/modules/users/components/index.ts

@@ -0,0 +1 @@
+export { MultipleUsersModal } from './MultipleUsersModal';

src/services/users/hooks/use-users.ts

@@ -9,6 +9,7 @@ import {
   createUser,
   deleteUser,
   clearCurrentUser,
+  createBatchUsers,
 } from '../redux';
 import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
@@ -47,6 +48,10 @@ export function useUsers() {
     return dispatch(createUser(data));
   }
 
+  function createUsers(data: any) {
+    return dispatch(createBatchUsers(data));
+  }
+
   function deleteUserById(id: string) {
     return dispatch(deleteUser(id));
   }
@@ -64,5 +69,6 @@ export function useUsers() {
     createNewUser,
     deleteUserById,
     clearSelectedUser,
+    createUsers,
   };
 }

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>) => {
@@ -202,6 +209,44 @@ 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
+    if (!_.isEmpty(responseData.success)) {
+      showToast(responseData.success.message, ToastType.Success, Infinity);
+    }
+    if (!_.isEmpty(responseData.existing)) {
+      showToast(responseData.existing.message, ToastType.Error, Infinity);
+    }
+    if (!_.isEmpty(responseData.failed)) {
+      showToast(responseData.failed.message, ToastType.Error, Infinity);
+    }
+
+    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,

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,

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,31 @@ 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 {
+    success: response.success,
+    existing: response.existing,
+    failed: response.failed,
+  };
+};

src/services/users/types.ts

@@ -29,3 +29,8 @@ export interface UserApiRequest {
   name: string;
   status: string;
 }
+
+export interface MultipleUsersData {
+  csvUserData: string;
+  appRoles: AppRoles[];
+}