Skip to content

Commit

Permalink
fix: Release channel ui cleanup (#188)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adityachoudhari26
adityachoudhari26 authored Nov 1, 2024
1 parent 916b4a0 commit 118f800
Show file tree
Hide file tree
Showing 11 changed files with 488 additions and 230 deletions.
70 changes: 50 additions & 20 deletions apps/webservice/src/app/[workspaceSlug]/_components/environment-drawer/EnvironmentDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import React, { useState } from "react";
import React from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import {
IconDotsVertical,
Expand All @@ -21,11 +21,38 @@ import { EditFilterForm } from "./Filter";
import { Overview } from "./Overview";
import { ReleaseChannels } from "./ReleaseChannels";

export enum EnvironmentDrawerTab {
Overview = "overview",
Targets = "targets",
ReleaseChannels = "release-channels",
}

const tabParam = "tab";
const useEnvironmentDrawerTab = () => {
const router = useRouter();
const params = useSearchParams();
const tab = params.get(tabParam);

const setTab = (tab: EnvironmentDrawerTab | null) => {
const url = new URL(window.location.href);
if (tab === null) {
url.searchParams.delete(tabParam);
router.replace(`${url.pathname}?${url.searchParams.toString()}`);
return;
}
url.searchParams.set(tabParam, tab);
router.replace(`${url.pathname}?${url.searchParams.toString()}`);
};

return { tab, setTab };
};

const param = "environment_id";
export const useEnvironmentDrawer = () => {
const router = useRouter();
const params = useSearchParams();
const environmentId = params.get(param);
const { tab, setTab } = useEnvironmentDrawerTab();

const setEnvironmentId = (id: string | null) => {
const url = new URL(window.location.href);
Expand All @@ -38,13 +65,17 @@ export const useEnvironmentDrawer = () => {
router.replace(`${url.pathname}?${url.searchParams.toString()}`);
};

const removeEnvironmentId = () => setEnvironmentId(null);
const removeEnvironmentId = () => {
setTab(null);
setEnvironmentId(null);
};

return { environmentId, setEnvironmentId, removeEnvironmentId };
return { environmentId, setEnvironmentId, removeEnvironmentId, tab, setTab };
};

export const EnvironmentDrawer: React.FC = () => {
const { environmentId, removeEnvironmentId } = useEnvironmentDrawer();
const { environmentId, removeEnvironmentId, tab, setTab } =
useEnvironmentDrawer();
const isOpen = Boolean(environmentId);
const setIsOpen = removeEnvironmentId;
const environmentQ = api.environment.byId.useQuery(environmentId ?? "", {
Expand All @@ -65,8 +96,6 @@ export const EnvironmentDrawer: React.FC = () => {
);
const deployments = deploymentsQ.data;

const [activeTab, setActiveTab] = useState("overview");

const loading =
environmentQ.isLoading || workspaceQ.isLoading || deploymentsQ.isLoading;

Expand Down Expand Up @@ -107,42 +136,43 @@ export const EnvironmentDrawer: React.FC = () => {
<div className="flex w-full gap-6 p-6">
<div className="space-y-1">
<TabButton
active={activeTab === "overview"}
onClick={() => setActiveTab("overview")}
active={tab === EnvironmentDrawerTab.Overview || tab == null}
onClick={() => setTab(EnvironmentDrawerTab.Overview)}
icon={<IconInfoCircle className="h-4 w-4" />}
label="Overview"
/>
<TabButton
active={activeTab === "targets"}
onClick={() => setActiveTab("targets")}
active={tab === EnvironmentDrawerTab.Targets}
onClick={() => setTab(EnvironmentDrawerTab.Targets)}
icon={<IconTarget className="h-4 w-4" />}
label="Targets"
/>
<TabButton
active={activeTab === "release-channels"}
onClick={() => setActiveTab("release-channels")}
active={tab === EnvironmentDrawerTab.ReleaseChannels}
onClick={() => setTab(EnvironmentDrawerTab.ReleaseChannels)}
icon={<IconFilter className="h-4 w-4" />}
label="Release Channels"
/>
</div>

{environment != null && (
<div className="w-full overflow-auto">
{activeTab === "overview" && (
{(tab === EnvironmentDrawerTab.Overview || tab == null) && (
<Overview environment={environment} />
)}
{activeTab === "targets" && workspace != null && (
{tab === EnvironmentDrawerTab.Targets && workspace != null && (
<EditFilterForm
environment={environment}
workspaceId={workspace.id}
/>
)}
{activeTab === "release-channels" && deployments != null && (
<ReleaseChannels
environment={environment}
deployments={deployments}
/>
)}
{tab === EnvironmentDrawerTab.ReleaseChannels &&
deployments != null && (
<ReleaseChannels
environment={environment}
deployments={deployments}
/>
)}
</div>
)}
</div>
Expand Down
89 changes: 65 additions & 24 deletions ...src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import type * as SCHEMA from "@ctrlplane/db/schema";
import type React from "react";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
IconCalendar,
Expand Down Expand Up @@ -34,11 +33,41 @@ import { ReleaseChannels } from "./ReleaseChannels";
import { ReleaseManagement } from "./ReleaseManagement";
import { RolloutAndTiming } from "./RolloutAndTiming";

export enum EnvironmentPolicyDrawerTab {
Overview = "overview",
Approval = "approval",
Concurrency = "concurrency",
Management = "management",
ReleaseChannels = "release-channels",
Rollout = "rollout",
}

const tabParam = "tab";
const useEnvironmentPolicyDrawerTab = () => {
const router = useRouter();
const params = useSearchParams();
const tab = params.get(tabParam) as EnvironmentPolicyDrawerTab | null;

const setTab = (tab: EnvironmentPolicyDrawerTab | null) => {
const url = new URL(window.location.href);
if (tab === null) {
url.searchParams.delete(tabParam);
router.replace(`${url.pathname}?${url.searchParams.toString()}`);
return;
}
url.searchParams.set(tabParam, tab);
router.replace(`${url.pathname}?${url.searchParams.toString()}`);
};

return { tab, setTab };
};

const param = "environment_policy_id";
export const useEnvironmentPolicyDrawer = () => {
const router = useRouter();
const params = useSearchParams();
const environmentPolicyId = params.get(param);
const { tab, setTab } = useEnvironmentPolicyDrawerTab();

const setEnvironmentPolicyId = (id: string | null) => {
const url = new URL(window.location.href);
Expand All @@ -57,6 +86,8 @@ export const useEnvironmentPolicyDrawer = () => {
environmentPolicyId,
setEnvironmentPolicyId,
removeEnvironmentPolicyId,
tab,
setTab,
};
};

Expand All @@ -65,20 +96,30 @@ type Deployment = SCHEMA.Deployment & {
};

const View: React.FC<{
activeTab: string;
activeTab: EnvironmentPolicyDrawerTab;
environmentPolicy: SCHEMA.EnvironmentPolicy & {
releaseWindows: SCHEMA.EnvironmentPolicyReleaseWindow[];
releaseChannels: SCHEMA.ReleaseChannel[];
};
deployments?: Deployment[];
}> = ({ activeTab, environmentPolicy, deployments }) => {
return {
overview: <Overview environmentPolicy={environmentPolicy} />,
approval: <ApprovalAndGovernance environmentPolicy={environmentPolicy} />,
concurrency: <DeploymentControl environmentPolicy={environmentPolicy} />,
management: <ReleaseManagement environmentPolicy={environmentPolicy} />,
rollout: <RolloutAndTiming environmentPolicy={environmentPolicy} />,
"release-channels": deployments != null && (
[EnvironmentPolicyDrawerTab.Overview]: (
<Overview environmentPolicy={environmentPolicy} />
),
[EnvironmentPolicyDrawerTab.Approval]: (
<ApprovalAndGovernance environmentPolicy={environmentPolicy} />
),
[EnvironmentPolicyDrawerTab.Concurrency]: (
<DeploymentControl environmentPolicy={environmentPolicy} />
),
[EnvironmentPolicyDrawerTab.Management]: (
<ReleaseManagement environmentPolicy={environmentPolicy} />
),
[EnvironmentPolicyDrawerTab.Rollout]: (
<RolloutAndTiming environmentPolicy={environmentPolicy} />
),
[EnvironmentPolicyDrawerTab.ReleaseChannels]: deployments != null && (
<ReleaseChannels policy={environmentPolicy} deployments={deployments} />
),
}[activeTab];
Expand All @@ -105,7 +146,7 @@ const PolicyDropdownMenu: React.FC<{
);

export const EnvironmentPolicyDrawer: React.FC = () => {
const { environmentPolicyId, removeEnvironmentPolicyId } =
const { environmentPolicyId, removeEnvironmentPolicyId, tab, setTab } =
useEnvironmentPolicyDrawer();
const isOpen = Boolean(environmentPolicyId);
const setIsOpen = removeEnvironmentPolicyId;
Expand All @@ -121,8 +162,6 @@ export const EnvironmentPolicyDrawer: React.FC = () => {
);
const deployments = deploymentsQ.data;

const [activeTab, setActiveTab] = useState("overview");

return (
<Drawer open={isOpen} onOpenChange={setIsOpen}>
<DrawerContent
Expand Down Expand Up @@ -150,38 +189,40 @@ export const EnvironmentPolicyDrawer: React.FC = () => {
<div className="flex w-full gap-6 p-6">
<div className="space-y-1">
<TabButton
active={activeTab === "overview"}
onClick={() => setActiveTab("overview")}
active={
tab === EnvironmentPolicyDrawerTab.Overview || tab == null
}
onClick={() => setTab(EnvironmentPolicyDrawerTab.Overview)}
icon={<IconInfoCircle className="h-4 w-4" />}
label="Overview"
/>
<TabButton
active={activeTab === "approval"}
onClick={() => setActiveTab("approval")}
active={tab === EnvironmentPolicyDrawerTab.Approval}
onClick={() => setTab(EnvironmentPolicyDrawerTab.Approval)}
icon={<IconEye className="h-4 w-4" />}
label="Approval & Governance"
/>
<TabButton
active={activeTab === "concurrency"}
onClick={() => setActiveTab("concurrency")}
active={tab === EnvironmentPolicyDrawerTab.Concurrency}
onClick={() => setTab(EnvironmentPolicyDrawerTab.Concurrency)}
icon={<IconCircuitDiode className="h-4 w-4" />}
label="Deployment Control"
/>
<TabButton
active={activeTab === "management"}
onClick={() => setActiveTab("management")}
active={tab === EnvironmentPolicyDrawerTab.Management}
onClick={() => setTab(EnvironmentPolicyDrawerTab.Management)}
icon={<IconRocket className="h-4 w-4" />}
label="Release Management"
/>
<TabButton
active={activeTab === "release-channels"}
onClick={() => setActiveTab("release-channels")}
active={tab === EnvironmentPolicyDrawerTab.ReleaseChannels}
onClick={() => setTab(EnvironmentPolicyDrawerTab.ReleaseChannels)}
icon={<IconFilter className="h-4 w-4" />}
label="Release Channels"
/>
<TabButton
active={activeTab === "rollout"}
onClick={() => setActiveTab("rollout")}
active={tab === EnvironmentPolicyDrawerTab.Rollout}
onClick={() => setTab(EnvironmentPolicyDrawerTab.Rollout)}
icon={<IconCalendar className="h-4 w-4" />}
label="Rollout and Timing"
/>
Expand All @@ -190,7 +231,7 @@ export const EnvironmentPolicyDrawer: React.FC = () => {
{environmentPolicy != null && (
<div className="w-full overflow-auto">
<View
activeTab={activeTab}
activeTab={tab ?? EnvironmentPolicyDrawerTab.Overview}
environmentPolicy={environmentPolicy}
deployments={deployments}
/>
Expand Down
Loading

0 comments on commit 118f800

Please sign in to comment.