From 1fc06b8d577d2c225e7928cac199ec8fea5f1020 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Mon, 28 Sep 2020 17:51:59 +0530
Subject: [PATCH] Added useful message when the explain plan is not used and
 empty. Fixes #4806

---
 docs/en_US/release_notes_4_27.rst                  |  1 +
 web/pgadmin/static/scss/_pgadmin.style.scss        |  1 +
 web/pgadmin/tools/sqleditor/static/js/sqleditor.js | 14 +++++++++++---
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/en_US/release_notes_4_27.rst b/docs/en_US/release_notes_4_27.rst
index 5d93b402c..a836e4cfd 100644
--- a/docs/en_US/release_notes_4_27.rst
+++ b/docs/en_US/release_notes_4_27.rst
@@ -20,6 +20,7 @@ Housekeeping
 Bug fixes
 *********
 
+| `Issue #4806 <https://redmine.postgresql.org/issues/4806>`_ -  Added useful message when the explain plan is not used and empty.
 | `Issue #5417 <https://redmine.postgresql.org/issues/5417>`_ -  Fixed and improve API test cases for the schema diff tool.
 | `Issue #5739 <https://redmine.postgresql.org/issues/5739>`_ -  Ensure that the import/export feature should work with SSH Tunnel.
 | `Issue #5802 <https://redmine.postgresql.org/issues/5802>`_ -  Remove maximum length on the password field in the server dialog.
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 2bd4d5a19..52f96170b 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -287,6 +287,7 @@
     margin-top: 25px !important;
     position: relative;
     text-align: center;
+    font-size: $font-size-base;
 
     &:before {
         font-family: $font-family-icon;
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index 203e3a573..ed3bd59ea 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -77,6 +77,14 @@ define('tools.querytool', [
 
   var is_query_running = false;
 
+  const EMPTY_DATA_OUTPUT_CONTENT = '<div role="status" class="pg-panel-message">' +
+    gettext('No data output. Execute a query to get output.') +
+  '</div>';
+
+  const EMPTY_EXPLAIN_CONTENT = '<div role="status" class="pg-panel-message">' +
+    gettext('Use Explain/Explain analyze button to generate the plan for a query. Alternatively, you can also execute "EXPLAIN (FORMAT JSON) [QUERY]".') +
+  '</div>';
+
   // Defining Backbone view for the sql grid.
   var SQLEditorView = Backbone.View.extend({
     initialize: function(opts) {
@@ -255,7 +263,7 @@ define('tools.querytool', [
         isCloseable: false,
         isPrivate: true,
         extraClasses: 'hide-vertical-scrollbar',
-        content: '<div id ="datagrid" class="sql-editor-grid-container text-12" tabindex="0"></div>',
+        content: `<div id ="datagrid" class="sql-editor-grid-container text-12" tabindex="0">${EMPTY_DATA_OUTPUT_CONTENT}</div>`,
       });
 
       var explain = new pgAdmin.Browser.Panel({
@@ -265,7 +273,7 @@ define('tools.querytool', [
         height: '100%',
         isCloseable: false,
         isPrivate: true,
-        content: '<div class="sql-editor-explain" tabindex="0"></div>',
+        content: `<div class="sql-editor-explain pg-el-container" tabindex="0">${EMPTY_EXPLAIN_CONTENT}</div>`,
       });
 
       var messages = new pgAdmin.Browser.Panel({
@@ -2724,7 +2732,7 @@ define('tools.querytool', [
         self.changedModels = [];
         self.has_oids = data.has_oids;
         self.oids = data.oids;
-        $('.sql-editor-explain').empty();
+        $('.sql-editor-explain').html(EMPTY_EXPLAIN_CONTENT);
         self.explain_plan = false;
 
         /* If object don't have primary keys then set the