implement progress steps component

2022-07-19 00:21:06 +02:00 · 2022-07-19 00:21:06 +02:00 · bc1a072515
commit bc1a072515
parent 8822d479a0
9 changed files with 318 additions and 73 deletions
--- 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) => (
--- 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>
--- 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;
 };
--- a/src/components/Steps/ProgressSteps.tsx
+++ 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>
+      )}
+    </>
+  );
+};
--- a/src/components/Steps/index.ts
+++ b/src/components/Steps/index.ts
@ -0,0 +1 @@
+export { ProgressSteps } from './ProgressSteps';
--- a/src/components/Steps/types.ts
+++ 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,
+}
--- 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 = [
--- 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';
--- a/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
+++ b/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@ -1,51 +1,65 @@
-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 handleSave = async () => {
-    try {
-      await handleSubmit((data) => createUsers(data))();
-    } catch (e: any) {
-      // Continue
+  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 }));
    }
-
-    onClose();
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
+    // 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"
-          label="CSV user data"
-          placeholder="Please paste users in CSV format: email,name"
+            placeholder={`Please paste users in CSV format: email, name\nuser1@example.com,User One\nuser2@example.com,User Two`}
            rows={15}
            required
          />
        </div>
+      </div>
    );
  };

@ -56,10 +70,50 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
          <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.map((item, index) => {
+            <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">
@ -73,11 +127,12 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
                            {_.find(allAppAccessList, ['name', item.name!])?.label}
                          </h3>
                        </div>
-                      <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' },
@ -96,21 +151,77 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
    );
  };

+  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 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 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>
				`@ -0,0 +1 @@`
				`export { ProgressSteps } from './ProgressSteps';`