Skip to content

Commit

Permalink
feat(ui): Organize workflow form sections into accordions (#142)
Browse files Browse the repository at this point in the history
  • Loading branch information
topher-lo committed May 21, 2024
1 parent d222ef3 commit 6f6732c
Show file tree
Hide file tree
Showing 19 changed files with 411 additions and 476 deletions.
1 change: 0 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@
"react-use-websocket": "^4.8.1",
"reactflow": "^11.11.3",
"sharp": "^0.33.4",
"sonner": "^1.4.41",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1",
Expand Down
46 changes: 3 additions & 43 deletions frontend/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions frontend/src/app/settings/credentials/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import {
} from "@/components/new-credential-dialog"
import NoContent from "@/components/no-content"
import { AlertNotification } from "@/components/notifications"
import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"

export default function CredentialsPage() {
const queryClient = useQueryClient()
Expand Down Expand Up @@ -135,7 +134,7 @@ function SecretsTable({
description="Are you sure you want to delete this secret? This action cannot be undone."
onConfirm={() => deleteFn(secret)}
>
<Button size="sm" variant="ghost" className={DELETE_BUTTON_STYLE}>
<Button size="sm" variant="ghost">
<Trash2Icon className="size-3.5" />
</Button>
</ConfirmationDialog>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/badges.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export function StatusBadge({ status, children, className }: StatusBadgeProps) {
defaultStatusColor,
"items-center gap-1",
status &&
status in statusColors &&
statusColors[status as keyof typeof statusColors],
status in statusColors &&
statusColors[status as keyof typeof statusColors],
className
)}
>
Expand Down Expand Up @@ -59,7 +59,7 @@ export function ComingSoonBadge({ className }: { className?: string }) {
<Badge
variant="outline"
className={cn(
"border-2 border-emerald-500 bg-emerald-200 text-xs text-emerald-700",
"text-xs bg-white py-3",
className
)}
>
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/console/control-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
import { ConfirmationDialog } from "@/components/confirmation-dialog"
import { type WorkflowControlsForm } from "@/components/console/console"
import { tileIconMapping } from "@/components/workspace/canvas/action-node"
import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"

export const supportedInputTypes = [
{
Expand Down Expand Up @@ -201,7 +200,7 @@ export function ConsolePanel({
onConfirm={handleClearEvents}
>
<Button
className={cn("w-full", DELETE_BUTTON_STYLE)}
className={cn("w-full")}
type="button"
variant="outline"
>
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/components/dashboard/create-workflow-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { PlusCircleIcon } from "lucide-react";

import { createWorkflow } from "@/lib/flow";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";

const CreateWorkflowButton: React.FC = () => {
const router = useRouter();
Expand All @@ -28,11 +27,6 @@ const CreateWorkflowButton: React.FC = () => {

const response = await createWorkflow(title, description);

toast({
title: title,
description: description,
});

// Redirect to the new workflow's page
router.push(`/workflows/${response.id}`);
} catch (error) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/nav/workflow-nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function WorkflowNav() {
id="enable-workflow"
checked={isOnline}
onCheckedChange={setIsOnline}
className="data-[state=checked]:bg-lime-400"
className="data-[state=checked]:bg-emerald-500"
/>
<Label
className="flex text-xs text-muted-foreground"
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/components/new-credential-dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,11 @@ import {
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { toast } from "@/components/ui/use-toast"
import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"

interface NewCredentialsDialogProps
extends PropsWithChildren<
DialogProps & React.HTMLAttributes<HTMLDivElement>
> {}
> { }

export function NewCredentialsDialog({
children,
Expand Down Expand Up @@ -204,7 +203,6 @@ export function NewCredentialsDialog({
<Button
type="button"
variant="ghost"
className={DELETE_BUTTON_STYLE}
onClick={() => remove(index)}
disabled={fields.length === 1}
>
Expand Down
121 changes: 121 additions & 0 deletions frontend/src/components/ui/pagination.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import * as React from "react"
import {
ChevronLeftIcon,
ChevronRightIcon,
DotsHorizontalIcon,
} from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
role="navigation"
aria-label="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
isActive?: boolean
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">

const PaginationLink = ({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps) => (
<a
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "outline" : "ghost",
size,
}),
className
)}
{...props}
/>
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1 pl-2.5", className)}
{...props}
>
<ChevronLeftIcon className="h-4 w-4" />
<span>Previous</span>
</PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn("gap-1 pr-2.5", className)}
{...props}
>
<span>Next</span>
<ChevronRightIcon className="h-4 w-4" />
</PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
aria-hidden
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<DotsHorizontalIcon className="h-4 w-4" />
<span className="sr-only">More pages</span>
</span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
Pagination,
PaginationContent,
PaginationLink,
PaginationItem,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
}
31 changes: 0 additions & 31 deletions frontend/src/components/ui/sonner.tsx

This file was deleted.

0 comments on commit 6f6732c

Please sign in to comment.