Merge pull request #7417 from skateman/treeview-decouple

Load react-wooden-tree directly, not through react-ui-components

Author: himdel

app/javascript/components/tree-view/field.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Tree, { ActionTypes } from '@manageiq/react-ui-components/dist/wooden-tree';
+import {Tree, ActionTypes } from 'react-wooden-tree';
 import {
   ControlLabel, FieldLevelHelp, FormGroup, HelpBlock,
 } from 'patternfly-react';

app/javascript/components/tree-view/helpers.js

@@ -1,4 +1,4 @@
-import Tree from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree } from 'react-wooden-tree';
 
 /**
  * Helper

app/javascript/components/tree-view/hierarchical-tree-view.jsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import Tree, { Node } from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree, Node } from 'react-wooden-tree';
 
 import { http } from '../../http_api';
 import { combineReducers } from '../../helpers/redux';

app/javascript/components/tree-view/reducers/basicStore.js

@@ -1,4 +1,4 @@
-import Tree from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree } from 'react-wooden-tree';
 import { ACTIONS } from './index';
 import { nodeCheckedWithDirty } from './helpers';
 

app/javascript/components/tree-view/reducers/helpers.js

@@ -1,4 +1,4 @@
-import Tree from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree } from 'react-wooden-tree';
 
 export const nodeCheckedWithDirty = (propNode, value) => {
   let node = { ...propNode };

app/javascript/components/tree-view/reducers/index.js

@@ -1,4 +1,4 @@
-import Tree, { ActionTypes } from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree, ActionTypes } from 'react-wooden-tree';
 import {
   checkAll,
   select,

app/javascript/components/tree-view/reducers/others.js

@@ -1,4 +1,4 @@
-import Tree from '@manageiq/react-ui-components/dist/wooden-tree';
+import { Tree } from 'react-wooden-tree';
 import { nodeCheckedWithDirty } from './helpers';
 
 export const nodeFromKey = (state, key) => Tree.nodeSelector(state, Tree.nodeSearch(state, null, 'key', key)[0]);

app/stylesheet/application-webpack.scss

@@ -5,10 +5,10 @@
 @import '~@pf3/timeline/style.css';
 @import '~@manageiq/react-ui-components/dist/quadicon.css';
 @import '~@manageiq/react-ui-components/dist/textual_summary.css';
-@import '~@manageiq/react-ui-components/dist/wooden-tree.css';
 @import '~@manageiq/ui-components/dist/css/ui-components.css';
 
 @import './carbon.scss';
 @import './menu.scss';
 @import './navbar.scss';
 @import './notifications.scss';
+@import './tree.scss';

app/stylesheet/tree.scss

@@ -0,0 +1,14 @@
+.react-tree-view {
+  ul {
+    padding-left: 0;
+  }
+
+  .dirty {
+    color: #39A5DC;
+  }
+
+  .selected {
+    background-color: #349ad3;
+    color: #FFFFFF;
+  }
+}

package.json

@@ -89,6 +89,7 @@
     "react-router": "~5.1.2",
     "react-router-dom": "~5.1.2",
     "react-select": "~2.4.4",
+    "react-wooden-tree": "^2.2.0",
     "redux": "^4.0.0",
     "redux-mock-store": "^1.5.3",
     "redux-promise-middleware": "^5.1.1",