Upgrade React to version 17

Upgraded versions of react, react-dom, react-table and other libraries.

Issue-ID: AAI-3277
Signed-off-by: Igor Dysko <igor1.dysko@orange.com>
Change-Id: I79a76dac11054484a56726f7bdc77207bee9f987

12 files changed, 279 insertions, 123 deletions

diff --git a/graphgraph-fe/src/graph_hops.js b/graphgraph-fe/src/graph_hops.js
index da98db2..92b8e40 100644
--- a/graphgraph-fe/src/graph_hops.js
+++ b/graphgraph-fe/src/graph_hops.js
@@ -19,14 +19,14 @@
  */
 
 import React from 'react';
-import { Label } from 'react-bootstrap';
-import NumericInput from 'react-numeric-input';
+import { FormLabel } from 'react-bootstrap';
+import NumericInput from 'react-numeric-input2';
 import './graph_hops.css';
 
 var createNumInput = function (label, callback, current) {
     return (
             <div>
-            <Label>{label}</Label>
+            <FormLabel>{label}</FormLabel>
             <NumericInput onChange={callback} min={1} max={500} value={current} className="hops-input-field"/>
             </div>
     );
diff --git a/graphgraph-fe/src/graph_hops.test.js b/graphgraph-fe/src/graph_hops.test.js
index 18346fb..d74afe7 100644
--- a/graphgraph-fe/src/graph_hops.test.js
+++ b/graphgraph-fe/src/graph_hops.test.js
@@ -22,7 +22,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import GraphHops from './graph_hops';
-import NumericInput from 'react-numeric-input';
+import NumericInput from 'react-numeric-input2';
 
 describe('component GraphHops', () => {
 
diff --git a/graphgraph-fe/src/graph_info_menu.css b/graphgraph-fe/src/graph_info_menu.css
index 6182210..afddd76 100644
--- a/graphgraph-fe/src/graph_info_menu.css
+++ b/graphgraph-fe/src/graph_info_menu.css
@@ -5,10 +5,6 @@
     width: 100%;
 }
 
-.pagination {
-    margin: 0 12px 0 20px !important;
-}
-
 .fixed-height-container {
     overflow: scroll;
     float:top;
@@ -43,7 +39,6 @@
 
 .path-heading {
     margin-top: 6px;
-    color: #333333;
     color: rgb(51, 51, 51);
     background-color: #000000;
     background-color: rgba(0, 0, 0, 0);
@@ -51,14 +46,14 @@
     line-height: 20px;
     vertical-align: bottom;
     letter-spacing: normal;
-    word-spacing: 0px;
+    word-spacing: 0;
     font-weight: 700;
     font-style: normal;
     font-variant: normal;
     text-transform: none;
     text-decoration: none;
     text-align: left;
-    text-indent: 0px;
+    text-indent: 0;
 }
 
 .datatable{
@@ -70,3 +65,29 @@
     margin-right: 0;
     margin-left: 0;
 }
+
+.prop-table-wrapper {
+    padding: 0.4rem;
+}
+
+.prop-table-wrapper table {
+    border-spacing: 0;
+    border: 1px solid black;
+    width: 100%;
+}
+
+.prop-table-wrapper th,td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+    line-height: 0.8rem;
+}
+
+.pagination {
+    padding: 0.5rem;
+}
+
+.pagination-controls {
+    margin: auto;
+}
\ No newline at end of file
diff --git a/graphgraph-fe/src/graph_info_menu.js b/graphgraph-fe/src/graph_info_menu.js
index 66ffbba..5be4424 100644
--- a/graphgraph-fe/src/graph_info_menu.js
+++ b/graphgraph-fe/src/graph_info_menu.js
@@ -22,60 +22,170 @@ import React from 'react';
 import './graph_info_menu.css';
 import PathBreadcrumb from './path_breadcrumb.js';
 import _ from 'underscore';
-import ReactTable from "react-table";
-import "react-table/react-table.css";
+import { useTable, usePagination } from 'react-table'
 
-class GraphInfoMenu extends React.Component {
-    render () {
-        var paths = this.props.paths;
-        var callback = this.props.pathCallback;
+function Table({ columns, data }) {
+
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        prepareRow,
+        page,
+        canPreviousPage,
+        canNextPage,
+        pageOptions,
+        pageCount,
+        gotoPage,
+        nextPage,
+        previousPage,
+        setPageSize,
+        state: { pageIndex, pageSize },
+    } = useTable(
+        {
+            columns,
+            data,
+            initialState: { pageIndex: 0, pageSize: 5 },
+        },
+        usePagination
+    )
+
+    return (
+        <>
+            <table {...getTableProps()}>
+                <thead>
+                {headerGroups.map(headerGroup => (
+                    <tr {...headerGroup.getHeaderGroupProps()}>
+                        {headerGroup.headers.map(column => (
+                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+                        ))}
+                    </tr>
+                ))}
+                </thead>
+                <tbody {...getTableBodyProps()}>
+                {page.map((row, i) => {
+                    prepareRow(row)
+                    return (
+                        <tr {...row.getRowProps()}>
+                            {row.cells.map(cell => {
+                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                            })}
+                        </tr>
+                    )
+                })}
+                </tbody>
+            </table>
+
+            <div className="pagination">
+                <div className="pagination-controls">
+                <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+                    {'<<'}
+                </button>{' '}
+                <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+                    {'<'}
+                </button>{' '}
+                <button onClick={() => nextPage()} disabled={!canNextPage}>
+                    {'>'}
+                </button>{' '}
+                <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+                    {'>>'}
+                </button>{' '}
+                <span>
+                    Page{' '}
+                    <strong>
+                        {pageIndex + 1} of {pageOptions.length}
+                    </strong>{' '}
+                </span>
+                <span>
+                    | Go to page:{' '}
+                    <input
+                        type="number"
+                        defaultValue={pageIndex + 1}
+                        onChange={e => {
+                            const page = e.target.value ? Number(e.target.value) - 1 : 0
+                            gotoPage(page)
+                        }}
+                        style={{ width: '100px' }}
+                    />
+                </span>{' '}
+                <select
+                    value={pageSize}
+                    onChange={e => {
+                        setPageSize(Number(e.target.value))
+                    }}
+                >
+                    {[5, 25, 50].map(pageSize => (
+                        <option key={pageSize} value={pageSize}>
+                            Show {pageSize}
+                        </option>
+                    ))}
+                </select>
+                </div>
+            </div>
+        </>
+    )
+}
+
+const GraphInfoMenu = (props) => {
+
+        const columns = React.useMemo(
+            () => [
+                {
+                    Header: "Attribute",
+                    accessor: "propertyName",
+                    minWidth: 40
+                },
+                {
+                    Header: "Type",
+                    accessor: "type",
+                    minWidth: 70
+                },
+                {
+                    Header: "Description",
+                    accessor: "description",
+                    minWidth: 260
+                },
+                {
+                    id: "Key",
+                    Header: "Key",
+                    accessor: p => p.key ? "yes" : "",
+                    minWidth: 20
+                },
+                {
+                    id: "Index",
+                    Header: "Index",
+                    accessor: p => p.index ? "yes" : "",
+                    minWidth: 20
+                },
+                {
+                    id: "Required",
+                    Header: "Required",
+                    accessor: p => p.required ? "yes" : "",
+                    minWidth: 20
+                }
+            ],
+            []
+        );
+
+        var paths = props.paths;
+        var callback = props.pathCallback;
         var showPaths = _.isArray(paths) && !_.isEmpty(paths);
         var breadcrumbs = _.map(
             paths, (path, i) => <PathBreadcrumb key={i} index={i} pathCallback={callback} path={path}/>);
+
         return (
                 <div className="node-property-list">
                 <div className="fixed-height-container" style={{ display: showPaths ? 'block' : 'none' }}><p className='path-heading'>Paths</p>{breadcrumbs}</div>
                 <div className="kv-table datatable">
-                <ReactTable pageSizeOptions={[4, 25]} data={this.props.nodeProperties} columns={[
-                    {
-                        Header: "Attribute",
-                        accessor: "propertyName",
-                        minWidth: 40
-                    },
-                    {
-                        Header: "Type",
-                        accessor: "type",
-                        minWidth: 70
-                    },
-                    {
-                        Header: "Description",
-                        accessor: "description",
-                        minWidth: 260
-                    },
-                    {
-                        id: "Key",
-                        Header: "Key",
-                        accessor: p => p.key ? "yes" : "",
-                        minWidth: 20
-                    },
-                    {
-                        id: "Index",
-                        Header: "Index",
-                        accessor: p => p.index ? "yes" : "",
-                        minWidth: 20
-                    },
-                    {
-                        id: "Required",
-                        Header: "Required",
-                        accessor: p => p.required ? "yes" : "",
-                        minWidth: 20
-                    }
-                ]} defaultPageSize={4} className="-striped -highlight"
-                />
+
+                <div className={'prop-table-wrapper'}>
+                    <Table columns={columns} data={props.nodeProperties} />
+                </div>
+
                 </div>
                 </div>
         );
-    }
+
 }
 
 export default GraphInfoMenu;
diff --git a/graphgraph-fe/src/graph_settings.css b/graphgraph-fe/src/graph_settings.css
index 2cb08e5..b67c55a 100644
--- a/graphgraph-fe/src/graph_settings.css
+++ b/graphgraph-fe/src/graph_settings.css
@@ -5,18 +5,9 @@
     border-color: #ccc !important;
 }
 
-.schemas-dropdown{
-    width: 60px;
-}
-
-.node-dropdown {
-    width: 200px;
-}
-
-.source-dropdown-div {
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-bottom: 3px;
+.dropdown-div {
+    margin-left: 12px;
+    margin-right: 12px;
 }
 
 .startendnode-dropdown {
@@ -28,9 +19,12 @@
     width: 80px !important;
 }
 
-
 .modal-button {
-    padding-top: 20px;
+    padding-top: 28px;
     margin-left: 5px;
     margin-right: 5px;
 }
+
+label {
+    margin-bottom: 0.25rem !important;
+}
\ No newline at end of file
diff --git a/graphgraph-fe/src/graph_settings.js b/graphgraph-fe/src/graph_settings.js
index 5311582..30e6cb6 100644
--- a/graphgraph-fe/src/graph_settings.js
+++ b/graphgraph-fe/src/graph_settings.js
@@ -20,7 +20,7 @@
 
 import React from 'react';
 import _ from 'underscore';
-import { DropdownButton, MenuItem, Label } from 'react-bootstrap';
+import { DropdownButton, Dropdown, FormLabel } from 'react-bootstrap';
 import './graph_settings.css';
 import Popup from './popup_settings.js';
 import ValidationModal from './validation_modal.js';
@@ -198,60 +198,76 @@ class GraphSettings extends React.Component {
     }
 
     render () {
-        var schemas = _.map(this.state.schemas, (x, k) => <MenuItem key={k} eventKey={x}>{x}</MenuItem>);
+        var schemas = _.map(this.state.schemas, (x, k) => <Dropdown.Item key={k} eventKey={x}>{x}</Dropdown.Item>);
 
-        var items = _.map(this.state.nodeNames, (x, k) => <MenuItem key={k} eventKey={x.id}>{x.id}</MenuItem>);
+        var items = _.map(this.state.nodeNames, (x, k) => <Dropdown.Item key={k} eventKey={x.id}>{x.id}</Dropdown.Item>);
         let sortedNames = _.sortBy(this.state.graph.nodeNames, 'id');
-        var currentNodeNames = _.map(sortedNames, (x, k) => <MenuItem key={k} eventKey={x.id}>{x.id}</MenuItem>);
+        var currentNodeNames = _.map(sortedNames, (x, k) => <Dropdown.Item key={k} eventKey={x.id}>{x.id}</Dropdown.Item>);
 
         var fromItems = items.slice();
-        fromItems.unshift(<MenuItem key='divider' divider/>);
-        fromItems.unshift(<MenuItem key='all' eventKey='all'>all</MenuItem>);
+        fromItems.unshift(<div className="dropdown-divider"></div>);
+        fromItems.unshift(<Dropdown.Item key='all' eventKey='all'>all</Dropdown.Item>);
 
-        items.unshift(<MenuItem key='anotherdivider' divider/>);
-        items.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>);
+        items.unshift(<div className="dropdown-divider"></div>);
+        items.unshift(<Dropdown.Item key='none' eventKey='none'>none</Dropdown.Item>);
 
         let edgeFilterItems = [
-                <MenuItem key='Edgerules' eventKey='Edgerules'>Edgerules</MenuItem>,
-                <MenuItem key='Parents' eventKey='Parents'>Parent-child (OXM structure)</MenuItem>,
+            <Dropdown.Item key='Edgerules' eventKey='Edgerules'>Edgerules</Dropdown.Item>,
+            <Dropdown.Item key='Parents' eventKey='Parents'>Parent-child (OXM structure)</Dropdown.Item>
         ];
         return (
             <div>
                 <div className="graph-menu">
                     <div className="startendnode-dropdown">
                         <div>
-                            <Label>Schemas</Label>
-                            <DropdownButton className="schemas-dropdown" onSelect={this.selectSchema} id="schemas"
-                                            title={this.state.selectedSchema}>{schemas}</DropdownButton>
+                            <FormLabel className="text-nowrap">Schemas</FormLabel>
+                            <DropdownButton onSelect={this.selectSchema}
+                                            id="schemas"
+                                            title={this.state.selectedSchema || 'Select'}>
+                                {schemas}
+                            </DropdownButton>
                         </div>
-                        <div className="source-dropdown-div">
-                            <Label>Source Node</Label>
-                            <DropdownButton className="node-dropdown" onSelect={this.onChangeStartNode} id="namesFrom"
-                                            title={this.state.fromNode}>{fromItems}</DropdownButton>
+                        <div className="dropdown-div">
+                            <FormLabel className="text-nowrap">Source Node</FormLabel>
+                            <DropdownButton onSelect={this.onChangeStartNode}
+                                            id="namesFrom"
+                                            title={this.state.fromNode || 'Select'}>
+                                {fromItems}
+                            </DropdownButton>
                         </div>
                         <div>
-                            <Label>Destination Node</Label>
-                            <DropdownButton disabled={!this.state.enableDestinationNode} className="node-dropdown"
-                                            onSelect={this.onChangeToNode} id="namesTo"
-                                            title={this.state.toNode}>{items}</DropdownButton>
+                            <FormLabel className="text-nowrap">Destination Node</FormLabel>
+                            <DropdownButton disabled={!this.state.enableDestinationNode}
+                                            onSelect={this.onChangeToNode}
+                                            id="namesTo"
+                                            title={this.state.toNode || 'Select'}>
+                                {items}
+                            </DropdownButton>
                         </div>
-                        <div className="source-dropdown-div">
-                            <Label>Edge filter</Label>
-                            <DropdownButton className="node-dropdown" onSelect={this.changeEdgeFilter} id="filterEdge"
-                                            title={this.state.edgeFilter}>{edgeFilterItems}</DropdownButton>
+                        <div className="dropdown-div">
+                            <FormLabel className="text-nowrap">Edge filter</FormLabel>
+                            <DropdownButton onSelect={this.changeEdgeFilter}
+                                            id="filterEdge"
+                                            title={this.state.edgeFilter || 'Select'}>
+                                {edgeFilterItems}
+                            </DropdownButton>
                         </div>
                         <div>
-                            <Label>Selected Node</Label>
-                            <DropdownButton className="node-dropdown" onSelect={this.onSelectNode} id="selectedNode"
-                                            title={this.props.selectedNode}>{currentNodeNames}</DropdownButton>
+                            <FormLabel className="text-nowrap">Selected Node</FormLabel>
+                            <DropdownButton onSelect={this.onSelectNode}
+                                            id="selectedNode"
+                                            title={this.props.selectedNode || 'Select'}>
+                                {currentNodeNames}
+                            </DropdownButton>
                         </div>
                         <Popup isDisabled={!this.state.showHops} edgeFilter={this.state.edgeFilter}
                                parentHops={this.state.hops.parents} childHops={this.state.hops.child}
-                               cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/>
-                        <div className="modal-button">
+                               cousinHops={this.state.hops.cousin} updateHops={this.updateHops}
+                               className={"text-nowrap"}/>
+                        <div className="modal-button text-nowrap">
                             <ValidationModal schemaProblems={this.state.schemaProblems}/>
                         </div>
-                        <div className="modal-button">
+                        <div className="modal-button text-nowrap">
                             <DownloadExport schemaVersion={this.state.selectedSchema}/>
                         </div>
                     </div>
diff --git a/graphgraph-fe/src/graph_settings.test.js b/graphgraph-fe/src/graph_settings.test.js
index 7959831..1cf7463 100644
--- a/graphgraph-fe/src/graph_settings.test.js
+++ b/graphgraph-fe/src/graph_settings.test.js
@@ -25,7 +25,7 @@ import { waitForState, waitForProps } from 'enzyme-async-helpers';
 
 import App from './app';
 import GraphSettings from './graph_settings';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
+import { DropdownButton, Dropdown } from 'react-bootstrap';
 
 const baseUrl = 'http://localhost';
 // fetchMock.config.fallbackToNetwork = true;
@@ -249,7 +249,7 @@ describe('component GraphSettings', () => {
         graphSettings = app.find(GraphSettings);
 
         // 2. assert schema menu items and click on first schema 'v10'
-        let menuItems = graphSettings.find(DropdownButton).at(0).find(MenuItem).find('a');
+        let menuItems = graphSettings.find(DropdownButton).at(0).find(Dropdown.Item).find('a');
         expect( menuItems.map(menuItem => menuItem.text()) ).toEqual(testData.schemas);
         menuItems.first().simulate('click');
 
@@ -271,8 +271,9 @@ describe('component GraphSettings', () => {
         graphSettings = app.find(GraphSettings);
 
         // 2. assert source node menu items and click on 'class-of-service' option
-        let menuItems = graphSettings.find(DropdownButton).at(1).find(MenuItem).find('a');
+        let menuItems = graphSettings.find(DropdownButton).at(1).find(Dropdown.Item).find('a');
         let desiredSourceNodeItems = ['all'].concat(testData.nodes.edgerules.map(node => node.id));
+        menuItems.map(menuItem => console.log("MenuItem: " + menuItem.text()));
         expect( menuItems.map(menuItem => menuItem.text()) ).toEqual(desiredSourceNodeItems);
         menuItems.at(1).simulate('click');
 
@@ -291,7 +292,7 @@ describe('component GraphSettings', () => {
         graphSettings = app.find(GraphSettings);
 
         // 2. assert destination node menu items and click on 'allotted-resource' option
-        let menuItems = graphSettings.find(DropdownButton).at(2).find(MenuItem).find('a');
+        let menuItems = graphSettings.find(DropdownButton).at(2).find(Dropdown.Item).find('a');
         let desiredDestinationNodeItems = ['none'].concat(testData.nodes.edgerules.map(node => node.id));
         expect( menuItems.map(menuItem => menuItem.text()) ).toEqual(desiredDestinationNodeItems);
         
@@ -311,7 +312,7 @@ describe('component GraphSettings', () => {
 
         // switch back destination node to 'none'
         graphSettings.find(DropdownButton).at(2).find('button').simulate('click');
-        graphSettings.find(DropdownButton).at(2).find(MenuItem).find('a').at(0).simulate('click');
+        graphSettings.find(DropdownButton).at(2).find(Dropdown.Item).find('a').at(0).simulate('click');
         
         // wait for data load and set component state
         await waitForState(graphSettings, state => state.toNode === 'none');
@@ -328,7 +329,7 @@ describe('component GraphSettings', () => {
         graphSettings = app.find(GraphSettings);
 
         // 2. assert edge filter menu items and click on 'Parent-child (OXM structure)' option
-        let menuItems = graphSettings.find(DropdownButton).at(3).find(MenuItem).find('a');
+        let menuItems = graphSettings.find(DropdownButton).at(3).find(Dropdown.Item).find('a');
         expect( menuItems.map(menuItem => menuItem.text()) ).toEqual(testData.edgeFilter);
         menuItems.at(1).simulate('click');
 
@@ -347,7 +348,7 @@ describe('component GraphSettings', () => {
         graphSettings = app.find(GraphSettings);
 
         // 2. assert Selected Node menu items and click on 'site-pair' option
-        let menuItems = graphSettings.find(DropdownButton).at(4).find(MenuItem).find('a');
+        let menuItems = graphSettings.find(DropdownButton).at(4).find(Dropdown.Item).find('a');
         let desiredSelectedNodeItems = testData.graph.nodeNames.map(node => node.id);
         expect( menuItems.map(menuItem => menuItem.text()) ).toEqual(desiredSelectedNodeItems);
         menuItems.at(1).simulate('click');
diff --git a/graphgraph-fe/src/graph_settings_menu.js b/graphgraph-fe/src/graph_settings_menu.js
index 583ef8e..9d31061 100644
--- a/graphgraph-fe/src/graph_settings_menu.js
+++ b/graphgraph-fe/src/graph_settings_menu.js
@@ -23,21 +23,17 @@ import GraphSettings from './graph_settings.js';
 import { Navbar } from 'react-bootstrap';
 import './graph_settings_menu.css';
 
-class GraphSettingsMenu extends React.Component {
-    render () {
+const GraphSettingsMenu = (props) => {
         return (
                 <Navbar className='navbar-adjust'>
-                    <Navbar.Header>
-                        <Navbar.Brand>
-                            <a href="https://gerrit.onap.org/r/gitweb?p=aai/graphgraph.git">GraphGraph</a>
-                        </Navbar.Brand>
-                    </Navbar.Header>
+                    <Navbar.Brand>
+                        <a href="https://gerrit.onap.org/r/gitweb?p=aai/graphgraph.git">GraphGraph</a>
+                    </Navbar.Brand>
                     <Navbar.Collapse className='mr-sm-2'>
-                        <GraphSettings selectedNode={this.props.selectedNode} graphData={this.props.graphData} nodePropsLoader={this.props.nodePropsLoader}/>
+                        <GraphSettings selectedNode={props.selectedNode} graphData={props.graphData} nodePropsLoader={props.nodePropsLoader}/>
                     </Navbar.Collapse>
                 </Navbar>
         );
-    }
 }
 
 export default GraphSettingsMenu;
diff --git a/graphgraph-fe/src/index.js b/graphgraph-fe/src/index.js
index 4269967..de34622 100644
--- a/graphgraph-fe/src/index.js
+++ b/graphgraph-fe/src/index.js
@@ -23,7 +23,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './app.js';
 import * as serviceWorker from './service_worker.js';
-import 'bootstrap-css-only/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(<App/>, document.getElementById('root'));
 
diff --git a/graphgraph-fe/src/popup_settings.css b/graphgraph-fe/src/popup_settings.css
index c37c750..8d8e725 100644
--- a/graphgraph-fe/src/popup_settings.css
+++ b/graphgraph-fe/src/popup_settings.css
@@ -1,8 +1,7 @@
 .settings-button {
-    margin-top: 20px;
+    margin-top: 28px;
     margin-left: 25px;
     margin-right: 5px;
-    margin-bottom: 3px;
 }
 
 .close.link-button {
@@ -15,3 +14,26 @@
     text-decoration: none;
     font-size: 25px;
 }
+
+.popup-content {
+    margin: auto;
+    background: rgb(255, 255, 255);
+    width: 50%;
+    padding: 5px;
+}
+
+.popup-arrow {
+    color: rgb(255, 255, 255);
+}
+[role='tooltip'].popup-content {
+    width: 200px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px;
+}
+
+.popup-overlay {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+[data-popup='tooltip'].popup-overlay {
+    background: transparent;
+}
\ No newline at end of file
diff --git a/graphgraph-fe/src/setupTests.js b/graphgraph-fe/src/setupTests.js
index fac1704..e29df40 100644
--- a/graphgraph-fe/src/setupTests.js
+++ b/graphgraph-fe/src/setupTests.js
@@ -1,4 +1,4 @@
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { configure } from 'enzyme';
 
 configure({adapter: new Adapter()});
\ No newline at end of file
diff --git a/graphgraph-fe/src/validation_modal.js b/graphgraph-fe/src/validation_modal.js
index 1944c36..d23b9eb 100644
--- a/graphgraph-fe/src/validation_modal.js
+++ b/graphgraph-fe/src/validation_modal.js
@@ -35,10 +35,6 @@ class ValidationModal extends React.Component {
         };
     }
 
-    renderBackdrop(props) {
-        return <div {...props} className="modal-backdrop"/>;
-    }
-
     render() {
         var problems = this.props.schemaProblems;
         var items = _.map(problems, (problem, i) => <ListGroupItem key={i}>{problem}</ListGroupItem>);