From 3cc9c3ce866b4bbd9a9514058cdba47bcb7941df Mon Sep 17 00:00:00 2001 From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com> Date: Wed, 15 Apr 2026 16:29:02 +0200 Subject: [PATCH] dbeaver/pro#8274 feat: add key icons for key columns in data editor (#4283) * dbeaver/pro#8274 feat: add key icons for key columns in data editor * dbeaver/pro#8274 feat: change key icon. put to core --------- Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com> --- webapp/packages/core-app/public/icons/key.svg | 15 +++++++++++++ .../TableColumnHeader.module.css | 5 +++++ .../TableColumnHeader/TableColumnHeader.tsx | 21 ++++++++++++++++++- .../src/locales/de.ts | 1 + .../src/locales/en.ts | 1 + .../src/locales/fr.ts | 1 + .../src/locales/it.ts | 1 + .../src/locales/ru.ts | 1 + .../src/locales/vi.ts | 1 + .../src/locales/zh.ts | 1 + 10 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 webapp/packages/core-app/public/icons/key.svg diff --git a/webapp/packages/core-app/public/icons/key.svg b/webapp/packages/core-app/public/icons/key.svg new file mode 100644 index 0000000000..a5709683cf --- /dev/null +++ b/webapp/packages/core-app/public/icons/key.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.module.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.module.css index 2ab64c95b2..e20d06ea83 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.module.css +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.module.css @@ -26,6 +26,11 @@ height: 16px; display: block; } +.keyImage { + flex-shrink: 0; + height: 10px; + width: 10px; +} .name { font-weight: 400; flex-grow: 1; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx index 66e80dba8d..a5e891e7e4 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite'; import { useContext } from 'react'; import { clsx } from '@dbeaver/ui-kit'; -import { getComputed, s, StaticImage, useS } from '@cloudbeaver/core-blocks'; +import { getComputed, s, StaticImage, useS, useTranslate } from '@cloudbeaver/core-blocks'; import { isResultSetDataSource } from '@cloudbeaver/plugin-data-viewer'; import { ColumnDnDContext } from '../ColumnDnDContext.js'; @@ -31,6 +31,7 @@ export const TableColumnHeader = observer(function TableColumnHeader({ co const gridSelectionContext = useContext(DataGridSelectionContext); const columnDnDContext = useContext(ColumnDnDContext); const styles = useS(style); + const translate = useTranslate(); const resultIndex = dataGridContext.resultIndex; const model = dataGridContext.model; @@ -55,9 +56,14 @@ export const TableColumnHeader = observer(function TableColumnHeader({ co const source = model.source; return isResultSetDataSource(source) ? source.hasElementIdentifier(resultIndex) : false; }); + const rowIdentifierInfo = getComputed(() => { + const source = model.source; + return isResultSetDataSource(source) ? source.getRowIdentifierInfo(resultIndex) : null; + }); let icon: string | undefined; let columnName: string | undefined; + let columnRawName: string | undefined; let columnReadOnly = false; let columnTooltip: string | undefined; let columnDescription: string | undefined; @@ -68,6 +74,7 @@ export const TableColumnHeader = observer(function TableColumnHeader({ co if (column) { columnName = column.label!; + columnRawName = column.name ?? undefined; columnDescription = column.description; icon = column.icon; columnReadOnly ||= tableDataContext.format.isReadOnly({ column: columnInfo.key }); @@ -84,6 +91,17 @@ export const TableColumnHeader = observer(function TableColumnHeader({ co } } + const isKeyColumn = getComputed(() => { + const identifier = rowIdentifierInfo?.identifier; + if (!identifier || !columnRawName) { + return false; + } + return identifier.attributes.some(attr => attr.name === columnRawName); + }); + const keyTooltip = isKeyColumn + ? translate(rowIdentifierInfo?.state === 'VIRTUAL_KEY' ? 'data_grid_table_virtual_key_tooltip' : 'data_grid_table_key_column_tooltip') + : undefined; + function handleClick(event: React.MouseEvent) { gridSelectionContext.selectColumn(colIdx, event.ctrlKey || event.metaKey); dataGridContext.focus(); @@ -115,6 +133,7 @@ export const TableColumnHeader = observer(function TableColumnHeader({ co )} )} + {isKeyColumn && }
{columnName}
{tableDataContext.hasDescription && columnDescription && ( diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts index dd4ee4f5f0..497bdffcd9 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts @@ -27,6 +27,7 @@ export default [ ['data_grid_table_readonly_connection_tooltip', 'Schreibgeschützte Verbindung'], ['data_grid_table_no_key_found_tooltip', 'Kein eindeutiger Schlüssel gefunden. Datenänderung nicht möglich.'], ['data_grid_table_virtual_key_tooltip', 'Virtueller Schlüssel'], + ['data_grid_table_key_column_tooltip', 'Schlüsselspalte'], ['plugin_data_spreadsheet_new_settings_disable', 'Tabellenpräsentation deaktivieren'], ['plugin_data_spreadsheet_new_settings_disable_description', 'Deaktivieren Sie die Tabellenpräsentation von Daten für alle Benutzer'], ['plugin_data_spreadsheet_new_settings_description_label', 'Show columns description'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts index b4a0f5ab89..f4838133f2 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts @@ -33,6 +33,7 @@ export default [ ['data_grid_table_readonly_connection_tooltip', 'Read-only connection'], ['data_grid_table_no_key_found_tooltip', 'No unique key was found. Data modification is not possible.'], ['data_grid_table_virtual_key_tooltip', 'Virtual key'], + ['data_grid_table_key_column_tooltip', 'Key column'], ['plugin_data_spreadsheet_new_settings_disable', 'Disable Table presentation'], ['plugin_data_spreadsheet_new_settings_disable_description', 'Disable table presentation of data for all users'], ['plugin_data_spreadsheet_new_settings_description_label', 'Show columns description'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts index 69154f9a1d..88fb178e17 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts @@ -32,6 +32,7 @@ export default [ ['data_grid_table_index_column_tooltip', 'Sélectionner toute la table'], ['data_grid_table_no_key_found_tooltip', "Aucune clé unique n'a été trouvée. La modification des données n'est pas possible."], ['data_grid_table_virtual_key_tooltip', 'Clé virtuelle'], + ['data_grid_table_key_column_tooltip', 'Colonne clé'], ['data_grid_table_readonly_connection_tooltip', 'Connexion en lecture seule'], ['plugin_data_spreadsheet_new_settings_disable', 'Désactiver la présentation de la table'], ['plugin_data_spreadsheet_new_settings_description_label', 'Show columns description'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts index 2e4fc9310f..c884985c1a 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts @@ -32,6 +32,7 @@ export default [ ['data_grid_table_readonly_connection_tooltip', 'Connessione in sola lettura'], ['data_grid_table_no_key_found_tooltip', 'Nessuna chiave univoca è stata trovata. La modifica dei dati non è possibile.'], ['data_grid_table_virtual_key_tooltip', 'Chiave virtuale'], + ['data_grid_table_key_column_tooltip', 'Colonna chiave'], ['plugin_data_spreadsheet_new_settings_disable', 'Disabilita la presentazione della tabella'], ['plugin_data_spreadsheet_new_settings_description_label', 'Mostra la descrizione delle colonne'], [ diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts index 9c5f55bd97..17438a4b10 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts @@ -33,6 +33,7 @@ export default [ ['data_grid_table_readonly_connection_tooltip', 'Подключение только для чтения'], ['data_grid_table_no_key_found_tooltip', 'Не найден уникальный ключ. Изменение данных невозможно.'], ['data_grid_table_virtual_key_tooltip', 'Виртуальный ключ'], + ['data_grid_table_key_column_tooltip', 'Ключевая колонка'], ['plugin_data_spreadsheet_new_settings_disable', 'Отключить табличное представление'], ['plugin_data_spreadsheet_new_settings_disable_description', 'Отключить табличное представление данных для всех пользователей'], ['plugin_data_spreadsheet_new_settings_description_label', 'Показать описание колонки'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts index 448a876c37..e377d99af3 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts @@ -33,6 +33,7 @@ export default [ ['data_grid_table_readonly_connection_tooltip', 'Kết nối chỉ đọc'], ['data_grid_table_no_key_found_tooltip', 'Không tìm thấy khóa duy nhất. Không thể sửa đổi dữ liệu.'], ['data_grid_table_virtual_key_tooltip', 'Khóa ảo'], + ['data_grid_table_key_column_tooltip', 'Cột khóa'], ['plugin_data_spreadsheet_new_settings_disable', 'Tắt chế độ hiển thị dạng bảng'], ['plugin_data_spreadsheet_new_settings_disable_description', 'Tắt chế độ hiển thị dữ liệu dạng bảng cho tất cả người dùng'], ['plugin_data_spreadsheet_new_settings_description_label', 'Hiển thị mô tả cột'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts index a53e7ef948..0939241f3b 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts @@ -32,6 +32,7 @@ export default [ ['data_grid_table_index_column_tooltip', '选择整个表'], ['data_grid_table_no_key_found_tooltip', '未找到唯一键。无法修改数据。'], ['data_grid_table_virtual_key_tooltip', '虚拟键'], + ['data_grid_table_key_column_tooltip', '键列'], ['data_grid_table_readonly_connection_tooltip', '只读连接'], ['plugin_data_spreadsheet_new_settings_disable', '禁用表显示'], ['plugin_data_spreadsheet_new_settings_description_label', '显示列描述'],