fix: allow save security attribute when api key exists (#6048)

* allow save

* move button

* auto-save

* fix margin

Author: timarney

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/components/ApiKeyButton.tsx

@@ -51,6 +51,7 @@ export const ApiKeyButton = ({
         <>
           <GenerateApiKeyButton
             loading={false}
+            className="mr-2"
             theme={theme}
             disabled={Boolean(apiKeyId)}
             onClick={() => {

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/components/ResponseDelivery.tsx

@@ -101,25 +101,28 @@ export const ResponseDelivery = () => {
   const [purposeOption, setPurposeOption] = useState(formPurpose as PurposeOption);
 
   /*--------------------------------------------*
-   * Save Delivery Option
+   * Save security attribute
    *--------------------------------------------*/
-  const saveDeliveryOptions = useCallback(async () => {
-    updateSecurityAttribute(classification);
-
-    const resultAttribute = (await updateTemplateSecurityAttribute({
-      id,
-      securityAttribute: classification,
-    })) as FormServerError;
-
-    if (resultAttribute?.error) {
-      toast.error(<ErrorSaving errorCode={FormServerErrorCodes.DELIVERY_OPTION} />, "wide");
-      return;
-    }
+  const saveSecurityAttribute = useCallback(
+    async (classification: ClassificationType) => {
+      updateSecurityAttribute(classification);
+
+      const resultAttribute = (await updateTemplateSecurityAttribute({
+        id,
+        securityAttribute: classification,
+      })) as FormServerError;
+
+      if (resultAttribute?.error) {
+        toast.error(<ErrorSaving errorCode={FormServerErrorCodes.DELIVERY_OPTION} />, "wide");
+        return;
+      }
 
-    toast.success(t("settingsResponseDelivery.savedSuccessMessage"));
+      toast.success(t("settingsResponseDelivery.savedSuccessMessage"));
 
-    refreshData && refreshData();
-  }, [t, refreshData, id, classification, updateSecurityAttribute]);
+      refreshData && refreshData();
+    },
+    [t, refreshData, id, updateSecurityAttribute]
+  );
 
   /*--------------------------------------------*
    * Save form purpose option
@@ -165,8 +168,9 @@ export const ResponseDelivery = () => {
         setDeliveryOptionValue(DeliveryOption.vault);
       }
       setClassification(value);
+      saveSecurityAttribute(value);
     },
-    [deliveryOptionValue]
+    [deliveryOptionValue, saveSecurityAttribute]
   );
 
   const handleDeleteApiKey = useCallback(() => {
@@ -200,11 +204,9 @@ export const ResponseDelivery = () => {
                 lang={lang}
                 isPublished={isPublished}
                 classification={classification}
-                disabled={hasApiKey}
                 handleUpdateClassification={handleUpdateClassification}
               />
             </div>
-
             <div className="mb-10">
               <h2 className="mb-6">{t("settingsResponseDelivery.title")}</h2>
 
@@ -296,19 +298,9 @@ export const ResponseDelivery = () => {
                   <ApiDocNotes />
                 </div>
               )}
-              {deliveryOptionValue !== DeliveryOption.api && !hasApiKey && (
-                <>
-                  <Button
-                    // disabled={!isValid || isPublished}
-                    disabled={isPublished}
-                    theme="secondary"
-                    onClick={saveDeliveryOptions}
-                  >
-                    {t("settingsResponseDelivery.saveButton")}
-                  </Button>
-                  <ResponseDeliveryHelpButtonWithApi />
-                </>
-              )}
+              <div>
+                <ResponseDeliveryHelpButtonWithApi />
+              </div>
             </div>
 
             {/*--------------------------------------------*

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/components/dialogs/ResponseDeliveryHelpDialogApiWithApi.tsx

@@ -117,7 +117,7 @@ export const ResponseDeliveryHelpButtonWithApi = () => {
 
   return (
     <>
-      <InfoIcon className="ml-4 inline-block size-5" />
+      <InfoIcon className="inline-block size-5" />
       <div className="ml-2 inline-block">
         <Button onClick={handleOpenDialog} theme="link">
           {t("settingsResponseDelivery.responseDeliveryHelpWithApi.cta")}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.