build ConfigOrDeployments

frontend/src/components/resources/build/config.tsx

@@ -19,10 +19,10 @@ import {
 } from "@ui/select";
 import { Textarea } from "@ui/textarea";
 import { PlusCircle } from "lucide-react";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { CopyGithubWebhook, LabelsConfig, ResourceSelector } from "../common";
 
-export const BuildConfig = ({ id }: { id: string }) => {
+export const BuildConfig = ({ id, titleOther }: { id: string; titleOther: ReactNode }) => {
   const perms = useRead("GetPermissionLevel", {
     target: { type: "Build", id },
   }).data;
@@ -37,6 +37,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
 
   return (
     <Config
+      titleOther={titleOther}
       disabled={disabled}
       config={config}
       update={update}

frontend/src/components/resources/build/index.tsx

@@ -1,7 +1,7 @@
 import { Section } from "@components/layouts";
 import { useRead } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
-import { FolderGit, Hammer, Rocket } from "lucide-react";
+import { FolderGit, Hammer } from "lucide-react";
 import { BuildConfig } from "./config";
 import { BuildChart } from "./dashboard";
 import { BuildTable } from "./table";
@@ -15,6 +15,8 @@ import {
 } from "@lib/color";
 import { Card, CardHeader } from "@ui/card";
 import { cn } from "@lib/utils";
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 
 const useBuild = (id?: string) =>
   useRead("ListBuilds", {}).data?.find((d) => d.id === id);
@@ -25,6 +27,61 @@ const BuildIcon = ({ id, size }: { id?: string; size: number }) => {
   return <Hammer className={cn(`w-${size} h-${size}`, state && color)} />;
 };
 
+const ConfigOrDeployments = ({ id }: { id: string }) => {
+  const [view, setView] = useState("Config");
+  const deployments = useRead("ListDeployments", {}).data?.filter(
+    (deployment) => deployment.info.build_id === id
+  );
+  const deploymentsDisabled = (deployments?.length || 0) === 0;
+  return (
+    <Tabs
+      value={deploymentsDisabled ? "Config" : view}
+      onValueChange={setView}
+      className="grid gap-4"
+    >
+      <TabsContent value="Config">
+        <BuildConfig
+          id={id}
+          titleOther={
+            <TabsList className="justify-start w-fit">
+              <TabsTrigger value="Config" className="w-[110px]">
+                Config
+              </TabsTrigger>
+              <TabsTrigger
+                value="Deployments"
+                className="w-[110px]"
+                disabled={deploymentsDisabled}
+              >
+                Deployments
+              </TabsTrigger>
+            </TabsList>
+          }
+        />
+      </TabsContent>
+      <TabsContent value="Deployments">
+        <Section
+          titleOther={
+            <TabsList className="justify-start w-fit">
+              <TabsTrigger value="Config" className="w-[110px]">
+                Config
+              </TabsTrigger>
+              <TabsTrigger
+                value="Deployments"
+                className="w-[110px]"
+                disabled={deploymentsDisabled}
+              >
+                Deployments
+              </TabsTrigger>
+            </TabsList>
+          }
+        >
+          <DeploymentTable deployments={deployments} />
+        </Section>
+      </TabsContent>
+    </Tabs>
+  );
+};
+
 export const BuildComponents: RequiredResourceComponents = {
   Dashboard: BuildChart,
 
@@ -73,20 +130,9 @@ export const BuildComponents: RequiredResourceComponents = {
 
   Actions: { RunBuild },
 
-  Page: {
-    Deployments: ({ id }) => {
-      const deployments = useRead("ListDeployments", {}).data?.filter(
-        (deployment) => deployment.info.build_id === id
-      );
-      return (
-        <Section title="Deployments" icon={<Rocket className="w-4 h-4" />}>
-          <DeploymentTable deployments={deployments} />
-        </Section>
-      );
-    },
-  },
+  Page: {},
 
-  Config: BuildConfig,
+  Config: ConfigOrDeployments,
 
   DangerZone: ({ id }) => <DeleteResource type="Build" id={id} />,
 };