improvement: address feedback

frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tab } from "@headlessui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Checkbox, FormControl, Switch } from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Switch } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import {
@@ -42,8 +44,9 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
   const { currentWorkspace } = useWorkspace();
   const { name: destinationName } = SECRET_SYNC_MAP[destination];
 
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-  const [confirmOverwrite, setConfirmOverwrite] = useState(false);
 
   const { syncOption } = useSecretSyncOption(destination);
 
@@ -77,6 +80,7 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
       onComplete(secretSync);
     } catch (err: any) {
       console.error(err);
+      setShowConfirmation(false);
       createNotification({
         title: `Failed to add ${destinationName} Sync`,
         text: err.message,
@@ -94,7 +98,7 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
     setSelectedTabIndex((prev) => prev - 1);
   };
 
-  const { handleSubmit, trigger, watch, control } = formMethods;
+  const { handleSubmit, trigger, control } = formMethods;
 
   const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
 
@@ -102,7 +106,7 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
 
   const handleNext = async () => {
     if (isFinalStep) {
-      handleSubmit(onSubmit)();
+      setShowConfirmation(true);
       return;
     }
 
@@ -123,113 +127,146 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
     return isEnabled;
   };
 
-  const initialSyncBehavior = watch("syncOptions.initialSyncBehavior");
+  if (showConfirmation)
+    return (
+      <>
+        <div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
+          <div className="mb-1 flex items-center text-sm">
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+            Secret Sync Behavior
+          </div>
+          <p className="mt-1 text-sm text-bunker-200">
+            Secret Syncs are the source of truth for connected third-party services. Any secret,
+            including associated data, not present or imported in Infisical before syncing will be
+            overwritten, and changes directly in the connected service outside of infisical may also
+            be overwritten by future syncs.
+          </p>
+        </div>
+        <div className="mt-4 flex gap-4">
+          <Button
+            isDisabled={createSecretSync.isPending}
+            isLoading={createSecretSync.isPending}
+            onClick={handleSubmit(onSubmit)}
+            colorSchema="secondary"
+          >
+            I Understand
+          </Button>
+
+          <Button
+            isDisabled={createSecretSync.isPending}
+            variant="plain"
+            onClick={() => setShowConfirmation(false)}
+            colorSchema="secondary"
+          >
+            Cancel
+          </Button>
+        </div>
+      </>
+    );
 
   return (
-    <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
-      <FormProvider {...formMethods}>
-        <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
-            {FORM_TABS.map((tab, index) => (
-              <Tab
-                onClick={async (e) => {
-                  e.preventDefault();
-                  const isEnabled = await isTabEnabled(index);
-                  setSelectedTabIndex((prev) => (isEnabled ? index : prev));
-                }}
-                className={({ selected }) =>
-                  `w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
-                    selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
-                      : "text-bunker-300"
-                  }`
-                }
-                key={tab.key}
-              >
-                {index + 1}. {tab.name}
-              </Tab>
-            ))}
-          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
-              <SecretSyncSourceFields />
-            </Tab.Panel>
-            <Tab.Panel>
-              <SecretSyncDestinationFields />
-            </Tab.Panel>
-            <Tab.Panel>
-              <SecretSyncOptionsFields />
-              <Controller
-                control={control}
-                name="isAutoSyncEnabled"
-                render={({ field: { value, onChange }, fieldState: { error } }) => {
-                  return (
-                    <FormControl
-                      helperText={
-                        value
-                          ? "Secrets will automatically be synced when changes occur in the source location."
-                          : "Secrets will not automatically be synced when changes occur in the source location. You can still trigger syncs manually."
-                      }
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Switch
-                        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
-                        id="auto-sync-enabled"
-                        thumbClassName="bg-mineshaft-800"
-                        onCheckedChange={onChange}
-                        isChecked={value}
+    <>
+      <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
+        <FormProvider {...formMethods}>
+          <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+            <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+              {FORM_TABS.map((tab, index) => (
+                <Tab
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    const isEnabled = await isTabEnabled(index);
+                    setSelectedTabIndex((prev) => (isEnabled ? index : prev));
+                  }}
+                  className={({ selected }) =>
+                    `w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                      selected
+                        ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                        : "text-bunker-300"
+                    }`
+                  }
+                  key={tab.key}
+                >
+                  {index + 1}. {tab.name}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels>
+              <Tab.Panel>
+                <SecretSyncSourceFields />
+              </Tab.Panel>
+              <Tab.Panel>
+                <SecretSyncDestinationFields />
+              </Tab.Panel>
+              <Tab.Panel>
+                <SecretSyncOptionsFields />
+                <Controller
+                  control={control}
+                  name="isAutoSyncEnabled"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        helperText={
+                          value
+                            ? "Secrets will automatically be synced when changes occur in the source location."
+                            : "Secrets will not automatically be synced when changes occur in the source location. You can still trigger syncs manually."
+                        }
+                        isError={Boolean(error)}
+                        errorText={error?.message}
                       >
-                        <p className="w-[8.4rem]">Auto-Sync {value ? "Enabled" : "Disabled"}</p>
-                      </Switch>
-                    </FormControl>
-                  );
-                }}
-              />
-            </Tab.Panel>
-            <Tab.Panel>
-              <SecretSyncDetailsFields />
-            </Tab.Panel>
-            <Tab.Panel>
-              <SecretSyncReviewFields />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </FormProvider>
-      {isFinalStep &&
-        initialSyncBehavior === SecretSyncInitialSyncBehavior.OverwriteDestination && (
-          <Checkbox
-            id="confirm-overwrite"
-            isChecked={confirmOverwrite}
-            containerClassName="-mt-5"
-            onCheckedChange={(isChecked) => setConfirmOverwrite(Boolean(isChecked))}
-          >
-            <p
-              className={`mt-5 text-wrap text-xs ${confirmOverwrite ? "text-mineshaft-200" : "text-red"}`}
-            >
-              I understand all secrets present in the configured {destinationName} destination will
-              be removed if they are not present within Infisical.
-            </p>
-          </Checkbox>
-        )}
-      <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
-        <Button
-          isDisabled={
-            isFinalStep &&
-            initialSyncBehavior === SecretSyncInitialSyncBehavior.OverwriteDestination &&
-            !confirmOverwrite
-          }
-          onClick={handleNext}
-          colorSchema="secondary"
-        >
-          {isFinalStep ? "Create Sync" : "Next"}
-        </Button>
-        {selectedTabIndex > 0 && (
-          <Button onClick={handlePrev} colorSchema="secondary">
-            Back
+                        <Switch
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
+                          id="auto-sync-enabled"
+                          thumbClassName="bg-mineshaft-800"
+                          onCheckedChange={onChange}
+                          isChecked={value}
+                        >
+                          <p className="w-[8.4rem]">Auto-Sync {value ? "Enabled" : "Disabled"}</p>
+                        </Switch>
+                      </FormControl>
+                    );
+                  }}
+                />
+              </Tab.Panel>
+              <Tab.Panel>
+                <SecretSyncDetailsFields />
+              </Tab.Panel>
+              <Tab.Panel>
+                <SecretSyncReviewFields />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </FormProvider>
+
+        <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
+          <Button onClick={handleNext} colorSchema="secondary">
+            {isFinalStep ? "Create Sync" : "Next"}
           </Button>
-        )}
-      </div>
-    </form>
+          {selectedTabIndex > 0 && (
+            <Button onClick={handlePrev} colorSchema="secondary">
+              Back
+            </Button>
+          )}
+        </div>
+      </form>
+      <Modal isOpen={showConfirmation} onOpenChange={setShowConfirmation}>
+        <ModalContent
+          title="Import Secrets"
+          subTitle={`Import secrets into Infisical from this ${destinationName} Sync destination.`}
+        >
+          <div className="mt-6 flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
+            <div className="mb-1 flex items-center text-sm">
+              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+              Secret Sync Behavior
+            </div>
+            <p className="mb-2 mt-1 text-sm text-bunker-200">
+              Secret Syncs are the source of truth for connected third-party services. Any secret
+              not present or imported in Infisical before syncing will be overwritten, and changes
+              made directly in the connected service may also be overwritten by future syncs from
+              Infisical.
+            </p>
+          </div>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx

@@ -63,6 +63,31 @@ export const AwsParameterStoreSyncOptionsFields = () => {
               onChange={(option) =>
                 onChange((option as SingleValue<TAwsConnectionKmsKey>)?.alias ?? null)
               }
+              // eslint-disable-next-line react/no-unstable-nested-components
+              noOptionsMessage={({ inputValue }) =>
+                inputValue ? undefined : (
+                  <p>
+                    To configure a KMS key, ensure the following permissions are present on the
+                    selected IAM role:{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:ListKeys&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:ListAliases&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:Encrypt&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:Decrypt&#34;
+                    </span>
+                    .
+                  </p>
+                )
+              }
               options={kmsKeys}
               placeholder="Leave blank to use default KMS key"
               getOptionLabel={(option) =>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx

@@ -18,8 +18,8 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
   return (
     <>
       {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
-      {tags?.length && (
-        <SecretSyncLabel label="AWS Tags">
+      {tags && tags.length > 0 && (
+        <SecretSyncLabel label="Resource Tags">
           <Tooltip
             side="right"
             className="max-w-xl p-1"
@@ -52,7 +52,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
         </SecretSyncLabel>
       )}
       {syncSecretMetadataAsTags && (
-        <SecretSyncLabel label="AWS Tags">
+        <SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
           <Badge variant="success">Enabled</Badge>
         </SecretSyncLabel>
       )}

frontend/src/hooks/api/appConnections/aws/types.ts

@@ -1,13 +1,5 @@
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
-export type TDatabricksSecretScope = {
-  name: string;
-};
-
-export type TDatabricksConnectionListSecretScopesResponse = {
-  secretScopes: TDatabricksSecretScope[];
-};
-
 export type TListAwsConnectionKmsKeys = {
   connectionId: string;
   region: string;

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx

@@ -19,7 +19,7 @@ export const SecretSyncsTab = () => {
   const { data: secretSyncs = [], isPending: isSecretSyncsPending } = useListSecretSyncs(
     currentWorkspace.id,
     {
-      refetchInterval: 4000
+      refetchInterval: 30000
     }
   );
 

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx

@@ -37,7 +37,7 @@ const PageContent = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["editSync"] as const);
 
   const { data: secretSync, isPending } = useGetSecretSync(destination, syncId, {
-    refetchInterval: 4000
+    refetchInterval: 30000
   });
 
   if (isPending) {

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx

@@ -17,7 +17,7 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
   return (
     <>
       {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
-      {tags?.length && (
+      {tags && tags.length > 0 && (
         <SecretSyncLabel label="Resource Tags">
           <Tooltip
             side="right"