Skip to content

Commit

Permalink
[front] - refacto: NewDialog final wave (#10049)
Browse files Browse the repository at this point in the history 
* [front/components/spaces] - refactor: improve data source deletion confirmation UI

 - Modify the UI layout to include a list with bullet points showing which data sources are in use
 - Enhance the confirmation prompt with bold text for emphasis

[front/hooks] - feature: update useAwaitableDialog to use new dialog components

 - Implement updated dialog infrastructure with improved UI and accessibility support
 - Add customization options for dialog buttons including labels and variants
 - Ensure proper handling of dismiss dialog actions by treating them as a cancel event

* [misc] - refactor: update dialog components with new design system

 - Replaced custom dialog components with new design system dialogs across various components
 - Removed old dialog components from the codebase as they are no longer used
 - Updated dialog components to use new `NewDialog` patterns including headers, footers, and content for improved consistency
 - Migrated to using updated icons and spinner components from `@dust-tt/sparkle` library to align with the new design system
  • Loading branch information
@JulesBelveze
JulesBelveze authored Jan 17, 2025
1 parent 379df2f commit 13d111a
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 269 deletions.
132 changes: 69 additions & 63 deletions front/components/poke/plugins/RunPluginDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Spinner } from "@dust-tt/sparkle";
import {
NewDialog,
NewDialogContainer,
NewDialogContent,
NewDialogDescription,
NewDialogHeader,
NewDialogTitle,
Spinner,
} from "@dust-tt/sparkle";
import type { PluginWorkspaceResource } from "@dust-tt/types";
import { AlertCircle } from "lucide-react";
import { useCallback, useState } from "react";
Expand All @@ -9,10 +17,6 @@ import {
PokeAlertDescription,
PokeAlertTitle,
} from "@app/components/poke/shadcn/ui/alert";
import {
PokeDialog,
PokeDialogContent,
} from "@app/components/poke/shadcn/ui/dialog";
import type { PluginListItem, PluginResponse } from "@app/lib/api/poke/types";
import { usePokePluginManifest, useRunPokePlugin } from "@app/poke/swr/plugins";

Expand Down Expand Up @@ -63,64 +67,66 @@ export function RunPluginDialog({
);

return (
<PokeDialog open={true} onOpenChange={handleClose}>
<PokeDialogContent className="w-auto bg-structure-50 sm:min-w-[600px] sm:max-w-[1000px]">
<div className="flex flex-col gap-1">
<h2>Run {plugin.name} plugin</h2>
<p className="text-wrap w-auto text-xs text-slate-400">
{plugin.description}
</p>
</div>
{isLoading ? (
<Spinner />
) : !manifest ? (
<PokeAlert variant="destructive">
<AlertCircle className="h-4 w-4" />
<PokeAlertTitle>Error</PokeAlertTitle>
<PokeAlertDescription>
Plugin could not be loaded.
</PokeAlertDescription>
</PokeAlert>
) : (
<>
{error && (
<PokeAlert variant="destructive">
<PokeAlertTitle>Error</PokeAlertTitle>
<PokeAlertDescription>{error}</PokeAlertDescription>
</PokeAlert>
)}
{result && result.display === "text" && (
<PokeAlert variant="success">
<PokeAlertTitle>Success</PokeAlertTitle>
<PokeAlertDescription>
{result.value} - Make sure to reload.
</PokeAlertDescription>
</PokeAlert>
)}
{result && result.display === "json" && (
<div className="mb-4 mt-4">
<div className="mb-2 font-medium">Result:</div>
<div className="max-h-[400px] overflow-auto rounded-lg bg-slate-800 p-4">
<pre className="font-mono whitespace-pre-wrap break-words text-sm text-slate-200">
{JSON.stringify(result.value, null, 2)}
</pre>
<NewDialog open={true} onOpenChange={handleClose}>
<NewDialogContent className="w-auto bg-structure-50 sm:min-w-[600px] sm:max-w-[1000px]">
<NewDialogHeader>
<NewDialogTitle>Run {plugin.name} plugin</NewDialogTitle>
<NewDialogDescription>{plugin.description}</NewDialogDescription>
</NewDialogHeader>
<NewDialogContainer>
{isLoading ? (
<Spinner />
) : !manifest ? (
<PokeAlert variant="destructive">
<AlertCircle className="h-4 w-4" />
<PokeAlertTitle>Error</PokeAlertTitle>
<PokeAlertDescription>
Plugin could not be loaded.
</PokeAlertDescription>
</PokeAlert>
) : (
<>
{error && (
<PokeAlert variant="destructive">
<PokeAlertTitle>Error</PokeAlertTitle>
<PokeAlertDescription>{error}</PokeAlertDescription>
</PokeAlert>
)}
{result && result.display === "text" && (
<PokeAlert variant="success">
<PokeAlertTitle>Success</PokeAlertTitle>
<PokeAlertDescription>
{result.value} - Make sure to reload.
</PokeAlertDescription>
</PokeAlert>
)}
{result && result.display === "json" && (
<div className="mb-4 mt-4">
<div className="mb-2 font-medium">Result:</div>
<div className="max-h-[400px] overflow-auto rounded-lg bg-slate-800 p-4">
<pre className="font-mono whitespace-pre-wrap break-words text-sm text-slate-200">
{JSON.stringify(result.value, null, 2)}
</pre>
</div>
</div>
</div>
)}
<PluginForm
disabled={result !== null}
manifest={manifest}
onSubmit={onSubmit}
/>
{manifest.warning && (
<PokeAlert variant="destructive">
<PokeAlertTitle>Warning</PokeAlertTitle>
<PokeAlertDescription>{manifest.warning}</PokeAlertDescription>
</PokeAlert>
)}
</>
)}
</PokeDialogContent>
</PokeDialog>
)}
<PluginForm
disabled={result !== null}
manifest={manifest}
onSubmit={onSubmit}
/>
{manifest.warning && (
<PokeAlert variant="destructive">
<PokeAlertTitle>Warning</PokeAlertTitle>
<PokeAlertDescription>
{manifest.warning}
</PokeAlertDescription>
</PokeAlert>
)}
</>
)}
</NewDialogContainer>
</NewDialogContent>
</NewDialog>
);
}
18 changes: 9 additions & 9 deletions front/components/poke/shadcn/ui/command.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
"use client";

import { MagnifyingGlassIcon } from "@dust-tt/sparkle";
import {
MagnifyingGlassIcon,
NewDialog,
NewDialogContent,
} from "@dust-tt/sparkle";
import type { DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import Link from "next/link";
import * as React from "react";

import { cn } from "@app/components/poke/shadcn/lib/utils";
import {
PokeDialog,
PokeDialogContent,
} from "@app/components/poke/shadcn/ui/dialog";

const CommandContext = React.createContext<{
selectedIndex: number;
Expand Down Expand Up @@ -117,16 +117,16 @@ const CommandDialog = ({

return (
<CommandContext.Provider value={commandContext}>
<PokeDialog onOpenChange={onOpenChange} open={open} {...props}>
<PokeDialogContent className={cn("overflow-hidden p-0", className)}>
<NewDialog onOpenChange={onOpenChange} open={open} {...props}>
<NewDialogContent className={cn("overflow-hidden p-0", className)}>
<Command
shouldFilter={shouldFilter}
className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
>
{children}
</Command>
</PokeDialogContent>
</PokeDialog>
</NewDialogContent>
</NewDialog>
</CommandContext.Provider>
);
};
Expand Down
120 changes: 0 additions & 120 deletions front/components/poke/shadcn/ui/dialog.tsx
View file

This file was deleted.

46 changes: 23 additions & 23 deletions front/components/poke/subscriptions/EnterpriseUpgradeDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
import { Spinner } from "@dust-tt/sparkle";
import {
NewDialog,
NewDialogContent,
NewDialogDescription,
NewDialogFooter,
NewDialogHeader,
NewDialogTitle,
NewDialogTrigger,
Spinner,
} from "@dust-tt/sparkle";
import type { EnterpriseUpgradeFormType, WorkspaceType } from "@dust-tt/types";
import { EnterpriseUpgradeFormSchema, removeNulls } from "@dust-tt/types";
import { ioTsResolver } from "@hookform/resolvers/io-ts";
Expand All @@ -7,15 +16,6 @@ import { useState } from "react";
import { useForm } from "react-hook-form";

import { PokeButton } from "@app/components/poke/shadcn/ui/button";
import {
PokeDialog,
PokeDialogContent,
PokeDialogDescription,
PokeDialogFooter,
PokeDialogHeader,
PokeDialogTitle,
PokeDialogTrigger,
} from "@app/components/poke/shadcn/ui/dialog";
import { PokeForm } from "@app/components/poke/shadcn/ui/form";
import {
InputField,
Expand Down Expand Up @@ -95,18 +95,18 @@ export default function EnterpriseUpgradeDialog({
};

return (
<PokeDialog open={open} onOpenChange={setOpen}>
<PokeDialogTrigger asChild>
<NewDialog open={open} onOpenChange={setOpen}>
<NewDialogTrigger asChild>
<PokeButton variant="outline">🏢 Upgrade to Enterprise</PokeButton>
</PokeDialogTrigger>
<PokeDialogContent className="bg-structure-50 sm:max-w-[600px]">
<PokeDialogHeader>
<PokeDialogTitle>Upgrade {owner.name} to Enterprise.</PokeDialogTitle>
<PokeDialogDescription>
</NewDialogTrigger>
<NewDialogContent className="bg-structure-50 sm:max-w-[600px]">
<NewDialogHeader>
<NewDialogTitle>Upgrade {owner.name} to Enterprise.</NewDialogTitle>
<NewDialogDescription>
Select the enterprise plan and provide the Stripe subscription id of
the customer.
</PokeDialogDescription>
</PokeDialogHeader>
</NewDialogDescription>
</NewDialogHeader>
{error && <div className="text-red-500">{error}</div>}
{isSubmitting && <Spinner />}
{!isSubmitting && (
Expand Down Expand Up @@ -135,18 +135,18 @@ export default function EnterpriseUpgradeDialog({
/>
</div>
</div>
<PokeDialogFooter>
<NewDialogFooter>
<PokeButton
type="submit"
className="border-warning-600 bg-warning-500 text-white"
>
Upgrade
</PokeButton>
</PokeDialogFooter>
</NewDialogFooter>
</form>
</PokeForm>
)}
</PokeDialogContent>
</PokeDialog>
</NewDialogContent>
</NewDialog>
);
}
Loading

0 comments on commit 13d111a

Please sign in to comment.