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

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

@@ -1,57 +0,0 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
-import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
-import { TSecretSync } from "@app/hooks/api/secretSyncs";
-
-type Props = {
-  secretSync: TSecretSync;
-  // onEditOptions: VoidFunction;
-};
-
-export const SecretSyncOptionsSection = ({
-  secretSync
-  // onEditOptions
-}: Props) => {
-  const {
-    destination,
-    syncOptions: {
-      // appendSuffix,
-      // prependPrefix,
-      initialSyncBehavior
-    }
-  } = secretSync;
-
-  return (
-    <div>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
-          {/* <ProjectPermissionCan
-            I={ProjectPermissionSecretSyncActions.Edit}
-            a={ProjectPermissionSub.SecretSyncs}
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-                ariaLabel="Edit sync options"
-                onClick={onEditOptions}
-              >
-                <FontAwesomeIcon icon={faEdit} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan> */}
-        </div>
-        <div>
-          <div className="space-y-3">
-            <SecretSyncLabel label="Initial Sync Behavior">
-              {SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP[initialSyncBehavior](destination).name}
-            </SecretSyncLabel>
-            {/* <SecretSyncLabel label="Prefix">{prependPrefix}</SecretSyncLabel>
-            <SecretSyncLabel label="Suffix">{appendSuffix}</SecretSyncLabel> */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -0,0 +1,60 @@
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";
+
+type Props = {
+  secretSync: TAwsParameterStoreSync;
+};
+
+export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
+  const {
+    syncOptions: { keyId, tags, syncSecretMetadataAsTags }
+  } = secretSync;
+
+  return (
+    <>
+      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {tags?.length && (
+        <SecretSyncLabel label="Resource 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="Sync Secret Metadata as Resource Tags">
+          <Badge variant="success">Enabled</Badge>
+        </SecretSyncLabel>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,87 @@
+import { ReactNode } from "react";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { IconButton } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
+import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
+
+import { AwsParameterStoreSyncOptionsSection } from "./AwsParameterStoreSyncOptionsSection";
+
+type Props = {
+  secretSync: TSecretSync;
+  onEditOptions: VoidFunction;
+};
+
+export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) => {
+  const {
+    destination,
+    syncOptions: {
+      // appendSuffix,
+      // prependPrefix,
+      initialSyncBehavior
+    }
+  } = secretSync;
+
+  let AdditionalSyncOptionsComponent: ReactNode;
+
+  switch (destination) {
+    case SecretSync.AWSParameterStore:
+      AdditionalSyncOptionsComponent = (
+        <AwsParameterStoreSyncOptionsSection secretSync={secretSync} />
+      );
+      break;
+    case SecretSync.AWSSecretsManager:
+    case SecretSync.GitHub:
+    case SecretSync.GCPSecretManager:
+    case SecretSync.AzureKeyVault:
+    case SecretSync.AzureAppConfiguration:
+    case SecretSync.Databricks:
+      AdditionalSyncOptionsComponent = null;
+      break;
+    default:
+      throw new Error(`Unhandled Destination Review Fields: ${destination}`);
+  }
+
+  return (
+    <div>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
+          {AdditionalSyncOptionsComponent && (
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretSyncActions.Edit}
+              a={ProjectPermissionSub.SecretSyncs}
+            >
+              {(isAllowed) => (
+                <IconButton
+                  variant="plain"
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                  ariaLabel="Edit sync options"
+                  onClick={onEditOptions}
+                >
+                  <FontAwesomeIcon icon={faEdit} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          )}
+        </div>
+        <div>
+          <div className="space-y-3">
+            <SecretSyncLabel label="Initial Sync Behavior">
+              {SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP[initialSyncBehavior](destination).name}
+            </SecretSyncLabel>
+            {/* <SecretSyncLabel label="Prefix">{prependPrefix}</SecretSyncLabel>
+            <SecretSyncLabel label="Suffix">{appendSuffix}</SecretSyncLabel> */}
+            {AdditionalSyncOptionsComponent}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/index.ts

@@ -0,0 +1 @@
+export * from "./SecretSyncOptionsSection";