From a9867bc3cf8294e7c04286dbeda73dd45a1f7bb8 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Sun, 17 Dec 2023 11:30:41 -0500
Subject: [PATCH] SearchKit - Place search results below tabbed interface,
 full-width

---
 .../debug.html => crmSearch-query.html}       | 11 +++--------
 .../crmSearchAdmin.component.js               | 19 ++++++++++++++++---
 .../ang/crmSearchAdmin/crmSearchAdmin.html    | 15 ++++++++++-----
 .../crmSearchAdminResultsTable.component.js   | 15 +++++++--------
 .../crmSearchAdminResultsTable.html           |  1 -
 ext/search_kit/ang/crmSearchAdmin/tabs.html   |  3 ++-
 ext/search_kit/css/crmSearchAdmin.css         | 15 ++++++++-------
 7 files changed, 46 insertions(+), 33 deletions(-)
 rename ext/search_kit/ang/crmSearchAdmin/{resultsTable/debug.html => crmSearch-query.html} (78%)

diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
similarity index 78%
rename from ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html
rename to ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
index 63d15daf0f..d22e34909a 100644
--- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
@@ -1,17 +1,12 @@
-<details id="crm-search-admin-debug">
-  <summary>
-    {{:: ts('Query Info') }}
-  </summary>
-  <div>
-    <pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
+  <fieldset>
     <div>
       <strong>API:</strong>
     </div>
     <pre>{{ $ctrl.debug.apiParams }}</pre>
+    <pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
     <div ng-if="$ctrl.perm.viewDebugOutput">
       <strong>SQL:</strong>
       <pre ng-if="!$ctrl.debug.sql">{{:: ts('Run search to view SQL') }}</pre>
       <pre ng-repeat="query in $ctrl.debug.sql">{{ query }}</pre>
     </div>
-  </div>
-</details>
+  </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
index 57691eaa8c..1414ba4bd2 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -28,8 +28,9 @@
     this.displayTypes = _.indexBy(CRM.crmSearchAdmin.displayTypes, 'id');
     this.searchDisplayPath = CRM.url('civicrm/search');
     this.afformPath = CRM.url('civicrm/admin/afform');
+    this.debug = {};
 
-    this.tabs = [
+    this.mainTabs = [
       {
         key: 'for',
         title: ts('Search For'),
@@ -37,7 +38,7 @@
       },
       {
         key: 'conditions',
-        title: ts('Conditions'),
+        title: ts('Filter Conditions'),
         icon: 'fa-filter',
       },
       {
@@ -50,9 +51,20 @@
         title: ts('Configure Settings'),
         icon: 'fa-gears',
       },
+      {
+        key: 'query',
+        title: ts('Query Info'),
+        icon: 'fa-info-circle',
+      },
     ];
 
-    $scope.controls = {tab: this.tabs[0].key, joinType: 'LEFT'};
+    $scope.controls = {tab: this.mainTabs[0].key, joinType: 'LEFT'};
+
+    this.selectedDisplay = function() {
+      // Could return the display but for now we don't need it
+      return $scope.controls.tab.startsWith('display_');
+    };
+
     $scope.joinTypes = [
       {k: 'LEFT', v: ts('With (optional)')},
       {k: 'INNER', v: ts('With (required)')},
@@ -61,6 +73,7 @@
     $scope.getEntity = searchMeta.getEntity;
     $scope.getField = searchMeta.getField;
     this.perm = {
+      viewDebugOutput: CRM.checkPerm('view debug output'),
       editGroups: CRM.checkPerm('edit groups')
     };
 
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
index f3cfeb1f0a..e5501d23b8 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -91,13 +91,14 @@
     </div>
 
     <div class="crm-flex-box">
-      <ul class="nav nav-pills nav-stacked" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
-      <div class="crm-flex-4" ng-switch="controls.tab">
-        <div ng-switch-when="for|fields|conditions|settings|group" ng-switch-when-separator="|">
+      <nav class="crm-search-admin-main-tabs">
+        <ul class="nav nav-pills nav-stacked" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
+      </nav>
+      <div class="crm-flex-4">
+        <div ng-if="!$ctrl.selectedDisplay()">
           <div ng-include="'~/crmSearchAdmin/crmSearch-' + controls.tab + '.html'" class="crm-search-admin-relative"></div>
-          <crm-search-admin-results-table search="$ctrl.savedSearch"></crm-search-admin-results-table>
         </div>
-        <div ng-switch-default>
+        <div ng-if="$ctrl.selectedDisplay()">
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
             <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
@@ -105,5 +106,9 @@
       </div>
     </div>
 
+    <div ng-if="!$ctrl.selectedDisplay()">
+      <crm-search-admin-results-table search="$ctrl.savedSearch" debug="$ctrl.debug"></crm-search-admin-results-table>
+    </div>
+
   </form>
 </div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js
index b682eaa657..b55816ee87 100644
--- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js
@@ -4,7 +4,8 @@
   // Specialized searchDisplay, only used by Admins
   angular.module('crmSearchAdmin').component('crmSearchAdminResultsTable', {
     bindings: {
-      search: '<'
+      search: '<',
+      debug: '<'
     },
     require: {
       crmSearchAdmin: '^crmSearchAdmin'
@@ -23,12 +24,9 @@
         ctrl.settings.columns = _.transform(ctrl.search.api_params.select, function(columns, fieldExpr) {
           columns.push(searchMeta.fieldToColumn(fieldExpr, {label: true, sortable: true}));
         }).concat(ctrl.settings.columns);
-        ctrl.debug = {
-          apiParams: JSON.stringify(ctrl.search.api_params, null, 2)
-        };
-        ctrl.perm = {
-          viewDebugOutput: CRM.checkPerm('view debug output'),
-        };
+        ctrl.debug.apiParams = JSON.stringify(ctrl.search.api_params, null, 2);
+        delete ctrl.debug.sql;
+        delete ctrl.debug.timeIndex;
         ctrl.results = null;
         ctrl.rowCount = null;
         ctrl.page = 1;
@@ -49,7 +47,8 @@
 
       this.onPostRun.push(function(apiResults) {
         // Add debug output (e.g. raw SQL) to the "Query Info" tab
-        ctrl.debug = _.extend(_.pick(ctrl.debug, 'apiParams'), apiResults.run.debug);
+        ctrl.debug.sql = apiResults.run.debug.sql;
+        ctrl.debug.timeIndex = apiResults.run.debug.timeIndex;
       });
 
       $scope.sortableColumnOptions = {
diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
index 34fcf8dd84..f4a1c86fdf 100644
--- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
@@ -1,5 +1,4 @@
 <div class="crm-search-display crm-search-display-table">
-  <div ng-include="'~/crmSearchAdmin/resultsTable/debug.html'"></div>
   <div class="form-inline">
     <div class="btn-group" ng-include="'~/crmSearchDisplay/SearchButton.html'"></div>
     <crm-search-tasks-menu ids="$ctrl.selectedRows" task-manager="$ctrl.taskManager"></crm-search-tasks-menu>
diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html
index 5117801282..73fc1ad860 100644
--- a/ext/search_kit/ang/crmSearchAdmin/tabs.html
+++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html
@@ -1,9 +1,10 @@
-<li role="presentation" ng-class="{active: controls.tab === tab.key}" ng-repeat="tab in $ctrl.tabs">
+<li role="presentation" ng-class="{active: controls.tab === tab.key}" ng-repeat="tab in $ctrl.mainTabs">
   <a href ng-click="selectTab(tab.key)">
     <i class="crm-i {{:: tab.icon }}"></i>
     {{:: tab.title }}
   </a>
 </li>
+<li role="separator" class="disabled"></li>
 <li role="presentation" ng-class="{active: controls.tab === 'group'}" ng-if="$ctrl.savedSearch.groups.length" title="{{ !$ctrl.groupExists ? ts('Group will be deleted.') : '' }}">
   <a href ng-click="selectTab('group')" ng-disabled="!$ctrl.groupExists">
     <i class="crm-i fa-users"></i>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 41bcc4b2a2..9e2f10ada7 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -11,13 +11,8 @@
   min-width: 66px;
 }
 
-#bootstrap-theme.crm-search .nav-stacked {
-  margin-left: 0;
-  margin-right: 20px;
-}
-
-#bootstrap-theme.crm-search ul.nav-stacked {
-  margin-top: 20px;
+#bootstrap-theme.crm-search .crm-search-admin-main-tabs {
+  margin: 10px 20px 20px 0;
 }
 
 #bootstrap-theme.crm-search .help-block.bg-warning {
@@ -51,6 +46,12 @@
   cursor: default;
 }
 
+#bootstrap-theme.crm-search ul.nav-stacked li[role=separator] {
+  height: 8px;
+  border-top: 1px solid lightgrey;
+  margin-top: 8px;
+}
+
 #bootstrap-theme.crm-search ul.nav-stacked li a[disabled] {
   text-decoration: line-through !important;
   color: grey;
-- 
2.25.1