Skip to content

Commit 739b9c9

Browse files
ogzhanolguncuautofix-ci[bot]chronark
authored
navbar-consistency-fix (#5217)
* env-vars-updates * fix-reconciliation-state * fix-build-progress-status * multi-env-sliders * chore: fmt * feat: extract shared logic * fix: pr comments * fix: apply changes to select env and upsert * navbar-consistency-fix * [autofix.ci] apply automated fixes * fix: typo * fix: prevent showing deleted keys and allow expanding on title * fix: comments --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Andreas Thomas <dev@chronark.com>
1 parent 9f667a8 commit 739b9c9

File tree

10 files changed

+106
-216
lines changed

10 files changed

+106
-216
lines changed

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/navigations/deployment-navbar.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/navigations/use-deployment-breadcrumb-config.ts‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import type { PropsWithChildren } from "react";
2-
import { DeploymentNavbar } from "./(overview)/navigations/deployment-navbar";
32
import { DeploymentLayoutProvider } from "./layout-provider";
43

54
export default function DeploymentLayout({ children }: PropsWithChildren) {
65
return (
76
<DeploymentLayoutProvider>
87
<div className="flex flex-col h-full">
9-
<DeploymentNavbar />
108
<div id="deployment-scroll-container" className="flex-1 overflow-auto">
119
{children}
1210
</div>

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
"use client";
22

33
import { useWorkspaceNavigation } from "@/hooks/use-workspace-navigation";
4-
import { type Deployment, collection } from "@/lib/collections";
4+
import type { Deployment } from "@/lib/collections";
5+
import { queryClient } from "@/lib/collections/client";
56
import { trpc } from "@/lib/trpc/client";
67
import { Button, DialogContainer, toast } from "@unkey/ui";
78
import { useRouter } from "next/navigation";
9+
import { useProjectData } from "../../../../../data-provider";
810
import { DeploymentSection } from "./components/deployment-section";
911

1012
type RedeployDialogProps = {
@@ -14,19 +16,13 @@ type RedeployDialogProps = {
1416
};
1517

1618
export const RedeployDialog = ({ isOpen, onClose, selectedDeployment }: RedeployDialogProps) => {
17-
const utils = trpc.useUtils();
1819
const router = useRouter();
1920
const workspace = useWorkspaceNavigation();
21+
const { projectId } = useProjectData();
2022

2123
const redeploy = trpc.deploy.deployment.redeploy.useMutation({
22-
onSuccess: (data) => {
23-
utils.invalidate();
24-
try {
25-
collection.deployments.utils.refetch();
26-
} catch (error) {
27-
console.error("Refetch error:", error);
28-
}
29-
onClose();
24+
onSuccess: async (data) => {
25+
await queryClient.invalidateQueries({ queryKey: ["deployments", projectId] });
3026
router.push(
3127
`/${workspace.slug}/projects/${selectedDeployment.projectId}/deployments/${data.deploymentId}`,
3228
);

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/navigations/project-navigation.tsx‎

Lines changed: 72 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Refresh3,
1616
} from "@unkey/icons";
1717
import { Button, InfoTooltip, Separator } from "@unkey/ui";
18+
import { useParams } from "next/navigation";
1819
import { useRef } from "react";
1920
import { RepoDisplay } from "../../../_components/list/repo-display";
2021
import { DisabledWrapper } from "../../components/disabled-wrapper";
@@ -48,6 +49,9 @@ export const ProjectNavigation = ({
4849
? { id: project.id, name: project.name, repositoryFullName: project.repositoryFullName }
4950
: undefined;
5051

52+
const params = useParams();
53+
const isOnDeploymentDetail = Boolean(params?.deploymentId);
54+
5155
const basePath = `/${workspace.slug}/projects`;
5256
const breadcrumbs = useBreadcrumbConfig({
5357
projectId,
@@ -56,10 +60,6 @@ export const ProjectNavigation = ({
5660
activeProject,
5761
});
5862

59-
const isOnDeploymentDetail = Boolean(
60-
breadcrumbs.find((p) => p.id === "deployment-detail")?.active,
61-
);
62-
6363
const anchorRef = useRef<HTMLDivElement | null>(null);
6464

6565
const handleRef = (node: HTMLDivElement | null) => {
@@ -77,6 +77,58 @@ export const ProjectNavigation = ({
7777
return isDetailsOpen ? "Hide deployment details" : "Show deployment details";
7878
};
7979

80+
const renderActions = () => {
81+
if (isOnDeploymentDetail) {
82+
return null;
83+
}
84+
85+
return (
86+
<div className="flex gap-4 items-center">
87+
{activeProject?.repositoryFullName && (
88+
<>
89+
<div className="text-gray-11 text-xs flex items-center gap-2.5">
90+
<Refresh3 className="text-gray-12" iconSize="sm-regular" />
91+
<span>Auto-deploys from pushes to </span>
92+
<RepoDisplay
93+
url={`https://github.com/${activeProject.repositoryFullName}`}
94+
className="bg-grayA-4 px-1.5 font-medium text-xs text-gray-12 rounded-full min-h-[22px] max-w-[130px]"
95+
/>
96+
</div>
97+
<Separator orientation="vertical" className="h-5 mx-2 bg-grayA-5" />
98+
</>
99+
)}
100+
<DisabledWrapper tooltipContent="Actions coming soon">
101+
<div className="gap-2.5 items-center flex">
102+
<NavbarActionButton title="Visit Project URL">Visit Project URL</NavbarActionButton>
103+
<Button className="size-7" variant="outline">
104+
<ListRadio iconSize="sm-regular" />
105+
</Button>
106+
<Button className="size-7" variant="outline">
107+
<ArrowDottedRotateAnticlockwise iconSize="sm-regular" />
108+
</Button>
109+
<Button className="size-7" variant="outline">
110+
<Dots iconSize="sm-regular" />
111+
</Button>
112+
</div>
113+
</DisabledWrapper>
114+
<InfoTooltip
115+
asChild
116+
content={getTooltipContent()}
117+
position={{ side: "bottom", align: "end" }}
118+
>
119+
<Button
120+
variant="outline"
121+
className="size-7"
122+
disabled={!currentDeploymentId}
123+
onClick={onClick}
124+
>
125+
<DoubleChevronLeft iconSize="lg-medium" className="text-gray-13" />
126+
</Button>
127+
</InfoTooltip>
128+
</div>
129+
);
130+
};
131+
80132
if (projects.isLoading) {
81133
const loadingBreadcrumbs = [
82134
{
@@ -129,9 +181,22 @@ export const ProjectNavigation = ({
129181
);
130182
}
131183

132-
//TODO: Add a proper view here
133184
if (!activeProject) {
134-
return <div className="h-full w-full flex items-center justify-center">Project not found</div>;
185+
return (
186+
<Navbar>
187+
<Navbar.Breadcrumbs icon={<Cube />}>
188+
<Navbar.Breadcrumbs.Link
189+
href={basePath}
190+
isIdentifier={false}
191+
noop={false}
192+
active={false}
193+
isLast={false}
194+
>
195+
Projects
196+
</Navbar.Breadcrumbs.Link>
197+
</Navbar.Breadcrumbs>
198+
</Navbar>
199+
);
135200
}
136201

137202
return (
@@ -164,54 +229,7 @@ export const ProjectNavigation = ({
164229
</Navbar.Breadcrumbs.Link>
165230
))}
166231
</Navbar.Breadcrumbs>
167-
<div className="flex gap-4 items-center">
168-
{activeProject.repositoryFullName && (
169-
<>
170-
<div className="text-gray-11 text-xs flex items-center gap-2.5">
171-
<Refresh3 className="text-gray-12" iconSize="sm-regular" />
172-
<span>Auto-deploys from pushes to </span>
173-
<RepoDisplay
174-
url={`https://github.com/${activeProject.repositoryFullName}`}
175-
className="bg-grayA-4 px-1.5 font-medium text-xs text-gray-12 rounded-full min-h-[22px] max-w-[130px]"
176-
/>
177-
</div>
178-
<Separator orientation="vertical" className="h-5 mx-2 bg-grayA-5" />
179-
</>
180-
)}
181-
<DisabledWrapper tooltipContent="Actions coming soon">
182-
<div className="gap-2.5 items-center flex">
183-
<NavbarActionButton title="Visit Project URL">Visit Project URL</NavbarActionButton>
184-
<Button className="size-7" variant="outline">
185-
<ListRadio iconSize="sm-regular" />
186-
</Button>
187-
<Button className="size-7" variant="outline">
188-
<ArrowDottedRotateAnticlockwise iconSize="sm-regular" />
189-
</Button>
190-
<Button className="size-7" variant="outline">
191-
<Dots iconSize="sm-regular" />
192-
</Button>
193-
</div>
194-
</DisabledWrapper>
195-
{!isOnDeploymentDetail && (
196-
<InfoTooltip
197-
asChild
198-
content={getTooltipContent()}
199-
position={{
200-
side: "bottom",
201-
align: "end",
202-
}}
203-
>
204-
<Button
205-
variant="outline"
206-
className="size-7"
207-
disabled={!currentDeploymentId}
208-
onClick={onClick}
209-
>
210-
<DoubleChevronLeft iconSize="lg-medium" className="text-gray-13" />
211-
</Button>
212-
</InfoTooltip>
213-
)}
214-
</div>
232+
{renderActions()}
215233
</Navbar>
216234
);
217235
};

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/navigations/use-breadcrumb-config.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
"use client";
22

3+
import type { QuickNavItem } from "@/components/navbar-popover";
34
import type { Navbar } from "@/components/navigation/navbar";
45
import { shortenId } from "@/lib/shorten-id";
56
import { useParams, useSelectedLayoutSegments } from "next/navigation";
67
import type { ComponentPropsWithoutRef } from "react";
78

8-
export type QuickNavItem = {
9-
id: string;
10-
label: string;
11-
href: string;
12-
disabled?: boolean;
13-
disabledTooltip?: string;
14-
};
15-
169
export type BreadcrumbItem = ComponentPropsWithoutRef<typeof Navbar.Breadcrumbs.Link> & {
1710
/** Unique identifier for the breadcrumb item */
1811
id: string;

‎web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/sentinel-settings/keyspaces.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useEnvironmentSettings } from "../../environment-provider";
1313
import { FormSettingCard, resolveSaveState } from "../shared/form-setting-card";
1414

1515
const keyspacesSchema = z.object({
16-
keyspaces: z.array(z.string()).min(1, "Select at least one region"),
16+
keyspaces: z.array(z.string()),
1717
});
1818

1919
type KeyspacesFormValues = z.infer<typeof keyspacesSchema>;
@@ -184,25 +184,23 @@ const KeyspacesForm: React.FC<KeyspacesFormProps> = ({
184184
className="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-grayA-3 border border-grayA-4 text-xs text-accent-12"
185185
>
186186
{availableKeyspaces[keyspaceId]?.api?.name ?? keyspaceId}
187-
{currentKeyspaceIds.length > 1 && (
188-
//biome-ignore lint/a11y/useKeyWithClickEvents: we can't use button here otherwise we'll nest two buttons
189-
<span
190-
onClick={(e) => {
191-
e.stopPropagation();
192-
removeKeyspace(keyspaceId);
193-
}}
194-
className="p-0.5 hover:bg-grayA-4 rounded text-grayA-9 hover:text-accent-12 transition-colors"
195-
>
196-
<XMark iconSize="sm-regular" />
197-
</span>
198-
)}
187+
<button
188+
type="button"
189+
onClick={(e) => {
190+
e.stopPropagation();
191+
removeKeyspace(keyspaceId);
192+
}}
193+
className="p-0.5 hover:bg-grayA-4 rounded text-grayA-9 hover:text-accent-12 transition-colors"
194+
>
195+
<XMark iconSize="sm-regular" />
196+
</button>
199197
</span>
200198
))}
201199
</div>
202200
)
203201
}
204202
searchPlaceholder="Search keyspaces..."
205-
emptyMessage={<div className="mt-2">No keyspaces available.</div>}
203+
emptyMessage={<div className="mt-2"> No keyspaces available.</div>}
206204
/>
207205
</FormSettingCard>
208206
);

0 commit comments

Comments
 (0)