Skip to content

Commit cf3a109

Browse files
guyb1guyb1
committed
add en translations
1 parent 89e0cdd commit cf3a109

File tree

22 files changed

+575
-138
lines changed

22 files changed

+575
-138
lines changed

‎package-lock.json

Lines changed: 65 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,14 @@
4242
"dexie": "^4.0.8",
4343
"eslint-config-airbnb-typescript": "^18.0.0",
4444
"html-to-image": "^1.11.11",
45+
"i18next": "^23.14.0",
4546
"lucide-react": "^0.424.0",
4647
"nanoid": "^5.0.7",
4748
"react": "^18.3.1",
4849
"react-code-blocks": "^0.1.6",
4950
"react-dom": "^18.3.1",
5051
"react-hotkeys-hook": "^4.5.0",
52+
"react-i18next": "^15.0.1",
5153
"react-resizable-panels": "^2.0.22",
5254
"react-responsive": "^10.0.0",
5355
"react-router-dom": "^6.26.0",

‎src/context/storage-context/storage-provider.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,11 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
6868
const config = await getConfig();
6969

7070
if (!config) {
71+
const diagrams = await db.diagrams.toArray();
72+
7173
await db.config.add({
7274
id: 1,
73-
defaultDiagramId: '',
75+
defaultDiagramId: diagrams?.[0]?.id ?? '',
7476
});
7577
}
7678
});

‎src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/create-diagram-dialog-import-database.tsx

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from '@/components/avatar/avatar';
2626
import { CreateDiagramDialogStep } from '../create-diagram-dialog-step';
2727
import { SSMSInfo } from './ssms-info/ssms-info';
28+
import { useTranslation } from 'react-i18next';
2829

2930
export interface CreateDiagramDialogImportDatabaseProps {
3031
setStep: React.Dispatch<React.SetStateAction<CreateDiagramDialogStep>>;
@@ -51,6 +52,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
5152
setDatabaseEdition,
5253
errorMessage,
5354
}) => {
55+
const { t } = useTranslation();
5456
const handleInputChange = useCallback(
5557
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
5658
const inputValue = e.target.value;
@@ -62,18 +64,22 @@ export const CreateDiagramDialogImportDatabase: React.FC<
6264
const renderHeader = useCallback(() => {
6365
return (
6466
<DialogHeader>
65-
<DialogTitle>Import your Database</DialogTitle>
67+
<DialogTitle>
68+
{t('new_diagram_dialog.import_database.title')}
69+
</DialogTitle>
6670
</DialogHeader>
6771
);
68-
}, []);
72+
}, [t]);
6973

7074
const renderContent = useCallback(() => {
7175
return (
7276
<div className="flex w-full flex-1 flex-col gap-6">
7377
{databaseTypeToEditionMap[databaseType].length > 0 ? (
7478
<div className="flex flex-col gap-1 md:flex-row">
7579
<p className="text-sm leading-6 text-muted-foreground">
76-
Database edition:
80+
{t(
81+
'new_diagram_dialog.import_database.database_edition'
82+
)}
7783
</p>
7884
<ToggleGroup
7985
type="single"
@@ -145,7 +151,9 @@ export const CreateDiagramDialogImportDatabase: React.FC<
145151
) : null}
146152
<div className="flex flex-col gap-1">
147153
<div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
148-
<div>1. Run this script in your database:</div>
154+
<div>
155+
1. {t('new_diagram_dialog.import_database.step_1')}
156+
</div>
149157
{databaseType === DatabaseType.SQL_SERVER && (
150158
<SSMSInfo />
151159
)}
@@ -159,11 +167,13 @@ export const CreateDiagramDialogImportDatabase: React.FC<
159167
</div>
160168
<div className="flex h-48 flex-col gap-1">
161169
<p className="text-sm text-muted-foreground">
162-
2. Paste the script result here:
170+
2. {t('new_diagram_dialog.import_database.step_2')}
163171
</p>
164172
<Textarea
165173
className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
166-
placeholder="Script result here..."
174+
placeholder={t(
175+
'new_diagram_dialog.import_database.script_results_placeholder'
176+
)}
167177
value={scriptResult}
168178
onChange={handleInputChange}
169179
/>
@@ -182,6 +192,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
182192
handleInputChange,
183193
scriptResult,
184194
setDatabaseEdition,
195+
t,
185196
]);
186197

187198
const renderFooter = useCallback(() => {
@@ -195,7 +206,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
195206
setStep(CreateDiagramDialogStep.SELECT_DATABASE)
196207
}
197208
>
198-
Back
209+
{t('new_diagram_dialog.back')}
199210
</Button>
200211
</div>
201212
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2">
@@ -205,7 +216,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
205216
variant="outline"
206217
onClick={createNewDiagram}
207218
>
208-
Empty diagram
219+
{t('new_diagram_dialog.empty_diagram')}
209220
</Button>
210221
</DialogClose>
211222
<DialogClose asChild>
@@ -218,13 +229,13 @@ export const CreateDiagramDialogImportDatabase: React.FC<
218229
}
219230
onClick={createNewDiagram}
220231
>
221-
Import
232+
{t('new_diagram_dialog.import')}
222233
</Button>
223234
</DialogClose>
224235
</div>
225236
</DialogFooter>
226237
);
227-
}, [createNewDiagram, errorMessage.length, scriptResult, setStep]);
238+
}, [createNewDiagram, errorMessage.length, scriptResult, setStep, t]);
228239

229240
return (
230241
<>

‎src/dialogs/create-diagram-dialog/create-diagram-dialog-import-database/ssms-info/ssms-info.tsx

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Info } from 'lucide-react';
88
import React from 'react';
99
import SSMSInstructions from '@/assets/ssms-instructions.png';
1010
import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
11+
import { useTranslation } from 'react-i18next';
1112

1213
export interface SSMSInfoProps {}
1314

@@ -16,6 +17,7 @@ export const SSMSInfo = React.forwardRef<
1617
SSMSInfoProps
1718
>((props, ref) => {
1819
const [open, setOpen] = React.useState(false);
20+
const { t } = useTranslation();
1921
return (
2022
<HoverCard
2123
open={open}
@@ -31,22 +33,32 @@ export const SSMSInfo = React.forwardRef<
3133
}}
3234
>
3335
<Info size={14} />
34-
<Label className="text-xs">SSMS Instructions</Label>
36+
<Label className="text-xs">
37+
{t(
38+
'new_diagram_dialog.import_database.ssms_instructions.button_text'
39+
)}
40+
</Label>
3541
</div>
3642
</HoverCardTrigger>
3743
<HoverCardContent className="w-80">
3844
<div className="flex">
3945
<div className="space-y-1">
40-
<h4 className="text-sm font-semibold">Instructions</h4>
46+
<h4 className="text-sm font-semibold">
47+
{t(
48+
'new_diagram_dialog.import_database.ssms_instructions.title'
49+
)}
50+
</h4>
4151
<p className="text-xs text-muted-foreground">
4252
<span className="font-semibold">1. </span>
43-
{
44-
'Go to Tools > Options > Query Results > SQL Server.'
45-
}
53+
{t(
54+
'new_diagram_dialog.import_database.ssms_instructions.step_1'
55+
)}
4656
</p>
4757
<p className="text-xs text-muted-foreground">
4858
<span className="font-semibold">2. </span>
49-
{`If you're using "Results to Grid," change the Maximum Characters Retrieved for Non-XML data (set to 9999999).`}
59+
{t(
60+
'new_diagram_dialog.import_database.ssms_instructions.step_2'
61+
)}
5062
</p>
5163
<div className="flex items-center pt-2">
5264
<ZoomableImage src={SSMSInstructions} />

‎src/dialogs/create-diagram-dialog/create-diagram-dialog-select-database/create-diagram-dialog-select-database.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { databaseLogoMap } from '@/lib/databases';
1414
import { Link } from '@/components/link/link';
1515
import { LayoutGrid } from 'lucide-react';
1616
import { CreateDiagramDialogStep } from '../create-diagram-dialog-step';
17+
import { useTranslation } from 'react-i18next';
1718

1819
export interface CreateDiagramDialogSelectDatabaseProps {
1920
setStep: React.Dispatch<React.SetStateAction<CreateDiagramDialogStep>>;
@@ -32,6 +33,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
3233
hasExistingDiagram,
3334
createNewDiagram,
3435
}) => {
36+
const { t } = useTranslation();
3537
const renderDatabaseOption = useCallback((type: DatabaseType) => {
3638
const logo = databaseLogoMap[type];
3739
return (
@@ -54,28 +56,34 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
5456
</div>
5557
<div className="flex flex-col-reverse">
5658
<div className="hidden text-sm text-primary md:flex">
57-
Check Examples
59+
{t(
60+
'new_diagram_dialog.database_selection.check_examples_long'
61+
)}
5862
</div>
5963
<div className="flex text-xs text-primary md:hidden">
60-
Examples
64+
{t(
65+
'new_diagram_dialog.database_selection.check_examples_short'
66+
)}
6167
</div>
6268
</div>
6369
</div>
6470
</Link>
6571
),
66-
[]
72+
[t]
6773
);
6874

6975
const renderHeader = useCallback(() => {
7076
return (
7177
<DialogHeader>
72-
<DialogTitle>What is your Database?</DialogTitle>
78+
<DialogTitle>
79+
{t('new_diagram_dialog.database_selection.title')}
80+
</DialogTitle>
7381
<DialogDescription>
74-
Each database has its own unique features and capabilities.
82+
{t('new_diagram_dialog.database_selection.description')}
7583
</DialogDescription>
7684
</DialogHeader>
7785
);
78-
}, []);
86+
}, [t]);
7987

8088
const renderContent = useCallback(() => {
8189
return (
@@ -116,7 +124,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
116124
{hasExistingDiagram ? (
117125
<DialogClose asChild>
118126
<Button type="button" variant="secondary">
119-
Cancel
127+
{t('new_diagram_dialog.cancel')}
120128
</Button>
121129
</DialogClose>
122130
) : (
@@ -128,7 +136,7 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
128136
variant="outline"
129137
onClick={createNewDiagram}
130138
>
131-
Empty diagram
139+
{t('new_diagram_dialog.empty_diagram')}
132140
</Button>
133141
<Button
134142
type="button"
@@ -138,12 +146,12 @@ export const CreateDiagramDialogSelectDatabase: React.FC<
138146
setStep(CreateDiagramDialogStep.IMPORT_DATABASE)
139147
}
140148
>
141-
Continue
149+
{t('new_diagram_dialog.continue')}
142150
</Button>
143151
</div>
144152
</DialogFooter>
145153
);
146-
}, [createNewDiagram, databaseType, hasExistingDiagram, setStep]);
154+
}, [createNewDiagram, databaseType, hasExistingDiagram, setStep, t]);
147155

148156
return (
149157
<>

0 commit comments

Comments
 (0)