feat: basic translations to ui

packages/web/index.html.tpl

@@ -115,7 +115,6 @@
           <div></div>
           <div></div>
         </div>
-        <div>Loading DbGate App</div>
       </div>
     </div>
   </body>

packages/web/src/App.svelte

@@ -22,6 +22,7 @@
   import SettingsListener from './utility/SettingsListener.svelte';
   import { handleAuthOnStartup } from './clientAuth';
   import { initializeAppUpdates } from './utility/appUpdate';
+  import { _t } from './translations';
 
   export let isAdminPage = false;
 
@@ -95,10 +96,13 @@
   {:else}
     <AppStartInfo
       message={$loadingPluginStore.loadingPackageName
-        ? `Loading plugin ${$loadingPluginStore.loadingPackageName} ...`
+        ? _t('app.loading_plugin', {
-        : 'Preparing plugins ...'}
+            defaultMessage: `Loading plugin {plugin} ...`,
+            values: { plugin: $loadingPluginStore.loadingPackageName },
+          })
+        : _t('app.preparing_pluguns', { defaultMessage: 'Preparing plugins ...' })}
     />
   {/if}
 {:else}
-  <AppStartInfo message="Starting DbGate" />
+  <AppStartInfo message={_t('app.starting', { defaultMessage: 'Starting DbGate' })} />
 {/if}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -137,6 +137,7 @@
   import hasPermission from '../utility/hasPermission';
   import { switchCurrentDatabase } from '../utility/common';
   import { getConnectionClickActionSetting } from '../settings/settingsTools';
+  import { _t } from '../translations';
 
   export let data;
   export let passProps;
@@ -324,7 +325,7 @@
         hasPermission(`dbops/query`) && { onClick: handleNewQuery, text: 'New Query (server)', isNewQuery: true },
         $openedConnections.includes(data._id) &&
           data.status && {
-            text: 'Refresh',
+            text: _t('common.refresh', { defaultMessage: 'Refresh' }),
             onClick: handleRefresh,
           },
         hasPermission(`dbops/createdb`) &&

packages/web/src/datagrid/DataGridCore.svelte

@@ -4,7 +4,7 @@
   registerCommand({
     id: 'dataGrid.refresh',
     category: 'Data grid',
-    name: 'Refresh',
+    name: _t('common.refresh', { defaultMessage: 'Refresh' }),
     keyText: 'F5 | CtrlOrCommand+R',
     toolbar: true,
     isRelatedToTab: true,
@@ -28,7 +28,7 @@
   registerCommand({
     id: 'dataGrid.revertRowChanges',
     category: 'Data grid',
-    name: 'Revert row changes',
+    name: _t('command.data_grid.revert_row_changes', { defaultMessage: 'Revert row changes' }),
     keyText: 'CtrlOrCommand+U',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.containsChanges,
     onClick: () => getCurrentDataGrid().revertRowChanges(),
@@ -37,8 +37,8 @@
   registerCommand({
     id: 'dataGrid.revertAllChanges',
     category: 'Data grid',
-    name: 'Revert all changes',
+    name: _t('command.data_grid.revert_all_changes.name', { defaultMessage: 'Revert all changes' }),
-    toolbarName: 'Revert all',
+    toolbarName: _t('command.data_grid.revert_all_changes.toolbar_name', { defaultMessage: 'Revert all' }),
     icon: 'icon undo',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.containsChanges,
     onClick: () => getCurrentDataGrid().revertAllChanges(),
@@ -47,8 +47,8 @@
   registerCommand({
     id: 'dataGrid.deleteSelectedRows',
     category: 'Data grid',
-    name: 'Delete selected rows',
+    name: _t('command.datagrid.delete_selected_rows.name', { defaultMessage: 'Delete selected rows' }),
-    toolbarName: 'Delete row(s)',
+    toolbarName: _t('command.datagrid.delete_selected_rows.toolbar_name', { defaultMessage: 'Delete row(s)' }),
     keyText: isMac() ? 'Command+Backspace' : 'CtrlOrCommand+Delete',
     icon: 'icon minus',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
@@ -58,8 +58,8 @@
   registerCommand({
     id: 'dataGrid.insertNewRow',
     category: 'Data grid',
-    name: 'Insert new row',
+    name: _t('command.datagrid.insert_new_row.name', { defaultMessage: 'Insert new row' }),
-    toolbarName: 'New row',
+    toolbarName: _t('command.datagrid.insert_new_row.toolbar_name', { defaultMessage: 'New row' }),
     icon: 'icon add',
     keyText: isMac() ? 'Command+I' : 'Insert',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
@@ -69,8 +69,8 @@
   registerCommand({
     id: 'dataGrid.addNewColumn',
     category: 'Data grid',
-    name: 'Add new column',
+    name: _t('command.datagrid.add_new_column.name', { defaultMessage: 'Add new column' }),
-    toolbarName: 'New column',
+    toolbarName: _t('command.datagrid.add_new_column.toolbar_name', { defaultMessage: 'New column' }),
     icon: 'icon add-column',
     testEnabled: () => getCurrentDataGrid()?.addNewColumnEnabled(),
     onClick: () => getCurrentDataGrid().addNewColumn(),
@@ -79,8 +79,8 @@
   registerCommand({
     id: 'dataGrid.cloneRows',
     category: 'Data grid',
-    name: 'Clone rows',
+    name: _t('command.datagrid.clone_rows.name', { defaultMessage: 'Clone rows' }),
-    toolbarName: 'Clone row(s)',
+    toolbarName: _t('command.datagrid.clone_rows.toolbar_name', { defaultMessage: 'Clone row(s)' }),
     keyText: 'CtrlOrCommand+Shift+C',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
     onClick: () => getCurrentDataGrid().cloneRows(),
@@ -89,7 +89,7 @@
   registerCommand({
     id: 'dataGrid.setNull',
     category: 'Data grid',
-    name: 'Set NULL',
+    name: _t('command.datagrid.set_null.name', { defaultMessage: 'Set NULL' }),
     keyText: 'CtrlOrCommand+0',
     testEnabled: () =>
       getCurrentDataGrid()?.getGrider()?.editable && !getCurrentDataGrid()?.getEditorTypes()?.supportFieldRemoval,
@@ -99,7 +99,7 @@
   registerCommand({
     id: 'dataGrid.removeField',
     category: 'Data grid',
-    name: 'Remove field',
+    name: _t('command.datagrid.remove_field.name', { defaultMessage: 'Remove field' }),
     keyText: 'CtrlOrCommand+0',
     testEnabled: () =>
       getCurrentDataGrid()?.getGrider()?.editable && getCurrentDataGrid()?.getEditorTypes()?.supportFieldRemoval,
@@ -109,7 +109,7 @@
   registerCommand({
     id: 'dataGrid.undo',
     category: 'Data grid',
-    name: 'Undo',
+    name: _t('command.datagrid.undo.name', { defaultMessage: 'Undo' }),
     group: 'undo',
     icon: 'icon undo',
     toolbar: true,
@@ -121,7 +121,7 @@
   registerCommand({
     id: 'dataGrid.redo',
     category: 'Data grid',
-    name: 'Redo',
+    name: _t('command.datagrid.redo.name', { defaultMessage: 'Redo' }),
     group: 'redo',
     icon: 'icon redo',
     toolbar: true,
@@ -133,7 +133,7 @@
   registerCommand({
     id: 'dataGrid.reconnect',
     category: 'Data grid',
-    name: 'Reconnect',
+    name: _t('command.datagrid.reconnect.name', { defaultMessage: 'Reconnect' }),
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().reconnect(),
   });
@@ -141,7 +141,7 @@
   registerCommand({
     id: 'dataGrid.copyToClipboard',
     category: 'Data grid',
-    name: 'Copy to clipboard',
+    name: _t('command.datagrid.copy_to_clipboard.name', { defaultMessage: 'Copy to clipboard' }),
     keyText: 'CtrlOrCommand+C',
     disableHandleKeyText: 'CtrlOrCommand+C',
     testEnabled: () => getCurrentDataGrid() != null,
@@ -152,7 +152,7 @@
     id: 'dataGrid.editJsonDocument',
     category: 'Data grid',
     keyText: 'CtrlOrCommand+J',
-    name: 'Edit row as JSON document',
+    name: _t('command.datagrid.edit_json_document.name', { defaultMessage: 'Edit row as JSON document' }),
     testEnabled: () => getCurrentDataGrid()?.editJsonEnabled(),
     onClick: () => getCurrentDataGrid().editJsonDocument(),
   });
@@ -160,15 +160,15 @@
   registerCommand({
     id: 'dataGrid.openSelectionInMap',
     category: 'Data grid',
-    name: 'Open selection in map',
+    name: _t('command.datagrid.open_selection_in_map.name', { defaultMessage: 'Open selection in map' }),
-    testEnabled: () => getCurrentDataGrid() != null, // ?.openSelectionInMapEnabled(),
+    testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().openSelectionInMap(),
   });
 
   registerCommand({
     id: 'dataGrid.viewJsonDocument',
     category: 'Data grid',
-    name: 'View row as JSON document',
+    name: _t('command.datagrid.view_json_document.name', { defaultMessage: 'View row as JSON document' }),
     testEnabled: () => getCurrentDataGrid()?.viewJsonDocumentEnabled(),
     onClick: () => getCurrentDataGrid().viewJsonDocument(),
   });
@@ -176,7 +176,7 @@
   registerCommand({
     id: 'dataGrid.viewJsonValue',
     category: 'Data grid',
-    name: 'View cell as JSON document',
+    name: _t('command.datagrid.view_json_value.name', { defaultMessage: 'View cell as JSON document' }),
     testEnabled: () => getCurrentDataGrid()?.viewJsonValueEnabled(),
     onClick: () => getCurrentDataGrid().viewJsonValue(),
   });
@@ -184,7 +184,7 @@
   registerCommand({
     id: 'dataGrid.openJsonArrayInSheet',
     category: 'Data grid',
-    name: 'Open array as table',
+    name: _t('command.datagrid.open_json_array_in_sheet.name', { defaultMessage: 'Open array as table' }),
     testEnabled: () => getCurrentDataGrid()?.openJsonArrayInSheetEnabled(),
     onClick: () => getCurrentDataGrid().openJsonArrayInSheet(),
   });
@@ -192,7 +192,7 @@
   registerCommand({
     id: 'dataGrid.saveCellToFile',
     category: 'Data grid',
-    name: 'Save cell to file',
+    name: _t('command.datagrid.save_cell_to_file.name', { defaultMessage: 'Save cell to file' }),
     testEnabled: () => getCurrentDataGrid()?.saveCellToFileEnabled(),
     onClick: () => getCurrentDataGrid().saveCellToFile(),
   });
@@ -200,7 +200,7 @@
   registerCommand({
     id: 'dataGrid.loadCellFromFile',
     category: 'Data grid',
-    name: 'Load cell from file',
+    name: _t('command.datagrid.load_cell_from_file.name', { defaultMessage: 'Load cell from file' }),
     testEnabled: () => getCurrentDataGrid()?.loadCellFromFileEnabled(),
     onClick: () => getCurrentDataGrid().loadCellFromFile(),
   });
@@ -212,7 +212,8 @@
   //   testEnabled: () => getCurrentDataGrid()?.copyJsonEnabled(),
   //   onClick: () => getCurrentDataGrid().copyJsonDocument(),
   // });
-
+  //
+  //
   registerCommand({
     id: 'dataGrid.filterSelected',
     category: 'Data grid',
@@ -221,7 +222,6 @@
     testEnabled: () => getCurrentDataGrid()?.getDisplay().filterable,
     onClick: () => getCurrentDataGrid().filterSelectedValue(),
   });
-
   registerCommand({
     id: 'dataGrid.findColumn',
     category: 'Data grid',
@@ -230,7 +230,6 @@
     testEnabled: () => getCurrentDataGrid() != null,
     getSubCommands: () => getCurrentDataGrid().buildFindMenu(),
   });
-
   registerCommand({
     id: 'dataGrid.hideColumn',
     category: 'Data grid',
@@ -239,7 +238,6 @@
     testEnabled: () => getCurrentDataGrid()?.canShowLeftPanel(),
     onClick: () => getCurrentDataGrid().hideColumn(),
   });
-
   registerCommand({
     id: 'dataGrid.clearFilter',
     category: 'Data grid',
@@ -248,7 +246,6 @@
     testEnabled: () => getCurrentDataGrid()?.clearFilterEnabled(),
     onClick: () => getCurrentDataGrid().clearFilter(),
   });
-
   registerCommand({
     id: 'dataGrid.generateSqlFromData',
     category: 'Data grid',
@@ -257,7 +254,6 @@
     testEnabled: () => getCurrentDataGrid()?.generateSqlFromDataEnabled(),
     onClick: () => getCurrentDataGrid().generateSqlFromData(),
   });
-
   registerCommand({
     id: 'dataGrid.openFreeTable',
     category: 'Data grid',
@@ -265,7 +261,6 @@
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().openFreeTable(),
   });
-
   registerCommand({
     id: 'dataGrid.openChartFromSelection',
     category: 'Data grid',
@@ -273,7 +268,6 @@
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().openChartFromSelection(),
   });
-
   registerCommand({
     id: 'dataGrid.newJson',
     category: 'Data grid',
@@ -281,7 +275,6 @@
     testEnabled: () => getCurrentDataGrid()?.addJsonDocumentEnabled(),
     onClick: () => getCurrentDataGrid().addJsonDocument(),
   });
-
   registerCommand({
     id: 'dataGrid.editCellValue',
     category: 'Data grid',
@@ -289,7 +282,6 @@
     testEnabled: () => getCurrentDataGrid()?.editCellValueEnabled(),
     onClick: () => getCurrentDataGrid().editCellValue(),
   });
-
   registerCommand({
     id: 'dataGrid.mergeSelectedCellsIntoMirror',
     category: 'Data grid',
@@ -297,7 +289,6 @@
     testEnabled: () => getCurrentDataGrid()?.mirrorWriteEnabled(true),
     onClick: () => getCurrentDataGrid().mergeSelectionIntoMirror({ mergeMode: 'merge', fullRows: false }),
   });
-
   registerCommand({
     id: 'dataGrid.mergeSelectedRowsIntoMirror',
     category: 'Data grid',
@@ -305,7 +296,6 @@
     testEnabled: () => getCurrentDataGrid()?.mirrorWriteEnabled(true),
     onClick: () => getCurrentDataGrid().mergeSelectionIntoMirror({ mergeMode: 'merge', fullRows: true }),
   });
-
   registerCommand({
     id: 'dataGrid.appendSelectedCellsIntoMirror',
     category: 'Data grid',
@@ -313,7 +303,6 @@
     testEnabled: () => getCurrentDataGrid()?.mirrorWriteEnabled(true),
     onClick: () => getCurrentDataGrid().mergeSelectionIntoMirror({ mergeMode: 'append', fullRows: false }),
   });
-
   registerCommand({
     id: 'dataGrid.appendSelectedRowsIntoMirror',
     category: 'Data grid',
@@ -321,7 +310,6 @@
     testEnabled: () => getCurrentDataGrid()?.mirrorWriteEnabled(true),
     onClick: () => getCurrentDataGrid().mergeSelectionIntoMirror({ mergeMode: 'append', fullRows: true }),
   });
-
   registerCommand({
     id: 'dataGrid.replaceSelectedCellsIntoMirror',
     category: 'Data grid',
@@ -329,7 +317,6 @@
     testEnabled: () => getCurrentDataGrid()?.mirrorWriteEnabled(true),
     onClick: () => getCurrentDataGrid().mergeSelectionIntoMirror({ mergeMode: 'replace', fullRows: false }),
   });
-
   registerCommand({
     id: 'dataGrid.replaceSelectedRowsIntoMirror',
     category: 'Data grid',
@@ -430,6 +417,7 @@
   import { openJsonLinesData } from '../utility/openJsonLinesData';
   import contextMenuActivator from '../utility/contextMenuActivator';
   import InputTextModal from '../modals/InputTextModal.svelte';
+  import { _t } from '../translations';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;

packages/web/src/elements/ObjectFieldsEditor.svelte

@@ -7,6 +7,7 @@
   import FormTextField from '../forms/FormTextField.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
   import stableStringify from 'json-stable-stringify';
+  import { _t } from '../translations';
 
   export let title;
   export let fieldDefinitions;
@@ -42,7 +43,7 @@
         <FormSelectField
           isNative
           name="schemaName"
-          label="Schema"
+          label={_t('common.schema', { defaultMessage: 'Schema' })}
           options={schemaList.map(x => ({ label: x.schemaName, value: x.schemaName }))}
         />
       {/if}

packages/web/src/formview/FormView.svelte

@@ -15,7 +15,7 @@
   registerCommand({
     id: 'dataForm.refresh',
     category: 'Data form',
-    name: 'Refresh',
+    name: _t('common.refresh', { defaultMessage: 'Refresh' }),
     keyText: 'F5 | CtrlOrCommand+R',
     toolbar: true,
     isRelatedToTab: true,
@@ -197,6 +197,7 @@
   import resizeObserver from '../utility/resizeObserver';
   import openReferenceForm from './openReferenceForm';
   import { useSettings } from '../utility/metadataLoaders';
+  import { _t } from '../translations';
 
   export let conid;
   export let database;

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -22,6 +22,7 @@
   import FormTablesSelect from './FormTablesSelect.svelte';
   import { findEngineDriver } from 'dbgate-tools';
   import AceEditor from '../query/AceEditor.svelte';
+  import { _t } from '../translations';
 
   export let direction;
   export let storageTypeField;
@@ -40,14 +41,22 @@
     $values[storageTypeField] == 'jsldata'
       ? [{ value: 'jsldata', label: 'Query result data', directions: ['source'] }]
       : [
-          { value: 'database', label: 'Database', directions: ['source', 'target'] },
+          {
+            value: 'database',
+            label: _t('common.database', { defaultMessage: 'Database' }),
+            directions: ['source', 'target'],
+          },
           ...$extensions.fileFormats.map(format => ({
             value: format.storageType,
             label: `${format.name} files(s)`,
             directions: getFileFormatDirections(format),
           })),
-          { value: 'query', label: 'Query', directions: ['source'] },
+          { value: 'query', label: _t('common.query', { defaultMessage: 'Query' }), directions: ['source'] },
-          { value: 'archive', label: 'Archive', directions: ['source', 'target'] },
+          {
+            value: 'archive',
+            label: _t('common.archive', { defaultMessage: 'Archive' }),
+            directions: ['source', 'target'],
+          },
         ];
 
   $: storageType = $values[storageTypeField];
@@ -124,7 +133,7 @@
       conidName={connectionIdField}
       databaseName={databaseNameField}
       name={schemaNameField}
-      label="Schema"
+      label={_t('common.schema', { defaultMessage: 'Schema' })}
     />
     {#if tablesField}
       <FormTablesSelect
@@ -132,12 +141,12 @@
         schemaName={schemaNameField}
         databaseName={databaseNameField}
         name={tablesField}
-        label="Tables / views / collections"
+        label={_t('source.tables_views_collections', { defaultMessage: 'Tables / views / collections' })}
       />
     {/if}
   {/if}
   {#if storageType == 'query'}
-    <div class="label">Query</div>
+    <div class="label">{_t('common.query', { defaultMessage: 'Query' })}</div>
     <div class="sqlwrap">
       {#if $values.sourceQueryType == 'json'}
         <AceEditor value={$values.sourceQuery} on:input={e => setFieldValue('sourceQuery', e.detail)} mode="json" />
@@ -156,7 +165,11 @@
   {/if}
 
   {#if storageType == 'archive' && direction == 'source'}
-    <FormArchiveFilesSelect label="Source files" folderName={$values[archiveFolderField]} name={tablesField} />
+    <FormArchiveFilesSelect
+      label={_t('source.source_files', { defaultMessage: 'Source files' })}
+      folderName={$values[archiveFolderField]}
+      name={tablesField}
+    />
   {/if}
 
   {#if format && direction == 'source'}

packages/web/src/modals/EditJsonModal.svelte

@@ -9,6 +9,7 @@
 
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal, showModal } from './modalTools';
+  import { _t } from '../translations';
 
   export let onSave;
   export let json;
@@ -43,7 +44,7 @@
 
     <div slot="footer">
       <FormStyledButton
-        value="Save"
+        value={_t('common.save', { defaultMessage: 'Save' })}
         data-testid="EditJsonModal_saveButton"
         on:click={() => {
           try {

packages/web/src/modals/SaveArchiveModal.svelte

@@ -6,6 +6,7 @@
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import { currentArchive } from '../stores';
+  import { _t } from '../translations';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
@@ -28,7 +29,7 @@
     <FormTextField label="File name" name="file" />
 
     <svelte:fragment slot="footer">
-      <FormSubmit value="Save" on:click={handleSubmit} />
+      <FormSubmit value={_t('common.save', { defaultMessage: 'Save' })} on:click={handleSubmit} />
     </svelte:fragment>
   </ModalBase>
 </FormProvider>

packages/web/src/modals/SaveFileModal.svelte

@@ -4,6 +4,7 @@
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import { _t } from '../translations';
   import { apiCall } from '../utility/api';
 
   import getElectron from '../utility/getElectron';
@@ -56,7 +57,7 @@
     <svelte:fragment slot="header">Save file</svelte:fragment>
     <FormTextField label="File name" name="name" focused />
     <svelte:fragment slot="footer">
-      <FormSubmit value="Save" on:click={handleSubmit} />
+      <FormSubmit value={_t('common.save', { defaultMessage: 'Save' })} on:click={handleSubmit} />
       {#if electron}
         <FormStyledButton
           type="button"

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -11,6 +11,7 @@
   import { closeCurrentModal } from '../modals/modalTools';
   import DataTypeEditor from './DataTypeEditor.svelte';
   import { editorAddColumn, editorDeleteColumn, editorModifyColumn, fillEditorColumnInfo } from 'dbgate-tools';
+  import { _t } from '../translations';
 
   export let columnInfo;
   export let setTableInfo = null;
@@ -75,7 +76,7 @@
       {#if !columnInfo}
         <FormButton
           type="button"
-          value="Save"
+          value={_t('common.save', { defaultMessage: 'Save' })}
           disabled={isReadOnly}
           on:click={e => {
             closeCurrentModal();

packages/web/src/tableeditor/ForeignKeyEditorModal.svelte

@@ -17,6 +17,7 @@
   import TextField from '../forms/TextField.svelte';
   import SelectField from '../forms/SelectField.svelte';
   import _ from 'lodash';
+  import { _t } from '../translations';
 
   export let constraintInfo;
   export let setTableInfo;
@@ -204,7 +205,7 @@
 
     <svelte:fragment slot="footer">
       <FormSubmit
-        value="Save"
+        value={_t('common.save', { defaultMessage: 'Save' })}
         disabled={isReadOnly}
         on:click={() => {
           closeCurrentModal();

packages/web/src/tabpanel/TabsPanel.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+  import { _t } from '../translations';
+
   const getCurrentValueMarker: any = {};
 
   export function shouldShowTab(tab, lockedDbModeArg = getCurrentValueMarker, currentDbArg = getCurrentValueMarker) {
@@ -184,8 +186,8 @@
   };
 
   function getTabDbName(tab, connectionList) {
-    if (tab.tabComponent == 'ConnectionTab') return 'Connections';
+    if (tab.tabComponent == 'ConnectionTab') return _t('common.connections', { defaultMessage: 'Connections' });
-    if (tab.tabComponent?.startsWith('Admin')) return 'Administration';
+    if (tab.tabComponent?.startsWith('Admin')) return _t('tab.administration', { defaultMessage: 'Administration' });
     if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
     if (tab.props && tab.props.conid) {
       const connection = connectionList?.find(x => x._id == tab.props.conid);
@@ -232,7 +234,7 @@
   registerCommand({
     id: 'tabs.nextTab',
     category: 'Tabs',
-    name: 'Next tab',
+    name: _t('command.tabs.nextTab', { defaultMessage: 'Next tab' }),
     keyText: 'Ctrl+Tab',
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 2,
     onClick: () => switchTabByOrder(false),
@@ -241,7 +243,7 @@
   registerCommand({
     id: 'tabs.previousTab',
     category: 'Tabs',
-    name: 'Previous tab',
+    name: _t('command.tabs.previousTab', { defaultMessage: 'Previous tab' }),
     keyText: 'Ctrl+Shift+Tab',
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 2,
     onClick: () => switchTabByOrder(true),
@@ -250,7 +252,7 @@
   registerCommand({
     id: 'tabs.closeAll',
     category: 'Tabs',
-    name: 'Close all tabs',
+    name: _t('command.tabs.closeAll', { defaultMessage: 'Close all tabs' }),
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1,
     onClick: closeAll,
   });
@@ -258,7 +260,7 @@
   registerCommand({
     id: 'tabs.closeTab',
     category: 'Tabs',
-    name: 'Close tab',
+    name: _t('command.tabs.closeTab', { defaultMessage: 'Close tab' }),
     keyText: isElectronAvailable() ? 'CtrlOrCommand+W' : 'CtrlOrCommand+Shift+W',
     testEnabled: () => {
       const hasAnyOtherTab = getOpenedTabs().filter(x => !x.closedTime).length >= 1;
@@ -272,7 +274,7 @@
   registerCommand({
     id: 'tabs.closeTabsWithCurrentDb',
     category: 'Tabs',
-    name: 'Close tabs with current DB',
+    name: _t('command.tabs.closeTabsWithCurrentDb', { defaultMessage: 'Close tabs with current DB' }),
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1 && !!getCurrentDatabase(),
     onClick: closeTabsWithCurrentDb,
   });
@@ -280,7 +282,7 @@
   registerCommand({
     id: 'tabs.closeTabsButCurrentDb',
     category: 'Tabs',
-    name: 'Close tabs but current DB',
+    name: _t('command.tabs.closeTabsButCurrentDb', { defaultMessage: 'Close tabs but current DB' }),
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1 && !!getCurrentDatabase(),
     onClick: closeTabsButCurrentDb,
   });
@@ -288,7 +290,7 @@
   registerCommand({
     id: 'tabs.reopenClosedTab',
     category: 'Tabs',
-    name: 'Reopen closed tab',
+    name: _t('command.tabs.reopenClosedTab', { defaultMessage: 'Reopen closed tab' }),
     keyText: 'CtrlOrCommand+Shift+T',
     testEnabled: () => getOpenedTabs().filter(x => x.closedTime).length >= 1,
     onClick: reopenClosedTab,
@@ -297,7 +299,7 @@
   registerCommand({
     id: 'tabs.addToFavorites',
     category: 'Tabs',
-    name: 'Add current tab to favorites',
+    name: _t('command.tabs.addToFavorites', { defaultMessage: 'Add current tab to favorites' }),
     // icon: 'icon favorite',
     // toolbar: true,
     testEnabled: () =>

packages/web/src/tabs/ConnectionTab.svelte

@@ -35,6 +35,7 @@
   import { useConfig } from '../utility/metadataLoaders';
   import ConnectionAdvancedDriverFields from '../settings/ConnectionAdvancedDriverFields.svelte';
   import DatabaseLoginModal from '../modals/DatabaseLoginModal.svelte';
+  import { _t } from '../translations';
 
   export let connection;
   export let tabid;
@@ -289,7 +290,11 @@
             {:else}
               <FormButton value="Test" on:click={() => handleTest(false)} data-testid="ConnectionTab_buttonTest" />
             {/if}
-            <FormButton value="Save" on:click={handleSave} data-testid="ConnectionTab_buttonSave" />
+            <FormButton
+              value={_t('common.save', { defaultMessage: 'Save' })}
+              on:click={handleSave}
+              data-testid="ConnectionTab_buttonSave"
+            />
           {/if}
         </div>
         <div class="test-result">

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -35,6 +35,7 @@
   import { changeTab } from '../utility/common';
   import SelectField from '../forms/SelectField.svelte';
   import DbKeyValueDetail from '../dbkeyvalue/DbKeyValueDetail.svelte';
+  import { _t } from '../translations';
 
   export let tabid;
   export let conid;
@@ -134,12 +135,16 @@
       </div>
       <FormStyledButton value={`TTL:${keyInfo.ttl}`} on:click={() => handleChangeTtl(keyInfo)} />
       {#if keyInfo.type == 'string'}
-        <FormStyledButton value="Save" on:click={saveString} disabled={!editedValue} />
+        <FormStyledButton
+          value={_t('common.save', { defaultMessage: 'Save' })}
+          on:click={saveString}
+          disabled={!editedValue}
+        />
       {/if}
       {#if keyInfo.keyType?.addMethod && keyInfo.keyType?.showItemList}
         <FormStyledButton value="Add item" on:click={() => addItem(keyInfo)} />
       {/if}
-      <FormStyledButton value="Refresh" on:click={refresh} />
+      <FormStyledButton value={_t('common.refresh', { defaultMessage: 'Refresh' })} on:click={refresh} />
     </div>
 
     <div class="content">

packages/web/src/tabs/ServerSummaryTab.svelte

@@ -4,7 +4,7 @@
   registerCommand({
     id: 'serverSummary.refresh',
     category: 'Server sumnmary',
-    name: 'Refresh',
+    name: _t('common.refresh', { defaultMessage: 'Refresh' }),
     keyText: 'F5 | CtrlOrCommand+R',
     toolbar: true,
     isRelatedToTab: true,
@@ -22,6 +22,7 @@
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import ObjectListControl from '../elements/ObjectListControl.svelte';
+  import { _t } from '../translations';
   import { apiCall } from '../utility/api';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import formatFileSize from '../utility/formatFileSize';

packages/web/src/widgets/DatabaseWidget.svelte

@@ -15,6 +15,7 @@
   import SingleConnectionDatabaseList from './SingleConnectionDatabaseList.svelte';
   import _ from 'lodash';
   import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
+  import { _t } from '../translations';
 
   export let hidden = false;
   let domSqlObjectList = null;
@@ -29,16 +30,26 @@
 
 <WidgetColumnBar {hidden}>
   {#if $config?.singleConnection}
-    <WidgetColumnBarItem title="Databases" name="databases" height="35%" storageName="databasesWidget">
+    <WidgetColumnBarItem
+      title={_t('widget.databases', { defaultMessage: 'Databases' })}
+      name="databases"
+      height="35%"
+      storageName="databasesWidget"
+    >
       <SingleConnectionDatabaseList connection={$config?.singleConnection} />
     </WidgetColumnBarItem>
   {:else if !$config?.singleDbConnection}
-    <WidgetColumnBarItem title="Connections" name="connections" height="35%" storageName="connectionsWidget">
+    <WidgetColumnBarItem
+      title={_t('common.connections', { defaultMessage: 'Connections' })}
+      name="connections"
+      height="35%"
+      storageName="connectionsWidget"
+    >
       <ConnectionList passProps={{ onFocusSqlObjectList: () => domSqlObjectList.focus() }} />
     </WidgetColumnBarItem>
   {/if}
   <WidgetColumnBarItem
-    title="Pinned"
+    title={_t('widget.pinned', { defaultMessage: 'Pinned' })}
     name="pinned"
     height="15%"
     storageName="pinnedItemsWidget"
@@ -51,7 +62,7 @@
   <WidgetColumnBarItem
     title={driver?.databaseEngineTypes?.includes('document')
       ? (driver?.collectionPluralLabel ?? 'Collections/containers')
-      : 'Tables, views, functions'}
+      : _t('widget.tables_views_functions', { defaultMessage: 'Tables, views, functions' })}
     name="dbObjects"
     storageName="dbObjectsWidget"
     skip={!(
@@ -64,7 +75,7 @@
   </WidgetColumnBarItem>
 
   <WidgetColumnBarItem
-    title={'Keys'}
+    title={_t('widget.keys', { defaultMessage: 'Keys' })}
     name="dbObjects"
     storageName="dbObjectsWidget"
     skip={!(conid && (database || singleDatabase) && driver?.databaseEngineTypes?.includes('keyvalue'))}
@@ -73,7 +84,7 @@
   </WidgetColumnBarItem>
 
   <WidgetColumnBarItem
-    title="Database content"
+    title={_t('widget.database_content', { defaultMessage: 'Database content' })}
     name="dbObjects"
     storageName="dbObjectsWidget"
     skip={conid && (database || singleDatabase)}
@@ -86,7 +97,7 @@
   </WidgetColumnBarItem>
 
   <WidgetColumnBarItem
-    title="Database content"
+    title={_t('widget.database_content', { defaultMessage: 'Database content' })}
     name="dbObjects"
     storageName="dbObjectsWidget"
     skip={!(conid && (database || singleDatabase) && !driver)}
@@ -94,7 +105,9 @@
     <WidgetsInnerContainer>
       <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
 
-      <ErrorInfo message="Invalid database connection, driver not found" />
+      <ErrorInfo
+        message={_t('error.driver_not_found', { defaultMessage: 'Invalid database connection, driver not found' })}
+      />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/FilesWidget.svelte

@@ -11,6 +11,7 @@
 
   import hasPermission from '../utility/hasPermission';
   import { useFavorites } from '../utility/metadataLoaders';
+  import { _t } from '../translations';
 
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 

packages/web/src/widgets/SchemaSelector.svelte

@@ -11,6 +11,7 @@
   import { appliedCurrentSchema, currentDatabase } from '../stores';
   import { switchCurrentDatabase } from '../utility/common';
   import { extractDbNameFromComposite, extractSchemaNameFromComposite, findDefaultSchema } from 'dbgate-tools';
+  import { _t } from '../translations';
 
   export let schemaList;
   export let objectList;
@@ -58,9 +59,9 @@
 
   function handleCreateSchema() {
     showModal(InputTextModal, {
-      header: 'Create schema',
+      header: _t('schema.create_schema', { defaultMessage: 'Create schema' }),
       value: 'newschema',
-      label: 'Schema name',
+      label: _t('schema.schema_name', { defaultMessage: 'Schema name' }),
       onConfirm: async name => {
         const dbid = { conid, database };
         await runOperationOnDatabase(
@@ -105,13 +106,19 @@
 
 {#if realSchemaList.length > 0}
   <div class="wrapper" class:negativeMarginTop>
-    <div class="mr-1">Schema:</div>
+    <div class="mr-1">{_t('common.schema', { defaultMessage: 'Schema' })}:</div>
     <SelectField
       isNative
       options={connection?.useSeparateSchemas
         ? (schemaList?.map(x => ({ label: x.schemaName, value: x.schemaName })) ?? [])
         : [
-            { label: `All schemas (${objectList?.length ?? 0})`, value: '' },
+            {
+              label: _t('schema.all_schemas', {
+                defaultMessage: 'All schemas ({count})',
+                values: { count: objectList?.length ?? 0 },
+              }),
+              value: '',
+            },
             ...realSchemaList.map(x => ({ label: `${x} (${countBySchema[x] ?? 0})`, value: x })),
           ]}
       value={selectedSchema ?? $appliedCurrentSchema ?? ''}
@@ -135,15 +142,20 @@
           selectedSchema = null;
           localStorage.removeItem(valueStorageKey);
         }}
-        title="Reset to default"
+        title={_t('schema.reset_to_default', { defaultMessage: 'Reset to default' })}
       >
         <FontIcon icon="icon close" />
       </InlineButton>
     {/if}
-    <InlineButton on:click={handleCreateSchema} title="Add new schema" square>
+    <InlineButton on:click={handleCreateSchema} title={_t('schema.add', { defaultMessage: 'Add new schema' })} square>
       <FontIcon icon="icon plus-thick" />
     </InlineButton>
-    <InlineButton on:click={handleDropSchema} title="Delete schema" square disabled={!$appliedCurrentSchema}>
+    <InlineButton
+      on:click={handleDropSchema}
+      title={_t('schema.delete', { defaultMessage: 'Delete schema' })}
+      square
+      disabled={!$appliedCurrentSchema}
+    >
       <FontIcon icon="icon minus-thick" />
     </InlineButton>
   </div>

translations/cs-CZ.json

@@ -1,4 +1,58 @@
 {
-  "settings.localization": "Localizace"
+  "settings.localization": "Localizace",
-}
+  "common.save": "*** Save",
-
+  "common.refresh": "*** Refresh",
+  "command.data_grid.revert_row_changes": "*** Revert row changes",
+  "command.data_grid.revert_all_changes.name": "*** Revert all changes",
+  "command.data_grid.revert_all_changes.toolbar_name": "*** Revert all",
+  "command.datagrid.delete_selected_rows.name": "*** Delete selected rows",
+  "command.datagrid.delete_selected_rows.toolbar_name": "*** Delete row(s)",
+  "command.datagrid.insert_new_row.name": "*** Insert new row",
+  "command.datagrid.insert_new_row.toolbar_name": "*** New row",
+  "command.datagrid.add_new_column.name": "*** Add new column",
+  "command.datagrid.add_new_column.toolbar_name": "*** New column",
+  "command.datagrid.clone_rows.name": "*** Clone rows",
+  "command.datagrid.clone_rows.toolbar_name": "*** Clone row(s)",
+  "command.datagrid.set_null.name": "*** Set NULL",
+  "command.datagrid.remove_field.name": "*** Remove field",
+  "command.datagrid.undo.name": "*** Undo",
+  "command.datagrid.redo.name": "*** Redo",
+  "command.datagrid.reconnect.name": "*** Reconnect",
+  "command.datagrid.copy_to_clipboard.name": "*** Copy to clipboard",
+  "command.datagrid.edit_json_document.name": "*** Edit row as JSON document",
+  "command.datagrid.open_selection_in_map.name": "*** Open selection in map",
+  "command.datagrid.view_json_document.name": "*** View row as JSON document",
+  "command.datagrid.view_json_value.name": "*** View cell as JSON document",
+  "command.datagrid.open_json_array_in_sheet.name": "*** Open array as table",
+  "command.datagrid.save_cell_to_file.name": "*** Save cell to file",
+  "command.datagrid.load_cell_from_file.name": "*** Load cell from file",
+  "common.connections": "*** Connections",
+  "tab.administration": "*** Administration",
+  "command.tabs.nextTab": "*** Next tab",
+  "command.tabs.previousTab": "*** Previous tab",
+  "command.tabs.closeAll": "*** Close all tabs",
+  "command.tabs.closeTab": "*** Close tab",
+  "command.tabs.closeTabsWithCurrentDb": "*** Close tabs with current DB",
+  "command.tabs.closeTabsButCurrentDb": "*** Close tabs but current DB",
+  "command.tabs.reopenClosedTab": "*** Reopen closed tab",
+  "command.tabs.addToFavorites": "*** Add current tab to favorites",
+  "widget.tables_views_functions": "*** Tables, views, functions",
+  "app.starting": "*** Starting DbGate",
+  "app.preparing_pluguns": "*** Preparing plugins ...",
+  "widget.databases": "*** Databases",
+  "common.schema": "*** Schema",
+  "source.tables_views_collections": "*** Tables / views / collections",
+  "common.query": "*** Query",
+  "source.source_files": "*** Source files",
+  "common.database": "*** Database",
+  "common.archive": "*** Archive",
+  "schema.add": "*** Add new schema",
+  "schema.delete": "*** Delete schema",
+  "schema.reset_to_default": "*** Reset to default",
+  "schema.create_schema": "*** Create schema",
+  "schema.schema_name": "*** Schema name",
+  "widget.pinned": "*** Pinned",
+  "widget.keys": "*** Keys",
+  "widget.database_content": "*** Database content",
+  "error.driver_not_found": "*** Invalid database connection, driver not found"
+}

translations/en-US.json

@@ -1,3 +1,58 @@
 {
-  "settings.localization": "Localization"
+  "settings.localization": "Localization",
+  "common.save": "Save",
+  "common.refresh": "Refresh",
+  "command.data_grid.revert_row_changes": "Revert row changes",
+  "command.data_grid.revert_all_changes.name": "Revert all changes",
+  "command.data_grid.revert_all_changes.toolbar_name": "Revert all",
+  "command.datagrid.delete_selected_rows.name": "Delete selected rows",
+  "command.datagrid.delete_selected_rows.toolbar_name": "Delete row(s)",
+  "command.datagrid.insert_new_row.name": "Insert new row",
+  "command.datagrid.insert_new_row.toolbar_name": "New row",
+  "command.datagrid.add_new_column.name": "Add new column",
+  "command.datagrid.add_new_column.toolbar_name": "New column",
+  "command.datagrid.clone_rows.name": "Clone rows",
+  "command.datagrid.clone_rows.toolbar_name": "Clone row(s)",
+  "command.datagrid.set_null.name": "Set NULL",
+  "command.datagrid.remove_field.name": "Remove field",
+  "command.datagrid.undo.name": "Undo",
+  "command.datagrid.redo.name": "Redo",
+  "command.datagrid.reconnect.name": "Reconnect",
+  "command.datagrid.copy_to_clipboard.name": "Copy to clipboard",
+  "command.datagrid.edit_json_document.name": "Edit row as JSON document",
+  "command.datagrid.open_selection_in_map.name": "Open selection in map",
+  "command.datagrid.view_json_document.name": "View row as JSON document",
+  "command.datagrid.view_json_value.name": "View cell as JSON document",
+  "command.datagrid.open_json_array_in_sheet.name": "Open array as table",
+  "command.datagrid.save_cell_to_file.name": "Save cell to file",
+  "command.datagrid.load_cell_from_file.name": "Load cell from file",
+  "common.connections": "Connections",
+  "tab.administration": "Administration",
+  "command.tabs.nextTab": "Next tab",
+  "command.tabs.previousTab": "Previous tab",
+  "command.tabs.closeAll": "Close all tabs",
+  "command.tabs.closeTab": "Close tab",
+  "command.tabs.closeTabsWithCurrentDb": "Close tabs with current DB",
+  "command.tabs.closeTabsButCurrentDb": "Close tabs but current DB",
+  "command.tabs.reopenClosedTab": "Reopen closed tab",
+  "command.tabs.addToFavorites": "Add current tab to favorites",
+  "widget.tables_views_functions": "Tables, views, functions",
+  "widget.databases": "Databases",
+  "app.starting": "Starting DbGate",
+  "app.preparing_pluguns": "Preparing plugins ...",
+  "common.schema": "Schema",
+  "source.tables_views_collections": "Tables / views / collections",
+  "common.query": "Query",
+  "source.source_files": "Source files",
+  "common.database": "Database",
+  "common.archive": "Archive",
+  "schema.add": "Add new schema",
+  "schema.delete": "Delete schema",
+  "schema.reset_to_default": "Reset to default",
+  "schema.create_schema": "Create schema",
+  "schema.schema_name": "Schema name",
+  "widget.pinned": "Pinned",
+  "widget.keys": "Keys",
+  "widget.database_content": "Database content",
+  "error.driver_not_found": "Invalid database connection, driver not found"
 }