Upgrade react-table from v7 to v8. #7419

2025-02-25 18:55:31 -06:00 · 2024-05-07 16:31:04 +05:30
parent 3e6bd29198
commit 5ec6faff13
32 changed files with 1468 additions and 1481 deletions
--- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
@@ -99,7 +99,8 @@ export default function Processes() {
  const classes = useStyles();
  const pgAdmin = usePgAdmin();
  const [tableData, setTableData] = React.useState([]);
-  const [selectedRows, setSelectedRows] = React.useState([]);
+  const [selectedRows, setSelectedRows] = React.useState({});
+  const selectedRowIDs = useMemo(()=>Object.keys(selectedRows).filter((k)=>selectedRows[k]), [selectedRows]);

  const onViewDetailsClick = useCallback((p)=>{
    const panelTitle = gettext('Process Watcher - %s', p.type_desc);
@@ -123,7 +124,7 @@ export default function Processes() {
      row: PropTypes.any,
    };

-    const CancelCell = ({ row }) => {
+    const CancelCell = ({row}) => {
      return (
        <PgIconButton
          size="xs"
@@ -170,93 +171,91 @@ export default function Processes() {
    StatusCell.propTypes = cellPropTypes;

    return [{
-      accessor: 'stop_process',
-      Header: () => null,
-      sortable: false,
-      resizable: false,
-      disableGlobalFilter: true,
-      width: 35,
-      maxWidth: 35,
-      minWidth: 35,
+      header: () => null,
+      enableSorting: false,
+      enableResizing: false,
+      enableFilters: false,
+      size: 35,
+      maxSize: 35,
+      minSize: 35,
      id: 'btn-stop',
-      Cell: CancelCell,
+      cell: CancelCell,
    },
    {
-      accessor: 'view_details',
-      Header: () => null,
-      sortable: false,
-      resizable: false,
-      disableGlobalFilter: true,
-      width: 35,
-      maxWidth: 35,
-      minWidth: 35,
+      header: () => null,
+      enableSorting: false,
+      enableResizing: false,
+      enableFilters: false,
+      size: 35,
+      maxSize: 35,
+      minSize: 35,
      id: 'btn-logs',
-      Cell: LogsCell,
+      cell: LogsCell,
    },
    {
-      Header: gettext('PID'),
-      accessor: 'utility_pid',
-      sortable: true,
-      resizable: false,
+      header: gettext('PID'),
+      accessorKey: 'utility_pid',
+      enableSorting: true,
+      enableResizing: false,
      width: 70,
      minWidth: 70,
-      disableGlobalFilter: false,
+      enableFilters: true,
    },
    {
-      Header: gettext('Type'),
-      accessor: (row)=>row.details?.type,
-      sortable: true,
-      resizable: true,
+      header: gettext('Type'),
+      accessorFn: (row)=>row.details?.type,
+      enableSorting: true,
+      enableResizing: true,
      width: 100,
      minWidth: 70,
-      disableGlobalFilter: false,
+      enableFilters: true,
    },
    {
-      Header: gettext('Server'),
-      accessor: (row)=>row.details?.server,
-      sortable: true,
-      resizable: true,
+      header: gettext('Server'),
+      accessorFn: (row)=>row.details?.server,
+      enableSorting: true,
+      enableResizing: true,
      width: 200,
      minWidth: 120,
-      disableGlobalFilter: false,
+      enableFilters: true,
    },
    {
-      Header: gettext('Object'),
-      accessor: (row)=>row.details?.object,
-      sortable: true,
-      resizable: true,
+      header: gettext('Object'),
+      accessorFn: (row)=>row.details?.object,
+      enableSorting: true,
+      enableResizing: true,
      width: 200,
      minWidth: 120,
-      disableGlobalFilter: false,
+      enableFilters: true,
    },
    {
      id: 'stime',
-      Header: gettext('Start Time'),
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: true,
+      header: gettext('Start Time'),
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: false,
      width: 150,
      minWidth: 150,
-      accessor: (row)=>(new Date(row.stime)),
-      Cell: ({row})=>(new Date(row.original.stime).toLocaleString()),
+      accessorFn: (row)=>(new Date(row.stime)),
+      cell: (info)=>(info.getValue().toLocaleString()),
    },
    {
-      Header: gettext('Status'),
-      sortable: true,
-      resizable: false,
-      disableGlobalFilter: false,
+      header: gettext('Status'),
+      enableSorting: true,
+      enableResizing: false,
+      enableFilters: true,
      width: 120,
      minWidth: 120,
-      accessor: (row)=>ProcessStateTextAndColor[row.process_state][0],
+      accessorFn: (row)=>ProcessStateTextAndColor[row.process_state][0],
      dataClassName: classes.noPadding,
-      Cell: StatusCell,
+      cell: StatusCell,
    },
    {
-      Header: gettext('Time Taken (sec)'),
-      accessor: 'execution_time',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: true,
+      header: gettext('Time Taken (sec)'),
+      accessorKey: 'execution_time',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: false,
    }];
  }, []);

@@ -281,10 +280,10 @@ export default function Processes() {
      columns={columns}
      data={tableData}
      sortOptions={[{id: 'stime', desc: true}]}
-      getSelectedRows={(rows)=>{setSelectedRows(rows);}}
-      isSelectRow={true}
+      selectedRows={selectedRows}
+      setSelectedRows={setSelectedRows}
+      hasSelectRow={true}
      tableProps={{
-        autoResetSelectedRows: false,
        getRowId: (row)=>{
          return row.id;
        }
@@ -299,10 +298,11 @@ export default function Processes() {
                title={gettext('Acknowledge and Remove')}
                onClick={() => {
                  pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
-                    pgAdmin.Browser.BgProcessManager.acknowledge(selectedRows.map((p)=>p.original.id));
+                    pgAdmin.Browser.BgProcessManager.acknowledge(selectedRowIDs);
+                    setSelectedRows({});
                  });
                }}
-                disabled={selectedRows.length <= 0}
+                disabled={selectedRowIDs.length <= 0}
              ></PgIconButton>
              <PgIconButton
                icon={<HelpIcon style={{height: '1.4rem'}}/>}
--- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
+++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
@@ -83,29 +83,30 @@ function Dependencies({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStal

  let columns = [
    {
-      Header: 'Type',
-      accessor: 'type',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
-      Cell: ({row})=>{
-        return pgAdmin.Browser.Nodes?.[row.original.type]?.label??row.original.type;
+      header: 'Type',
+      accessorKey: 'type',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
+      cell: (info)=>{
+        const type = info.getValue();
+        return pgAdmin.Browser.Nodes?.[type]?.label ?? type;
      }
    },
    {
-      Header: 'Name',
-      accessor: 'name',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'Name',
+      accessorKey: 'name',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
    {
-      Header: 'Restriction',
-      accessor: 'field',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
-      minWidth: 280,
+      header: 'Restriction',
+      accessorKey: 'field',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
+      minSize: 280,
    },
  ];

--- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx
+++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
@@ -83,29 +83,30 @@ function Dependents({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale,

  let columns = [
    {
-      Header: 'Type',
-      accessor: 'type',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
-      Cell: ({row})=>{
-        return pgAdmin.Browser.Nodes?.[row.original.type]?.label??row.original.type;
+      header: 'Type',
+      accessorKey: 'type',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
+      cell: (info)=>{
+        const type = info.getValue();
+        return pgAdmin.Browser.Nodes?.[type]?.label ?? type;
      }
    },
    {
-      Header: 'Name',
-      accessor: 'name',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'Name',
+      accessorKey: 'name',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
    {
-      Header: 'Restriction',
-      accessor: 'field',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
-      minWidth: 280,
+      header: 'Restriction',
+      accessorKey: 'field',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
+      minSize: 280,
    },
  ];

--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -23,7 +23,7 @@ import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
 import Loader from 'sources/components/Loader';
 import { evalFunc } from '../../static/js/utils';
 import { usePgAdmin } from '../../static/js/BrowserComponent';
-import { getSwitchCell } from '../../static/js/components/PgTable';
+import { getSwitchCell } from '../../static/js/components/PgReactTableStyled';

 const useStyles = makeStyles((theme) => ({
  emptyPanel: {
@@ -81,48 +81,38 @@ export default function CollectionNodeProperties({

  const [data, setData] = React.useState([]);
  const [infoMsg, setInfoMsg] = React.useState('Please select an object in the tree view.');
-  const [selectedObject, setSelectedObject] = React.useState([]);
+  const [selectedObject, setSelectedObject] = React.useState({});
  const [loaderText, setLoaderText] = React.useState('');
  const schemaRef = React.useRef();

  const [pgTableColumns, setPgTableColumns] = React.useState([
    {
-      Header: 'properties',
-      accessor: 'Properties',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'properties',
+      accessorKey: 'Properties',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
    {
-      Header: 'value',
-      accessor: 'value',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'value',
+      accessorKey: 'value',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
  ]);

-  const getTableSelectedRows = (selRows) => {
-    setSelectedObject(selRows);
-  };
-
  const onDrop = (type) => {
-    let selRowModels = selectedObject,
-      selRows = [],
+    let selRows = [],
      selItem = pgAdmin.Browser.tree.selected(),
      selectedItemData = selItem ? pgAdmin.Browser.tree.itemData(selItem) : null,
      selNode = selectedItemData && pgAdmin.Browser.Nodes[selectedItemData._type],
      url, msg, title;

-    if (selNode?.type == 'coll-constraints') {
-      // In order to identify the constraint type, the type should be passed to the server
-      selRows = selRowModels.map((row) => ({
-        id: row.original.oid,
-        _type: row.original._type,
-      }));
-    } else {
-      selRows = selRowModels.map((row) => row.original[schemaRef.current.idAttribute]);
-    }
+    selRows = Object.keys(selectedObject).map((i)=>(selNode?.type == 'coll-constraints' ? {
+      id: data[i].oid,
+      _type: data[i]._type,
+    } : data[i][schemaRef.current.idAttribute]));

    if (selRows.length === 0) {
      pgAdmin.Browser.notifier.alert(
@@ -166,6 +156,7 @@ export default function CollectionNodeProperties({
          }
          pgAdmin.Browser.tree.refresh(selItem);
          setIsStale(true);
+          setSelectedObject({});
        })
        .catch(function (error) {
          pgAdmin.Browser.notifier.alert(
@@ -209,22 +200,20 @@ export default function CollectionNodeProperties({
          if (node.columns.indexOf(field.id) > -1) {
            if (field.label.indexOf('?') > -1) {
              column = {
-                Header: field.label,
-                accessor: field.id,
-                sortable: true,
-                resizable: true,
-                disableGlobalFilter: false,
-                minWidth: 0,
-                Cell: getSwitchCell()
+                header: field.label,
+                accessorKey: field.id,
+                enableSorting: true,
+                enableResizing: true,
+                enableFilters: true,
+                cell: getSwitchCell()
              };
            } else {
              column = {
-                Header: field.label,
-                accessor: field.id,
-                sortable: true,
-                resizable: true,
-                disableGlobalFilter: false,
-                minWidth: 0,
+                header: field.label,
+                accessorKey: field.id,
+                enableSorting: true,
+                enableResizing: true,
+                enableFilters: true,
              };
            }
            tableColumns.push(column);
@@ -233,12 +222,11 @@ export default function CollectionNodeProperties({
      }else{
        node.columns.forEach((field) => {
          column = {
-            Header: field,
-            accessor: field,
-            sortable: true,
-            resizable: true,
-            disableGlobalFilter: false,
-            minWidth: 0,
+            header: field,
+            accessorKey: field,
+            enableSorting: true,
+            enableResizing: true,
+            enableFilters: true,
          };
          tableColumns.push(column);
        });
@@ -283,7 +271,7 @@ export default function CollectionNodeProperties({
              onDrop('drop');
            }}
            disabled={
-              (selectedObject.length > 0)
+              (Object.keys(selectedObject).length > 0)
                ? !canDrop
                : true
            }
@@ -296,7 +284,7 @@ export default function CollectionNodeProperties({
              onDrop('dropCascade');
            }}
            disabled={
-              (selectedObject.length > 0)
+              (Object.keys(selectedObject).length > 0)
                ? !canDropCascade
                : true
            }
@@ -309,7 +297,7 @@ export default function CollectionNodeProperties({
                onDrop('dropForce');
              }}
              disabled={
-                (selectedObject.length > 0)
+                (Object.keys(selectedObject).length > 0)
                  ? !canDropForce
                  : true
              }
@@ -325,14 +313,15 @@ export default function CollectionNodeProperties({
        {data.length > 0 ?
          (
            <PgTable
-              isSelectRow={!('catalog' in treeNodeInfo) && (nodeData.label !== 'Catalogs') && _.isUndefined(node?.canSelect)}
+              hasSelectRow={!('catalog' in treeNodeInfo) && (nodeData.label !== 'Catalogs') && _.isUndefined(node?.canSelect)}
              CustomHeader={CustomHeader}
              className={classes.autoResizer}
              columns={pgTableColumns}
              data={data}
              type={'panel'}
              isSearch={false}
-              getSelectedRows={getTableSelectedRows}
+              selectedRows={selectedObject}
+              setSelectedRows={setSelectedObject}
            />
          )
          :
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -60,29 +60,29 @@ function getColumn(data, singleLineStatistics, prettifyFields=[]) {
    if (!_.isUndefined(data)) {
      data.forEach((row) => {
        columns.push({
-          Header: row.name,
-          accessor: row.name,
-          sortable: true,
-          resizable: true,
-          disableGlobalFilter: false,
+          header: row.name,
+          accessorKey: row.name,
+          enableSorting: true,
+          enableResizing: true,
+          enableFilters: true,
        });
      });
    }
  } else {
    columns = [
      {
-        Header: gettext('Statistics'),
-        accessor: 'name',
-        sortable: true,
-        resizable: true,
-        disableGlobalFilter: false,
+        header: gettext('Statistics'),
+        accessorKey: 'name',
+        enableSorting: true,
+        enableResizing: true,
+        enableFilters: true,
      },
      {
-        Header: 'Value',
-        accessor: 'value',
-        sortable: false,
-        resizable: true,
-        disableGlobalFilter: false,
+        header: 'Value',
+        accessorKey: 'value',
+        enableSorting: false,
+        enableResizing: true,
+        enableFilters: true,
      },
    ];
  }
@@ -153,18 +153,18 @@ function Statistics({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale,
  const [loaderText, setLoaderText] = React.useState('');
  const [columns, setColumns] = React.useState([
    {
-      Header: 'Statictics',
-      accessor: 'name',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'Statictics',
+      accessorKey: 'name',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
    {
-      Header: 'Value',
-      accessor: 'value',
-      sortable: true,
-      resizable: true,
-      disableGlobalFilter: false,
+      header: 'Value',
+      accessorKey: 'value',
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
    },
  ]);
  const pgAdmin = usePgAdmin();