mirror of
https://github.com/chartdb/chartdb.git
synced 2026-02-14 15:39:09 -06:00
Merge pull request #9 from chartdb/jf/small_fixes_to_ui
small fixes + save when clicked on last updated
This commit is contained in:
@@ -20,7 +20,7 @@ import {
|
||||
import { databaseTypeToLabelMap } from '@/lib/databases';
|
||||
import { DatabaseType } from '@/lib/domain/database-type';
|
||||
import { DialogProps } from '@radix-ui/react-dialog';
|
||||
import { WandSparkles } from 'lucide-react';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
|
||||
export interface ExportSQLDialogProps {
|
||||
@@ -59,12 +59,17 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
|
||||
<div className="flex flex-col gap-2">
|
||||
<Spinner />
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<WandSparkles className="h-5" />
|
||||
<Label>
|
||||
Generating SQL for{' '}
|
||||
<Sparkles className="h-5" />
|
||||
<Label className="text-lg">
|
||||
AI is generating SQL for{' '}
|
||||
{databaseTypeToLabelMap[targetDatabaseType]}...
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Label className="text-sm">
|
||||
This should take up to 30 seconds.
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
[targetDatabaseType]
|
||||
@@ -85,7 +90,11 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
|
||||
<DialogHeader>
|
||||
<DialogTitle>Export SQL</DialogTitle>
|
||||
<DialogDescription>
|
||||
Export your diagram schema as SQL script
|
||||
{`Export your diagram schema to ${
|
||||
targetDatabaseType === DatabaseType.GENERIC
|
||||
? 'SQL'
|
||||
: databaseTypeToLabelMap[targetDatabaseType]
|
||||
} script`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
|
||||
@@ -259,7 +259,9 @@ const generateSQLPrompt = (databaseType: string, sqlScript: string) => {
|
||||
}[databaseType] || '';
|
||||
|
||||
const additionalInstructions = `
|
||||
Just answer with the script with no additional details. give the commands flat without markdown.
|
||||
**Provide just the SQL commands without markdown tags.**
|
||||
|
||||
Just answer with the script with no additional details.
|
||||
|
||||
No images are allowed. Do not try to generate or link images, including base64 data URLs.
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from '@/components/menubar/menubar';
|
||||
import { Label } from '@/components/label/label';
|
||||
import { Button } from '@/components/button/button';
|
||||
import { Check, Pencil, Save } from 'lucide-react';
|
||||
import { Check, Pencil } from 'lucide-react';
|
||||
import { Input } from '@/components/input/input';
|
||||
import { useChartDB } from '@/hooks/use-chartdb';
|
||||
import { useClickAway, useKeyPressEvent } from 'react-use';
|
||||
@@ -99,7 +99,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
}, [exportImage]);
|
||||
|
||||
const openChartDBIO = useCallback(() => {
|
||||
window.open('https://chartdb.io', '_blank');
|
||||
window.location.href = 'https://chartdb.io';
|
||||
}, []);
|
||||
|
||||
const openJoinSlack = useCallback(() => {
|
||||
@@ -109,13 +109,14 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
);
|
||||
}, []);
|
||||
|
||||
const emojiAI = '✨';
|
||||
|
||||
return (
|
||||
<nav className="flex flex-row items-center justify-between px-4 h-12 border-b">
|
||||
<div className="flex flex-1 justify-start gap-x-3">
|
||||
<div className="flex font-primary items-center">
|
||||
<a
|
||||
href="https://chartdb.io"
|
||||
target="_blank"
|
||||
className="cursor-pointer"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@@ -133,7 +134,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={createNewDiagram}>
|
||||
New
|
||||
<MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem onClick={openDiagram}>
|
||||
Open
|
||||
@@ -167,6 +167,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
'postgresql'
|
||||
]
|
||||
}
|
||||
<MenubarShortcut className="text-base">
|
||||
{emojiAI}
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
onClick={() =>
|
||||
@@ -177,6 +180,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
}
|
||||
>
|
||||
{databaseTypeToLabelMap['mysql']}
|
||||
<MenubarShortcut className="text-base">
|
||||
{emojiAI}
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
onClick={() =>
|
||||
@@ -191,6 +197,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
'sql_server'
|
||||
]
|
||||
}
|
||||
<MenubarShortcut className="text-base">
|
||||
{emojiAI}
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
onClick={() =>
|
||||
@@ -201,6 +210,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
}
|
||||
>
|
||||
{databaseTypeToLabelMap['mariadb']}
|
||||
<MenubarShortcut className="text-base">
|
||||
{emojiAI}
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
onClick={() =>
|
||||
@@ -211,6 +223,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
}
|
||||
>
|
||||
{databaseTypeToLabelMap['sqlite']}
|
||||
<MenubarShortcut className="text-base">
|
||||
{emojiAI}
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
@@ -252,12 +267,8 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>Edit</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>Undo</MenubarItem>
|
||||
<MenubarItem>Redo</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem
|
||||
onClick={() =>
|
||||
@@ -350,7 +361,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Badge variant="secondary" className="flex gap-1">
|
||||
<Save className="h-4" />
|
||||
Last saved
|
||||
<TimeAgo datetime={currentDiagram.updatedAt} />
|
||||
</Badge>
|
||||
|
||||
Reference in New Issue
Block a user