feat: enable beta deploy (#23)

.env.example

@@ -12,4 +12,5 @@ IMAGES_FTP_PASS=""
 GITHUB_PAT=""
 DEPLOY_REPO_URL="user/repo"
 DEPLOY_WORKFLOW="workflow.yml"
+DEPLOY_BETA_WORKFLOW="workflow2.yml"
 DEPLOY_REF="main"

package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
     "@sanity/icons": "^3.4.0",
     "@sanity/image-url": "1",
     "@sanity/ui": "^2.8.25",

src/app/actions/github.ts

@@ -6,17 +6,29 @@ type RunType = {
   id: string;
 };
 
-export async function dispatchWorkflow() {
+export async function dispatchWorkflow({
+  isBetaDeploy,
+}: {
+  isBetaDeploy: boolean;
+}) {
   const repoURL = process.env.DEPLOY_REPO_URL;
-  const workflow = process.env.DEPLOY_WORKFLOW;
+  const productionWorkflow = process.env.DEPLOY_WORKFLOW;
+  const betaWorkflow = process.env.DEPLOY_BETA_WORKFLOW;
   const ref = process.env.DEPLOY_REF;
 
   try {
     const octokit = new Octokit({
       auth: process.env.GITHUB_PAT,
     });
 
-    // Get all workflow runs to check the uncompleted ones
+    const workflow = isBetaDeploy ? betaWorkflow : productionWorkflow;
+
+    if (!workflow) {
+      throw new Error(
+        `No ${isBetaDeploy ? 'beta' : 'production'} workflow configured`
+      );
+    }
+
     const { data: runs } = await octokit.request(
       `GET /repos/${repoURL}/actions/workflows/${workflow}/runs`,
       {
@@ -49,7 +61,9 @@ export async function dispatchWorkflow() {
       { ref }
     );
 
-    console.log('Dispatched new workflow run');
+    console.log(
+      `Dispatched new ${isBetaDeploy ? 'beta' : 'production'} workflow run`
+    );
   } catch (error) {
     throw error;
   }

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

src/sanity/components/CustomNavbar.tsx

@@ -13,21 +13,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
 import FTPComponent from '@/components/FTPComponent';
 
 export function CustomNavbar(props: NavbarProps) {
   const { renderDefault } = props;
   const [isDeploying, setIsDeploying] = useState(false);
   const [timeLeft, setTimeLeft] = useState(0);
+  const [isBetaDeploy, setIsBetaDeploy] = useState(false);
   const toast = useToast();
 
   const deploySite = async () => {
     try {
-      await dispatchWorkflow();
+      await dispatchWorkflow({ isBetaDeploy });
       toast.push({
         status: 'success',
         title: 'Deployment Triggered',
-        description: 'Your site is being deployed!',
+        description: `Deploying to ${isBetaDeploy ? 'Beta' : 'Production'} environment`,
       });
     } catch (error: unknown) {
       setIsDeploying(false);
@@ -79,6 +81,21 @@ export function CustomNavbar(props: NavbarProps) {
   return (
     <div>
       <div className="flex justify-center items-center gap-3 p-2 bg-slate-950">
+        <div className="flex items-center gap-2">
+          <span
+            className={`text-sm w-[70px] text-right ${!isBetaDeploy ? 'text-white font-bold' : 'text-gray-400'}`}
+          >
+            Production
+          </span>
+          <div className="w-[40px] flex justify-center">
+            <Switch checked={isBetaDeploy} onCheckedChange={setIsBetaDeploy} />
+          </div>
+          <span
+            className={`text-sm w-[40px] ${isBetaDeploy ? 'text-white font-semibold' : 'text-gray-100'}`}
+          >
+            Beta
+          </span>
+        </div>
         <FTPDialogTrigger />
         <button
           onClick={handleDeploy}
@@ -96,9 +113,10 @@ export function CustomNavbar(props: NavbarProps) {
               <span className="ml-2">Deploying... {timeLeft} sec</span>
             </>
           ) : (
-            'Deploy'
+            `Deploy to ${isBetaDeploy ? 'Beta Server' : 'Production'}`
           )}
         </button>
+
         <button
           onClick={checkStatus}
           className="flex items-center justify-center bg-slate-400 rounded-full transition duration-200 size-5"