feature: secret sync base + aws parameter store & github

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection.tsx

@@ -0,0 +1,28 @@
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { Badge } from "@app/components/v2";
+import { AWS_REGIONS } from "@app/helpers/appConnections";
+import { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";
+
+type Props = {
+  secretSync: TAwsParameterStoreSync;
+};
+
+export const AwsParameterStoreSyncDestinationSection = ({ secretSync }: Props) => {
+  const {
+    destinationConfig: { path, region }
+  } = secretSync;
+
+  const awsRegion = AWS_REGIONS.find((r) => r.slug === region);
+
+  return (
+    <>
+      <SecretSyncLabel label="Region">
+        {awsRegion?.name}
+        <Badge className="ml-1" variant="success">
+          {awsRegion?.slug}{" "}
+        </Badge>
+      </SecretSyncLabel>
+      <SecretSyncLabel label="Path">{path}</SecretSyncLabel>
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection.tsx

@@ -0,0 +1,75 @@
+import { ReactNode } from "react";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GitHubSyncSelectedRepositoriesTooltipContent } from "@app/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent";
+import { Tooltip } from "@app/components/v2";
+import {
+  GitHubSyncScope,
+  GitHubSyncVisibility,
+  TGitHubSync
+} from "@app/hooks/api/secretSyncs/types/github-sync";
+
+type Props = {
+  secretSync: TGitHubSync;
+};
+
+export const GitHubSyncDestinationSection = ({ secretSync }: Props) => {
+  const { destinationConfig } = secretSync;
+
+  let Components: ReactNode;
+  switch (destinationConfig.scope) {
+    case GitHubSyncScope.Organization:
+      Components = (
+        <>
+          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+          <SecretSyncLabel label="Visibility" className="capitalize">
+            {destinationConfig.visibility} Repositories
+          </SecretSyncLabel>
+          {destinationConfig.visibility === GitHubSyncVisibility.Selected && (
+            <SecretSyncLabel label="Selected Repositories">
+              {destinationConfig.selectedRepositoryIds?.length ?? 0} Repositories
+              <Tooltip
+                side="bottom"
+                content={<GitHubSyncSelectedRepositoriesTooltipContent secretSync={secretSync} />}
+              >
+                <FontAwesomeIcon size="xs" className="ml-1 text-bunker-300" icon={faInfoCircle} />
+              </Tooltip>
+            </SecretSyncLabel>
+          )}
+        </>
+      );
+      break;
+    case GitHubSyncScope.Repository:
+      Components = (
+        <SecretSyncLabel label="Repository">
+          {destinationConfig.owner}/{destinationConfig.repo}
+        </SecretSyncLabel>
+      );
+      break;
+    case GitHubSyncScope.RepositoryEnvironment:
+      Components = (
+        <>
+          <SecretSyncLabel label="Repository">
+            {destinationConfig.owner}/{destinationConfig.repo}
+          </SecretSyncLabel>
+          <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+        </>
+      );
+      break;
+    default:
+      throw new Error(
+        `Uhandled GitHub Sync Destination Section Scope ${secretSync.destinationConfig.scope}`
+      );
+  }
+
+  return (
+    <>
+      <SecretSyncLabel className="capitalize" label="Scope">
+        {destinationConfig.scope.replace("-", " ")}
+      </SecretSyncLabel>
+      {Components}
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -0,0 +1,63 @@
+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 { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
+import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
+import { AwsParameterStoreSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection";
+import { GitHubSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection";
+
+type Props = {
+  secretSync: TSecretSync;
+  onEditDestination: VoidFunction;
+};
+
+export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }: Props) => {
+  const { destination, connection } = secretSync;
+
+  const app = APP_CONNECTION_MAP[connection.app].name;
+
+  let DestinationComponents: ReactNode;
+  switch (secretSync.destination) {
+    case SecretSync.AWSParameterStore:
+      DestinationComponents = <AwsParameterStoreSyncDestinationSection secretSync={secretSync} />;
+      break;
+    case SecretSync.GitHub:
+      DestinationComponents = <GitHubSyncDestinationSection secretSync={secretSync} />;
+      break;
+    default:
+      throw new Error(`Unhandled Destination Section components: ${destination}`);
+  }
+
+  return (
+    <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">Destination Configuration</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Edit}
+          a={ProjectPermissionSub.SecretSyncs}
+        >
+          {(isAllowed) => (
+            <IconButton
+              variant="plain"
+              colorSchema="secondary"
+              isDisabled={!isAllowed}
+              ariaLabel="Edit sync destination"
+              onClick={onEditDestination}
+            >
+              <FontAwesomeIcon icon={faEdit} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div className="flex w-full flex-wrap gap-8">
+        <SecretSyncLabel label={`${app} Connection`}>{connection.name}</SecretSyncLabel>
+        {DestinationComponents}
+      </div>
+    </div>
+  );
+};

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

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