Translation - added translation tags for widgets

packages/web/src/buttons/InlineUploadButton.svelte

@@ -5,6 +5,7 @@
   import getElectron from '../utility/getElectron';
   import InlineButtonLabel from '../buttons/InlineButtonLabel.svelte';
   import resolveApi, { resolveApiHeaders } from '../utility/resolveApi';
+  import { _t } from '../translations';
 
   import uuidv1 from 'uuid/v1';
 
@@ -49,11 +50,11 @@
 </script>
 
 {#if electron}
-  <InlineButton on:click={handleOpenElectronFile} title="Open file" data-testid={$$props['data-testid']}>
+  <InlineButton on:click={handleOpenElectronFile} title={_t('files.openFile', { defaultMessage: "Open file" })} data-testid={$$props['data-testid']}>
     <FontIcon {icon} />
   </InlineButton>
 {:else}
-  <InlineButtonLabel on:click={() => {}} title="Upload file" data-testid={$$props['data-testid']} htmlFor={inputId}>
+  <InlineButtonLabel on:click={() => {}} title={_t('files.uploadFile', { defaultMessage: "Upload file" })} data-testid={$$props['data-testid']} htmlFor={inputId}>
     <FontIcon {icon} />
   </InlineButtonLabel>
 {/if}

packages/web/src/buttons/UploadButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import FormStyledButtonLikeLabel from '../buttons/FormStyledButtonLikeLabel.svelte';
   import uploadFiles from '../utility/uploadFiles';
+  import { _t } from '../translations';
 
   const handleChange = e => {
     const files = [...e.target.files];
@@ -9,6 +10,6 @@
 </script>
 
 <div class="m-1">
-  <FormStyledButtonLikeLabel htmlFor="uploadFileButton">Upload file</FormStyledButtonLikeLabel>
+  <FormStyledButtonLikeLabel htmlFor="uploadFileButton">{_t('files.uploadFile', { defaultMessage: "Upload file" })}</FormStyledButtonLikeLabel>
   <input type="file" id="uploadFileButton" hidden on:change={handleChange} />
 </div>

packages/web/src/designer/DesignerTable.svelte

@@ -17,6 +17,7 @@
   import moveDrag from '../utility/moveDrag';
   import ColumnLine from './ColumnLine.svelte';
   import DomTableRef from './DomTableRef';
+  import { _t } from '../translations';
 
   export let conid;
   export let database;
@@ -185,8 +186,8 @@
   const handleSetTableAlias = () => {
     showModal(InputTextModal, {
       value: alias || '',
-      label: 'New alias',
+      label: _t('designerTable.newAlias', { defaultMessage: 'New alias' }),
-      header: 'Set table alias',
+      header: _t('designerTable.setTableAlias', { defaultMessage: 'Set table alias' }),
       onConfirm: newAlias => {
         onChangeTable({
           ...table,
@@ -210,13 +211,13 @@
       return settings?.tableMenu({ designer, designerId, onRemoveTable });
     }
     return [
-      { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
+      { text: _t('common.remove', { defaultMessage: 'Remove' }), onClick: () => onRemoveTable({ designerId }) },
       { divider: true },
       settings?.allowTableAlias &&
         !isMultipleTableSelection && [
-          { text: 'Set table alias', onClick: handleSetTableAlias },
+          { text: _t('designerTable.setTableAlias', { defaultMessage: 'Set table alias' }), onClick: handleSetTableAlias },
           alias && {
-            text: 'Remove table alias',
+            text: _t('designerTable.removeTableAlias', { defaultMessage: 'Remove table alias' }),
             onClick: () =>
               onChangeTable({
                 ...table,
@@ -225,11 +226,11 @@
           },
         ],
       settings?.allowAddAllReferences &&
-        !isMultipleTableSelection && { text: 'Add references', onClick: () => onAddAllReferences(table) },
+        !isMultipleTableSelection && { text: _t('designerTable.addReferences', { defaultMessage: 'Add references' }), onClick: () => onAddAllReferences(table) },
-      settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) },
+      settings?.allowChangeColor && { text: _t('designerTable.changeColor', { defaultMessage: 'Change color' }), onClick: () => onChangeTableColor(table) },
       settings?.allowDefineVirtualReferences &&
         !isMultipleTableSelection && {
-          text: 'Define virtual foreign key',
+          text: _t('designerTable.defineVirtualForeignKey', { defaultMessage: 'Define virtual foreign key' }),
           onClick: () => handleDefineVirtualForeignKey(table),
         },
       settings?.appendTableSystemMenu &&

packages/web/src/plugins/AvailablePluginsList.svelte

@@ -8,6 +8,7 @@
   import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
   import PluginsList from './PluginsList.svelte';
   import { filterName } from 'dbgate-tools';
+  import { _t } from '../translations';
 
   let filter = '';
   // let search = '';
@@ -20,7 +21,7 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search extensions on web" {filter} bind:value={filter} />
+  <SearchInput placeholder={_t('plugins.searchExtensionsOnWeb', { defaultMessage: 'Search extensions on web' })} {filter} bind:value={filter} />
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   {#if $plugins?.errorMessage}

packages/web/src/widgets/CellDataWidget.svelte

@@ -101,6 +101,7 @@
   import WidgetTitle from './WidgetTitle.svelte';
   import JsonExpandedCellView from '../celldata/JsonExpandedCellView.svelte';
   import XmlCellView from '../celldata/XmlCellView.svelte';
+  import { _t } from '../translations';
 
   let selectedFormatType = 'autodetect';
 
@@ -116,7 +117,7 @@
 </script>
 
 <div class="wrapper">
-  <WidgetTitle>Cell data view</WidgetTitle>
+  <WidgetTitle>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
   <div class="main">
     <div class="toolbar">
       Format:<span>&nbsp;</span>
@@ -126,18 +127,18 @@
         on:change={e => (selectedFormatType = e.detail)}
         data-testid="CellDataWidget_selectFormat"
         options={[
-          { value: 'autodetect', label: `Autodetect - ${autodetectFormat.title}` },
+          { value: 'autodetect', label: _t('cellDataWidget.autodetect', { defaultMessage: "Autodetect - {autoDetectTitle}", values : { autoDetectTitle: autodetectFormat.title } }) },
           ...formats.map(fmt => ({ label: fmt.title, value: fmt.type })),
         ]}
       />
     </div>
     <div class="data">
       {#if usedFormat.single && selection?.length != 1}
-        <ErrorInfo message="Must be selected one cell" alignTop />
+        <ErrorInfo message={_t('cellDataWidget.mustSelectOneCell', { defaultMessage: "Must be selected one cell" })} alignTop />
       {:else if usedFormat == null}
-        <ErrorInfo message="Format not selected" alignTop />
+        <ErrorInfo message={_t('cellDataWidget.formatNotSelected', { defaultMessage: "Format not selected" })} alignTop />
       {:else if !selection || selection.length == 0}
-        <ErrorInfo message="No data selected" alignTop />
+        <ErrorInfo message={_t('cellDataWidget.noDataSelected', { defaultMessage: "No data selected" })} alignTop />
       {:else}
         <svelte:component this={usedFormat?.component} {selection} />
       {/if}

packages/web/src/widgets/FilesWidget.svelte

@@ -19,12 +19,12 @@
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Saved files" name="files" height="70%" storageName="savedFilesWidget">
+  <WidgetColumnBarItem title={_t('files.savedFiles', { defaultMessage: "Saved files" })} name="files" height="70%" storageName="savedFilesWidget">
     <SavedFilesList />
   </WidgetColumnBarItem>
 
   {#if hasPermission('files/favorites/read')}
-    <WidgetColumnBarItem title="Favorites" name="favorites" storageName="favoritesWidget">
+    <WidgetColumnBarItem title={_t('files.favorites', { defaultMessage: "Favorites" })} name="favorites" storageName="favoritesWidget">
       <WidgetsInnerContainer>
         <AppObjectList list={$favorites || []} module={favoriteFileAppObject} />
       </WidgetsInnerContainer>

packages/web/src/widgets/HistoryWidget.svelte

@@ -13,13 +13,14 @@
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import { _t } from '../translations';
 
   $: favorites = useFavorites();
 
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" storageName='closedTabsWidget'>
+  <WidgetColumnBarItem title={_t('history.recentlyClosedTabs', { defaultMessage: "Recently closed tabs" })} name="closedTabs" storageName='closedTabsWidget'>
     <WidgetsInnerContainer>
       <AppObjectList
         list={_.sortBy(
@@ -30,7 +31,7 @@
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Query history" name="queryHistory" storageName='queryHistoryWidget'>
+  <WidgetColumnBarItem title={_t('history.queryHistory', { defaultMessage: "Query history" })} name="queryHistory" storageName='queryHistoryWidget'>
     <QueryHistoryList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/PluginsWidget.svelte

@@ -4,13 +4,15 @@
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+
+  import { _t } from '../translations';
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Installed extensions" name="installed" height="50%" storageName='installedPluginsWidget'>
+  <WidgetColumnBarItem title={_t('widgets.installedExtensions', { defaultMessage: 'Installed extensions' })} name="installed" height="50%" storageName='installedPluginsWidget'>
     <InstalledPluginsList />
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Available extensions" name="all" storageName='allPluginsWidget'>
+  <WidgetColumnBarItem title={_t('widgets.availableExtensions', { defaultMessage: 'Available extensions' })} name="all" storageName='allPluginsWidget'>
     <AvailablePluginsList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/PublicCloudWidget.svelte

@@ -30,11 +30,11 @@
   <WidgetColumnBarItem title="Public Knowledge Base" name="publicCloud" storageName="publicCloudItems">
     <WidgetsInnerContainer>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search public files" bind:value={filter} />
+        <SearchInput placeholder={_t('publicCloudWidget.searchPublicFiles', { defaultMessage: "Search public files" })} bind:value={filter} />
         <CloseSearchButton bind:filter />
         <InlineButton
           on:click={handleRefreshPublic}
-          title="Refresh files"
+          title={_t('publicCloudWidget.refreshFiles', { defaultMessage: "Refresh files" })}
           data-testid="CloudItemsWidget_buttonRefreshPublic"
         >
           <FontIcon icon="icon refresh" />
@@ -52,9 +52,9 @@
         <ErrorInfo message="No files found for your configuration" />
         <div class="error-info">
           <div class="m-1">
-            Only files relevant for your connections, platform and DbGate edition are listed. Please define connections at first.
+            {_t('publicCloudWidget.onlyRelevantFilesListed', { defaultMessage: "Only files relevant for your connections, platform and DbGate edition are listed. Please define connections at first." })}
           </div>
-          <FormStyledButton value={`Refresh list`} skipWidth on:click={handleRefreshPublic} />
+          <FormStyledButton value={_t('publicCloudWidget.refreshList', { defaultMessage: "Refresh list" })} skipWidth on:click={handleRefreshPublic} />
         </div>
       {/if}
     </WidgetsInnerContainer>

packages/web/src/widgets/QueryHistoryList.svelte

@@ -9,6 +9,7 @@
   import openNewTab from '../utility/openNewTab';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { apiCall, apiOff, apiOn } from '../utility/api';
+  import { _t } from '../translations';
 
   let filter = '';
   let search = '';
@@ -38,7 +39,7 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search query history" {filter} bind:value={filter} />
+  <SearchInput placeholder={_t('history.searchQueryHistory', { defaultMessage: "Search query history" })} {filter} bind:value={filter} />
   <CloseSearchButton
     bind:filter
     on:click={() => {
@@ -54,7 +55,7 @@
       on:click={() => {
         openNewTab(
           {
-            title: 'Query #',
+            title: _t('database.queryDesigner', { defaultMessage: "Query #" }),
             icon: 'icon sql-file',
             tabComponent: 'QueryTab',
             focused: true,

packages/web/src/widgets/SavedFilesList.svelte

@@ -13,6 +13,7 @@
   import { isProApp } from '../utility/proTools';
   import InlineUploadButton from '../buttons/InlineUploadButton.svelte';
   import { DATA_FOLDER_NAMES } from 'dbgate-tools';
+  import { _t } from '../translations';
 
   let filter = '';
 
@@ -65,19 +66,19 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search saved files" bind:value={filter} />
+  <SearchInput placeholder={_t('files.searchSavedFiles', { defaultMessage: "Search saved files" })} bind:value={filter} />
   <CloseSearchButton bind:filter />
   <InlineUploadButton
     filters={[
       {
-        name: `All supported files`,
+        name: _t('files.allSupportedFiles', { defaultMessage: "All supported files" }),
         extensions: ['sql'],
       },
-      { name: `SQL files`, extensions: ['sql'] },
+      { name: _t('files.sqlFiles', { defaultMessage: "SQL files" }), extensions: ['sql'] },
     ]}
     onProcessFile={handleUploadedFile}
   />
-  <InlineButton on:click={handleRefreshFiles} title="Refresh files" data-testid="SavedFileList_buttonRefresh">
+  <InlineButton on:click={handleRefreshFiles} title={_t('files.refreshFiles', { defaultMessage: "Refresh files" })} data-testid="SavedFileList_buttonRefresh">
     <FontIcon icon="icon refresh" />
   </InlineButton>
 </SearchBoxWrapper>
@@ -86,7 +87,7 @@
   <AppObjectList
     list={files}
     module={savedFileAppObject}
-    groupFunc={data => (data.teamFileId ? 'Team files' : dataFolderTitle(data.folder))}
+    groupFunc={data => (data.teamFileId ? _t('files.teamFiles', { defaultMessage: "Team files" }) : dataFolderTitle(data.folder))}
     {filter}
   />
 </WidgetsInnerContainer>

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -35,16 +35,16 @@
     getCurrentConfig().storageDatabase && {
       icon: 'icon admin',
       name: 'admin',
-      title: 'Administration',
+      title: _t('widgets.administration', { defaultMessage: 'Administration' }),
     },
     {
       icon: 'icon database',
       name: 'database',
-      title: 'Database connections',
+      title: _t('widgets.databaseConnections', { defaultMessage: 'Database connections' }),
     },
     getCurrentConfig().allowPrivateCloud && {
       name: 'cloud-private',
-      title: 'DbGate Cloud',
+      title: _t('widgets.dbgateCloud', { defaultMessage: 'DbGate Cloud' }),
       icon: 'icon cloud-private',
     },
 
@@ -55,17 +55,17 @@
     {
       icon: 'icon file',
       name: 'file',
-      title: 'Favorites & Saved files',
+      title: _t('widgets.favoritesAndSavedFiles', { defaultMessage: 'Favorites & Saved files' }),
     },
     {
       icon: 'icon history',
       name: 'history',
-      title: 'Query history & Closed tabs',
+      title: _t('widgets.queryHistoryAndClosedTabs', { defaultMessage: 'Query history & Closed tabs' }),
     },
     isProApp() && {
       icon: 'icon archive',
       name: 'archive',
-      title: 'Archive (saved tabular data)',
+      title: _t('widgets.archive', { defaultMessage: 'Archive (saved tabular data)' }),
     },
     // {
     //   icon: 'icon plugin',
@@ -75,17 +75,17 @@
     {
       icon: 'icon cell-data',
       name: 'cell-data',
-      title: 'Selected cell data detail view',
+      title: _t('widgets.selectedCellDataDetailView', { defaultMessage: 'Selected cell data detail view' }),
     },
     {
       name: 'cloud-public',
-      title: 'DbGate Cloud',
+      title: _t('widgets.dbgateCloud', { defaultMessage: 'DbGate Cloud' }),
       icon: 'icon cloud-public',
     },
     {
       icon: 'icon premium',
       name: 'premium',
-      title: 'Premium promo',
+      title: _t('widgets.premiumPromo', { defaultMessage: 'Premium promo' }),
       isPremiumPromo: true,
     },
     // {
@@ -213,7 +213,7 @@
     class="wrapper"
     on:click={() => showModal(NewObjectModal)}
     data-testid="WidgetIconPanel_addButton"
-    title="Add New"
+    title={_t('widgets.addNew', { defaultMessage: 'Add New' })}
   >
     <FontIcon icon="icon add" />
   </div>