From e5f4cf85bacc9be61e82a5358a6d8769017255c3 Mon Sep 17 00:00:00 2001
From: Varun Choudhary <68095256+Varun-Choudhary@users.noreply.github.com>
Date: Tue, 25 Jun 2024 15:48:05 +0530
Subject: [PATCH] console: fix invalid query analyse data issue

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10905
GitOrigin-RevId: 402789fe807f192c841b12ea4ec322207fc861ae
---
 .../Services/ApiExplorer/Analyzer/QueryAnalyzer.js     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
index 16e75901c30..1aa092e4f4a 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
@@ -47,7 +47,9 @@ export default class QueryAnalyser extends React.Component {
       .then(data => {
         // todo: unsure if this guard is necessary. Replaces previous guard that would silently return
         // this was previously necessary as the analyze fetcher would handle errors without throwing
-        if (!data) {
+        const isNotValidData =
+          data && data[0]?.plan === null && data[0]?.sql === null;
+        if (isNotValidData) {
           console.error(
             'Missing data from analyze result. This should never happen.'
           );
@@ -70,7 +72,7 @@ export default class QueryAnalyser extends React.Component {
       <Modal
         className="flex flex-col p-10 rounded-xl w-full z-[101]"
         overlayClassName="fixed top-0 left-0 right-0 bottom-6 bg-white bg-opacity-75 z-[101]"
-        isOpen={show && this.state.analyseData.length > 0}
+        isOpen={show && !!this.state?.analyseData?.length}
       >
         <div className="bg-[#43495a] border-b border-gray-200 py-sm px-md flex justify-between">
           <div className="font-xl font-bold text-[#ffc627]">Query Analysis</div>
@@ -118,7 +120,7 @@ export default class QueryAnalyser extends React.Component {
                       dangerouslySetInnerHTML={{
                         __html:
                           this.state.activeNode >= 0 &&
-                          this.state.analyseData.length > 0 &&
+                          !!this.state?.analyseData?.length &&
                           hljs.highlight(
                             'sql',
                             sqlFormatter.format(
@@ -156,7 +158,7 @@ export default class QueryAnalyser extends React.Component {
                       </Button>
                       <code>
                         {this.state.activeNode >= 0 &&
-                        this.state.analyseData.length > 0
+                        !!this.state?.analyseData?.length
                           ? this.state.analyseData[
                               this.state.activeNode
                             ].plan.join('\n')