added wizard dropdown

KelvinTegelaar · Sep 27, 2024 · 1ce88db · 1ce88db
1 parent abc54a9
commit 1ce88db
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 49 deletions.
diff --git a/src/components/CippComponents/CippApiDialog.jsx b/src/components/CippComponents/CippApiDialog.jsx
@@ -158,8 +158,8 @@ export const CippApiDialog = (props) => {
                       key={index}
                       multiline={false}
                       fullWidth
-                      name={field.name}
-                      {...formHook.register(field.name)}
+                      name={fieldProps.name}
+                      {...formHook.register(fieldProps.name)}
                     />
                   );
                 case "textArea":
@@ -169,8 +169,8 @@ export const CippApiDialog = (props) => {
                       multiline
                       fullWidth
                       rows={4}
-                      {...field}
-                      {...formHook.register(field.name)}
+                      {...fieldProps}
+                      {...formHook.register(fieldProps.name)}
                     />
                   );
                 default:

diff --git a/src/components/CippComponents/CippAutocomplete.jsx b/src/components/CippComponents/CippAutocomplete.jsx
@@ -32,39 +32,49 @@ export const CippAutoComplete = (props) => {
     ...getRequestInfo,
   });
 
-  const currentTenant = useSettings().currentTenant;
-
+  const currentTenant = api?.tenantFilter ? api.tenantFilter : useSettings().currentTenant;
   useEffect(() => {
     if (api) {
       setGetRequestInfo({
         url: api.url,
-        data: { tenantFilter: currentTenant, ...api.data },
+        data: {
+          ...(!api.excludeTenantFilter ? { TenantFilter: currentTenant } : null),
+          ...api.data,
+        },
         waiting: true,
         queryKey: api.queryKey,
       });
     }
 
     if (actionGetRequest.isSuccess) {
-      const convertedOptions = actionGetRequest.data?.map((option) => {
-        // Store the addedField values here
+      const dataToMap = api.dataKey ? actionGetRequest.data?.[api.dataKey] : actionGetRequest.data;
+      if (!Array.isArray(dataToMap)) {
+        setUsedOptions([
+          {
+            label: "Error: The API returned data we cannot map to this field",
+            value: "Error: The API returned data we cannot map to this field",
+          },
+        ]);
+        return;
+      }
+      const convertedOptions = dataToMap.map((option) => {
         const addedFields = {};
         if (api.addedField) {
           Object.keys(api.addedField).forEach((key) => {
             addedFields[key] = option[api.addedField[key]];
           });
         }
         return {
-          label: option[api.labelField],
+          label:
+            typeof api.labelField === "function" ? api.labelField(option) : option[api.labelField],
           value: option[api.valueField],
-          addedFields: addedFields, // Pass the added fields along with the value
+          addedFields: addedFields,
         };
       });
-
       setUsedOptions(convertedOptions);
     }
-
     if (actionGetRequest.isError) {
-      setUsedOptions({ label: "Error", value: getCippError(actionGetRequest.error) });
+      setUsedOptions([{ label: getCippError(actionGetRequest.error), value: "error" }]);
     }
   }, [api, actionGetRequest.data]);
 
@@ -79,6 +89,7 @@ export const CippAutoComplete = (props) => {
           <ArrowDropDown />
         )
       }
+      isOptionEqualToValue={(option, value) => option.value === value.value}
       value={value}
       filterSelectedOptions
       disableClearable={disableClearable}

diff --git a/src/components/CippComponents/CippTenantSelector.jsx b/src/components/CippComponents/CippTenantSelector.jsx
@@ -24,7 +24,7 @@ export const CippTenantSelector = (props) => {
   // Fetch tenant list
   const tenantList = ApiGetCall({
     url: "/api/listTenants",
-    data: { allTenants: allTenants },
+    data: { AllTenantSelector: true },
     queryKey: "TenantSelector",
   });
 
@@ -136,7 +136,7 @@ export const CippTenantSelector = (props) => {
                 }))
               : []
           }
-          getOptionLabel={(option) => option?.label || ""} // Ensure label is correctly extracted
+          getOptionLabel={(option) => option?.label || ""}
           isOptionEqualToValue={
             (option, value) => option.value === value.value // Custom equality test to compare the tenant by value
           }

diff --git a/src/components/CippWizard/CippTenantStep.jsx b/src/components/CippWizard/CippTenantStep.jsx
@@ -1,13 +1,37 @@
 import { Stack } from "@mui/material";
 import { CippWizardStepButtons } from "./CippWizardStepButtons";
-import { CippTenantSelector } from "../CippComponents/CippTenantSelector";
-export const CippTenantStep = (props) => {
-  const { allTenants, type, onNextStep, formControl, currentStep, onPreviousStep } = props;
+import CippFormComponent from "../CippComponents/CippFormComponent";
 
+export const CippTenantStep = (props) => {
+  const {
+    allTenants,
+    type = "single",
+    onNextStep,
+    formControl,
+    currentStep,
+    onPreviousStep,
+  } = props;
   return (
     <Stack spacing={3}>
       <label>Select a tenant</label>
-      <CippTenantSelector width="100%" tenantButton={false} allTenants={allTenants} type={type} />
+      <CippFormComponent
+        type="autoComplete"
+        name="tenantFilter"
+        formControl={formControl}
+        placeholder="Select a tenant"
+        api={{
+          excludeTenantFilter: true,
+          url: allTenants ? "/api/ListTenants" : "/api/ListTenants?AllTenantSelector=true",
+          queryKey: "ListTenants",
+          labelField: (option) => `${option.displayName} (${option.defaultDomainName})`,
+          valueField: "customerId",
+        }}
+        multiple={type === "single" ? false : true}
+        disableClearable={true}
+        validators={{
+          required: { value: true, message: "This field is required" },
+        }}
+      />
       <CippWizardStepButtons
         currentStep={currentStep}
         onPreviousStep={onPreviousStep}

diff --git a/src/components/CippWizard/CippWizardAutoComplete.jsx b/src/components/CippWizard/CippWizardAutoComplete.jsx
@@ -0,0 +1,48 @@
+import { Stack } from "@mui/material";
+import { CippWizardStepButtons } from "./CippWizardStepButtons";
+import CippFormComponent from "../CippComponents/CippFormComponent";
+
+export const CippWizardAutoComplete = (props) => {
+  const {
+    title,
+    type = "single",
+    name,
+    placeholder,
+    api,
+    onNextStep,
+    formControl,
+    currentStep,
+    onPreviousStep,
+  } = props;
+
+  const currentTenant = formControl.watch("tenantFilter");
+
+  return (
+    <Stack spacing={3}>
+      <label>{title}</label>
+      <CippFormComponent
+        key={currentTenant ? currentTenant.value : "default"}
+        type="autoComplete"
+        name={name}
+        formControl={formControl}
+        placeholder={placeholder}
+        api={{
+          ...api,
+          tenantFilter: currentTenant ? currentTenant.value : undefined,
+          queryKey: `${api.url}-${currentTenant ? currentTenant.value : "default"}`,
+        }}
+        multiple={type === "single" ? false : true}
+        disableClearable={true}
+        validators={{
+          required: { value: true, message: "This field is required" },
+        }}
+      />
+      <CippWizardStepButtons
+        currentStep={currentStep}
+        onPreviousStep={onPreviousStep}
+        onNextStep={onNextStep}
+        formControl={formControl}
+      />
+    </Stack>
+  );
+};
diff --git a/src/components/CippWizard/CippWizardConfirmation.js b/src/components/CippWizard/CippWizardConfirmation.js
@@ -1,12 +1,11 @@
-import { Alert, Button, Card, CircularProgress, Stack, Typography } from "@mui/material";
+import { Alert, Card, Stack, Typography } from "@mui/material";
 import { PropertyList } from "../property-list";
-import { PropertyListItem } from "../property-list-item";
 import { ApiPostCall } from "../../api/ApiCall";
-import { LoadingButton } from "@mui/lab";
 import { ResourceError } from "../resource-error";
+import CippWizardStepButtons from "./CippWizardStepButtons";
 
 export const CippWizardConfirmation = (props) => {
-  const { onPreviousStep, values } = props;
+  const { formControl, onPreviousStep, onNextStep, currentStep } = props;
 
   const postRequest = ApiPostCall({ urlFromData: true });
 
@@ -16,31 +15,20 @@ export const CippWizardConfirmation = (props) => {
         <Typography variant="h6">Step 4. Confirmation</Typography>
       </div>
       <Card variant="outlined">
-        <PropertyList>
-          <PropertyListItem label={"Deployment Region"} value={values.region} />
-          <PropertyListItem label={"First User"} value={values.UserPrincipalName} />
-        </PropertyList>
+        <PropertyList>//confirmation list here</PropertyList>
       </Card>
       {postRequest.data?.data && (
         <Alert severity={postRequest.data?.data?.success ? "success" : "warning"}>
           {postRequest.data?.data?.result}
         </Alert>
       )}
       {postRequest.isError && <ResourceError message={postRequest.error.message} />}
-      <Stack alignItems="center" direction="row" justifyContent="flex-end" spacing={2}>
-        <Button color="inherit" onClick={onPreviousStep} size="large" type="button">
-          Back
-        </Button>
-        <LoadingButton
-          loading={postRequest.isFetching || postRequest.isPending}
-          size="large"
-          type="submit"
-          onClick={() => postRequest.mutate({ url: values.url, ...values })}
-          variant="contained"
-        >
-          Confirm
-        </LoadingButton>
-      </Stack>
+      <CippWizardStepButtons
+        currentStep={currentStep}
+        onPreviousStep={onPreviousStep}
+        onNextStep={onNextStep}
+        formControl={formControl}
+      />
     </Stack>
   );
 };
diff --git a/src/pages/identity/administration/offboarding-wizard/index.js b/src/pages/identity/administration/offboarding-wizard/index.js
@@ -1,14 +1,60 @@
-
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { CippWizardConfirmation } from "/src/components/CippWizard/CippWizardConfirmation";
+import CippWizardPage from "/src/components/CippWizard/CippWizardPage.jsx";
+import { CippTenantStep } from "/src/components/CippWizard/CippTenantStep.jsx";
+import { CippWizardAutoComplete } from "../../../../components/CippWizard/CippWizardAutoComplete";
 
 const Page = () => {
-  const pageTitle = "Offboarding Wizard";
+  const steps = [
+    {
+      title: "Step 1",
+      description: "Tenant Selection",
+      component: CippTenantStep,
+      componentProps: {
+        allTenants: false,
+        type: "single",
+      },
+    },
+    {
+      title: "Step 2",
+      description: "User Selection",
+      component: CippWizardAutoComplete,
+      componentProps: {
+        title: "Select the users to offboard",
+        name: "user",
+        placeholder: "Select User",
+        api: {
+          url: "/api/ListGraphRequest",
+          dataKey: "Results",
+          data: {
+            Endpoint: "users",
+            manualPagination: true,
+            $select: "id,userPrincipalName,displayName",
+            $count: true,
+            $orderby: "displayName",
+            $top: 999,
+          },
+          labelField: (option) => `${option.displayName} (${option.userPrincipalName})`,
+          valueField: "id",
+        },
+      },
+    },
+    {
+      title: "Step 3",
+      description: "Offboarding Options",
+      component: CippWizardConfirmation,
+    },
+    {
+      title: "Step 4",
+      description: "Confirmation",
+      component: CippWizardConfirmation,
+    },
+  ];
 
   return (
-    <div>
-      <h1>{pageTitle}</h1>
-      <p>This is a placeholder page for the offboarding wizard section.</p>
-    </div>
+    <>
+      <CippWizardPage steps={steps} wizardTitle="User Offboarding Wizard" />
+    </>
   );
 };
 

diff --git a/src/pages/onboarding.js b/src/pages/onboarding.js
@@ -12,7 +12,7 @@ const Page = () => {
       component: CippTenantStep,
       componentProps: {
         allTenants: true,
-        type: "select",
+        type: "single",
       },
     },
     {