From c0c340699a5bd40bd26b8c10091a9c0a72360b62 Mon Sep 17 00:00:00 2001 From: Guy Ben-Aharon Date: Thu, 29 Aug 2024 15:08:23 +0300 Subject: [PATCH] add database editions --- package-lock.json | 27 ++++ package.json | 1 + src/components/alert-dialog/alert-dialog.tsx | 2 +- src/components/avatar/avatar.tsx | 48 +++++++ .../chartdb-context/chartdb-context.tsx | 3 + .../chartdb-context/chartdb-provider.tsx | 25 ++++ .../storage-context/storage-provider.tsx | 11 ++ .../create-diagram-dialog.tsx | 124 ++++++++++++++++-- .../scripts/postgres-script.ts | 44 ++++--- .../data/import-metadata/scripts/scripts.ts | 20 +-- src/lib/domain/database-edition.ts | 31 +++++ src/lib/domain/diagram.ts | 5 + .../editor-page/top-navbar/top-navbar.tsx | 27 ++++ 13 files changed, 333 insertions(+), 35 deletions(-) create mode 100644 src/components/avatar/avatar.tsx create mode 100644 src/lib/domain/database-edition.ts diff --git a/package-lock.json b/package-lock.json index a8b5abd0..eadb8a19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@ai-sdk/openai": "^0.0.51", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", @@ -1457,6 +1458,32 @@ } } }, + "node_modules/@radix-ui/react-avatar": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz", + "integrity": "sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-checkbox": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz", diff --git a/package.json b/package.json index 5d1671c8..5a4481b5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@ai-sdk/openai": "^0.0.51", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", diff --git a/src/components/alert-dialog/alert-dialog.tsx b/src/components/alert-dialog/alert-dialog.tsx index 2bb872c6..3d0b3156 100644 --- a/src/components/alert-dialog/alert-dialog.tsx +++ b/src/components/alert-dialog/alert-dialog.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; import { cn } from '@/lib/utils'; diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx new file mode 100644 index 00000000..c2434e03 --- /dev/null +++ b/src/components/avatar/avatar.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; + +import { cn } from '@/lib/utils'; + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/context/chartdb-context/chartdb-context.tsx b/src/context/chartdb-context/chartdb-context.tsx index 77c0987e..81292a18 100644 --- a/src/context/chartdb-context/chartdb-context.tsx +++ b/src/context/chartdb-context/chartdb-context.tsx @@ -6,6 +6,7 @@ import { DBField } from '@/lib/domain/db-field'; import { DBIndex } from '@/lib/domain/db-index'; import { DBRelationship } from '@/lib/domain/db-relationship'; import { Diagram } from '@/lib/domain/diagram'; +import { DatabaseEdition } from '@/lib/domain/database-edition'; export interface ChartDBContext { diagramId: string; @@ -28,6 +29,7 @@ export interface ChartDBContext { // Database type operations updateDatabaseType: (databaseType: DatabaseType) => Promise; + updateDatabaseEdition: (databaseEdition?: DatabaseEdition) => Promise; // Table operations createTable: () => Promise; @@ -145,6 +147,7 @@ export const chartDBContext = createContext({ // Database type operations updateDatabaseType: emptyFn, + updateDatabaseEdition: emptyFn, // Table operations createTable: emptyFn, diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx index 4c2dc5d6..2b0a29af 100644 --- a/src/context/chartdb-context/chartdb-provider.tsx +++ b/src/context/chartdb-context/chartdb-provider.tsx @@ -12,6 +12,7 @@ import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack'; import { Diagram } from '@/lib/domain/diagram'; import { useNavigate } from 'react-router-dom'; import { useConfig } from '@/hooks/use-config'; +import { DatabaseEdition } from '@/lib/domain/database-edition'; export const ChartDBProvider: React.FC = ({ children, @@ -28,6 +29,9 @@ export const ChartDBProvider: React.FC = ({ const [databaseType, setDatabaseType] = useState( DatabaseType.GENERIC ); + const [databaseEdition, setDatabaseEdition] = useState< + DatabaseEdition | undefined + >(); const [tables, setTables] = useState([]); const [relationships, setRelationships] = useState([]); @@ -38,6 +42,7 @@ export const ChartDBProvider: React.FC = ({ createdAt: diagramCreatedAt, updatedAt: diagramUpdatedAt, databaseType, + databaseEdition, tables, relationships, }), @@ -45,6 +50,7 @@ export const ChartDBProvider: React.FC = ({ diagramId, diagramName, databaseType, + databaseEdition, tables, relationships, diagramCreatedAt, @@ -74,6 +80,7 @@ export const ChartDBProvider: React.FC = ({ setDiagramId(''); setDiagramName(''); setDatabaseType(DatabaseType.GENERIC); + setDatabaseEdition(undefined); setTables([]); setRelationships([]); resetRedoStack(); @@ -130,6 +137,21 @@ export const ChartDBProvider: React.FC = ({ }, [db, diagramId, setDatabaseType] ); + + const updateDatabaseEdition: ChartDBContext['updateDatabaseEdition'] = + useCallback( + async (databaseEdition) => { + setDatabaseEdition(databaseEdition); + await db.updateDiagram({ + id: diagramId, + attributes: { + databaseEdition, + }, + }); + }, + [db, diagramId, setDatabaseEdition] + ); + const updateDiagramId: ChartDBContext['updateDiagramId'] = useCallback( async (id) => { const prevId = diagramId; @@ -957,6 +979,7 @@ export const ChartDBProvider: React.FC = ({ setDiagramId(diagram.id); setDiagramName(diagram.name); setDatabaseType(diagram.databaseType); + setDatabaseEdition(diagram.databaseEdition); setTables(diagram?.tables ?? []); setRelationships(diagram?.relationships ?? []); setDiagramCreatedAt(diagram.createdAt); @@ -970,6 +993,7 @@ export const ChartDBProvider: React.FC = ({ setDiagramId, setDiagramName, setDatabaseType, + setDatabaseEdition, setTables, setRelationships, setDiagramCreatedAt, @@ -990,6 +1014,7 @@ export const ChartDBProvider: React.FC = ({ updateDiagramName, loadDiagram, updateDatabaseType, + updateDatabaseEdition, clearDiagramData, deleteDiagram, updateDiagramUpdatedAt, diff --git a/src/context/storage-context/storage-provider.tsx b/src/context/storage-context/storage-provider.tsx index f33193b0..161cf3c9 100644 --- a/src/context/storage-context/storage-provider.tsx +++ b/src/context/storage-context/storage-provider.tsx @@ -54,6 +54,16 @@ export const StorageProvider: React.FC = ({ }) ); + db.version(3).stores({ + diagrams: + '++id, name, databaseType, databaseEdition, createdAt, updatedAt', + db_tables: + '++id, diagramId, name, x, y, fields, indexes, color, createdAt, width', + db_relationships: + '++id, diagramId, name, sourceTableId, targetTableId, sourceFieldId, targetFieldId, type, createdAt', + config: '++id, defaultDiagramId', + }); + db.on('ready', async () => { const config = await getConfig(); @@ -88,6 +98,7 @@ export const StorageProvider: React.FC = ({ id: diagram.id, name: diagram.name, databaseType: diagram.databaseType, + databaseEdition: diagram.databaseEdition, createdAt: diagram.createdAt, updatedAt: diagram.updatedAt, }) diff --git a/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx b/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx index 9a97466e..a2c161bd 100644 --- a/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx +++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { Button } from '@/components/button/button'; import { Dialog, @@ -12,7 +12,7 @@ import { import { DialogProps } from '@radix-ui/react-dialog'; import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group'; import { DatabaseType } from '@/lib/domain/database-type'; -import { databaseLogoMap } from '@/lib/databases'; +import { databaseLogoMap, databaseSecondaryLogoMap } from '@/lib/databases'; import { CodeSnippet } from '@/components/code-snippet/code-snippet'; import { Textarea } from '@/components/textarea/textarea'; import { useStorage } from '@/hooks/use-storage'; @@ -30,6 +30,17 @@ import { useDialog } from '@/hooks/use-dialog'; import { importMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts'; import { Link } from '@/components/link/link'; import { LayoutGrid } from 'lucide-react'; +import { + DatabaseEdition, + databaseEditionToImageMap, + databaseEditionToLabelMap, + databaseTypeToEditionMap, +} from '@/lib/domain/database-edition'; +import { + Avatar, + AvatarFallback, + AvatarImage, +} from '@/components/avatar/avatar'; enum CreateDiagramDialogStep { SELECT_DATABASE = 'SELECT_DATABASE', @@ -47,18 +58,21 @@ export const CreateDiagramDialog: React.FC = ({ dialog, }) => { const { diagramId } = useChartDB(); - const [databaseType, setDatabaseType] = React.useState( + const [databaseType, setDatabaseType] = useState( DatabaseType.GENERIC ); const { closeCreateDiagramDialog } = useDialog(); const { updateConfig } = useConfig(); - const [scriptResult, setScriptResult] = React.useState(''); - const [errorMessage, setErrorMessage] = React.useState(''); - const [step, setStep] = React.useState( + const [scriptResult, setScriptResult] = useState(''); + const [errorMessage, setErrorMessage] = useState(''); + const [databaseEdition, setDatabaseEdition] = useState< + DatabaseEdition | undefined + >(); + const [step, setStep] = useState( CreateDiagramDialogStep.SELECT_DATABASE ); const { listDiagrams, addDiagram } = useStorage(); - const [diagramNumber, setDiagramNumber] = React.useState(1); + const [diagramNumber, setDiagramNumber] = useState(1); const navigate = useNavigate(); useEffect(() => { @@ -72,6 +86,7 @@ export const CreateDiagramDialog: React.FC = ({ useEffect(() => { setStep(CreateDiagramDialogStep.SELECT_DATABASE); setDatabaseType(DatabaseType.GENERIC); + setDatabaseEdition(undefined); setScriptResult(''); setErrorMessage(''); }, [dialog.open]); @@ -107,6 +122,10 @@ export const CreateDiagramDialog: React.FC = ({ id: generateId(), name: `Diagram ${diagramNumber}`, databaseType: databaseType ?? DatabaseType.GENERIC, + databaseEdition: + databaseEdition?.trim().length === 0 + ? undefined + : databaseEdition, createdAt: new Date(), updatedAt: new Date(), }; @@ -119,6 +138,10 @@ export const CreateDiagramDialog: React.FC = ({ databaseType, databaseMetadata, diagramNumber, + databaseEdition: + databaseEdition?.trim().length === 0 + ? undefined + : databaseEdition, }); } @@ -129,6 +152,7 @@ export const CreateDiagramDialog: React.FC = ({ }, [ databaseType, addDiagram, + databaseEdition, closeCreateDiagramDialog, navigate, updateConfig, @@ -226,13 +250,96 @@ export const CreateDiagramDialog: React.FC = ({ case CreateDiagramDialogStep.IMPORT_DATABASE: return (
+ {databaseTypeToEditionMap[databaseType].length > 0 ? ( +
+

+ Database edition: +

+ { + setDatabaseEdition( + value === 'regular' + ? undefined + : (value as DatabaseEdition) + ); + }} + > + + + + + Regular + + + Regular + + {databaseTypeToEditionMap[databaseType].map( + (edition) => ( + + + + + { + databaseEditionToLabelMap[ + edition + ] + } + + + { + databaseEditionToLabelMap[ + edition + ] + } + + ) + )} + +
+ ) : null}

1. Run this script in your database:

@@ -258,6 +365,7 @@ export const CreateDiagramDialog: React.FC = ({ } }, [ errorMessage, + databaseEdition, step, databaseType, scriptResult, diff --git a/src/lib/data/import-metadata/scripts/postgres-script.ts b/src/lib/data/import-metadata/scripts/postgres-script.ts index c8b0edc2..40c5305c 100644 --- a/src/lib/data/import-metadata/scripts/postgres-script.ts +++ b/src/lib/data/import-metadata/scripts/postgres-script.ts @@ -1,7 +1,15 @@ -// Define the database options type -type DatabaseOption = 'regular' | 'supabase' | 'timescale'; +import { + DatabaseEdition, + databaseEditionToLabelMap, +} from '@/lib/domain/database-edition'; -export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { +export const getPostgresQuery = ( + options: { + databaseEdition?: DatabaseEdition; + } = {} +): string => { + const databaseEdition: DatabaseEdition | undefined = + options.databaseEdition; // Define additional filters based on the database option const supabaseFilters = ` AND connamespace::regnamespace::text NOT IN ('auth', 'extensions', 'pgsodium', 'realtime', 'storage', 'vault') @@ -37,8 +45,8 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { `; // Define the base query - const query = ` - WITH fk_info AS ( + const query = `${`/* ${databaseEdition ? databaseEditionToLabelMap[databaseEdition] : 'PostgreSQL'} edition */`} + WITH fk_info${databaseEdition ? '_' + databaseEdition : ''} AS ( SELECT array_to_string(array_agg(CONCAT('{"schema":"', schema_name, '"', ',"table":"', replace(table_name::text, '"', ''), '"', ',"column":"', replace(fk_column::text, '"', ''), '"', @@ -60,9 +68,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { WHERE contype = 'f' AND connamespace::regnamespace::text NOT IN ('information_schema', 'pg_catalog')${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleFilters - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseFilters : '' } @@ -87,9 +95,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { WHERE contype = 'p' AND connamespace::regnamespace::text NOT IN ('information_schema', 'pg_catalog')${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleFilters - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseFilters : '' } @@ -138,9 +146,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { ',"collation":"', COALESCE(cols.COLLATION_NAME, ''), '"}')), ',') AS cols_metadata FROM information_schema.columns cols WHERE cols.table_schema NOT IN ('information_schema', 'pg_catalog')${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleTableFilter - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseTableFilter : '' } @@ -157,9 +165,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { ',"direction":"', LOWER(direction), '"}')), ',') AS indexes_metadata FROM indexes_cols x ${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleIndexesFilter - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseIndexesFilter : '' } @@ -172,9 +180,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { ',') AS tbls_metadata FROM information_schema.tables tbls WHERE tbls.TABLE_SCHEMA NOT IN ('information_schema', 'pg_catalog') ${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleTableFilter - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseTableFilter : '' } @@ -188,9 +196,9 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { ',') AS views_metadata FROM pg_views views WHERE views.schemaname NOT IN ('information_schema', 'pg_catalog') ${ - databaseOption === 'timescale' + databaseEdition === DatabaseEdition.TIMESCALE ? timescaleViewsFilter - : databaseOption === 'supabase' + : databaseEdition === DatabaseEdition.SUPABASE ? supabaseViewsFilter : '' } @@ -203,7 +211,7 @@ export const getPostgresQuery = (databaseOption?: DatabaseOption): string => { '], "views":[', COALESCE(views_metadata, ''), '], "database_name": "', CURRENT_DATABASE(), '', '", "version": "', '', '"}') AS " " - FROM fk_info, pk_info, cols, indexes_metadata, tbls, config, views; + FROM fk_info${databaseEdition ? '_' + databaseEdition : ''}, pk_info, cols, indexes_metadata, tbls, config, views; `; return query; diff --git a/src/lib/data/import-metadata/scripts/scripts.ts b/src/lib/data/import-metadata/scripts/scripts.ts index 5140dd1d..b5326646 100644 --- a/src/lib/data/import-metadata/scripts/scripts.ts +++ b/src/lib/data/import-metadata/scripts/scripts.ts @@ -1,15 +1,19 @@ import { DatabaseType } from '@/lib/domain/database-type'; -import { postgresQuery } from './postgres-script'; +import { getPostgresQuery } from './postgres-script'; import { mySQLQuery } from './mysql-script'; import { sqliteQuery } from './sqlite-script'; import { sqlServerQuery } from './sqlserver-script'; import { mariaDBQuery } from './maria-script'; +import { DatabaseEdition } from '@/lib/domain/database-edition'; -export const importMetadataScripts: Record = { - [DatabaseType.GENERIC]: '', - [DatabaseType.POSTGRESQL]: postgresQuery, - [DatabaseType.MYSQL]: mySQLQuery, - [DatabaseType.SQLITE]: sqliteQuery, - [DatabaseType.SQL_SERVER]: sqlServerQuery, - [DatabaseType.MARIADB]: mariaDBQuery, +export const importMetadataScripts: Record< + DatabaseType, + (options?: { databaseEdition?: DatabaseEdition }) => string +> = { + [DatabaseType.GENERIC]: () => '', + [DatabaseType.POSTGRESQL]: getPostgresQuery, + [DatabaseType.MYSQL]: () => mySQLQuery, + [DatabaseType.SQLITE]: () => sqliteQuery, + [DatabaseType.SQL_SERVER]: () => sqlServerQuery, + [DatabaseType.MARIADB]: () => mariaDBQuery, }; diff --git a/src/lib/domain/database-edition.ts b/src/lib/domain/database-edition.ts new file mode 100644 index 00000000..dda9b893 --- /dev/null +++ b/src/lib/domain/database-edition.ts @@ -0,0 +1,31 @@ +import { DatabaseType } from './database-type'; +import SupabaseImage from '@/assets/supabase.png'; +import TimescaleImage from '@/assets/timescale.png'; + +export enum DatabaseEdition { + SUPABASE = 'supabase', + TIMESCALE = 'timescale', +} + +export const databaseEditionToLabelMap: Record = { + [DatabaseEdition.SUPABASE]: 'Supabase', + [DatabaseEdition.TIMESCALE]: 'Timescale', +}; + +export const databaseEditionToImageMap: Record = { + [DatabaseEdition.SUPABASE]: SupabaseImage, + [DatabaseEdition.TIMESCALE]: TimescaleImage, +}; + +export const databaseTypeToEditionMap: Record = + { + [DatabaseType.POSTGRESQL]: [ + DatabaseEdition.SUPABASE, + DatabaseEdition.TIMESCALE, + ], + [DatabaseType.MYSQL]: [], + [DatabaseType.SQLITE]: [], + [DatabaseType.GENERIC]: [], + [DatabaseType.SQL_SERVER]: [], + [DatabaseType.MARIADB]: [], + }; diff --git a/src/lib/domain/diagram.ts b/src/lib/domain/diagram.ts index 75d0088f..d508d780 100644 --- a/src/lib/domain/diagram.ts +++ b/src/lib/domain/diagram.ts @@ -1,4 +1,5 @@ import { DatabaseMetadata } from '../data/import-metadata/metadata-types/database-metadata'; +import { DatabaseEdition } from './database-edition'; import { DatabaseType } from './database-type'; import { DBRelationship, @@ -14,6 +15,7 @@ export interface Diagram { id: string; name: string; databaseType: DatabaseType; + databaseEdition?: DatabaseEdition; tables?: DBTable[]; relationships?: DBRelationship[]; createdAt: Date; @@ -24,10 +26,12 @@ export const loadFromDatabaseMetadata = ({ databaseType, databaseMetadata, diagramNumber, + databaseEdition, }: { databaseType: DatabaseType; databaseMetadata: DatabaseMetadata; diagramNumber: number; + databaseEdition?: DatabaseEdition; }): Diagram => { const { tables: tableInfos, @@ -71,6 +75,7 @@ export const loadFromDatabaseMetadata = ({ `${databaseMetadata.database_name}-db` || `Diagram ${diagramNumber}`, databaseType: databaseType ?? DatabaseType.GENERIC, + databaseEdition, tables: sortedTables, relationships, createdAt: new Date(), diff --git a/src/pages/editor-page/top-navbar/top-navbar.tsx b/src/pages/editor-page/top-navbar/top-navbar.tsx index 0517535b..34bcedb9 100644 --- a/src/pages/editor-page/top-navbar/top-navbar.tsx +++ b/src/pages/editor-page/top-navbar/top-navbar.tsx @@ -35,6 +35,10 @@ import { DatabaseType } from '@/lib/domain/database-type'; import { useConfig } from '@/hooks/use-config'; import { IS_CHARTDB_IO } from '@/lib/env'; import { useBreakpoint } from '@/hooks/use-breakpoint'; +import { + databaseEditionToImageMap, + databaseEditionToLabelMap, +} from '@/lib/domain/database-edition'; export interface TopNavbarProps {} @@ -200,6 +204,28 @@ export const TopNavbar: React.FC = () => { const renderDiagramName = useCallback(() => { return ( <> + {currentDiagram.databaseEdition ? ( + + + database + + + { + databaseEditionToLabelMap[ + currentDiagram.databaseEdition + ] + } + + + ) : null} = () => { ); }, [ currentDiagram.databaseType, + currentDiagram.databaseEdition, diagramName, editDiagramName, editMode,