fix(plugins/plugin-client-common): externalize PatternFly TreeView component to SPI

Fixes #6134

Author: myan9

packages/test/src/api/selectors.ts

@@ -121,8 +121,8 @@ export const INVERTED_COLORS = '.kui--inverted-color-context'
  * Tree
  *
  */
-export const TREE = (N: number) => `${SIDECAR_TAB_CONTENT(N)} .kui--treeview`
-export const TREE_VIEWS_AND_BODY = (N: number) => `${TREE(N)} .kui--treeview-nav-and-body`
+export const TREE = (N: number) => `${SIDECAR_TAB_CONTENT(N)} .kui--tree`
+export const TREE_VIEWS_AND_BODY = (N: number) => `${TREE(N)} .kui--tree-nav-and-body`
 export const TREE_VIEWS = (N: number) => `${TREE_VIEWS_AND_BODY(N)} ul[role="tree"]`
 export const _TREE_LIST = (id: string) => `li[id="${id}"]`
 export const TREE_LIST = (N: number, id: string) => `${TREE_VIEWS(N)} ${_TREE_LIST(id)}`

plugins/plugin-client-common/src/components/Content/KuiContent.tsx

@@ -38,7 +38,7 @@ import {
 import Eval from './Eval'
 import Editor from './Editor'
 import renderTable from './Table'
-import TreeView from './TreeView'
+import Tree from './Tree'
 import Markdown from './Markdown'
 import HTMLString from './HTMLString'
 import HTMLDom from './Scalar/HTMLDom'
@@ -131,7 +131,7 @@ export default class KuiMMRContent extends React.Component<KuiMMRProps, State> {
       } else if (isHTML(mode.content)) {
         return <HTMLDom content={mode.content} />
       } else if (isTreeResponse(mode.content)) {
-        return <TreeView tab={this.props.tab} data={mode.content.data} response={this.props.response} />
+        return <Tree tab={this.props.tab} data={mode.content.data} response={this.props.response} />
       } else {
         console.error('Unsupported scalar content', mode)
       }

plugins/plugin-client-common/src/components/Content/TreeView.tsx renamed to plugins/plugin-client-common/src/components/Content/Tree.tsx

@@ -15,12 +15,12 @@
  */
 
 import React from 'react'
-import { TreeView } from '@patternfly/react-core'
 
 import { MultiModalResponse, Tab, TreeItem, TreeResponse } from '@kui-shell/core'
-import Editor from '../Content/Editor'
+import TreeView from '../spi/TreeView'
+import Editor from './Editor'
 
-import '../../../web/scss/components/TreeView/PatternFly.scss'
+import '../../../web/scss/components/Tree/index.scss'
 
 interface Props {
   response: MultiModalResponse
@@ -75,8 +75,8 @@ export default class KuiTreeView extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <div className="kui--treeview">
-        <div className="kui--treeview-nav-and-body">
+      <div className="kui--tree">
+        <div className="kui--tree-nav-and-body">
           {this.tree()}
           {this.editor()}
         </div>

plugins/plugin-client-common/src/components/spi/TreeView/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import { TreeView, TreeViewProps } from '@patternfly/react-core'
+
+export default function KuiTreeView(props: TreeViewProps): React.ReactElement {
+  return <TreeView {...props} />
+}

plugins/plugin-client-common/web/scss/components/Tree/_mixin.scss

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin Tree {
+  .kui--tree {
+    @content;
+  }
+}
+
+@mixin TreeNavAndBody {
+  .kui--tree-nav-and-body {
+    @content;
+  }
+}

plugins/plugin-client-common/web/scss/components/TreeView/PatternFly.scss renamed to plugins/plugin-client-common/web/scss/components/Tree/index.scss

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
-@import '_mixins';
+@import '_mixin.scss';
+@import '../TreeView/mixins';
 
-.kui--treeview-nav-and-body {
-  display: flex;
+@include Tree {
+  @include TreeNavAndBody {
+    display: flex;
+  }
 
   @include TreeViewNav {
     background-color: var(--color-sidecar-header);