+
+ {props.extraButtons}
Save Changes
- {isLoading && }
+ {isLoading && }
diff --git a/web/src/components/Main.tsx b/web/src/components/Main.tsx
index b7fc746..b5473e2 100644
--- a/web/src/components/Main.tsx
+++ b/web/src/components/Main.tsx
@@ -69,7 +69,7 @@ export default async function Main() {
-
+
{meta.tagline}
diff --git a/web/src/components/OutputPreviews.tsx b/web/src/components/OutputPreviews.tsx
new file mode 100644
index 0000000..f22e85f
--- /dev/null
+++ b/web/src/components/OutputPreviews.tsx
@@ -0,0 +1,52 @@
+import { Card, CardContent } from "@/components/ui/card";
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+ type CarouselApi,
+} from "@/components/ui/carousel";
+import * as React from "react";
+
+export function OutputPreview() {
+ const [api, setApi] = React.useState
();
+ const [current, setCurrent] = React.useState(0);
+ const [count, setCount] = React.useState(0);
+
+ React.useEffect(() => {
+ if (!api) {
+ return;
+ }
+
+ setCount(api.scrollSnapList().length);
+ setCurrent(api.selectedScrollSnap() + 1);
+
+ api.on("select", () => {
+ setCurrent(api.selectedScrollSnap() + 1);
+ });
+ }, [api]);
+
+ return (
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+
+ {index + 1}
+
+
+
+ ))}
+
+
+
+
+
+ Slide {current} of {count}
+
+
+ );
+}
diff --git a/web/src/components/RouteRefresher.tsx b/web/src/components/RouteRefresher.tsx
index b772986..f17cb28 100644
--- a/web/src/components/RouteRefresher.tsx
+++ b/web/src/components/RouteRefresher.tsx
@@ -1,14 +1,21 @@
"use client";
import { LoadingIcon } from "@/components/LoadingIcon";
+import { Button } from "@/components/ui/button";
+import { RefreshCcw } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useTransition } from "react";
-export function RouteRefresher(props: { interval: number }) {
+export function RouteRefresher(props: {
+ interval: number;
+ autoRefresh: boolean;
+}) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
useEffect(() => {
+ if (!props.autoRefresh) return;
+
let timeout: NodeJS.Timeout;
const refresh = () => {
@@ -35,7 +42,24 @@ export function RouteRefresher(props: { interval: number }) {
clearTimeout(timeout);
window.removeEventListener("visibilitychange", handleVisibilityChange);
};
- }, [props.interval, router]);
+ }, [props.interval, router, props.autoRefresh]);
- return {isPending && }
;
+ return (
+
+ {isPending && }
+ {!isPending && !props.autoRefresh && (
+
+ )}
+
+ );
}
diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx
index 5f0f7da..445b061 100644
--- a/web/src/components/RunDisplay.tsx
+++ b/web/src/components/RunDisplay.tsx
@@ -33,7 +33,9 @@ export async function RunDisplay({
{run.version?.version}
- {run.origin}
+
+ {run.origin}
+
diff --git a/web/src/components/RunWorkflowInline.tsx b/web/src/components/RunWorkflowInline.tsx
index cf1f94b..ccb4242 100644
--- a/web/src/components/RunWorkflowInline.tsx
+++ b/web/src/components/RunWorkflowInline.tsx
@@ -40,13 +40,10 @@ export function RunWorkflowInline({
} = publicRunStore();
const runWorkflow = async () => {
- console.log();
-
if (!user.isSignedIn) {
clerk.openSignIn({
redirectUrl: window.location.href,
});
- console.log("hi");
return;
}
console.log(values);
diff --git a/web/src/components/RunsTable.tsx b/web/src/components/RunsTable.tsx
index d869d93..6eee49c 100644
--- a/web/src/components/RunsTable.tsx
+++ b/web/src/components/RunsTable.tsx
@@ -14,6 +14,7 @@ import {
TableRow,
} from "@/components/ui/table";
import { parseAsInteger } from "next-usequerystate";
+import { headers } from "next/headers";
const itemPerPage = 6;
const pageParser = parseAsInteger.withDefault(1);
@@ -69,8 +70,14 @@ export async function RunsTable(props: {
export async function DeploymentsTable(props: { workflow_id: string }) {
const allRuns = await findAllDeployments(props.workflow_id);
+
+ const headersList = headers();
+ const host = headersList.get("host") || "";
+ const protocol = headersList.get("x-forwarded-proto") || "";
+ const domain = `${protocol}://${host}`;
+
return (
-
+
A list of your deployments
@@ -83,7 +90,7 @@ export async function DeploymentsTable(props: { workflow_id: string }) {
{allRuns.map((run) => (
-
+
))}
diff --git a/web/src/components/Section.tsx b/web/src/components/Section.tsx
index 7ac27c9..ca24cff 100644
--- a/web/src/components/Section.tsx
+++ b/web/src/components/Section.tsx
@@ -1,33 +1,37 @@
-import { Button, buttonVariants } from '@/components/ui/button';
-type ButtonProps = React.ComponentProps
;
-type LinkProps = React.ComponentProps;
-import { Card as BaseCard } from '@/components/ui/card';
-type CardProps = React.ComponentProps;
-import { Tabs, TabsTrigger as Tab, TabsList } from '@/components/ui/tabs';
-type TabsProps = React.ComponentProps;
import {
Accordion,
AccordionItem,
AccordionContent,
AccordionTrigger,
-} from '@/components/ui/accordion';
-type AccordionProps = React.ComponentProps;
-import { Badge as Chip } from '@/components/ui/badge';
-type ChipProps = React.ComponentProps;
-
-import Link from 'next/link';
+} from "@/components/ui/accordion";
+import { Badge as Chip } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card as BaseCard } from "@/components/ui/card";
+import { Tabs, TabsTrigger as Tab, TabsList } from "@/components/ui/tabs";
+// import { PiCheckCircleDuotone } from 'react-icons/pi';
+import { cn } from "@/lib/utils";
+import { ChevronRight as MdChevronRight } from "lucide-react";
+import { CheckCircle as PiCheckCircleDuotone } from "lucide-react";
+import Link from "next/link";
import type {
HTMLAttributeAnchorTarget,
HTMLAttributes,
ReactNode,
-} from 'react';
-import { twMerge } from 'tailwind-merge';
-import { ChevronRight as MdChevronRight} from 'lucide-react'
+} from "react";
// import { MdChevronRight } from 'react-icons/md';
-import React from 'react';
-import { CheckCircle as PiCheckCircleDuotone } from 'lucide-react'
-// import { PiCheckCircleDuotone } from 'react-icons/pi';
-import { cn } from '@/lib/utils';
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+type ButtonProps = React.ComponentProps;
+type LinkProps = React.ComponentProps;
+
+type CardProps = React.ComponentProps;
+
+type TabsProps = React.ComponentProps;
+
+type AccordionProps = React.ComponentProps;
+
+type ChipProps = React.ComponentProps;
function Section({
className,
@@ -41,8 +45,8 @@ function Section({
return (
@@ -64,12 +68,12 @@ function Title({
{children}
@@ -86,12 +90,12 @@ function Subtitle({
{children}
@@ -103,7 +107,7 @@ function Announcement({
className,
children,
href,
- target = '_blank',
+ target = "_blank",
...props
}: ChipProps & {
href?: string; //string | UrlObject;
@@ -112,8 +116,8 @@ function Announcement({
return (
{children}
- {' '}
+ {" "}
@@ -186,8 +190,8 @@ function PrimaryAction({
buttonVariants({
variant: variant,
}),
- 'group',
- className,
+ "group",
+ className
)}
{...props}
>
@@ -206,17 +210,17 @@ function SecondaryAction({
hideArrow,
...props
}: ActionLinkProps | ActionProps) {
- if (props.be === 'button') {
+ if (props.be === "button") {
return (