From 315d1a40a48d3f31cd24a25e281ea3417da0d43f Mon Sep 17 00:00:00 2001 From: Ashesh Vashi Date: Mon, 16 Sep 2024 17:55:43 +0530 Subject: [PATCH] Fixes issues #7884 * Introduced a 'exclude' option in the 'Field' to exclude it from the change completely. Use the option 'exclude' to add field 'notNullColumns', which will be excluded from the data, but - can be used to force rerender the 'Not Null Columns' select control on change of it. * Fixed the linter issue * Rerender the cell as well, when dependent changes values. (#7884) * Listen for the depenent changes even for the non-visible controls * Use 'useRef' on every rendering to avoid the React 'Something wrong' page --- .../static/js/SchemaView/DataGridView/grid.jsx | 3 ++- .../js/SchemaView/DataGridView/mappedCell.jsx | 15 ++++++++++++--- web/pgadmin/static/js/SchemaView/FieldSetView.jsx | 4 +++- web/pgadmin/static/js/SchemaView/FormView.jsx | 4 +++- web/pgadmin/static/js/SchemaView/InlineView.jsx | 3 ++- .../static/js/SchemaView/MappedControl.jsx | 3 +-- .../js/SchemaView/utils/listenDepChanges.js | 4 ++-- .../static/js/components/dialogs/MacrosDialog.jsx | 4 ++-- 8 files changed, 27 insertions(+), 13 deletions(-) diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx index ad61929c1..077a783e8 100644 --- a/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx +++ b/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx @@ -70,7 +70,8 @@ export default function DataGridView({ ); }, [refreshKey]); - listenDepChanges(accessPath, field, options.visible, schemaState); + // We won't refresh the whole grid on dependent changes. + listenDepChanges(accessPath, field, schemaState); if (!features.current) { features.current = new FeatureSet(); diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx index 6c422d09e..1c29fa228 100644 --- a/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx +++ b/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx @@ -39,8 +39,13 @@ export function getMappedCell({field}) { ); let value = useFieldValue(colAccessPath, schemaState, subscriberManager); let rowValue = useFieldValue(rowAccessPath, schemaState); + const rerenderCellOnDepChange = (...args) => { + subscriberManager.current?.signal(...args); + }; - listenDepChanges(colAccessPath, field, true, schemaState); + listenDepChanges( + colAccessPath, field, schemaState, rerenderCellOnDepChange + ); if (!field.id) { console.error(`No id set for the field: ${field}`); @@ -93,9 +98,13 @@ export function getMappedCell({field}) { props.cell = 'unknown'; } + const memDeps = [ + ...flatternObject(colOptions), value, row.index, + field?.deps?.map((dep) => rowValue[dep]) + ]; + return useMemo( - () => , - [...flatternObject(colOptions), value, row.index] + () => , memDeps ); }; diff --git a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx index ead9295ab..69361c1ed 100644 --- a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx +++ b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx @@ -36,7 +36,9 @@ export default function FieldSetView({ const label = field.label; - listenDepChanges(accessPath, field, options.visible, schemaState); + listenDepChanges( + accessPath, field, schemaState, () => subscriberManager.current?.signal() + ); const fieldGroups = useMemo( () => createFieldControls({ diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index 0d47b25b7..2a16dfec7 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/web/pgadmin/static/js/SchemaView/FormView.jsx @@ -133,7 +133,9 @@ export default function FormView({ } }, [isOnScreen]); - listenDepChanges(accessPath, field, visible, schemaState); + listenDepChanges( + accessPath, field, schemaState, () => subscriberManager.current?.signal() + ); // Upon reset, set the tab to first. useEffect(() => { diff --git a/web/pgadmin/static/js/SchemaView/InlineView.jsx b/web/pgadmin/static/js/SchemaView/InlineView.jsx index c692729b8..68ef501c1 100644 --- a/web/pgadmin/static/js/SchemaView/InlineView.jsx +++ b/web/pgadmin/static/js/SchemaView/InlineView.jsx @@ -28,8 +28,9 @@ export default function InlineView({ const { visible } = accessPath ? useFieldOptions(accessPath, schemaState) : { visible: true }; + // We won't rerender the InlineView on changes of the dependencies. if (!accessPath || isPropertyMode) - listenDepChanges(accessPath, field, visible, schemaState); + listenDepChanges(accessPath, field, schemaState); // Check whether form is kept hidden by visible prop. // We don't support inline-view in 'property' mode diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx index 9aed32e05..7512a95a6 100644 --- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx +++ b/web/pgadmin/static/js/SchemaView/MappedControl.jsx @@ -363,8 +363,7 @@ export const MappedFormControl = ({ }; const depVals = listenDepChanges( - accessPath, field, options.visible, schemaState, state, - avoidRenderingWhenNotMounted + accessPath, field, schemaState, avoidRenderingWhenNotMounted ); let newProps = { diff --git a/web/pgadmin/static/js/SchemaView/utils/listenDepChanges.js b/web/pgadmin/static/js/SchemaView/utils/listenDepChanges.js index 5c7d92f18..78f6ec089 100644 --- a/web/pgadmin/static/js/SchemaView/utils/listenDepChanges.js +++ b/web/pgadmin/static/js/SchemaView/utils/listenDepChanges.js @@ -14,7 +14,7 @@ import { evalFunc } from 'sources/utils'; export const listenDepChanges = ( - accessPath, field, visible, schemaState, data, setRefreshKey + accessPath, field, schemaState, setRefreshKey ) => { const deps = field?.deps ? (evalFunc(null, field.deps) || []) : null; const parentPath = accessPath ? [...accessPath] : []; @@ -25,7 +25,7 @@ export const listenDepChanges = ( } useEffect(() => { - if (!visible || !schemaState || !field) return; + if (!schemaState || !field) return; if(field.depChange || field.deferredDepChange) { schemaState.addDepListener( diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx index 86cb2b35a..40bcdc685 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx @@ -188,12 +188,12 @@ export default function MacrosDialog({onClose, onSave}) { value: m.id, })); + const schema = React.useRef(null); + if(keyOptions.length <= 0) { return <>; } - const schema = React.useRef(null); - if (!schema.current) schema.current = new MacrosSchema(keyOptions);