Merge pull request #82 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev
bmsimp · Feb 10, 2025 · 14dc725 · 14dc725
2 parents 356fd63 + dc07d6d
commit 14dc725
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 60 deletions.
diff --git a/src/components/CippCards/CippPropertyListCard.jsx b/src/components/CippCards/CippPropertyListCard.jsx
@@ -122,15 +122,25 @@ export const CippPropertyListCard = (props) => {
                 )}
               </PropertyList>
               <PropertyList>
-                {secondHalf.map((item, index) => (
+                {isFetching ? (
                   <PropertyListItem
+                    key={"loading-bar"}
                     align={align}
                     divider={showDivider}
-                    copyItems={copyItems}
-                    key={`${index}-index-PropertyListOffCanvas`}
-                    {...item}
+                    label="Loading"
+                    value={<Skeleton width={280} />}
                   />
-                ))}
+                ) : (
+                  secondHalf.map((item, index) => (
+                    <PropertyListItem
+                      align={align}
+                      divider={showDivider}
+                      copyItems={copyItems}
+                      key={`${index}-index-PropertyListOffCanvas`}
+                      {...item}
+                    />
+                  ))
+                )}
               </PropertyList>
             </Stack>
           )}

diff --git a/src/components/CippComponents/CippApiDialog.jsx b/src/components/CippComponents/CippApiDialog.jsx
@@ -28,6 +28,7 @@ export const CippApiDialog = (props) => {
   useEffect(() => {
     if (createDialog.open) {
       setIsFormSubmitted(false);
+      formHook.reset();
     }
   }, [createDialog.open]);
 
@@ -217,48 +218,64 @@ export const CippApiDialog = (props) => {
   const onSubmit = (data) => handleActionClick(row, api, data);
   const selectedType = api.type === "POST" ? actionPostRequest : actionGetRequest;
 
-  if (api?.setDefaultValues) {
-    fields.map((field) => {
-      if (
-        ((typeof row[field.name] === "string" && field.type === "textField") ||
-          (typeof row[field.name] === "boolean" && field.type === "switch")) &&
-        row[field.name] !== undefined &&
-        row[field.name] !== null &&
-        row[field.name] !== ""
-      ) {
-        formHook.setValue(field.name, row[field.name]);
-      } else if (Array.isArray(row[field.name]) && field.type === "autoComplete") {
-        var values = [];
-        row[field.name].map((element) => {
-          values.push({
-            label: element,
-            value: element,
+  useEffect(() => {
+    if (api?.setDefaultValues && createDialog.open) {
+      fields.map((field) => {
+        console.log(field.name, row[field.name]);
+        if (
+          ((typeof row[field.name] === "string" && field.type === "textField") ||
+            (typeof row[field.name] === "boolean" && field.type === "switch")) &&
+          row[field.name] !== undefined &&
+          row[field.name] !== null &&
+          row[field.name] !== ""
+        ) {
+          formHook.setValue(field.name, row[field.name]);
+        } else if (Array.isArray(row[field.name]) && field.type === "autoComplete") {
+          var values = [];
+          row[field.name].map((element) => {
+            if (element.label && element.value) {
+              values.push(element);
+            } else if (typeof element === "string" || typeof element === "number") {
+              values.push({
+                label: element,
+                value: element,
+              });
+            }
           });
-        });
-        formHook.setValue(field.name, values);
-      } else if (
-        field.type === "autoComplete" &&
-        row[field.name] !== undefined &&
-        row[field.name] !== null &&
-        row[field.name] !== "" &&
-        typeof row[field.name] === "string"
-      ) {
-        formHook.setValue(field.name, {
-          label: row[field.name],
-          value: row[field.name],
-        });
-      }
-    });
-  }
+          formHook.setValue(field.name, values);
+        } else if (
+          field.type === "autoComplete" &&
+          row[field.name] !== "" &&
+          (typeof row[field.name] === "string" ||
+            (typeof row[field.name] === "object" &&
+              row[field.name] !== undefined &&
+              row[field.name] !== null))
+        ) {
+          if (typeof row[field.name] === "string") {
+            formHook.setValue(field.name, {
+              label: row[field.name],
+              value: row[field.name],
+            });
+          } else if (
+            typeof row[field.name] === "object" &&
+            row[field.name]?.label &&
+            row[field.name]?.value
+          ) {
+            formHook.setValue(field.name, row[field.name]);
+          }
+        }
+      });
+    }
+  }, [createDialog.open, api?.setDefaultValues]);
+
+  const getNestedValue = (obj, path) => {
+    return path
+      .split(".")
+      .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
+  };
 
   // Handling link navigation
   if (api.link) {
-    const getNestedValue = (obj, path) => {
-      return path
-        .split(".")
-        .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
-    };
-
     const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
       return getNestedValue(row, key) || `[${key}]`;
     });
@@ -283,12 +300,29 @@ export const CippApiDialog = (props) => {
     setPartialResults([]);
   };
 
+  var confirmText;
+  console.log(row);
+  if (typeof api?.confirmText === "string" && !Array.isArray(row)) {
+    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
+      return getNestedValue(row, key) || `[${key}]`;
+    });
+  } else if (Array.isArray(row) && row.length > 1) {
+    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, "the selected rows");
+  } else if (Array.isArray(row) && row.length === 1) {
+    console.log("single row in array");
+    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
+      return getNestedValue(row[0], key) || `[${key}]`;
+    });
+  } else {
+    confirmText = api.confirmText;
+  }
+
   return (
     <Dialog fullWidth maxWidth="sm" onClose={handleClose} open={createDialog.open}>
       <form onSubmit={formHook.handleSubmit(onSubmit)}>
         <DialogTitle>{title}</DialogTitle>
         <DialogContent>
-          <Stack spacing={3}>{api.confirmText}</Stack>
+          <Stack spacing={3}>{confirmText}</Stack>
         </DialogContent>
         <DialogContent>
           <Grid container spacing={2}>
@@ -317,7 +351,6 @@ export const CippApiDialog = (props) => {
           <Button variant="contained" type="submit" disabled={isFormSubmitted && !allowResubmit}>
             {isFormSubmitted && allowResubmit ? "Reconfirm" : "Confirm"}
           </Button>
-          {console.log("isFormSubmitted", isFormSubmitted)}
         </DialogActions>
       </form>
     </Dialog>

diff --git a/src/components/CippComponents/CippApiResults.jsx b/src/components/CippComponents/CippApiResults.jsx
@@ -1,6 +1,6 @@
-import { Close, ContentCopy } from "@mui/icons-material";
+import { Close } from "@mui/icons-material";
 import { Alert, CircularProgress, Collapse, IconButton, Typography } from "@mui/material";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useCallback } from "react";
 import { getCippError } from "../../utils/get-cipp-error";
 import { CippCopyToClipBoard } from "./CippCopyToClipboard";
 import { Grid } from "@mui/system";
@@ -136,7 +136,7 @@ export const CippApiResults = (props) => {
   const allResults = useMemo(() => {
     const apiResults = extractAllResults(correctResultObj);
     return apiResults;
-  }, [apiObject]);
+  }, [correctResultObj]);
 
   useEffect(() => {
     setErrorVisible(!!apiObject.isError);
@@ -170,9 +170,9 @@ export const CippApiResults = (props) => {
     errorsOnly,
   ]);
 
-  const handleCloseResult = (id) => {
+  const handleCloseResult = useCallback((id) => {
     setFinalResults((prev) => prev.map((r) => (r.id === id ? { ...r, visible: false } : r)));
-  };
+  }, []);
 
   const hasVisibleResults = finalResults.some((r) => r.visible);
   return (

diff --git a/src/components/CippComponents/CippAutocomplete.jsx b/src/components/CippComponents/CippAutocomplete.jsx
@@ -68,6 +68,7 @@ export const CippAutoComplete = (props) => {
     required = false,
     isFetching = false,
     sx,
+    removeOptions = [],
     ...other
   } = props;
 
@@ -172,7 +173,15 @@ export const CippAutoComplete = (props) => {
     }
   }, [api, actionGetRequest.data, actionGetRequest.isSuccess, actionGetRequest.isError]);
 
-  const memoizedOptions = useMemo(() => (api ? usedOptions : options), [api, usedOptions, options]);
+  const memoizedOptions = useMemo(() => {
+    let finalOptions = api ? usedOptions : options;
+    if (removeOptions && removeOptions.length) {
+      finalOptions = finalOptions.filter(
+        (o) => !removeOptions.includes(o.value)
+      );
+    }
+    return finalOptions;
+  }, [api, usedOptions, options, removeOptions]);
 
   const rand = Math.random().toString(36).substring(5);
 
@@ -201,7 +210,7 @@ export const CippAutoComplete = (props) => {
           options.some(
             (option) => params.inputValue === option.value || params.inputValue === option.label
           );
-
+        console.log(removeOptions);
         if (params.inputValue !== "" && creatable && !isExisting) {
           filtered.push({
             label: `Add option: "${params.inputValue}"`,

diff --git a/src/components/CippComponents/CippFormTenantSelector.jsx b/src/components/CippComponents/CippFormTenantSelector.jsx
@@ -9,6 +9,7 @@ export const CippFormTenantSelector = ({
   valueField = "defaultDomainName",
   required = true,
   disableClearable = true,
+  removeOptions = [],
   ...other
 }) => {
   const validators = () => {
@@ -42,6 +43,7 @@ export const CippFormTenantSelector = ({
       multiple={type === "single" ? false : true}
       disableClearable={disableClearable}
       validators={validators}
+      removeOptions={removeOptions}
       {...other}
     />
   );

diff --git a/src/components/CippIntegrations/CippApiClientManagement.jsx b/src/components/CippIntegrations/CippApiClientManagement.jsx
@@ -68,7 +68,7 @@ const CippApiClientManagement = () => {
           <PencilIcon />
         </SvgIcon>
       ),
-      confirmText: "Update the API client settings:",
+      confirmText: "Update the API client settings for [AppName]?",
       hideBulk: true,
       setDefaultValues: true,
       fields: [
@@ -89,7 +89,7 @@ const CippApiClientManagement = () => {
         },
         {
           type: "autoComplete",
-          name: "IpRange",
+          name: "IPRange",
           multiple: true,
           freeSolo: true,
           creatable: true,
@@ -114,7 +114,7 @@ const CippApiClientManagement = () => {
     {
       label: "Reset Application Secret",
       icon: <Key />,
-      confirmText: "Are you sure you want to reset the application secret?",
+      confirmText: "Are you sure you want to reset the application secret for [AppName]?",
       type: "POST",
       url: "/api/ExecApiClient",
       data: {
@@ -136,7 +136,7 @@ const CippApiClientManagement = () => {
     {
       label: "Delete Client",
       icon: <TrashIcon />,
-      confirmText: "Are you sure you want to delete this client?",
+      confirmText: "Are you sure you want to delete [AppName]?",
       type: "POST",
       url: "/api/ExecApiClient",
       data: {
@@ -324,7 +324,7 @@ const CippApiClientManagement = () => {
           },
           {
             type: "autoComplete",
-            name: "IpRange",
+            name: "IPRange",
             multiple: true,
             freeSolo: true,
             creatable: true,
@@ -391,7 +391,7 @@ const CippApiClientManagement = () => {
           },
           {
             type: "autoComplete",
-            name: "IpRange",
+            name: "IPRange",
             multiple: true,
             freeSolo: true,
             creatable: true,

diff --git a/src/components/CippIntegrations/CippIntegrationTenantMapping.jsx b/src/components/CippIntegrations/CippIntegrationTenantMapping.jsx
@@ -85,7 +85,7 @@ const CippIntegrationSettings = ({ children }) => {
     if (tableData?.find((item) => item.TenantId === selectedTenant.addedFields.customerId)) return;
 
     const newRowData = {
-      TenantId: selectedTenant.addedFields.customerId,
+      TenantId: selectedTenant.value,
       Tenant: selectedTenant.label,
       IntegrationName: selectedCompany.label,
       IntegrationId: selectedCompany.value,
@@ -167,6 +167,8 @@ const CippIntegrationSettings = ({ children }) => {
                     multiple={false}
                     required={false}
                     disableClearable={false}
+                    removeOptions={tableData.map((item) => item.TenantId)}
+                    valueField="customerId"
                   />
                 </Box>
               </Grid>

diff --git a/src/pages/tenant/standards/template.jsx b/src/pages/tenant/standards/template.jsx
@@ -74,7 +74,10 @@ const Page = () => {
   }, {});
 
   const handleOpenDialog = () => setDialogOpen(true);
-  const handleCloseDialog = () => setDialogOpen(false);
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setSearchQuery("");
+  };
 
   const filterStandards = (standardsList) =>
     standardsList.filter(