From d67757c23a76b1e866ceb25bdcc8f94440c5ab38 Mon Sep 17 00:00:00 2001
From: Sameer Kolhar <kolhar730@gmail.com>
Date: Sat, 6 Jun 2020 15:23:37 +0530
Subject: [PATCH] console: update QueryAnalyzer to support subscriptions (close
 #2541) (#4965)

---
 CHANGELOG.md                                  |  1 +
 .../ApiExplorer/Analyzer/QueryAnalyzer.js     | 27 +++++--------
 .../ApiExplorer/Analyzer/RootFields.tsx       | 40 +++++++++++++++++++
 3 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 console/src/components/Services/ApiExplorer/Analyzer/RootFields.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24fbd3b946d6a..14f62a73d358b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -70,6 +70,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 - server: flush log buffer during shutdown (#4800)
 - server: fix edge case with printing logs on startup failure (fix #4772)
 - console: allow entering big int values in the console (close #3667) (#4775)
+- console: add support for subscriptions analyze in API explorer (close #2541) (#2541)
 - console: avoid count queries for large tables (#4692)
 - console: add read replica support section to pro popup (#4118)
 - console: fix regression in editing permissions manually (fix #4683) (#4826)
diff --git a/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js b/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
index 46b06f07bfed5..3deac6909ef79 100644
--- a/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
+++ b/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-modal';
+import RootFields from './RootFields';
 
 export default class QueryAnalyser extends React.Component {
   constructor() {
@@ -11,6 +12,7 @@ export default class QueryAnalyser extends React.Component {
       activeNode: 0,
     };
   }
+
   componentDidMount() {
     this.props
       .analyzeFetcher(this.props.analyseQuery.query)
@@ -22,7 +24,7 @@ export default class QueryAnalyser extends React.Component {
       })
       .then(data => {
         this.setState({
-          analyseData: data,
+          analyseData: Array.isArray(data) ? data : [data],
           activeNode: 0,
         });
       })
@@ -33,19 +35,6 @@ export default class QueryAnalyser extends React.Component {
   }
   render() {
     const { show, clearAnalyse } = this.props;
-    const analysisList = this.state.analyseData.map((analysis, i) => {
-      return (
-        <li
-          className={i === this.state.activeNode ? 'active' : ''}
-          key={i}
-          data-key={i}
-          onClick={this.handleAnalyseNodeChange.bind(this)}
-        >
-          <i className="fa fa-table" aria-hidden="true" />
-          {analysis.field}
-        </li>
-      );
-    });
     return (
       <Modal
         className="modalWrapper"
@@ -64,7 +53,11 @@ export default class QueryAnalyser extends React.Component {
           <div className="wd25">
             <div className="topLevelNodesWrapper">
               <div className="title">Top level nodes</div>
-              <ul>{analysisList}</ul>
+              <RootFields
+                data={this.state.analyseData}
+                activeNode={this.state.activeNode}
+                onClick={this.handleAnalyseNodeChange}
+              />
             </div>
           </div>
           <div className="wd75">
@@ -171,12 +164,12 @@ export default class QueryAnalyser extends React.Component {
   }
   */
 
-  handleAnalyseNodeChange(e) {
+  handleAnalyseNodeChange = e => {
     const nodeKey = e.target.getAttribute('data-key');
     if (nodeKey) {
       this.setState({ activeNode: parseInt(nodeKey, 10) });
     }
-  }
+  };
   copyToClip(type, id) {
     let text = '';
     if (this.state.analyseData.length > 0) {
diff --git a/console/src/components/Services/ApiExplorer/Analyzer/RootFields.tsx b/console/src/components/Services/ApiExplorer/Analyzer/RootFields.tsx
new file mode 100644
index 0000000000000..7c7d71559794a
--- /dev/null
+++ b/console/src/components/Services/ApiExplorer/Analyzer/RootFields.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+type ExplainPayload = {
+  field: string;
+  sql: string;
+  plan: string[];
+};
+
+type RootFieldsProps = {
+  data: ExplainPayload[];
+  activeNode: number;
+  onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
+};
+
+const RootFields: React.FC<RootFieldsProps> = ({
+  data,
+  activeNode,
+  onClick,
+}) => (
+  <ul>
+    {data.map((analysis, i) => {
+      return (
+        analysis.field && (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          <li
+            className={i === activeNode ? 'active' : ''}
+            key={i}
+            data-key={i}
+            onClick={onClick}
+          >
+            <i className="fa fa-table" aria-hidden="true" />
+            {analysis.field}
+          </li>
+        )
+      );
+    })}
+  </ul>
+);
+
+export default RootFields;