translation-table editor, query, table structure

2026-04-20 20:35:59 +00:00 · 2025-11-04 16:52:45 +01:00
parent 0ebed9b46f
commit e378fc3cfb
23 changed files with 566 additions and 152 deletions
--- a/packages/web/src/tableeditor/ColumnEditorModal.svelte
+++ b/packages/web/src/tableeditor/ColumnEditorModal.svelte
@@ -27,41 +27,41 @@
 <FormProvider initialValues={fillEditorColumnInfo(columnInfo || {}, tableInfo)}>
  <ModalBase {...$$restProps}>
    <svelte:fragment slot="header"
-      >{columnInfo ? 'Edit column' : `Add column ${(tableInfo?.columns || []).length + 1}`}</svelte:fragment
+      >{columnInfo ? _t('columnEditor.editColumn', { defaultMessage: 'Edit column' }) : _t('columnEditor.addColumn', { defaultMessage: 'Add column {columnNumber}', values: { columnNumber: (tableInfo?.columns || []).length + 1 } })}</svelte:fragment
    >

-    <FormTextField name="columnName" label="Column name" focused disabled={isReadOnly} />
+    <FormTextField name="columnName" label={_t('columnEditor.columnName', { defaultMessage: 'Column name' })} focused disabled={isReadOnly} />
    <DataTypeEditor dialect={driver?.dialect} disabled={isReadOnly} />

    {#if !driver?.dialect?.specificNullabilityImplementation}
      <FormCheckboxField name="notNull" label="NOT NULL" disabled={isReadOnly} />
    {/if}
-    <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" disabled={isReadOnly} />
+    <FormCheckboxField name="isPrimaryKey" label={_t('columnEditor.isPrimaryKey', { defaultMessage: 'Is Primary Key' })} disabled={isReadOnly} />
    {#if !driver?.dialect?.disableAutoIncrement}
-      <FormCheckboxField name="autoIncrement" label="Is Autoincrement" disabled={isReadOnly} />
+      <FormCheckboxField name="autoIncrement" label={_t('columnEditor.autoIncrement', { defaultMessage: 'Is Autoincrement' })} disabled={isReadOnly} />
    {/if}
    <FormTextField
      name="defaultValue"
-      label="Default value. Please use valid SQL expression, eg. 'Hello World' for string value, '' for empty string"
+      label={_t('columnEditor.defaultValue', { defaultMessage: "Default value. Please use valid SQL expression, eg. 'Hello World' for string value, '' for empty string" })}
      disabled={!setTableInfo}
    />
-    <FormTextField name="computedExpression" label="Computed expression" disabled={isReadOnly} />
+    <FormTextField name="computedExpression" label={_t('columnEditor.computedExpression', { defaultMessage: 'Computed expression' })} disabled={isReadOnly} />
    {#if driver?.dialect?.columnProperties?.isUnsigned}
-      <FormCheckboxField name="isUnsigned" label="Unsigned" disabled={isReadOnly} />
+      <FormCheckboxField name="isUnsigned" label={_t('columnEditor.isUnsigned', { defaultMessage: 'Unsigned' })} disabled={isReadOnly} />
    {/if}
    {#if driver?.dialect?.columnProperties?.isZerofill}
-      <FormCheckboxField name="isZerofill" label="Zero fill" disabled={isReadOnly} />
+      <FormCheckboxField name="isZerofill" label={_t('columnEditor.isZerofill', { defaultMessage: 'Zero fill' })} disabled={isReadOnly} />
    {/if}
    {#if driver?.dialect?.columnProperties?.columnComment}
-      <FormTextField name="columnComment" label="Comment" disabled={isReadOnly} />
+      <FormTextField name="columnComment" label={_t('columnEditor.columnComment', { defaultMessage: 'Comment' })} disabled={isReadOnly} />
    {/if}
    {#if driver?.dialect?.columnProperties?.isSparse}
-      <FormCheckboxField name="isSparse" label="Sparse" disabled={isReadOnly} />
+      <FormCheckboxField name="isSparse" label={_t('columnEditor.isSparse', { defaultMessage: 'Sparse' })} disabled={isReadOnly} />
    {/if}

    <svelte:fragment slot="footer">
      <FormSubmit
-        value={columnInfo ? 'Save' : 'Save and next'}
+        value={columnInfo ? _t('common.save', { defaultMessage: 'Save' }) : _t('common.saveAndNext', { defaultMessage: 'Save and next' })}
        disabled={isReadOnly}
        on:click={e => {
          closeCurrentModal();
@@ -85,11 +85,11 @@
        />
      {/if}

-      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      <FormStyledButton type="button" value={_t('common.close', { defaultMessage: 'Close' })} on:click={closeCurrentModal} />
      {#if columnInfo}
        <FormStyledButton
          type="button"
-          value="Remove"
+          value={_t('common.remove', { defaultMessage: 'Remove' })}
          on:click={() => {
            closeCurrentModal();
            setTableInfo(tbl => editorDeleteColumn(tbl, columnInfo, addDataCommand));
--- a/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
+++ b/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
@@ -9,13 +9,15 @@
  import { editorAddConstraint, editorDeleteConstraint, editorModifyConstraint } from 'dbgate-tools';
  import TextField from '../forms/TextField.svelte';
  import SelectField from '../forms/SelectField.svelte';
+  import { _t, __t } from '../translations';
+  import _ from 'lodash';

  export let constraintInfo;
  export let setTableInfo;
  export let tableInfo;
  export let constraintLabel;
  export let constraintType;
-  export let constraintNameLabel = 'Constraint name';
+  export let constraintNameLabel = _t('tableEditor.constraintName', { defaultMessage: 'Constraint name' });
  export let getExtractConstraintProps;
  export let hideConstraintName = false;

@@ -41,7 +43,7 @@
 <FormProvider>
  <ModalBase {...$$restProps}>
    <svelte:fragment slot="header"
-      >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
+      >{constraintInfo ? _t('tableEdit.editConstraintLabel', { defaultMessage: 'Edit {constraintLabel}', values: { constraintLabel: _.isFunction(constraintLabel) ? constraintLabel() : constraintLabel } }) : _t('tableEdit.addConstraintLabel', { defaultMessage: 'Add {constraintLabel}', values: { constraintLabel: _.isFunction(constraintLabel) ? constraintLabel() : constraintLabel } })}</svelte:fragment
    >

    <div class="largeFormMarker">
@@ -65,7 +67,7 @@

      {#each columns as column, index}
        <div class="row">
-          <div class="label col-3">Column {index + 1}</div>
+          <div class="label col-3">{_t('common.column', { defaultMessage: 'Column ' })}{index + 1}</div>
          <div class={$$slots.column ? 'col-3' : 'col-6'}>
            {#key column.columnName}
              <SelectField
@@ -91,7 +93,7 @@
          {/if}
          <div class="col-3 button">
            <FormStyledButton
-              value="Delete"
+              value={_t('common.delete', { defaultMessage: 'Delete' })}
              disabled={isReadOnly}
              on:click={e => {
                const x = [...columns];
@@ -104,11 +106,11 @@
      {/each}

      <div class="row">
-        <div class="label col-3">Add new column</div>
+        <div class="label col-3">{_t('columnsConstraintEditor.addNewColumn', { defaultMessage: 'Add new column' })}</div>
        <div class="col-9">
          {#key columns.length}
            <SelectField
-              placeholder="Select column"
+              placeholder={_t('columnsConstraintEditor.selectColumn', { defaultMessage: 'Select column' })}
              disabled={isReadOnly}
              value={''}
              on:change={e => {
@@ -123,7 +125,7 @@
              isNative
              options={[
                {
-                  label: 'Choose column',
+                  label: _t('columnsConstraintEditor.chooseColumn', { defaultMessage: 'Choose column' })  ,
                  value: '',
                },
                ...(tableInfo?.columns?.map(col => ({
@@ -139,7 +141,7 @@

    <svelte:fragment slot="footer">
      <FormSubmit
-        value={'Save'}
+        value={_t('common.save', { defaultMessage: 'Save' })}
        disabled={isReadOnly}
        on:click={() => {
          closeCurrentModal();
@@ -151,11 +153,11 @@
        }}
      />

-      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      <FormStyledButton type="button" value={_t('common.close', { defaultMessage: 'Close' })} on:click={closeCurrentModal} />
      {#if constraintInfo}
        <FormStyledButton
          type="button"
-          value="Remove"
+          value={_t('common.remove', { defaultMessage: 'Remove' })}
          disabled={isReadOnly}
          on:click={() => {
            closeCurrentModal();
--- a/packages/web/src/tableeditor/DataTypeEditor.svelte
+++ b/packages/web/src/tableeditor/DataTypeEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import FormDropDownTextField from '../forms/FormDropDownTextField.svelte';
  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import { _t } from '../translations';

  const { values, setFieldValue } = getFormContext();

@@ -17,4 +18,4 @@
  export let disabled = false;
 </script>

-<FormDropDownTextField name="dataType" label="Data type" menu={createDataTypesMenu} {disabled} />
+<FormDropDownTextField name="dataType" label="{_t('tableEditor.dataType', { defaultMessage: 'Data type' })}" menu={createDataTypesMenu} {disabled} />
--- a/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
+++ b/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
@@ -60,11 +60,11 @@

 <FormProvider>
  <ModalBase {...$$restProps}>
-    <svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
+    <svelte:fragment slot="header">{constraintInfo ? _t('foreignKeyEditor.editForeignKey', { defaultMessage: 'Edit foreign key' }) : _t('foreignKeyEditor.addForeignKey', { defaultMessage: 'Add foreign key' })}</svelte:fragment>

    <div class="largeFormMarker">
      <div class="row">
-        <div class="label col-3">Constraint name</div>
+        <div class="label col-3">{_t('tableEditor.constraintName', { defaultMessage: 'Constraint name' })}</div>
        <div class="col-9">
          <TextField
            value={constraintName}
@@ -76,7 +76,7 @@
      </div>

      <div class="row">
-        <div class="label col-3">Referenced table</div>
+        <div class="label col-3">{_t('foreignKeyEditor.referencedTable', { defaultMessage: 'Referenced table' })}</div>
        <div class="col-9">
          <SelectField
            value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
@@ -99,7 +99,7 @@
      </div>

      <div class="row">
-        <div class="label col-3">On update action</div>
+        <div class="label col-3">{_t('foreignKeyEditor.onUpdateAction', { defaultMessage: 'On update action' })}</div>
        <div class="col-9">
          <SelectField
            value={updateAction}
@@ -115,7 +115,7 @@
      </div>

      <div class="row">
-        <div class="label col-3">On delete action</div>
+        <div class="label col-3">{_t('foreignKeyEditor.onDeleteAction', { defaultMessage: 'On delete action' })}</div>
        <div class="col-9">
          <SelectField
            value={deleteAction}
@@ -132,10 +132,10 @@

      <div class="row">
        <div class="col-5 mr-1">
-          Base column - {tableInfo.pureName}
+          {_t('foreignKeyEditor.baseColumn', { defaultMessage: 'Base column - ' })}{tableInfo.pureName}
        </div>
        <div class="col-5 ml-1">
-          Ref column - {refTableName || '(table not set)'}
+          {_t('foreignKeyEditor.refColumn', { defaultMessage: 'Ref column - ' })}{refTableName || _t('foreignKeyEditor.tableNotSet', { defaultMessage: '(table not set)' })}
        </div>
      </div>

@@ -195,7 +195,7 @@

      <FormStyledButton
        type="button"
-        value="Add column"
+        value={_t('foreignKeyEditor.addColumn', { defaultMessage: 'Add column' })}
        disabled={isReadOnly}
        on:click={() => {
          columns = [...columns, {}];
@@ -217,12 +217,12 @@
        }}
      />

-      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      <FormStyledButton type="button" value={_t('common.close', { defaultMessage: 'Close' })} on:click={closeCurrentModal} />
      {#if constraintInfo}
        <FormStyledButton
          type="button"
          disabled={isReadOnly}
-          value="Remove"
+          value={_t('common.remove', { defaultMessage: 'Remove' })}
          on:click={() => {
            closeCurrentModal();
            setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
--- a/packages/web/src/tableeditor/IndexEditorModal.svelte
+++ b/packages/web/src/tableeditor/IndexEditorModal.svelte
@@ -3,6 +3,7 @@
  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
  import SelectField from '../forms/SelectField.svelte';
  import TextField from '../forms/TextField.svelte';
+  import { _t } from '../translations';

  import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';

@@ -29,7 +30,7 @@
  {...$$restProps}
  constraintLabel="index"
  constraintType="index"
-  constraintNameLabel="Index name"
+  constraintNameLabel={_t('indexEditor.indexName', { defaultMessage: 'Index name' })}
  {constraintInfo}
  {setTableInfo}
  {tableInfo}
@@ -61,15 +62,14 @@
  <svelte:fragment slot="constraintProps">
    <div class="largeFormMarker">
      <div class="row">
-        <CheckboxField checked={isUnique} on:change={e => (isUnique = e.target.checked)} disabled={isReadOnly} /> Is unique
-        index
+        <CheckboxField checked={isUnique} on:change={e => (isUnique = e.target.checked)} disabled={isReadOnly} /> {_t('indexEditor.isUnique', { defaultMessage: 'Is unique index' })}
      </div>
    </div>

    <div class="largeFormMarker">
      {#if driver?.dialect?.filteredIndexes}
        <div class="row">
-          <div class="label col-3">Filtered index condition</div>
+          <div class="label col-3">{_t('indexEditor.filteredIndexCondition', { defaultMessage: 'Filtered index condition' })}</div>
          <div class="col-9">
            <TextField
              value={filterDefinition}
--- a/packages/web/src/tableeditor/PrimaryKeyEditorModal.svelte
+++ b/packages/web/src/tableeditor/PrimaryKeyEditorModal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
  import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
+  import { _t } from '../translations';

  export let constraintInfo;
  export let setTableInfo;
  export let tableInfo;
  export let driver;

-  export let constraintLabel = 'primary key';
+  export let constraintLabel = _t('tableEditor.primaryKey', { defaultMessage: 'primary key' });
  export let constraintType = 'primaryKey';
 </script>

--- a/packages/web/src/tableeditor/PrimaryKeyLikeListControl.svelte
+++ b/packages/web/src/tableeditor/PrimaryKeyLikeListControl.svelte
@@ -9,13 +9,14 @@
  import { showModal } from '../modals/modalTools';

  import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
+  import { _t } from '../translations';

  export let tableInfo;
  export let setTableInfo;
  export let isWritable;
  export let driver;

-  export let constraintLabel = 'primary key';
+  export let constraintLabel = _t('tableEditor.primaryKey', { defaultMessage: 'primary key' });
  export let constraintType = 'primaryKey';

  $: columns = tableInfo?.columns;
@@ -35,7 +36,12 @@
 <ObjectListControl
  collection={_.compact([keyConstraint])}
  title={_.startCase(constraintLabel)}
-  emptyMessage={isWritable ? `No ${constraintLabel} defined` : null}
+  emptyMessage={isWritable
+    ? _t('tableEditor.noConstraintDefined', {
+        defaultMessage: 'No {constraintLabel} defined',
+        values: { constraintLabel },
+      })
+    : null}
  onAddNew={isWritable && !keyConstraint && columns?.length > 0 ? addKeyConstraint : null}
  hideDisplayName={driver?.dialect?.anonymousPrimaryKey}
  clickable
@@ -51,7 +57,7 @@
  columns={[
    {
      fieldName: 'columns',
-      header: 'Columns',
+      header: _t('tableEditor.columns', { defaultMessage: 'Columns' }),
      slot: 0,
      sortable: true,
    },
@@ -70,7 +76,7 @@
      onClick={e => {
        e.stopPropagation();
        setTableInfo(tbl => editorDeleteConstraint(tbl, row));
-      }}>Remove</Link
+      }}>{_t('common.remove', { defaultMessage: 'Remove' })}</Link
    ></svelte:fragment
  >
 </ObjectListControl>
--- a/packages/web/src/tableeditor/TableEditor.svelte
+++ b/packages/web/src/tableeditor/TableEditor.svelte
@@ -3,8 +3,8 @@

  registerCommand({
    id: 'tableEditor.addColumn',
-    category: 'Table editor',
-    name: 'Add column',
+    category: __t('tableEditor', { defaultMessage: 'Table editor'}),
+    name: __t('tableEditor.addColumn', { defaultMessage: 'Add column'}),
    icon: 'icon add-column',
    toolbar: true,
    isRelatedToTab: true,
@@ -14,8 +14,8 @@

  registerCommand({
    id: 'tableEditor.addPrimaryKey',
-    category: 'Table editor',
-    name: 'Add primary key',
+    category: __t('tableEditor', { defaultMessage: 'Table editor'}),
+    name: __t('tableEditor.addPrimaryKey', { defaultMessage: 'Add primary key'}),
    icon: 'icon add-key',
    toolbar: true,
    isRelatedToTab: true,
@@ -25,8 +25,8 @@

  registerCommand({
    id: 'tableEditor.addForeignKey',
-    category: 'Table editor',
-    name: 'Add foreign key',
+    category: __t('tableEditor', { defaultMessage: 'Table editor'}),
+    name: __t('tableEditor.addForeignKey', { defaultMessage: 'Add foreign key'}),
    icon: 'icon add-key',
    toolbar: true,
    isRelatedToTab: true,
@@ -36,8 +36,8 @@

  registerCommand({
    id: 'tableEditor.addIndex',
-    category: 'Table editor',
-    name: 'Add index',
+    category: __t('tableEditor', { defaultMessage: 'Table editor'}),
+    name: __t('tableEditor.addIndex', { defaultMessage: 'Add index'}),
    icon: 'icon add-key',
    toolbar: true,
    isRelatedToTab: true,
@@ -47,8 +47,8 @@

  registerCommand({
    id: 'tableEditor.addUnique',
-    category: 'Table editor',
-    name: 'Add unique',
+    category: __t('tableEditor', { defaultMessage: 'Table editor'}),
+    name: __t('tableEditor.addUnique', { defaultMessage: 'Add unique'}),
    icon: 'icon add-key',
    toolbar: true,
    isRelatedToTab: true,
@@ -83,6 +83,7 @@
  import UniqueEditorModal from './UniqueEditorModal.svelte';
  import ObjectFieldsEditor from '../elements/ObjectFieldsEditor.svelte';
  import PrimaryKeyLikeListControl from './PrimaryKeyLikeListControl.svelte';
+  import { __t, _t } from '../translations';

  export const activator = createActivator('TableEditor', true);

@@ -171,9 +172,9 @@
  {#if tableInfo && (tableFormOptions || isCreateTable)}
    {#key resetCounter}
      <ObjectFieldsEditor
-        title="Table properties"
+        title={_t('tableEditor.tableproperties', { defaultMessage: 'Table properties' })}
        fieldDefinitions={tableFormOptions ?? []}
-        pureNameTitle={isCreateTable ? 'Table name' : null}
+        pureNameTitle={isCreateTable ? _t('tableEditor.tablename', { defaultMessage: 'Table name' }) : null}
        schemaList={isCreateTable && schemaList?.length >= 0 ? schemaList : null}
        values={_.pick(tableInfo, ['schemaName', 'pureName', ...(tableFormOptions ?? []).map(x => x.name)])}
        onChangeValues={vals => {
@@ -187,15 +188,15 @@

  <ObjectListControl
    collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
-    title={`Columns (${columns?.length || 0})`}
-    emptyMessage="No columns defined"
+    title={_t('tableEditor.columns', { defaultMessage: 'Columns ({columnCount})', values: { columnCount: columns?.length || 0 } })}
+    emptyMessage={_t('tableEditor.nocolumnsdefined', { defaultMessage: 'No columns defined' })}
    clickable
    on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo, driver })}
    onAddNew={isWritable ? addColumn : null}
    displayNameFieldName="columnName"
    multipleItemsActions={[
      {
-        text: 'Remove',
+        text: _t('tableEditor.remove', { defaultMessage: 'Remove' }),
        icon: 'icon delete',
        onClick: selected => {
          setTableInfo(tbl => {
@@ -205,7 +206,7 @@
        },
      },
      {
-        text: 'Copy names',
+        text: _t('tableEditor.copynames', { defaultMessage: 'Copy names' }),
        icon: 'icon copy',
        onClick: selected => {
          const names = selected.map(x => x.columnName).join('\n');
@@ -213,7 +214,7 @@
        },
      },
      {
-        text: 'Copy definitions',
+        text: _t('tableEditor.copydefinitions', { defaultMessage: 'Copy definitions' }),
        icon: 'icon copy',
        onClick: selected => {
          const names = selected
@@ -226,55 +227,55 @@
    columns={[
      !driver?.dialect?.specificNullabilityImplementation && {
        fieldName: 'notNull',
-        header: 'Nullability',
+        header: _t('tableEditor.nullability', { defaultMessage: 'Nullability' }),
        sortable: true,
        slot: 0,
      },
      {
        fieldName: 'dataType',
-        header: 'Data Type',
+        header: _t('tableEditor.dataType', { defaultMessage: 'Data type' }),
        sortable: true,
        filterable: true,
      },
      {
        fieldName: 'defaultValue',
-        header: 'Default value',
+        header: _t('tableEditor.defaultValue', { defaultMessage: 'Default value' }),
        sortable: true,
        filterable: true,
      },
      driver?.dialect?.columnProperties?.isSparse && {
        fieldName: 'isSparse',
-        header: 'Is Sparse',
+        header: _t('tableEditor.isSparse', { defaultMessage: 'Is Sparse' }),
        sortable: true,
        slot: 1,
      },
      {
        fieldName: 'computedExpression',
-        header: 'Computed Expression',
+        header: _t('tableEditor.computedExpression', { defaultMessage: 'Computed Expression' }),
        sortable: true,
        filterable: true,
      },
      driver?.dialect?.columnProperties?.isPersisted && {
        fieldName: 'isPersisted',
-        header: 'Is Persisted',
+        header: _t('tableEditor.isPersisted', { defaultMessage: 'Is Persisted' }),
        sortable: true,
        slot: 2,
      },
      driver?.dialect?.columnProperties?.isUnsigned && {
        fieldName: 'isUnsigned',
-        header: 'Unsigned',
+        header: _t('tableEditor.isUnsigned', { defaultMessage: 'Unsigned' }),
        sortable: true,
        slot: 4,
      },
      driver?.dialect?.columnProperties?.isZerofill && {
        fieldName: 'isZerofill',
-        header: 'Zero fill',
+        header: _t('tableEditor.isZeroFill', { defaultMessage: 'Zero fill' }),
        sortable: true,
        slot: 5,
      },
      driver?.dialect?.columnProperties?.columnComment && {
        fieldName: 'columnComment',
-        header: 'Comment',
+        header: _t('tableEditor.columnComment', { defaultMessage: 'Comment' }),
        sortable: true,
        filterable: true,
      },
@@ -287,19 +288,19 @@
        : null,
    ]}
  >
-    <svelte:fragment slot="0" let:row>{row?.notNull ? 'NOT NULL' : 'NULL'}</svelte:fragment>
-    <svelte:fragment slot="1" let:row>{row?.isSparse ? 'YES' : 'NO'}</svelte:fragment>
-    <svelte:fragment slot="2" let:row>{row?.isPersisted ? 'YES' : 'NO'}</svelte:fragment>
+    <svelte:fragment slot="0" let:row>{row?.notNull ? _t('tableEditor.notnull', { defaultMessage: 'NOT NULL' }) : _t('tableEditor.null', { defaultMessage: 'NULL' })}</svelte:fragment>
+    <svelte:fragment slot="1" let:row>{row?.isSparse ? _t('tableEditor.yes', { defaultMessage: 'YES' }) : _t('tableEditor.no', { defaultMessage: 'NO' })}</svelte:fragment>
+    <svelte:fragment slot="2" let:row>{row?.isPersisted ? _t('tableEditor.yes', { defaultMessage: 'YES' }) : _t('tableEditor.no', { defaultMessage: 'NO' })}</svelte:fragment>
    <svelte:fragment slot="3" let:row
      ><Link
        onClick={e => {
          e.stopPropagation();
          setTableInfo(tbl => editorDeleteColumn(tbl, row));
-        }}>Remove</Link
+        }}>{_t('tableEditor.remove', { defaultMessage: 'Remove' })}</Link
      ></svelte:fragment
    >
-    <svelte:fragment slot="4" let:row>{row?.isUnsigned ? 'YES' : 'NO'}</svelte:fragment>
-    <svelte:fragment slot="5" let:row>{row?.isZerofill ? 'YES' : 'NO'}</svelte:fragment>
+    <svelte:fragment slot="4" let:row>{row?.isUnsigned ? _t('tableEditor.yes', { defaultMessage: 'YES' }) : _t('tableEditor.no', { defaultMessage: 'NO' })}</svelte:fragment>
+    <svelte:fragment slot="5" let:row>{row?.isZerofill ? _t('tableEditor.yes', { defaultMessage: 'YES' }) : _t('tableEditor.no', { defaultMessage: 'NO' })}</svelte:fragment>
    <svelte:fragment slot="name" let:row><ColumnLabel {...row} forceIcon /></svelte:fragment>
  </ObjectListControl>

@@ -320,20 +321,20 @@
    <ObjectListControl
      collection={indexes}
      onAddNew={isWritable && columns?.length > 0 ? addIndex : null}
-      title={`Indexes (${indexes?.length || 0})`}
-      emptyMessage={isWritable ? 'No index defined' : null}
+      title={_t('tableEditor.indexes', { defaultMessage: 'Indexes ({indexCount})', values: { indexCount: indexes?.length || 0 } })}
+      emptyMessage={isWritable ? _t('tableEditor.noindexdefined', { defaultMessage: 'No index defined' }) : null}
      clickable
      on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, driver })}
      columns={[
        {
          fieldName: 'columns',
-          header: 'Columns',
+          header: _t('tableEditor.columns', { defaultMessage: 'Columns' }),
          slot: 0,
          sortable: true,
        },
        {
          fieldName: 'unique',
-          header: 'Unique',
+          header: _t('tableEditor.unique', { defaultMessage: 'Unique' }),
          slot: 1,
          sortable: true,
        },
@@ -347,13 +348,13 @@
    >
      <svelte:fragment slot="name" let:row><ConstraintLabel {...row} /></svelte:fragment>
      <svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
-      <svelte:fragment slot="1" let:row>{row?.isUnique ? 'YES' : 'NO'}</svelte:fragment>
+      <svelte:fragment slot="1" let:row>{row?.isUnique ? _t('tableEditor.yes', { defaultMessage: 'YES' }) : _t('tableEditor.no', { defaultMessage: 'NO' })}</svelte:fragment>
      <svelte:fragment slot="2" let:row
        ><Link
          onClick={e => {
            e.stopPropagation();
            setTableInfo(tbl => editorDeleteConstraint(tbl, row));
-          }}>Remove</Link
+          }}>{_t('common.remove', { defaultMessage: 'Remove' })}</Link
        ></svelte:fragment
      >
    </ObjectListControl>
@@ -363,14 +364,14 @@
    <ObjectListControl
      collection={uniques}
      onAddNew={isWritable && columns?.length > 0 ? addUnique : null}
-      title={`Unique constraints (${uniques?.length || 0})`}
-      emptyMessage={isWritable ? 'No unique defined' : null}
+      title={_t('tableEditor.uniqueConstraints', { defaultMessage: 'Unique constraints ({constraintCount})', values: { constraintCount: uniques?.length || 0 } })}
+      emptyMessage={isWritable ? _t('tableEditor.nouniquedefined', { defaultMessage: 'No unique defined' }) : null}
      clickable
      on:clickrow={e => showModal(UniqueEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
      columns={[
        {
          fieldName: 'columns',
-          header: 'Columns',
+          header: _t('tableEditor.columns', { defaultMessage: 'Columns' }),
          slot: 0,
          sortable: true,
        },
@@ -390,7 +391,7 @@
          onClick={e => {
            e.stopPropagation();
            setTableInfo(tbl => editorDeleteConstraint(tbl, row));
-          }}>Remove</Link
+          }}>{_t('common.remove', { defaultMessage: 'Remove' })}</Link
        ></svelte:fragment
      >
    </ObjectListControl>
@@ -400,13 +401,13 @@
    <ForeignKeyObjectListControl
      collection={foreignKeys}
      onAddNew={isWritable && columns?.length > 0 ? addForeignKey : null}
-      title={`Foreign keys (${foreignKeys?.length || 0})`}
-      emptyMessage={isWritable ? 'No foreign key defined' : null}
+      title={_t('tableEditor.foreignKeys', { defaultMessage: 'Foreign keys ({foreignKeyCount})', values: { foreignKeyCount: foreignKeys?.length || 0 } })}
+      emptyMessage={isWritable ? _t('tableEditor.noforeignkeydefined', { defaultMessage: 'No foreign key defined' }) : null}
      clickable
      onRemove={row => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}
      on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}
    />
-    <ForeignKeyObjectListControl collection={dependencies} title="Dependencies" />
+    <ForeignKeyObjectListControl collection={dependencies} title={_t('tableEditor.dependencies', { defaultMessage: 'Dependencies' })} />
  {/if}
 </div>

--- a/packages/web/src/tableeditor/UniqueEditorModal.svelte
+++ b/packages/web/src/tableeditor/UniqueEditorModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
  import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
+  import { _t } from '../translations';

  export let constraintInfo;
  export let setTableInfo;
@@ -9,7 +10,7 @@

 <ColumnsConstraintEditorModal
  {...$$restProps}
-  constraintLabel="unique"
+  constraintLabel={_t('tableEdit.unique', { defaultMessage: "unique" })}
  constraintType="unique"
  {constraintInfo}
  {setTableInfo}