fix: Make release channels only configurable for the policy

apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx

@@ -46,13 +46,10 @@ export const DeploymentResourceDrawer: React.FC = () => {
     { enabled: isOpen },
   );
 
-  const releaseFilter =
-    environment?.releaseChannels.find((rc) => rc.deploymentId === deploymentId)
-      ?.releaseFilter ??
+  const { releaseFilter } =
     environment?.policy.releaseChannels.find(
       (rc) => rc.deploymentId === deploymentId,
-    )?.releaseFilter ??
-    undefined;
+    ) ?? {};
 
   const jobFilter: JobCondition = {
     type: FilterType.Comparison,
@@ -80,7 +77,7 @@ export const DeploymentResourceDrawer: React.FC = () => {
     api.release.list.useQuery(
       {
         deploymentId: deploymentId ?? "",
-        filter: releaseFilter,
+        filter: releaseFilter ?? undefined,
         jobFilter,
         limit: 100,
       },

apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/policy-override/useOverridePolicy.ts

@@ -28,12 +28,7 @@ export const useUpdateOverridePolicy = (
   );
 
   const onUpdate = (data: SCHEMA.UpdateEnvironmentPolicy) =>
-    updatePolicy
-      .mutateAsync({
-        id: policy.id,
-        data,
-      })
-      .then(invalidateQueries);
+    updatePolicy.mutateAsync({ id: policy.id, data }).then(invalidateQueries);
 
   return {
     onUpdate,

apps/webservice/src/app/[workspaceSlug]/(app)/_components/policy-form-components/ReleaseChannels.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { IconLoader2, IconPlus } from "@tabler/icons-react";
 
+import { Button } from "@ctrlplane/ui/button";
 import {
   Select,
   SelectContent,
@@ -17,13 +18,6 @@ type Deployment = SCHEMA.Deployment & {
 
 type Policy = { releaseChannels: SCHEMA.ReleaseChannel[] };
 
-type ReleaseChannelProps = {
-  environmentPolicy: Policy;
-  deployments: Deployment[];
-  isLoading: boolean;
-  onUpdate: (data: SCHEMA.UpdateEnvironmentPolicy) => Promise<void>;
-};
-
 type DeploymentSelectProps = {
   deployment: Deployment;
   releaseChannels: Record<string, string | null>;
@@ -44,11 +38,8 @@ const DeploymentSelect: React.FC<DeploymentSelectProps> = ({
   );
   const value = releaseChannel?.id;
 
-  const onChange = (channelId: string) =>
-    updateReleaseChannel(
-      deployment.id,
-      channelId === "null" ? null : channelId,
-    );
+  const onChange = (channelId: string | null) =>
+    updateReleaseChannel(deployment.id, channelId);
 
   const { workspaceSlug, systemSlug } = useParams<{
     workspaceSlug?: string;
@@ -83,10 +74,24 @@ const DeploymentSelect: React.FC<DeploymentSelectProps> = ({
           ))}
         </SelectContent>
       </Select>
+      <Button
+        variant="outline"
+        onClick={() => onChange(null)}
+        disabled={releaseChannelId == null}
+      >
+        Clear
+      </Button>
     </div>
   );
 };
 
+type ReleaseChannelProps = {
+  environmentPolicy: Policy;
+  deployments: Deployment[];
+  isLoading: boolean;
+  onUpdate: (data: SCHEMA.UpdateEnvironmentPolicy) => Promise<void>;
+};
+
 export const ReleaseChannels: React.FC<ReleaseChannelProps> = ({
   environmentPolicy,
   deployments,

apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-channel-drawer/Usage.tsx

@@ -1,47 +1,38 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import { useRouter } from "next/navigation";
-import { IconFilter, IconPlant } from "@tabler/icons-react";
+import type { RouterOutputs } from "@ctrlplane/api";
+import { IconFilter } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 
 import { EnvironmentDrawerTab } from "../environment-drawer/tabs";
 import { EnvironmentPolicyDrawerTab } from "../environment-policy-drawer/EnvironmentPolicyDrawer";
+import { useQueryParams } from "../useQueryParams";
 
-type UsageInfo = {
-  environments: SCHEMA.Environment[];
-  policies: (SCHEMA.EnvironmentPolicy & {
-    environments: SCHEMA.Environment[];
-  })[];
-};
+type UsageInfo = NonNullable<
+  RouterOutputs["deployment"]["releaseChannel"]["byId"]
+>["usage"];
 
 const useSetDrawers = () => {
-  const router = useRouter();
+  const { setParams } = useQueryParams();
 
-  const setEnvironmentIdAndTab = (id: string) => {
-    const url = new URL(window.location.href);
-    url.searchParams.delete("release_channel_id");
-    url.searchParams.set("environment_id", id);
-    url.searchParams.set("tab", EnvironmentDrawerTab.ReleaseChannels);
-    router.replace(`${url.pathname}?${url.searchParams.toString()}`);
-  };
+  const setEnvironmentIdAndTab = (id: string) =>
+    setParams({
+      release_channel_id: null,
+      environment_id: id,
+      tab: EnvironmentDrawerTab.ReleaseChannels,
+    });
 
-  const setPolicyIdAndTab = (id: string) => {
-    const url = new URL(window.location.href);
-    url.searchParams.delete("release_channel_id");
-    url.searchParams.set("environment_policy_id", id);
-    url.searchParams.set("tab", EnvironmentPolicyDrawerTab.ReleaseChannels);
-    router.replace(`${url.pathname}?${url.searchParams.toString()}`);
-  };
+  const setPolicyIdAndTab = (id: string) =>
+    setParams({
+      release_channel_id: null,
+      environment_policy_id: id,
+      tab: EnvironmentPolicyDrawerTab.ReleaseChannels,
+    });
 
   return { setEnvironmentIdAndTab, setPolicyIdAndTab };
 };
 
 export const Usage: React.FC<{ usage: UsageInfo }> = ({ usage }) => {
-  const { policies, environments } = usage;
-
-  const inheritedEnvironments = policies
-    .flatMap((p) => p.environments.map((e) => ({ ...e, policyInherited: p })))
-    .filter((env) => !environments.includes(env));
+  const { policies } = usage;
 
   const { setEnvironmentIdAndTab, setPolicyIdAndTab } = useSetDrawers();
 
@@ -58,7 +49,11 @@ export const Usage: React.FC<{ usage: UsageInfo }> = ({ usage }) => {
           {policies.map((p) => (
             <Button
               variant="link"
-              onClick={() => setPolicyIdAndTab(p.id)}
+              onClick={() =>
+                p.environmentId != null
+                  ? setEnvironmentIdAndTab(p.environmentId)
+                  : setPolicyIdAndTab(p.id)
+              }
               key={p.id}
               className="h-fit p-0 text-sm text-neutral-300"
             >
@@ -67,39 +62,6 @@ export const Usage: React.FC<{ usage: UsageInfo }> = ({ usage }) => {
           ))}
         </div>
       </div>
-
-      <div className="space-y-2">
-        <div className="flex items-center gap-2 text-sm font-semibold">
-          <div className="flex-shrink-0 rounded bg-green-500/20 p-1 text-green-400">
-            <IconPlant className="h-3 w-3" />
-          </div>
-          Environments
-        </div>
-        <div className="flex flex-col items-start gap-1">
-          {environments.map((e) => (
-            <Button
-              variant="link"
-              onClick={() => setEnvironmentIdAndTab(e.id)}
-              key={e.id}
-              className="h-fit p-0 text-sm text-neutral-300"
-            >
-              {e.name}
-            </Button>
-          ))}
-          {inheritedEnvironments.map((e) => (
-            <Button
-              variant="link"
-              onClick={() => setEnvironmentIdAndTab(e.id)}
-              key={e.id}
-              className="h-fit p-0 text-sm text-neutral-300"
-            >
-              {e.name} (inherited from{" "}
-              {e.policyInherited.name != "" ? e.policyInherited.name : "policy"}
-              )
-            </Button>
-          ))}
-        </div>
-      </div>
     </div>
   );
 };