feat: basic translations to ui

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>