diff --git a/frontend/src/components/DataGridColumnInfoPopoverContent.tsx b/frontend/src/components/DataGridColumnInfoPopoverContent.tsx index 4b925b00..9af3c70b 100644 --- a/frontend/src/components/DataGridColumnInfoPopoverContent.tsx +++ b/frontend/src/components/DataGridColumnInfoPopoverContent.tsx @@ -1,6 +1,13 @@ import React from 'react'; import { Button, Checkbox, Input } from 'antd'; import { t as defaultTranslate, type I18nParams } from '../i18n'; +import { + loadGlobalHiddenColumns, + parseGlobalHiddenColumnsText, + saveGlobalHiddenColumns, + serializeGlobalHiddenColumns, + subscribeGlobalHiddenColumns, +} from '../utils/globalHiddenColumns'; export type DataGridColumnInfoTranslate = (key: string, params?: I18nParams) => string; @@ -27,6 +34,13 @@ export interface DataGridColumnInfoPopoverContentProps { onResetHidden: () => void; } +const GLOBAL_HIDDEN_LABEL = 'Global hidden columns'; +const GLOBAL_HIDDEN_HELP = 'Column names listed here are hidden in query results wherever they appear. Separate names with comma or newline.'; +const GLOBAL_HIDDEN_PLACEHOLDER = 'id\ncreated_by\nupdated_at'; +const GLOBAL_HIDDEN_SAVE = 'Apply global'; +const GLOBAL_HIDDEN_ADD_LOCAL = 'Add current hidden'; +const GLOBAL_HIDDEN_CLEAR = 'Clear global'; + const DataGridColumnInfoPopoverContent: React.FC = ({ darkMode, showColumnComment, @@ -48,68 +62,107 @@ const DataGridColumnInfoPopoverContent: React.FC ( -
-
- {translate('data_grid.column_settings.display_settings')} -
- onShowColumnCommentChange(e.target.checked)}> - {translate('data_grid.column_settings.show_comments')} - - onShowColumnTypeChange(e.target.checked)}> - {translate('data_grid.column_settings.show_types')} - -
+}) => { + const [globalHiddenText, setGlobalHiddenText] = React.useState(() => serializeGlobalHiddenColumns(loadGlobalHiddenColumns())); -
- {translate('data_grid.column_settings.column_visibility')} + React.useEffect(() => subscribeGlobalHiddenColumns((columns) => { + setGlobalHiddenText(serializeGlobalHiddenColumns(columns)); + }), []); + + const saveGlobalHiddenText = React.useCallback(() => { + setGlobalHiddenText(serializeGlobalHiddenColumns(saveGlobalHiddenColumns(parseGlobalHiddenColumnsText(globalHiddenText)))); + }, [globalHiddenText]); + + const addCurrentHiddenColumnsToGlobal = React.useCallback(() => { + const next = [ + ...parseGlobalHiddenColumnsText(globalHiddenText), + ...localHiddenColumns, + ]; + setGlobalHiddenText(serializeGlobalHiddenColumns(saveGlobalHiddenColumns(next))); + }, [globalHiddenText, localHiddenColumns]); + + const clearGlobalHiddenColumns = React.useCallback(() => { + setGlobalHiddenText(serializeGlobalHiddenColumns(saveGlobalHiddenColumns([]))); + }, []); + + return ( +
+
+ {translate('data_grid.column_settings.display_settings')} +
+ onShowColumnCommentChange(e.target.checked)}> + {translate('data_grid.column_settings.show_comments')} + + onShowColumnTypeChange(e.target.checked)}> + {translate('data_grid.column_settings.show_types')} + +
+ + + onColumnSearchTextChange(e.target.value)} + allowClear + /> +
+ {allOrderedColumnNames + .filter((col) => !columnSearchText || col.toLowerCase().includes(columnSearchText.toLowerCase())) + .map((col) => ( + onToggleColumnVisibility(col, e.target.checked)} + style={{ marginLeft: 0 }} + > + {col} + + ))} +
+ +
+
{GLOBAL_HIDDEN_LABEL}
+
{GLOBAL_HIDDEN_HELP}
+ setGlobalHiddenText(event.target.value)} + /> + + +
+ onEnableColumnOrderMemoryChange(e.target.checked)}> + {translate('data_grid.column_settings.remember_column_order')} + + onEnableHiddenColumnMemoryChange(e.target.checked)}> + {translate('data_grid.column_settings.remember_hidden_columns')} + +
+ +
- onColumnSearchTextChange(e.target.value)} - allowClear - /> -
- {allOrderedColumnNames - .filter((col) => !columnSearchText || col.toLowerCase().includes(columnSearchText.toLowerCase())) - .map((col) => ( - onToggleColumnVisibility(col, e.target.checked)} - style={{ marginLeft: 0 }} - > - {col} - - ))} -
- -
- onEnableColumnOrderMemoryChange(e.target.checked)}> - {translate('data_grid.column_settings.remember_column_order')} - - onEnableHiddenColumnMemoryChange(e.target.checked)}> - {translate('data_grid.column_settings.remember_hidden_columns')} - -
- - -
-
-); + ); +}; export default DataGridColumnInfoPopoverContent;