add import instructions (#267)

src/components/zoomable-image/zoomable-image.tsx

@@ -7,10 +7,6 @@ import {
     DialogTitle,
 } from '../dialog/dialog';
 
-// import Image from 'next/image'
-// import { Dialog, DialogContent, DialogTrigger } from './ui/dialog'
-// import { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
-
 export const ZoomableImage = React.forwardRef<
     React.ElementRef<typeof DialogTrigger>,
     React.DetailedHTMLProps<
@@ -22,7 +18,7 @@ export const ZoomableImage = React.forwardRef<
     return (
         <Dialog>
             <DialogTrigger asChild ref={ref}>
-                <img {...props} />
+                {props.children ? props.children : <img {...props} />}
             </DialogTrigger>
             <DialogContent className="max-w-4xl border-0 bg-transparent p-0">
                 <DialogTitle className="hidden" />

src/dialogs/common/import-database/import-database.tsx

@@ -33,6 +33,8 @@ import {
 } from '@/lib/domain/database-clients';
 import { isDatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
 import type { ImportMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts';
+import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
 
 const errorScriptOutputMessage =
     'Invalid JSON. Please correct it or contact us at chartdb.io@gmail.com for help.';
@@ -73,6 +75,8 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     const [importMetadataScripts, setImportMetadataScripts] =
         useState<ImportMetadataScripts | null>(null);
 
+    const { isSm: isDesktop } = useBreakpoint('sm');
+
     useEffect(() => {
         const loadScripts = async () => {
             const { importMetadataScripts } = await import(
@@ -315,6 +319,15 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                             {t('new_diagram_dialog.back')}
                         </Button>
                     )}
+                    {isDesktop ? (
+                        <ZoomableImage src="/load-new-db-instructions.gif">
+                            <Button type="button" variant="link">
+                                {t(
+                                    'new_diagram_dialog.import_database.instructions_link'
+                                )}
+                            </Button>
+                        </ZoomableImage>
+                    ) : null}
                 </div>
                 <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2">
                     {onCreateEmptyDiagram && (
@@ -356,11 +369,22 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                             </Button>
                         </DialogClose>
                     )}
+
+                    {!isDesktop ? (
+                        <ZoomableImage src="/load-new-db-instructions.gif">
+                            <Button type="button" variant="link">
+                                {t(
+                                    'new_diagram_dialog.import_database.instructions_link'
+                                )}
+                            </Button>
+                        </ZoomableImage>
+                    ) : null}
                 </div>
             </DialogFooter>
         );
     }, [
         handleImport,
+        isDesktop,
         keepDialogAfterImport,
         onCreateEmptyDiagram,
         errorMessage.length,

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -128,7 +128,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
             }}
         >
             <DialogContent
-                className="flex max-h-[90vh] w-[90vw] flex-col overflow-y-auto md:overflow-visible xl:min-w-[45vw]"
+                className="flex max-h-[90vh] w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
                 showClose={hasExistingDiagram}
             >
                 {step === CreateDiagramDialogStep.SELECT_DATABASE ? (

src/i18n/locales/de.ts

@@ -221,6 +221,8 @@ export const de: LanguageTranslation = {
                     step_1: 'Gehen Sie zu Tools > Optionen > Abfrageergebnisse > SQL Server.',
                     step_2: 'Wenn Sie "Ergebnisse in Raster" verwenden, ändern Sie die maximale Zeichenanzahl für Nicht-XML-Daten (auf 9999999 setzen).',
                 },
+                // TODO: Translate
+                instructions_link: 'Need help? Watch how',
             },
 
             cancel: 'Abbrechen',

src/i18n/locales/en.ts

@@ -217,6 +217,7 @@ export const en = {
                     step_1: 'Go to Tools > Options > Query Results > SQL Server.',
                     step_2: 'If you\'re using "Results to Grid," change the Maximum Characters Retrieved for Non-XML data (set to 9999999).',
                 },
+                instructions_link: 'Need help? Watch how',
             },
 
             cancel: 'Cancel',

src/i18n/locales/es.ts

@@ -211,6 +211,8 @@ export const es: LanguageTranslation = {
                     step_1: 'Ve a Herramientas > Opciones > Resultados de Consulta > SQL Server.',
                     step_2: 'Si estás usando "Resultados en Cuadrícula", cambia el Máximo de Caracteres Recuperados para Datos No XML (configúralo en 9999999).',
                 },
+                // TODO: Translate
+                instructions_link: 'Need help? Watch how',
             },
 
             cancel: 'Cancelar',

src/i18n/locales/fr.ts

@@ -211,6 +211,8 @@ export const fr: LanguageTranslation = {
                     step_1: 'Allez dans Outils > Options > Résultats des Requêtes > SQL Server.',
                     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).',
                 },
+                // TODO: Translate
+                instructions_link: 'Need help? Watch how',
             },
 
             cancel: 'Annuler',

src/i18n/locales/ja.ts

@@ -220,6 +220,8 @@ export const ja: LanguageTranslation = {
                     step_1: 'ツール > オプション > クエリ結果 > SQL Serverに移動します。',
                     step_2: '「グリッドへの結果」を使用している場合、XML以外のデータの最大取得文字数を変更してください（9999999に設定）。',
                 },
+                // TODO: Translate
+                instructions_link: 'Need help? Watch how',
             },
 
             cancel: 'キャンセル',