feature: add support for kms key, tags, and syncing secret metadata to aws parameter store sync

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

@@ -1,17 +1,71 @@
 import { useFormContext } from "react-hook-form";
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge } from "@app/components/v2";
+import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
-export const AwsParameterStoreSyncReviewFields = () => {
+export const AwsParameterStoreSyncOptionsReviewFields = () => {
   const { watch } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.AWSParameterStore }
   >();
 
-  const [region, path] = watch(["destinationConfig.region", "destinationConfig.path"]);
+  const [{ keyId, tags, syncSecretMetadataAsTags }] = watch(["syncOptions"]);
+
+  return (
+    <>
+      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {tags?.length && (
+        <SecretSyncLabel label="AWS Tags">
+          <Tooltip
+            side="right"
+            className="max-w-xl p-1"
+            content={
+              <Table>
+                <THead>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
+                  <Th className="p-2">Value</Th>
+                </THead>
+                <TBody>
+                  {tags.map((tag) => (
+                    <Tr key={tag.key}>
+                      <Td className="p-2">{tag.key}</Td>
+                      <Td className="p-2">{tag.value}</Td>
+                    </Tr>
+                  ))}
+                </TBody>
+              </Table>
+            }
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>
+                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
+                </span>
+              </Badge>
+            </div>
+          </Tooltip>
+        </SecretSyncLabel>
+      )}
+      {syncSecretMetadataAsTags && (
+        <SecretSyncLabel label="AWS Tags">
+          <Badge variant="success">Enabled</Badge>
+        </SecretSyncLabel>
+      )}
+    </>
+  );
+};
+
+export const AwsParameterStoreDestinationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.AWSParameterStore }
+  >();
+
+  const [{ region, path }] = watch(["destinationConfig"]);
 
   const awsRegion = AWS_REGIONS.find((r) => r.slug === region);
 

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

@@ -3,15 +3,18 @@ import { useFormContext } from "react-hook-form";
 
 import { SecretSyncLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { AwsSecretsManagerSyncReviewFields } from "@app/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields";
-import { DatabricksSyncReviewFields } from "@app/components/secret-syncs/forms/SecretSyncReviewFields/DatabricksSyncReviewFields";
 import { Badge } from "@app/components/v2";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
-import { AwsParameterStoreSyncReviewFields } from "./AwsParameterStoreSyncReviewFields";
+import {
+  AwsParameterStoreDestinationReviewFields,
+  AwsParameterStoreSyncOptionsReviewFields
+} from "./AwsParameterStoreSyncReviewFields";
+import { AwsSecretsManagerSyncReviewFields } from "./AwsSecretsManagerSyncReviewFields";
 import { AzureAppConfigurationSyncReviewFields } from "./AzureAppConfigurationSyncReviewFields";
 import { AzureKeyVaultSyncReviewFields } from "./AzureKeyVaultSyncReviewFields";
+import { DatabricksSyncReviewFields } from "./DatabricksSyncReviewFields";
 import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
 import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
 
@@ -19,6 +22,7 @@ export const SecretSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
 
   let DestinationFieldsComponent: ReactNode;
+  let AdditionalSyncOptionsFieldsComponent: ReactNode;
 
   const {
     name,
@@ -38,7 +42,8 @@ export const SecretSyncReviewFields = () => {
 
   switch (destination) {
     case SecretSync.AWSParameterStore:
-      DestinationFieldsComponent = <AwsParameterStoreSyncReviewFields />;
+      DestinationFieldsComponent = <AwsParameterStoreDestinationReviewFields />;
+      AdditionalSyncOptionsFieldsComponent = <AwsParameterStoreSyncOptionsReviewFields />;
       break;
     case SecretSync.AWSSecretsManager:
       DestinationFieldsComponent = <AwsSecretsManagerSyncReviewFields />;
@@ -84,7 +89,7 @@ export const SecretSyncReviewFields = () => {
       </div>
       <div className="flex flex-col gap-3">
         <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Options</span>
+          <span className="text-sm text-mineshaft-300">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <SecretSyncLabel label="Auto-Sync">
@@ -97,6 +102,7 @@ export const SecretSyncReviewFields = () => {
           </SecretSyncLabel>
           {/* <SecretSyncLabel label="Prepend Prefix">{prependPrefix}</SecretSyncLabel>
           <SecretSyncLabel label="Append Suffix">{appendSuffix}</SecretSyncLabel> */}
+          {AdditionalSyncOptionsFieldsComponent}
         </div>
       </div>
       <div className="flex flex-col gap-3">