Fixed issues reported in

* Fixed issues reported in 

- Search wasn't working as we were using the wrong row-index, while
  rendering it.
- Fixed the CSS issue with the alignment of the search input box.
- Pass the row object while rendering the 'DataRow' component, to
  improve the performance as it repeatedly calls the filtering function for each row.
- Changed the order of the validators on a field to prioritize the
  'empty' string validator over the unique-id validator in a
  collection.
- Use 'row.index' instead of rowId, while rendering a grid row
This commit is contained in:
Ashesh Vashi 2024-10-01 12:06:59 +05:30 committed by GitHub
parent 28eb2c0b4b
commit 15c37b620e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 23 additions and 22 deletions
web/pgadmin/static/js/SchemaView

View File

@ -12,6 +12,7 @@ import React, {
} from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import PropTypes from 'prop-types';
import { SCHEMA_STATE_ACTIONS } from 'sources/SchemaView/SchemaState';
import { DefaultButton } from 'sources/components/Buttons';
@ -70,16 +71,14 @@ const StyledBox = styled(Box)(({theme}) => ({
},
}));
export function DataGridFormHeader({tableEleRef}) {
export function DataGridFormHeader({tableEleRef, rows}) {
const {
accessPath, field, dataDispatch, options, virtualizer, table,
viewHelperProps,
accessPath, field, dataDispatch, options, virtualizer, viewHelperProps,
} = useContext(DataGridContext);
const {
canAdd, addOnTop, canAddRow, canEdit, expandEditOnAdd, headerFormVisible
} = options;
const rows = table.getRowModel().rows;
const label = field.label || '';
const newRowIndex = useRef(-1);
@ -178,4 +177,5 @@ export function DataGridFormHeader({tableEleRef}) {
DataGridFormHeader.propTypes = {
tableEleRef: CustomPropTypes.ref,
rows: PropTypes.any,
};

View File

@ -146,7 +146,7 @@ export default function DataGridView({
}}>
<StyleDataGridBox className={classList.join(' ')}>
<Box className='DataGridView-grid'>
<GridHeader tableEleRef={tableEleRef} />
<GridHeader tableEleRef={tableEleRef} rows={rows} />
<DndProvider backend={HTML5Backend}>
<PgReactTable
ref={tableEleRef} table={table} data-test="data-grid-view"
@ -169,7 +169,10 @@ export default function DataGridView({
transform: `translateY(${virtualRow.start}px)`,
}}
>
<GridRow rowId={row.id} isResizing={isResizing}/>
<GridRow
rowId={virtualRow.index} isResizing={isResizing}
row={row}
/>
</PgReactTableRow>
);
})

View File

@ -83,7 +83,7 @@ export function DataGridHeader({tableEleRef}) {
<Box className='DataGridView-gridHeader'>
{label && <Box className='DataGridView-gridHeaderText'>{label}</Box>}
<Box className='DataGridView-gridHeader-middle'
style={{flex: 1, padding: 0}}>
style={{flex: 1, padding: 0, display: 'flex'}}>
<SearchBox />
</Box>
<Box className='DataGridView-gridControls'>

View File

@ -21,18 +21,16 @@ import { useFieldOptions } from '../hooks';
import { DataGridContext, DataGridRowContext } from './context';
export function DataGridRow({rowId, isResizing}) {
export function DataGridRow({row, isResizing}) {
const schemaState = useContext(SchemaStateContext);
const { accessPath, options, table, features } = useContext(
const { accessPath, options, features } = useContext(
DataGridContext
);
const rowId = row.index;
const rowAccessPath = schemaState.accessPath(accessPath, rowId);
const rowOptions = useFieldOptions(rowAccessPath, schemaState);
const rowRef = useRef(null);
const row = table.getRowModel().rows[rowId];
/*
* Memoize the row to avoid unnecessary re-render. If table data changes,

View File

@ -61,7 +61,7 @@ function MappedFormControlBase({
}
if (name && _.isNumber(name)) {
name = String('name');
name = String(name);
}
/* The mapping uses Form* components as it comes with labels */

View File

@ -252,6 +252,15 @@ export function validateCollectionSchema(
const rows = sessData[field.id] || [];
const currPath = accessPath.concat(field.id);
// Loop through data.
for(const [rownum, row] of rows.entries()) {
if(validateSchema(
field.schema, row, setError, currPath.concat(rownum), field.label
)) {
return true;
}
}
// Validate duplicate rows.
const dupInd = checkUniqueCol(rows, field.uniqueCol);
@ -271,15 +280,6 @@ export function validateCollectionSchema(
return true;
}
// Loop through data.
for(const [rownum, row] of rows.entries()) {
if(validateSchema(
field.schema, row, setError, currPath.concat(rownum), field.label
)) {
return true;
}
}
return false;
}