From 934f4f1c9336f46d6db7db4d4b9b53d1579d285d Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 19:15:33 -0500 Subject: [PATCH 1/6] CippApiDialog improve setDefaultValues support --- .../CippComponents/CippApiDialog.jsx | 82 +++++++++++-------- .../CippApiClientManagement.jsx | 6 +- 2 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/components/CippComponents/CippApiDialog.jsx b/src/components/CippComponents/CippApiDialog.jsx index f8f7b00b57e6..0b5811578679 100644 --- 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,39 +218,55 @@ 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]); // Handling link navigation if (api.link) { @@ -317,7 +334,6 @@ export const CippApiDialog = (props) => { - {console.log("isFormSubmitted", isFormSubmitted)} diff --git a/src/components/CippIntegrations/CippApiClientManagement.jsx b/src/components/CippIntegrations/CippApiClientManagement.jsx index 9f51d6aa0c9a..2dc0d021e1cd 100644 --- a/src/components/CippIntegrations/CippApiClientManagement.jsx +++ b/src/components/CippIntegrations/CippApiClientManagement.jsx @@ -89,7 +89,7 @@ const CippApiClientManagement = () => { }, { type: "autoComplete", - name: "IpRange", + name: "IPRange", multiple: true, freeSolo: true, creatable: true, @@ -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, From 0cf18352d0d99e60e08ef937e3b4e8f4935986e7 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 19:49:06 -0500 Subject: [PATCH 2/6] fix skeleton loading for second half --- .../CippCards/CippPropertyListCard.jsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/CippCards/CippPropertyListCard.jsx b/src/components/CippCards/CippPropertyListCard.jsx index ff7cdcd92a64..136d77e61635 100644 --- a/src/components/CippCards/CippPropertyListCard.jsx +++ b/src/components/CippCards/CippPropertyListCard.jsx @@ -122,15 +122,25 @@ export const CippPropertyListCard = (props) => { )} - {secondHalf.map((item, index) => ( + {isFetching ? ( } /> - ))} + ) : ( + secondHalf.map((item, index) => ( + + )) + )} )} From 92e0c42aa164bc214a53208b515a801472049b8a Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 19:56:09 -0500 Subject: [PATCH 3/6] fix CippApiResults reopen --- src/components/CippComponents/CippApiResults.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CippComponents/CippApiResults.jsx b/src/components/CippComponents/CippApiResults.jsx index 3ef597b2ddb1..21af58b8cc39 100644 --- 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 ( From d777103586c6ccc00de890db61a81bfa805abd21 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 20:40:21 -0500 Subject: [PATCH 4/6] remove mapped tenants from integration map --- src/components/CippComponents/CippAutocomplete.jsx | 13 +++++++++++-- .../CippComponents/CippFormTenantSelector.jsx | 2 ++ .../CippIntegrationTenantMapping.jsx | 4 +++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/CippComponents/CippAutocomplete.jsx b/src/components/CippComponents/CippAutocomplete.jsx index 6747ae0c896b..6bc938b1bf81 100644 --- 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 index d4e0b6587c76..9a8746e5ea4e 100644 --- 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/CippIntegrationTenantMapping.jsx b/src/components/CippIntegrations/CippIntegrationTenantMapping.jsx index 6bc3e95caea6..179f057db2d2 100644 --- 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" /> From ee8ccebe45c72adde3ce0d9c1638bfd0c329ee61 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 21:14:28 -0500 Subject: [PATCH 5/6] CippApiDialog add variable replace in confirmText --- .../CippComponents/CippApiDialog.jsx | 31 ++++++++++++++----- .../CippApiClientManagement.jsx | 6 ++-- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/CippComponents/CippApiDialog.jsx b/src/components/CippComponents/CippApiDialog.jsx index 0b5811578679..dc75f5b54781 100644 --- a/src/components/CippComponents/CippApiDialog.jsx +++ b/src/components/CippComponents/CippApiDialog.jsx @@ -268,14 +268,14 @@ export const CippApiDialog = (props) => { } }, [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}]`; }); @@ -300,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 (
{title} - {api.confirmText} + {confirmText} diff --git a/src/components/CippIntegrations/CippApiClientManagement.jsx b/src/components/CippIntegrations/CippApiClientManagement.jsx index 2dc0d021e1cd..71b60116dd50 100644 --- a/src/components/CippIntegrations/CippApiClientManagement.jsx +++ b/src/components/CippIntegrations/CippApiClientManagement.jsx @@ -68,7 +68,7 @@ const CippApiClientManagement = () => { ), - confirmText: "Update the API client settings:", + confirmText: "Update the API client settings for [AppName]?", hideBulk: true, setDefaultValues: true, fields: [ @@ -114,7 +114,7 @@ const CippApiClientManagement = () => { { label: "Reset Application Secret", icon: , - 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: , - 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: { From dc07d6d32b679313043578e3a4cc50bb60d53383 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Sun, 9 Feb 2025 21:44:17 -0500 Subject: [PATCH 6/6] clear search query on close dialog --- src/pages/tenant/standards/template.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/tenant/standards/template.jsx b/src/pages/tenant/standards/template.jsx index 2a5934014bc6..e9319bd742b8 100644 --- 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(