added steps modal with next and previous buttons

- changes for improve app access setting flow

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

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 handleNext = () => {
-  const disableSave = _.isEmpty(csvDataWatch) || _.some(steps, { status: ProgressStepStatus.Upcoming });
+    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>
   );
 };

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 (!_.isEmpty(responseData.success)) {
-    if (createdUsersNumber > 0) {
+      showToast(responseData.success.message, ToastType.Success);
-      showToast(
-        `${_.size(responseData.createdUsers)} ${createdUsersNumber > 1 ? 'users' : 'user'} created successfully.`,
-        ToastType.Success,
-      );
     }
-    const notCreatedUsersNumber = _.size(responseData.notCreatedUsers);
+    if (!_.isEmpty(responseData.existing)) {
-    if (notCreatedUsersNumber > 0) {
+      showToast(responseData.existing.message, ToastType.Error);
-      showToast(
+    }
-        `${_.size(responseData.notCreatedUsers)} 
+    if (!_.isEmpty(responseData.failed)) {
-        ${notCreatedUsersNumber > 1 ? 'users' : 'user'} not created with 
+      showToast(responseData.failed.message, ToastType.Error);
-        ${notCreatedUsersNumber > 1 ? 'emails' : 'email'}: \n${responseData.notCreatedUsers.join(',\n')}`,
-        ToastType.Error,
-      );
     }
 
     dispatch(fetchUsers());

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,
+    success: response.success,
-    notCreatedUsers: response.not_created_users,
+    existing: response.existing,
+    failed: response.failed,
   };
 };