Compare commits

..

4 Commits

Author SHA1 Message Date
johnnyfish
595e3db0b3 fix(import-db): handle direct query copy-paste instead of fetched JSON 2025-02-17 20:28:15 +02:00
Anthony Mini
ab89bad6d5 fix(i18n): add [FR] translation (#579)
Co-authored-by: Jonathan Fishner <jonathanfishner11@gmail.com>
2025-02-16 20:08:18 +02:00
Jonathan Fishner
deb218423f fix(sqlite-import): import nuallable columns correctly + add json type (#571) 2025-02-16 11:36:02 +02:00
Jonathan Fishner
48342471ac fix(empty-state): show diff buttons on import-dbml when triggered by empty (#574)
* feat(empty-state): trigger import-dbml when clicked empty diagram

* fix(empty-state): show diff buttons on import-dbml when triggered by empty

* fix(empty-state): add missing translations for empty state flow

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
2025-02-13 17:53:21 +02:00
28 changed files with 155 additions and 52 deletions

View File

@@ -7,6 +7,7 @@ import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/expor
import type { ExportDiagramDialogProps } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
import type { ImportDiagramDialogProps } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
import type { CreateRelationshipDialogProps } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
export interface DialogContext {
// Create diagram dialog
@@ -66,7 +67,9 @@ export interface DialogContext {
closeImportDiagramDialog: () => void;
// Import DBML dialog
openImportDBMLDialog: () => void;
openImportDBMLDialog: (
params?: Omit<ImportDBMLDialogProps, 'dialog'>
) => void;
closeImportDBMLDialog: () => void;
}

View File

@@ -19,6 +19,7 @@ import { ExportImageDialog } from '@/dialogs/export-image-dialog/export-image-di
import { ExportDiagramDialog } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
import { ImportDiagramDialog } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
import { BuckleDialog } from '@/dialogs/buckle-dialog/buckle-dialog';
import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
import { ImportDBMLDialog } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
export const DialogProvider: React.FC<React.PropsWithChildren> = ({
@@ -111,6 +112,8 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
// Import DBML dialog
const [openImportDBMLDialog, setOpenImportDBMLDialog] = useState(false);
const [importDBMLDialogParams, setImportDBMLDialogParams] =
useState<Omit<ImportDBMLDialogProps, 'dialog'>>();
return (
<dialogContext.Provider
@@ -142,7 +145,10 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
openImportDiagramDialog: () => setOpenImportDiagramDialog(true),
closeImportDiagramDialog: () =>
setOpenImportDiagramDialog(false),
openImportDBMLDialog: () => setOpenImportDBMLDialog(true),
openImportDBMLDialog: (params) => {
setImportDBMLDialogParams(params);
setOpenImportDBMLDialog(true);
},
closeImportDBMLDialog: () => setOpenImportDBMLDialog(false),
}}
>
@@ -173,7 +179,10 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
<ExportDiagramDialog dialog={{ open: openExportDiagramDialog }} />
<ImportDiagramDialog dialog={{ open: openImportDiagramDialog }} />
<BuckleDialog dialog={{ open: openBuckleDialog }} />
<ImportDBMLDialog dialog={{ open: openImportDBMLDialog }} />
<ImportDBMLDialog
dialog={{ open: openImportDBMLDialog }}
{...importDBMLDialogParams}
/>
</dialogContext.Provider>
);
};

View File

@@ -87,6 +87,8 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
const [showSSMSInfoDialog, setShowSSMSInfoDialog] = useState(false);
const helpButtonRef = React.useRef<HTMLButtonElement>(null);
useEffect(() => {
const loadScripts = async () => {
const { importMetadataScripts } = await import(
@@ -134,6 +136,11 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
if (inputValue.length === 65535) {
setShowSSMSInfoDialog(true);
}
// Show instructions when input contains "WITH fk_info as"
if (inputValue.toLowerCase().includes('with fk_info as')) {
helpButtonRef.current?.click();
}
},
[setScriptResult]
);
@@ -398,7 +405,11 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
)}
{isDesktop ? (
<ZoomableImage src="/load-new-db-instructions.gif">
<Button type="button" variant="link">
<Button
type="button"
variant="link"
ref={helpButtonRef}
>
{t(
'new_diagram_dialog.import_database.instructions_link'
)}
@@ -450,7 +461,11 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
{!isDesktop ? (
<ZoomableImage src="/load-new-db-instructions.gif">
<Button type="button" variant="link">
<Button
type="button"
variant="link"
ref={helpButtonRef}
>
{t(
'new_diagram_dialog.import_database.instructions_link'
)}

View File

@@ -28,7 +28,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
const [databaseType, setDatabaseType] = useState<DatabaseType>(
DatabaseType.GENERIC
);
const { closeCreateDiagramDialog } = useDialog();
const { closeCreateDiagramDialog, openImportDBMLDialog } = useDialog();
const { updateConfig } = useConfig();
const [scriptResult, setScriptResult] = useState('');
const [databaseEdition, setDatabaseEdition] = useState<
@@ -104,6 +104,10 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
await updateConfig({ defaultDiagramId: diagram.id });
closeCreateDiagramDialog();
navigate(`/diagrams/${diagram.id}`);
setTimeout(
() => openImportDBMLDialog({ withCreateEmptyDiagram: true }),
700
);
}, [
databaseType,
addDiagram,
@@ -112,6 +116,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
navigate,
updateConfig,
diagramNumber,
openImportDBMLDialog,
]);
return (

View File

@@ -71,10 +71,13 @@ function parseDBMLError(error: unknown): DBMLError | null {
return null;
}
export interface ImportDBMLDialogProps extends BaseDialogProps {}
export interface ImportDBMLDialogProps extends BaseDialogProps {
withCreateEmptyDiagram?: boolean;
}
export const ImportDBMLDialog: React.FC<ImportDBMLDialogProps> = ({
dialog,
withCreateEmptyDiagram,
}) => {
const { t } = useTranslation();
const initialDBML = `// Use DBML to define your database structure
@@ -331,7 +334,11 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
showClose
>
<DialogHeader>
<DialogTitle>{t('import_dbml_dialog.title')}</DialogTitle>
<DialogTitle>
{withCreateEmptyDiagram
? t('import_dbml_dialog.example_title')
: t('import_dbml_dialog.title')}
</DialogTitle>
<DialogDescription>
{t('import_dbml_dialog.description')}
</DialogDescription>
@@ -369,7 +376,9 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
<div className="flex items-center gap-4">
<DialogClose asChild>
<Button variant="secondary">
{t('import_dbml_dialog.cancel')}
{withCreateEmptyDiagram
? t('import_dbml_dialog.skip_and_empty')
: t('import_dbml_dialog.cancel')}
</Button>
</DialogClose>
{errorMessage ? (
@@ -389,7 +398,9 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
onClick={handleImport}
disabled={!dbmlContent.trim() || !!errorMessage}
>
{t('import_dbml_dialog.import')}
{withCreateEmptyDiagram
? t('import_dbml_dialog.show_example')
: t('import_dbml_dialog.import')}
</Button>
</div>
</DialogFooter>

View File

@@ -378,9 +378,12 @@ export const ar: LanguageTranslation = {
import_dbml_dialog: {
// TODO: Translate
title: 'Import DBML',
example_title: 'Import Example DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -381,10 +381,13 @@ export const bn: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -384,10 +384,13 @@ export const de: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -376,10 +376,13 @@ export const en = {
},
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error importing DBML',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -383,10 +383,13 @@ export const es: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -30,9 +30,8 @@ export const fr: LanguageTranslation = {
theme: 'Thème',
show_dependencies: 'Afficher les Dépendances',
hide_dependencies: 'Masquer les Dépendances',
// TODO: Translate
show_minimap: 'Show Mini Map',
hide_minimap: 'Hide Mini Map',
show_minimap: 'Afficher la Mini Carte',
hide_minimap: 'Masquer la Mini Carte',
},
share: {
share: 'Partage',
@@ -101,9 +100,8 @@ export const fr: LanguageTranslation = {
clear: 'Effacer',
show_more: 'Afficher Plus',
show_less: 'Afficher Moins',
// TODO: Translate
copy_to_clipboard: 'Copy to Clipboard',
copied: 'Copied!',
copy_to_clipboard: 'Copier dans le presse-papiers',
copied: 'Copié !',
side_panel: {
schema: 'Schéma:',
@@ -116,12 +114,11 @@ export const fr: LanguageTranslation = {
add_table: 'Ajouter une Table',
filter: 'Filtrer',
collapse: 'Réduire Tout',
// TODO: Translate
clear: 'Clear Filter',
no_results: 'No tables found matching your filter.',
// TODO: Translate
show_list: 'Show Table List',
show_dbml: 'Show DBML Editor',
clear: 'Effacer le Filtre',
no_results:
'Aucune table trouvée correspondant à votre filtre.',
show_list: 'Afficher la Liste des Tableaux',
show_dbml: "Afficher l'éditeur DBML",
table: {
fields: 'Champs',
@@ -153,7 +150,7 @@ export const fr: LanguageTranslation = {
title: 'Actions de la Table',
add_field: 'Ajouter un Champ',
add_index: 'Ajouter un Index',
duplicate_table: 'Duplicate Table', // TODO: Translate
duplicate_table: 'Tableau dupliqué',
delete_table: 'Supprimer la Table',
change_schema: 'Changer le Schéma',
},
@@ -236,14 +233,12 @@ export const fr: LanguageTranslation = {
step_2: 'Si vous utilisez "Résultats en Grille", changez le nombre maximum de caractères récupérés pour les données non-XML (définir à 9999999).',
},
instructions_link: "Besoin d'aide ? Regardez comment",
// TODO: Translate
check_script_result: 'Check Script Result',
check_script_result: 'Vérifier le résultat du Script',
},
cancel: 'Annuler',
back: 'Retour',
// TODO: Translate
import_from_file: 'Import from File',
import_from_file: "Importer à partir d'un fichier",
empty_diagram: 'Diagramme vide',
continue: 'Continuer',
import: 'Importer',
@@ -358,40 +353,42 @@ export const fr: LanguageTranslation = {
cancel: 'Annuler',
},
},
// TODO: Translate
export_diagram_dialog: {
title: 'Export Diagram',
description: 'Choose the format for export:',
title: 'Exporter le Diagramme',
description: "Sélectionner le format d'exportation :",
format_json: 'JSON',
cancel: 'Cancel',
export: 'Export',
cancel: 'Annuler',
export: 'Exporter',
error: {
title: 'Error exporting diagram',
title: "Erreur lors de l'exportation du diagramme",
description:
'Something went wrong. Need help? chartdb.io@gmail.com',
"Une erreur s'est produite. Besoin d'aide ? chartdb.io@gmail.com",
},
},
// TODO: Translate
import_diagram_dialog: {
title: 'Import Diagram',
description: 'Paste the diagram JSON below:',
cancel: 'Cancel',
import: 'Import',
title: 'Importer un diagramme',
description: 'Coller le diagramme au format JSON ci-dessous :',
cancel: 'Annuler',
import: 'Exporter',
error: {
title: 'Error importing diagram',
title: "Erreur lors de l'exportation du diagramme",
description:
'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
"Le diagramme JSON n'est pas valide. Veuillez vérifier le JSON et réessayer. Besoin d'aide ? chartdb.io@gmail.com",
},
},
// TODO: Translate
import_dbml_dialog: {
example_title: "Exemple d'importation DBML",
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
description:
'Importer un schéma de base de données à partir du format DBML.',
import: 'Importer',
cancel: 'Annuler',
skip_and_empty: 'Passer et vider',
show_example: 'Afficher un exemple',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',
title: 'Erreur',
description:
"Erreur d'analyse du DBML. Veuillez vérifier la syntaxe.",
},
},
relationship_type: {
@@ -408,13 +405,13 @@ export const fr: LanguageTranslation = {
table_node_context_menu: {
edit_table: 'Éditer la Table',
duplicate_table: 'Duplicate Table', // TODO: Translate
duplicate_table: 'Tableau Dupliqué',
delete_table: 'Supprimer la Table',
add_relationship: 'Add Relationship', // TODO: Translate
add_relationship: 'Ajouter une Relation',
},
// TODO: Add translations
snap_to_grid_tooltip: 'Snap to Grid (Hold {{key}})',
snap_to_grid_tooltip:
'Aligner sur la grille (maintenir la touche {{key}})',
tool_tips: {
double_click_to_edit: 'Double-cliquez pour modifier',

View File

@@ -381,10 +381,13 @@ export const gu: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -385,10 +385,13 @@ export const hi: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -379,10 +379,13 @@ export const id_ID: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -388,10 +388,13 @@ export const ja: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -377,10 +377,13 @@ export const ko_KR: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -389,10 +389,13 @@ export const mr: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -382,10 +382,13 @@ export const ne: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -382,10 +382,13 @@ export const pt_BR: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -378,10 +378,13 @@ export const ru: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -385,10 +385,13 @@ export const te: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -372,10 +372,13 @@ export const tr: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -377,10 +377,13 @@ export const uk: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -378,10 +378,13 @@ export const vi: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -374,10 +374,13 @@ export const zh_CN: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -373,10 +373,13 @@ export const zh_TW: LanguageTranslation = {
},
// TODO: Translate
import_dbml_dialog: {
example_title: 'Import Example DBML',
title: 'Import DBML',
description: 'Import a database schema from DBML format.',
import: 'Import',
cancel: 'Cancel',
skip_and_empty: 'Skip & Empty',
show_example: 'Show Example',
error: {
title: 'Error',
description: 'Failed to parse DBML. Please check the syntax.',

View File

@@ -12,6 +12,9 @@ export const sqliteDataTypes: readonly DataType[] = [
// Blob Type
{ name: 'blob', id: 'blob' },
// Blob Type
{ name: 'json', id: 'json' },
// Date/Time Types (SQLite uses TEXT, REAL, or INTEGER types for dates and times)
{ name: 'date', id: 'date' },
{ name: 'datetime', id: 'datetime' },

View File

@@ -85,7 +85,7 @@ export const sqliteQuery = `WITH fk_info AS (
ELSE LOWER(p.type)
END,
'ordinal_position', p.cid,
'nullable', (CASE WHEN p."notnull" = 0 THEN 'true' ELSE 'false' END),
'nullable', (CASE WHEN p."notnull" = 0 THEN true ELSE false END),
'collation', '',
'character_maximum_length',
CASE