AG-2490 Regression Testing - Header component example isn't working

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "20.1.0",
+  "version": "20.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -37,35 +37,35 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "@babel/core": "7.3.3",
-    "babel-loader": "8.0.5",
-    "@babel/preset-env": "7.3.1",
+    "@babel/core": "7.2.2",
+    "babel-loader": "8.0.4",
+    "@babel/preset-env": "7.2.3",
     "@babel/preset-react": "7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.3.3",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
     "@babel/plugin-proposal-function-bind": "7.2.0",
     "css-loader": "2.1.0",
     "file-loader": "3.0.1",
     "gulp": "3.9.1",
-    "merge2": "1.2.3",
+    "merge2": "^1.2.3",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
-    "prop-types": "15.7.2",
-    "rimraf": "2.6.3",
-    "style-loader": "0.23.1",
-    "webpack": "4.29.5",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.2.0"
+    "prop-types": "15.6.2",
+    "rimraf": "~2.6.2",
+    "style-loader": "~0.23.0",
+    "webpack": "4.28.3",
+    "webpack-cli": "3.2.0",
+    "webpack-dev-server": "3.1.14"
   },
   "dependencies": {
-    "ag-grid-community": "^20.1.0",
-    "ag-grid-enterprise": "^20.1.0",
-    "ag-grid-react": "^20.1.0",
-    "bootstrap": "4.3.1",
+    "ag-grid-community": "^20.0.0",
+    "ag-grid-enterprise": "^20.0.0",
+    "ag-grid-react": "^20.0.0",
+    "bootstrap": "4.1.3",
     "d3": "4.9.1",
-    "lodash": "4.17.11",
-    "react": "16.8.2",
-    "react-dom": "16.8.2",
-    "react-redux": "6.0.1",
+    "lodash": "^4.17.11",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-redux": "6.0.0",
     "react-router-dom": "4.3.1",
     "redux": "4.0.1"
   }

src-examples/App.jsx

@@ -5,14 +5,12 @@ import NavItem from "./NavItem";
 
 import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample";
 import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
-import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample";
 
 const SideBar = () => (
     <div style={{float: "left", width: 335, marginRight: 25}}>
         <ul className="nav nav-pills">
             <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
             <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
-            <NavItem to='/simple-redux-hook'>Simple React Hook Component Example</NavItem>
         </ul>
     </div>
 );
@@ -27,7 +25,6 @@ class App extends Component {
                         <Redirect from="/" exact to="/rich-grid-declarative"/>
                         <Route exact path='/rich-grid-declarative' component={RichGridDeclarativeExample}/>
                         <Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
-                        <Route exact path='/simple-redux-hook' component={SimpleReduxHookExample}/>
                     </Switch>
                 </div>
             </div>

src-examples/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
     <!-- Example uses font awesome icons -->
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
 
     <style>
         html, body {

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -25,12 +25,12 @@ export default class RichGridDeclarativeExample extends Component {
             sideBar: false,
             rowData: new RowDataFactory().createRowData(),
             icons: {
-                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                columnRemoveFromGroup: '<i class="fa fa-times"/>',
                 filter: '<i class="fa fa-filter"/>',
-                sortAscending: '<i class="fa fa-long-arrow-down"/>',
-                sortDescending: '<i class="fa fa-long-arrow-up"/>',
-                groupExpanded: '<i class="fa fa-minus-square-o"/>',
-                groupContracted: '<i class="fa fa-plus-square-o"/>'
+                sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
+                sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
+                groupExpanded: '<i class="far fa-minus-square"/>',
+                groupContracted: '<i class="far fa-plus-square"/>'
             }
         };
     }
@@ -141,8 +141,17 @@ export default class RichGridDeclarativeExample extends Component {
                     </div>
                     <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
                         <div style={{float: "left"}}>
+                            <label>
+                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                                Show Side Bar
+                            </label>
+                        </div>
+                        <div style={{float: "left", marginLeft: 20}}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
+                        <div style={{float: "left", marginLeft: 20}}>
+                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
+                        </div>
                         <div style={{float: "right"}}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
@@ -152,17 +161,6 @@ export default class RichGridDeclarativeExample extends Component {
                             </button>
                         </div>
                     </div>
-                   <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
-                        <div style={{float: "left"}}>
-                            <label>
-                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
-                                Show Side Bar
-                            </label>
-                        </div>
-                        <div style={{float: "left", marginLeft: 20}}>
-                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
-                        </div>
-                    </div>
                     <div style={{height: 400, width: 900}} className="ag-theme-balham">
                         <AgGridReact
                             // listening for events

src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx

@@ -30,10 +30,10 @@ export default class SortableHeaderComponent extends React.Component {
 
             sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'desc')}><i
-                className="fa fa-long-arrow-down"/></div>);
+                className="fa fa-long-arrow-alt-down"/></div>);
             sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'asc')}><i
-                className="fa fa-long-arrow-up"/></div>);
+                className="fa fa-long-arrow-alt-up"/></div>);
             sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
                                    onClick={this.onSortRequested.bind(this, '')}><i
                 className="fa fa-times"/></div>)

src-examples/simpleReduxHooksExample/GridComponent.jsx

@@ -1,32 +0,0 @@
-import React, { useContext } from "react";
-import {Context} from "./store";
-import {AgGridReact} from "ag-grid-react";
-
-/*
- * This component serves to display the row data (provided by redux)
- */
-export default function GridComponent() {
-    const {store, dispatch} = useContext(Context);
-    const {columnDefs, rowData} = store;
-
-    const onGridReady = (params) => {
-        params.api.sizeColumnsToFit();
-    };
-
-    // row data will be provided via redux on this.props.rowData
-    return (
-        <div style={{height: 400, width: 900, marginTop: 15}}
-             className="ag-theme-balham">
-            <AgGridReact
-                // properties
-                columnDefs={columnDefs}
-                rowData={rowData}
-
-                reactNext={true}
-
-                // events
-                onGridReady={onGridReady}>
-            </AgGridReact>
-        </div>
-    )
-}

src-examples/simpleReduxHooksExample/PriceRenderer.jsx

@@ -1,13 +0,0 @@
-import React, {Component} from "react";
-
-export default class PriceRenderer extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <span>{this.props.value}</span>
-        );
-    }
-}

src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx

@@ -1,18 +0,0 @@
-import React, {useReducer} from "react";
-import GridComponent from "./GridComponent";
-
-import {Context, initialState, reducer} from "./store";
-
-export default function SimpleReduxHookExample() {
-    const [store, dispatch] = useReducer(reducer, initialState);
-
-    return (
-        <Context.Provider value={{store, dispatch}}>
-            <div>
-                <h1>Simple Example using Hooks (with useContext and useReducer)</h1>
-                <button onClick={() => dispatch({type: "SET_ROW_DATA"})}>Populate Row Data</button>
-                <GridComponent/>
-            </div>
-        </Context.Provider>
-    )
-}

src-examples/simpleReduxHooksExample/gridDataActions.jsx

@@ -1,14 +0,0 @@
-export function updateRowData(rowData) {
-    return {
-        type: 'ROW_DATA_CHANGED',
-        rowData
-    }
-}
-
-export function setCurrency(currencySymbol, exchangeRate) {
-    return {
-        type: 'CURRENCY_CHANGED',
-        currencySymbol,
-        exchangeRate
-    }
-}

src-examples/simpleReduxHooksExample/store.js

@@ -1,75 +0,0 @@
-import React from "react";
-import PriceRenderer from "./PriceRenderer";
-
-export const initialState = {
-    rowData: [],
-    columnDefs: [
-        {
-            field: 'symbol'
-        },
-        {
-            field: 'price',
-            cellClass: 'align-right',
-            cellRendererFramework: PriceRenderer
-        }
-    ]
-};
-
-export const reducer = (state = {rowData: []}, action) => {
-    switch (action.type) {
-        case 'SET_ROW_DATA':
-            return {
-                ...state,
-                rowData: createRowData()
-            };
-        default:
-            return state;
-    }
-};
-
-export const Context = React.createContext();
-
-
-// for test data
-// the following methods are for creating dummy row data
-const createRowData = () => {
-    let rowData = [];
-
-    for (let i = 0; i < 14; i++) {
-        let newItem = createItem(rowData);
-        rowData.push(newItem);
-    }
-
-    return rowData;
-};
-
-const createItem = (rowData) => {
-    return {
-        symbol: createUniqueRandomSymbol(rowData),
-        price: Math.floor(Math.random() * 100)
-    };
-};
-
-// creates a unique symbol, eg 'ADG' or 'ZJD'
-const createUniqueRandomSymbol = (rowData) => {
-    let symbol;
-    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-
-    let isUnique = false;
-    while (!isUnique) {
-        symbol = '';
-        // create symbol
-        for (let i = 0; i < 3; i++) {
-            symbol += possible.charAt(Math.floor(Math.random() * possible.length));
-        }
-        // check uniqueness
-        isUnique = true;
-        rowData.forEach(function (oldItem) {
-            if (oldItem.symbol === symbol) {
-                isUnique = false;
-            }
-        });
-    }
-
-    return symbol;
-};