improvements: address feedback

2026-01-09 15:38:03 -05:00 · 2025-12-17 15:00:47 -08:00
parent 65865b94fe
commit 6f470ed2ed
5 changed files with 170 additions and 26 deletions
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/OctopusDeploySyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/OctopusDeploySyncFields.tsx
@@ -30,6 +30,15 @@ import { OctopusDeploySyncScope } from "@app/hooks/api/secretSyncs/types/octopus

 import { TSecretSyncForm } from "../schemas";

+const EMPTY_SCOPE_VALUES = {
+  environments: [],
+  roles: [],
+  processes: [],
+  actions: [],
+  machines: [],
+  channels: []
+};
+
 export const OctopusDeploySyncFields = () => {
  const { control, setValue } = useFormContext<
    TSecretSyncForm & { destination: SecretSync.OctopusDeploy }
@@ -65,7 +74,7 @@ export const OctopusDeploySyncFields = () => {
          setValue("destinationConfig.spaceName", "");
          setValue("destinationConfig.projectId", "");
          setValue("destinationConfig.projectName", "");
-          setValue("destinationConfig.scopeValues", undefined);
+          setValue("destinationConfig.scopeValues", EMPTY_SCOPE_VALUES);
        }}
      />

@@ -108,7 +117,7 @@ export const OctopusDeploySyncFields = () => {
                      setValue("destinationConfig.spaceName", selectedSpace?.name ?? "");
                      setValue("destinationConfig.projectId", "");
                      setValue("destinationConfig.projectName", "");
-                      setValue("destinationConfig.scopeValues", undefined);
+                      setValue("destinationConfig.scopeValues", EMPTY_SCOPE_VALUES);
                    }}
                    options={spaces}
                    placeholder={spaces?.length ? "Select a space..." : "No spaces found..."}
@@ -136,7 +145,7 @@ export const OctopusDeploySyncFields = () => {
                      onChange(val);
                      setValue("destinationConfig.projectId", "");
                      setValue("destinationConfig.projectName", "");
-                      setValue("destinationConfig.scopeValues", undefined);
+                      setValue("destinationConfig.scopeValues", EMPTY_SCOPE_VALUES);
                    }}
                    className="w-full border border-mineshaft-500 capitalize"
                    position="popper"
@@ -183,7 +192,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedProject = option as SingleValue<TOctopusDeployProject>;
                        onChange(selectedProject?.id ?? null);
                        setValue("destinationConfig.projectName", selectedProject?.name ?? "");
-                        setValue("destinationConfig.scopeValues", undefined);
+                        setValue("destinationConfig.scopeValues", EMPTY_SCOPE_VALUES);
                      }}
                      options={projects}
                      placeholder={
@@ -227,7 +236,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.environments || []}
                      placeholder={
@@ -266,7 +275,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.roles || []}
                      placeholder={
@@ -306,7 +315,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.machines || []}
                      placeholder={
@@ -345,7 +354,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.processes || []}
                      placeholder={
@@ -384,7 +393,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.actions || []}
                      placeholder={
@@ -424,7 +433,7 @@ export const OctopusDeploySyncFields = () => {
                        const selectedIds = (options as MultiValue<TScopeValueOption>).map(
                          (opt) => opt.id
                        );
-                        onChange(selectedIds.length > 0 ? selectedIds : undefined);
+                        onChange(selectedIds);
                      }}
                      options={scopeValuesData?.channels || []}
                      placeholder={
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx
@@ -27,8 +27,8 @@ import { HumanitecSyncFields } from "./HumanitecSyncFields";
 import { LaravelForgeSyncFields } from "./LaravelForgeSyncFields";
 import { NetlifySyncFields } from "./NetlifySyncFields";
 import { NorthflankSyncFields } from "./NorthflankSyncFields";
-import { OctopusDeploySyncFields } from "./OctopusDeploySyncFields";
 import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
+import { OctopusDeploySyncFields } from "./OctopusDeploySyncFields";
 import { RailwaySyncFields } from "./RailwaySyncFields";
 import { RenderSyncFields } from "./RenderSyncFields";
 import { SupabaseSyncFields } from "./SupabaseSyncFields";
--- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OctopusDeploySyncReviewFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OctopusDeploySyncReviewFields.tsx
@@ -2,16 +2,33 @@ import { useFormContext } from "react-hook-form";

 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { useOctopusDeployConnectionGetScopeValues } from "@app/hooks/api/appConnections/octopus-deploy";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { OctopusDeploySyncScope } from "@app/hooks/api/secretSyncs/types/octopus-deploy-sync";

 export const OctopusDeploySyncReviewFields = () => {
  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OctopusDeploy }>();
-  const spaceName = watch("destinationConfig.spaceName");
-  const spaceId = watch("destinationConfig.spaceId");
-  const scope = watch("destinationConfig.scope");
-  const projectName = watch("destinationConfig.projectName");
-  const projectId = watch("destinationConfig.projectId");
+  const { spaceName, spaceId, projectId, projectName, scopeValues, scope } =
+    watch("destinationConfig");
+  const connectionId = watch("connection.id");
+
+  const { data: scopeValuesData } = useOctopusDeployConnectionGetScopeValues(
+    connectionId,
+    spaceId,
+    projectId,
+    {
+      enabled: Boolean(connectionId && spaceId && projectId && scope)
+    }
+  );
+
+  const {
+    environments = [],
+    channels = [],
+    processes = [],
+    roles = [],
+    actions = [],
+    machines = []
+  } = scopeValues ?? {};

  return (
    <>
@@ -22,6 +39,54 @@ export const OctopusDeploySyncReviewFields = () => {
      {scope === OctopusDeploySyncScope.Project && (
        <GenericFieldLabel label="Project">{projectName || projectId}</GenericFieldLabel>
      )}
+      {environments.length > 0 && (
+        <GenericFieldLabel label="Environments">
+          {scopeValuesData?.environments
+            .filter((env) => environments.includes(env.id))
+            .map((env) => env.name)
+            .join(", ") ?? environments.join(", ")}
+        </GenericFieldLabel>
+      )}
+      {roles.length > 0 && (
+        <GenericFieldLabel label="Target Tags">
+          {scopeValuesData?.roles
+            .filter((role) => roles.includes(role.id))
+            .map((role) => role.name)
+            .join(", ") ?? roles.join(", ")}
+        </GenericFieldLabel>
+      )}
+      {machines.length > 0 && (
+        <GenericFieldLabel label="Targets">
+          {scopeValuesData?.machines
+            .filter((machine) => machines.includes(machine.id))
+            .map((machine) => machine.name)
+            .join(", ") ?? machines.join(", ")}
+        </GenericFieldLabel>
+      )}
+      {processes.length > 0 && (
+        <GenericFieldLabel label="Processes">
+          {scopeValuesData?.processes
+            .filter((process) => processes.includes(process.id))
+            .map((process) => process.name)
+            .join(", ") ?? processes.join(", ")}
+        </GenericFieldLabel>
+      )}
+      {actions.length > 0 && (
+        <GenericFieldLabel label="Deployment Steps">
+          {scopeValuesData?.actions
+            .filter((action) => actions.includes(action.id))
+            .map((action) => action.name)
+            .join(", ") ?? actions.join(", ")}
+        </GenericFieldLabel>
+      )}
+      {channels.length > 0 && (
+        <GenericFieldLabel label="Channels">
+          {scopeValuesData?.channels
+            .filter((channel) => channels.includes(channel.id))
+            .map((channel) => channel.name)
+            .join(", ") ?? channels.join(", ")}
+        </GenericFieldLabel>
+      )}
    </>
  );
 };
--- a/frontend/src/hooks/api/secretSyncs/types/index.ts
+++ b/frontend/src/hooks/api/secretSyncs/types/index.ts
@@ -25,8 +25,8 @@ import { THumanitecSync } from "./humanitec-sync";
 import { TLaravelForgeSync } from "./laravel-forge-sync";
 import { TNetlifySync } from "./netlify-sync";
 import { TNorthflankSync } from "./northflank-sync";
-import { TOctopusDeploySync } from "./octopus-deploy-sync";
 import { TOCIVaultSync } from "./oci-vault-sync";
+import { TOctopusDeploySync } from "./octopus-deploy-sync";
 import { TRailwaySync } from "./railway-sync";
 import { TRenderSync } from "./render-sync";
 import { TSupabaseSync } from "./supabase";
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OctopusDeploySyncDestinationSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OctopusDeploySyncDestinationSection.tsx
@@ -1,4 +1,5 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { useOctopusDeployConnectionGetScopeValues } from "@app/hooks/api/appConnections/octopus-deploy";
 import {
  OctopusDeploySyncScope,
  TOctopusDeploySync
@@ -9,20 +10,89 @@ type Props = {
 };

 export const OctopusDeploySyncDestinationSection = ({ secretSync }: Props) => {
-  const { destinationConfig } = secretSync;
+  const {
+    destinationConfig: { spaceId, scope, spaceName, scopeValues, projectId, projectName },
+    connectionId
+  } = secretSync;
+
+  const { data: scopeValuesData, isFetched } = useOctopusDeployConnectionGetScopeValues(
+    connectionId,
+    spaceId,
+    projectId,
+    {
+      enabled: Boolean(connectionId && spaceId && projectId && scope)
+    }
+  );
+
+  const {
+    environments = [],
+    channels = [],
+    processes = [],
+    roles = [],
+    actions = [],
+    machines = []
+  } = scopeValues ?? {};

  return (
    <>
-      <GenericFieldLabel label="Space">
-        {destinationConfig.spaceName || destinationConfig.spaceId}
-      </GenericFieldLabel>
+      <GenericFieldLabel label="Space">{spaceName || spaceId}</GenericFieldLabel>
      <GenericFieldLabel label="Scope" className="capitalize">
-        {destinationConfig.scope}
+        {scope}
      </GenericFieldLabel>
-      {destinationConfig.scope === OctopusDeploySyncScope.Project && (
-        <GenericFieldLabel label="Project">
-          {destinationConfig.projectName || destinationConfig.projectId}
-        </GenericFieldLabel>
+      {scope === OctopusDeploySyncScope.Project && (
+        <GenericFieldLabel label="Project">{projectName || projectId}</GenericFieldLabel>
+      )}
+      {isFetched && (
+        <>
+          {environments.length > 0 && (
+            <GenericFieldLabel label="Environments">
+              {scopeValuesData?.environments
+                .filter((env) => environments.includes(env.id))
+                .map((env) => env.name)
+                .join(", ") ?? environments.join(", ")}
+            </GenericFieldLabel>
+          )}
+          {roles.length > 0 && (
+            <GenericFieldLabel label="Target Tags">
+              {scopeValuesData?.roles
+                .filter((role) => roles.includes(role.id))
+                .map((role) => role.name)
+                .join(", ") ?? roles.join(", ")}
+            </GenericFieldLabel>
+          )}
+          {machines.length > 0 && (
+            <GenericFieldLabel label="Targets">
+              {scopeValuesData?.machines
+                .filter((machine) => machines.includes(machine.id))
+                .map((machine) => machine.name)
+                .join(", ") ?? machines.join(", ")}
+            </GenericFieldLabel>
+          )}
+          {processes.length > 0 && (
+            <GenericFieldLabel label="Processes">
+              {scopeValuesData?.processes
+                .filter((process) => processes.includes(process.id))
+                .map((process) => process.name)
+                .join(", ") ?? processes.join(", ")}
+            </GenericFieldLabel>
+          )}
+          {actions.length > 0 && (
+            <GenericFieldLabel label="Deployment Steps">
+              {scopeValuesData?.actions
+                .filter((action) => actions.includes(action.id))
+                .map((action) => action.name)
+                .join(", ") ?? actions.join(", ")}
+            </GenericFieldLabel>
+          )}
+          {channels.length > 0 && (
+            <GenericFieldLabel label="Channels">
+              {scopeValuesData?.channels
+                .filter((channel) => channels.includes(channel.id))
+                .map((channel) => channel.name)
+                .join(", ") ?? channels.join(", ")}
+            </GenericFieldLabel>
+          )}
+        </>
      )}
    </>
  );