+
+
+
+
+
+
{integration.environment.name}
+
+
+
+
{integration.secretPath}
+
-
-
-
-
-
-
-
{integration.environment.name}
-
-
-
-
{integration.secretPath}
-
+
+
+
+
+ {integrationSlugNameMapping[integration.integration]}
-
-
-
-
- {integrationSlugNameMapping[integration.integration]}
-
-
- {specifcQoveryDetails()}
- {isNotAwsManagerOneToOneDetails()}
- {targetEnvironmentDetails()}
- {generalIntegrationSpecificDetails()}
-
+ {specifcQoveryDetails()}
+ {isNotAwsManagerOneToOneDetails()}
+ {targetEnvironmentDetails()}
+ {generalIntegrationSpecificDetails()}
diff --git a/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationDetailsSection.tsx b/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationDetailsSection.tsx
new file mode 100644
index 000000000..d2ffeb906
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationDetailsSection.tsx
@@ -0,0 +1,69 @@
+import { faCalendarCheck, faCheckCircle, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+import { twMerge } from "tailwind-merge";
+
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+ integration: TIntegrationWithEnv;
+};
+
+export const IntegrationDetailsSection = ({ integration }: Props) => {
+ return (
+
+
+
+
Integration Details
+
+
+
+
+
Name
+
+ {integrationSlugNameMapping[integration.integration]}
+
+
+
+
Sync Status
+
+
+ {integration.isSynced ? "Synced" : "Not Synced"}
+
+
+
+
+ {integration.lastUsed && (
+
+
Latest Successful Sync
+
+ {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
+
+
+
+ )}
+
+
+ {!integration.isSynced && integration.syncMessage && (
+ <>
+
Latest Sync Error
+
{integration.syncMessage}
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx b/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx
new file mode 100644
index 000000000..50c638b66
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx
@@ -0,0 +1,89 @@
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+ integration: TIntegrationWithEnv;
+};
+
+type Metadata = NonNullable
;
+type MetadataKey = keyof Metadata;
+type MetadataValue = Metadata[K];
+
+const metadataMappings: Record, string> = {
+ githubVisibility: "Github Visibility",
+ githubVisibilityRepoIds: "Github Visibility Repo Ids",
+ shouldAutoRedeploy: "Auto Redeploy Target Application When Secrets Change",
+ secretAWSTag: "Tags For Secrets Stored In AWS",
+ kmsKeyId: "AWS KMS Key ID",
+ secretSuffix: "Secret Suffix",
+ secretPrefix: "Secret Prefix",
+ syncBehavior: "Secrets Sync behavior",
+ mappingBehavior: "Secrets Mapping Behavior",
+ scope: "Scope",
+ org: "Organization",
+ project: "Project",
+ environment: "Environment",
+ shouldDisableDelete: "AWS Secret Deletion Disabled",
+ shouldMaskSecrets: "GitLab Secrets Masking Enabled",
+ shouldProtectSecrets: "GitLab Secret Protection Enabled",
+ shouldEnableDelete: "GitHub Secret Deletion Enabled"
+} as const;
+
+export const IntegrationSettingsSection = ({ integration }: Props) => {
+ const renderValue = (key: K, value: MetadataValue) => {
+ if (!value) return null;
+
+ // If it's a boolean, we render a generic "Yes" or "No" response.
+ if (typeof value === "boolean") {
+ return value ? "Yes" : "No";
+ }
+
+ // When the value is an object or array, or array of objects, we need to handle some special cases.
+ if (typeof value === "object") {
+ if (key === "secretAWSTag") {
+ return (value as MetadataValue<"secretAWSTag">)!.map(({ key: tagKey, value: tagValue }) => (
+
+ {tagKey}={tagValue}
+
+ ));
+ }
+
+ if (key === "githubVisibilityRepoIds") {
+ return value.join(", ");
+ }
+ }
+
+ if (typeof value === "string") {
+ return value.length ? value : "N/A";
+ }
+
+ if (typeof value === "number") {
+ return value;
+ }
+
+ return null;
+ };
+
+ if (!integration.metadata || Object.keys(integration.metadata).length === 0) {
+ return null;
+ }
+
+ // eslint-disable-next-line no-nested-ternary
+ return (
+
+
+
+ {integration.metadata &&
+ Object.entries(integration.metadata).map(([key, value]) => (
+
+
+ {metadataMappings[key as keyof typeof metadataMappings]}
+
+
{renderValue(key as MetadataKey, value)}
+
+ ))}
+
+