[pull] main from KelvinTegelaar:main

Tools/Start-CippDevEmulators.ps1

@@ -1,8 +1,14 @@
-Write-Host 'Starting CIPP Dev Emulators'
+Get-Command wt -ErrorAction Stop | Out-Null
 Get-Process node -ErrorAction SilentlyContinue | Stop-Process -ErrorAction SilentlyContinue
 $Path = (Get-Item $PSScriptRoot).Parent.Parent.FullName
 
-$Process = Read-Host -Prompt 'Start Process Function (y/N)?'
+pwsh -file (Join-Path $PSScriptRoot 'Start-CippDevInstallation.ps1')
+
+Write-Host 'Starting CIPP Dev Emulators'
+
+if (Test-Path (Join-Path $Path 'CIPP-API-Processor')) {
+  $Process = Read-Host -Prompt 'Start Process Function (y/N)?'
+}
 
 if ($Process -eq 'y') {
     wt --title CIPP`; new-tab --title 'Azurite' -d $Path pwsh -c azurite`; new-tab --title 'FunctionApp' -d $Path\CIPP-API pwsh -c func start`; new-tab --title 'CIPP Frontend' -d $Path\CIPP pwsh -c npm run dev`; new-tab --title 'SWA' -d $Path\CIPP pwsh -c npm run start-swa`; new-tab --title 'CIPP-API-Processor' -d $Path\CIPP-API-Processor pwsh -c func start --port 7072

Tools/Start-CippDevInstallation.ps1

@@ -1,32 +1,32 @@
 $Path = (Get-Item $PSScriptRoot).Parent.Parent.FullName
 
-if (-not(Get-Command npm)) {
-  throw 'npm is required to install the CIPP development environment'
+if (-not((Get-Command npm -ErrorAction SilentlyContinue) -or (Get-Command yarn -ErrorAction SilentlyContinue))) {
+  throw 'npm or yarn is required to install the CIPP development environment.'
 }
 
-if (-not(Get-Command azurite)) {
+if (-not(Get-Command yarn -ErrorAction SilentlyContinue)) {
+  Write-Host 'Installing Yarn'
+  npm install --global yarn
+}
+
+if (-not(Get-Command azurite -ErrorAction SilentlyContinue)) {
   Write-Host 'Installing Azurite'
-  npm install --global 'azurite'
+  yarn global add 'azurite'
 }
 
-if (-not(Get-Command swa)) {
+if (-not(Get-Command swa -ErrorAction SilentlyContinue)) {
   Write-Host 'Installing @azure/static-web-apps-cli'
-  npm install --global '@azure/static-web-apps-cli'
+  yarn global add '@azure/static-web-apps-cli'
 }
 
-if (-not(Get-Command func)) {
+if (-not(Get-Command func -ErrorAction SilentlyContinue)) {
   Write-Host 'Installing Azure Functions Core Tools'
-  npm install --global 'azure-functions-core-tools@4' --unsafe-perms true
-}
-
-if (-not(Get-Command yarn)) {
-  Write-Host 'Installing Yarn'
-  npm install --global yarn
+  yarn global add 'azure-functions-core-tools@4'
 }
 
-if (-not(yarn list --global --pattern 'next' | Select-String -Pattern 'next')) {
+if (-not(yarn global list | Select-String -Pattern 'next')) {
   Write-Host 'Installing Next.js'
-  yarn install --global next --network-timeout 500000
+  yarn global add 'next'
 }
 
 yarn install --cwd (Join-Path $Path "CIPP") --network-timeout 500000

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.1.3"
+  "version": "7.2.1"
 }

src/components/CippCards/CippBannerListCard.jsx

@@ -143,7 +143,7 @@ export const CippBannerListCard = (props) => {
                     </Stack>
                   </Stack>
                   {isCollapsible && (
-                    <Collapse in={isExpanded}>
+                    <Collapse in={isExpanded} unmountOnExit>
                       <Divider />
                       <Stack spacing={1}>
                         {item?.propertyItems?.length > 0 && (

src/components/CippCards/CippButtonCard.jsx

@@ -23,6 +23,7 @@ export default function CippButtonCard({
   variant,
   component = "card",
   accordionExpanded = false,
+  onAccordionChange,
 }) {
   const [cardExpanded, setCardExpanded] = useState(accordionExpanded);
   useEffect(() => {
@@ -31,6 +32,12 @@ export default function CippButtonCard({
     }
   }, [accordionExpanded]);
 
+  useEffect(() => {
+    if (onAccordionChange) {
+      onAccordionChange(cardExpanded);
+    }
+  }, [cardExpanded]);
+
   return (
     <Card variant={variant} sx={cardSx}>
       {component === "card" && (

src/components/CippCards/CippDomainCards.jsx

@@ -510,7 +510,7 @@ export const CippDomainCards = ({ domain: propDomain = "", fullwidth = false })
                 </Button>
               </Grid>
             </Grid>
-            <Collapse in={optionsVisible}>
+            <Collapse in={optionsVisible} unmountOnExit>
               <Stack direction="column" spacing={1} sx={{ mt: 1 }}>
                 <Controller
                   name="spfRecord"

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>
           )}

src/components/CippComponents/CippApiDialog.jsx

@@ -17,11 +17,21 @@ export const CippApiDialog = (props) => {
     row = {},
     relatedQueryKeys,
     dialogAfterEffect,
+    allowResubmit = false,
     ...other
   } = props;
   const router = useRouter();
   const [addedFieldData, setAddedFieldData] = useState({});
   const [partialResults, setPartialResults] = useState([]);
+  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+
+  useEffect(() => {
+    if (createDialog.open) {
+      setIsFormSubmitted(false);
+      formHook.reset();
+    }
+  }, [createDialog.open]);
+
   const [getRequestInfo, setGetRequestInfo] = useState({
     url: "",
     waiting: false,
@@ -103,6 +113,7 @@ export const CippApiDialog = (props) => {
   };
   const tenantFilter = useSettings().currentTenant;
   const handleActionClick = (row, action, formData) => {
+    setIsFormSubmitted(true);
     if (action.multiPost === undefined) {
       action.multiPost = false;
     }
@@ -207,14 +218,63 @@ export const CippApiDialog = (props) => {
   const onSubmit = (data) => handleActionClick(row, api, data);
   const selectedType = api.type === "POST" ? actionPostRequest : actionGetRequest;
 
+  useEffect(() => {
+    if (api?.setDefaultValues && createDialog.open) {
+      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) => {
+            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] !== "" &&
+          (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}]`;
     });
@@ -239,17 +299,35 @@ export const CippApiDialog = (props) => {
     setPartialResults([]);
   };
 
+  var confirmText;
+  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) {
+    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}>
             {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
@@ -270,8 +348,8 @@ export const CippApiDialog = (props) => {
           <Button color="inherit" onClick={() => handleClose()}>
             Close
           </Button>
-          <Button variant="contained" type="submit">
-            Confirm
+          <Button variant="contained" type="submit" disabled={isFormSubmitted && !allowResubmit}>
+            {isFormSubmitted && allowResubmit ? "Reconfirm" : "Confirm"}
           </Button>
         </DialogActions>
       </form>