[pull] main from KelvinTegelaar:main

package.json

@@ -8,7 +8,7 @@
   },
   "license": "AGPL-3.0",
   "engines": {
-    "node": "^20.18.3"
+    "node": "^22.13.0"
   },
   "repository": {
     "type": "git",
@@ -71,6 +71,7 @@
     "nprogress": "0.2.0",
     "numeral": "2.0.6",
     "prop-types": "15.8.1",
+    "punycode": "^2.3.1",
     "react": "19.0.0",
     "react-apexcharts": "1.7.0",
     "react-beautiful-dnd": "13.1.1",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.4.1"
+  "version": "7.4.2"
 }

src/components/CippCards/CippDomainCards.jsx

@@ -28,6 +28,7 @@ import { CippCodeBlock } from "/src/components/CippComponents/CippCodeBlock";
 import { CippOffCanvas } from "../CippComponents/CippOffCanvas";
 import { CippPropertyListCard } from "./CippPropertyListCard";
 import { getCippFormatting } from "../../utils/get-cipp-formatting";
+import punycode from "punycode";
 
 const ResultList = ({ passes = [], warns = [], fails = [] }) => (
   <Stack direction="column" sx={{ mt: 1 }}>
@@ -395,7 +396,8 @@ export const CippDomainCards = ({ domain: propDomain = "", fullwidth = false })
   }, [propDomain, setValue]);
 
   const onSubmit = (values) => {
-    setDomain(values.domain);
+    const punycodedDomain = punycode.toASCII(values.domain);
+    setDomain(punycodedDomain);
     setSelector(values.dkimSelector);
     setSpfRecord(values.spfRecord);
     setSubdomains(values.subdomains);

src/components/CippComponents/CippApiDialog.jsx

@@ -282,38 +282,36 @@ export const CippApiDialog = (props) => {
       .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
   };
 
-  // Handling external link navigation
-  useEffect(() => {
-    if (api.link && createDialog.open) {
-      const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
-        return getNestedValue(row, key) || `[${key}]`;
-      });
+  const [linkClicked, setLinkClicked] = useState(false);
 
-      if (!linkWithRowData.startsWith("/")) {
-        window.open(linkWithRowData, api.target || "_blank");
-        createDialog.handleClose();
-      }
-    }
-  }, [api.link, createDialog.open]);
+  useEffect(() => {
+    if (api.link && !linkClicked && row && Object.keys(row).length > 0) {
+      const timeoutId = setTimeout(() => {
+        const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
+          return getNestedValue(row, key) || `[${key}]`;
+        });
 
-  // Handling internal link navigation
-  if (api.link && createDialog.open) {
-    const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
-      return getNestedValue(row, key) || `[${key}]`;
-    });
+        if (linkWithRowData.startsWith("/")) {
+          // Internal link navigation
+          setLinkClicked(true);
+          router.push(linkWithRowData, undefined, { shallow: true });
+        } else {
+          // External link navigation
+          setLinkClicked(true);
+          window.open(linkWithRowData, api.target || "_blank");
+        }
+      }, 0); // Delay execution to the next event loop cycle
 
-    if (linkWithRowData.startsWith("/")) {
-      router.push(linkWithRowData, undefined, { shallow: true });
-      createDialog.handleClose();
+      return () => clearTimeout(timeoutId);
     }
-  }
+  }, [api.link, linkClicked, row, router]);
 
   useEffect(() => {
-    if (api.noConfirm) {
+    if (api.noConfirm && !api.link) {
       formHook.handleSubmit(onSubmit)(); // Submits the form on mount
       createDialog.handleClose(); // Closes the dialog after submitting
     }
-  }, [api.noConfirm]); // Run effect only when api.noConfirm changes
+  }, [api.noConfirm, api.link]); // Run effect when noConfirm or link changes
 
   const handleClose = () => {
     createDialog.handleClose();
@@ -336,44 +334,52 @@ export const CippApiDialog = (props) => {
   }
 
   return (
-    <Dialog fullWidth maxWidth="sm" onClose={handleClose} open={createDialog.open} {...other}>
-      <form onSubmit={formHook.handleSubmit(onSubmit)}>
-        <DialogTitle>{title}</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2}>{confirmText}</Stack>
-        </DialogContent>
-        <DialogContent>
-          <Grid container spacing={2}>
-            {fields &&
-              fields.map((fieldProps, index) => {
-                if (fieldProps?.api?.processFieldData) {
-                  fieldProps.api.data = processActionData(fieldProps.api.data, row);
-                }
-                return (
-                  <Grid item xs={12} key={index}>
-                    <CippFormComponent
-                      formControl={formHook}
-                      addedFieldData={addedFieldData}
-                      setAddedFieldData={setAddedFieldData}
-                      {...fieldProps}
-                    />
-                  </Grid>
-                );
-              })}
-          </Grid>
-        </DialogContent>
-        <DialogContent>
-          <CippApiResults apiObject={{ ...selectedType, data: partialResults }} />
-        </DialogContent>
-        <DialogActions>
-          <Button color="inherit" onClick={() => handleClose()}>
-            Close
-          </Button>
-          <Button variant="contained" type="submit" disabled={isFormSubmitted && !allowResubmit}>
-            {isFormSubmitted && allowResubmit ? "Reconfirm" : "Confirm"}
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
+    <>
+      {!api?.link && (
+        <Dialog fullWidth maxWidth="sm" onClose={handleClose} open={createDialog.open} {...other}>
+          <form onSubmit={formHook.handleSubmit(onSubmit)}>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+              <Stack spacing={2}>{confirmText}</Stack>
+            </DialogContent>
+            <DialogContent>
+              <Grid container spacing={2}>
+                {fields &&
+                  fields.map((fieldProps, index) => {
+                    if (fieldProps?.api?.processFieldData) {
+                      fieldProps.api.data = processActionData(fieldProps.api.data, row);
+                    }
+                    return (
+                      <Grid item xs={12} key={index}>
+                        <CippFormComponent
+                          formControl={formHook}
+                          addedFieldData={addedFieldData}
+                          setAddedFieldData={setAddedFieldData}
+                          {...fieldProps}
+                        />
+                      </Grid>
+                    );
+                  })}
+              </Grid>
+            </DialogContent>
+            <DialogContent>
+              <CippApiResults apiObject={{ ...selectedType, data: partialResults }} />
+            </DialogContent>
+            <DialogActions>
+              <Button color="inherit" onClick={() => handleClose()}>
+                Close
+              </Button>
+              <Button
+                variant="contained"
+                type="submit"
+                disabled={isFormSubmitted && !allowResubmit}
+              >
+                {isFormSubmitted && allowResubmit ? "Reconfirm" : "Confirm"}
+              </Button>
+            </DialogActions>
+          </form>
+        </Dialog>
+      )}
+    </>
   );
 };

src/components/CippComponents/CippApiResults.jsx

@@ -38,7 +38,7 @@ const extractAllResults = (data) => {
 
     if (item && typeof item === "object") {
       const text = item.resultText || "";
-      const copyField = item.copyField || text;
+      const copyField = item.copyField || "";
       const severity =
         typeof item.state === "string" ? item.state : getSeverity(item) ? "error" : "success";
 
@@ -47,6 +47,7 @@ const extractAllResults = (data) => {
           text,
           copyField,
           severity,
+          ...item,
         };
       }
     }
@@ -172,6 +173,7 @@ export const CippApiResults = (props) => {
             copyField: res.copyField,
             severity: res.severity,
             visible: true,
+            ...res,
           }))
         );
       } else {

src/components/CippComponents/CippCustomVariables.jsx

@@ -92,8 +92,8 @@ const CippCustomVariables = ({ id }) => {
     <CardContent>
       <Alert severity="info" sx={{ mb: 2 }}>
         {id === "AllTenants"
-          ? "Global variables are key-value pairs that can be used to store additional information for All Tenants. These are applied to templates in standards using the format %VariableName%. If a tenant has a custom variable with the same name, the tenant's variable will take precedence."
-          : "Custom variables are key-value pairs that can be used to store additional information about a tenant. These are applied to templates in standards using the format %VariableName%."}
+          ? "Global variables are key-value pairs that can be used to store additional information for All Tenants. These are applied to templates in standards using the format %variablename%. If a tenant has a custom variable with the same name, the tenant's variable will take precedence."
+          : "Custom variables are key-value pairs that can be used to store additional information about a tenant. These are applied to templates in standards using the format %variablename%."}
       </Alert>
       <CippDataTable
         queryKey={`CustomVariables_${id}`}

src/components/CippTable/CippDataTable.js

@@ -24,6 +24,7 @@ import { CippApiDialog } from "../CippComponents/CippApiDialog";
 import { getCippError } from "../../utils/get-cipp-error";
 import { Box } from "@mui/system";
 import { useSettings } from "../../hooks/use-settings";
+import { isEqual } from "lodash"; // Import lodash for deep comparison
 
 export const CippDataTable = (props) => {
   const {
@@ -79,9 +80,11 @@ export const CippDataTable = (props) => {
 
   useEffect(() => {
     if (Array.isArray(data) && !api?.url) {
-      setUsedData(data);
+      if (!isEqual(data, usedData)) {
+        setUsedData(data);
+      }
     }
-  }, [data, api?.url]);
+  }, [data, api?.url, usedData]);
 
   useEffect(() => {
     if (getRequestData.isSuccess && !getRequestData.isFetching) {
@@ -127,7 +130,13 @@ export const CippDataTable = (props) => {
     queryKey,
   ]);
   useEffect(() => {
-    if (!Array.isArray(usedData) || usedData.length === 0 || typeof usedData[0] !== "object") {
+    if (
+      !Array.isArray(usedData) ||
+      usedData.length === 0 ||
+      typeof usedData[0] !== "object" ||
+      usedData === null ||
+      usedData === undefined
+    ) {
       return;
     }
     const apiColumns = utilColumnsFromAPI(usedData);
@@ -156,7 +165,7 @@ export const CippDataTable = (props) => {
     }
     setUsedColumns(finalColumns);
     setColumnVisibility(newVisibility);
-  }, [columns.length, usedData.length, queryKey]);
+  }, [columns.length, usedData, queryKey]);
 
   const createDialog = useDialog();
 
@@ -195,7 +204,7 @@ export const CippDataTable = (props) => {
       },
     }),
     columns: memoizedColumns,
-    data: memoizedData,
+    data: memoizedData ?? [],
     state: {
       columnVisibility,
       sorting,
@@ -294,8 +303,8 @@ export const CippDataTable = (props) => {
               data={data}
               columnVisibility={columnVisibility}
               getRequestData={getRequestData}
-              usedColumns={usedColumns}
-              usedData={usedData}
+              usedColumns={memoizedColumns}
+              usedData={memoizedData ?? []}
               title={title}
               actions={actions}
               exportEnabled={exportEnabled}