From f8cbd2b4cf0165ddadcc662a937dc9a60a8dc575 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 3 Jan 2022 23:06:44 -0500
Subject: [PATCH] SearchKit - Contextual "View" button

This should make it less confusing. When you click on the View button it will take you to the display you are currently editing.
When not on a display, the View button looks different so it's easier to tell where it's taking you.
Fixes dev/core#3016
---
 .../ang/crmSearchAdmin/compose.html           | 25 +++++++++++++++++
 .../ang/crmSearchAdmin/crmSearchAdmin.html    | 28 ++-----------------
 .../crmSearchAdmin/crmSearchAdminDisplay.html |  7 ++++-
 ext/search_kit/css/crmSearchAdmin.css         | 12 ++++++++
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/compose.html b/ext/search_kit/ang/crmSearchAdmin/compose.html
index 04f42d6956..173da60ff2 100644
--- a/ext/search_kit/ang/crmSearchAdmin/compose.html
+++ b/ext/search_kit/ang/crmSearchAdmin/compose.html
@@ -46,6 +46,31 @@
     </fieldset>
   </div>
 </div>
+<div class="form-group crm-search-admin-right">
+  <div class="btn-group" ng-if="$ctrl.savedSearch.id">
+    <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
+      <i class="crm-i fa-external-link"></i>
+      {{:: ts('View Results') }}
+    </a>
+    <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
+      <li title="{{:: ts('View search results table') }}">
+        <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
+          <i class="crm-i fa-table"></i>
+          {{:: ts('Search results table') }}
+        </a>
+      </li>
+      <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
+        <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
+          <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
+          {{ display.label }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
 <fieldset id="crm-search-build-functions">
   <legend ng-click="controls.showFunctions = !controls.showFunctions">
     <i class="crm-i fa-caret-{{ !controls.showFunctions ? 'right' : 'down' }}"></i>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
index 0f4695c235..8c4a2e5446 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -54,30 +54,6 @@
             </ul>
           </div>
 
-          <div class="btn-group" ng-if="$ctrl.savedSearch.id">
-            <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
-              <i class="crm-i fa-external-link"></i>
-              {{:: ts('View') }}
-            </a>
-            <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
-              <li title="{{:: ts('View search results table') }}">
-                <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
-                  <i class="crm-i fa-table"></i>
-                  {{:: ts('Search results table') }}
-                </a>
-              </li>
-              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
-                <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
-                  <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
-                  {{ display.label }}
-                </a>
-              </li>
-            </ul>
-          </div>
-
           <div class="btn-group">
             <button type="button" class="btn" ng-class="{'btn-primary': status === 'unsaved', 'btn-warning': status === 'saving', 'btn-success': status === 'saved'}" ng-disabled="status !== 'unsaved'" ng-click="$ctrl.save()">
               <i class="crm-i" ng-class="{'fa-check': status !== 'saving', 'fa-spin fa-spinner': status === 'saving'}"></i>
@@ -95,7 +71,7 @@
       <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="compose">
-          <div ng-include="'~/crmSearchAdmin/compose.html'"></div>
+          <div ng-include="'~/crmSearchAdmin/compose.html'" class="crm-search-admin-relative"></div>
           <crm-search-admin-results-table search="$ctrl.savedSearch"></crm-search-admin-results-table>
         </div>
         <div ng-switch-when="group">
@@ -103,7 +79,7 @@
         </div>
         <div ng-switch-default>
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
-            <crm-search-admin-display display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
+            <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
         </div>
       </div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
index 6393bf24b9..5600bdd3f2 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
@@ -15,5 +15,10 @@
       {{:: ts('Anyone who can view this display will be able to see all results, regardless of their permission level.') }}
     </div>
   </div>
-
 </fieldset>
+<div class="form-group crm-search-admin-right" ng-if="$ctrl.display.id">
+  <a ng-href="{{ $ctrl.crmSearchAdmin.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + $ctrl.display.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search display on its own page') }}">
+    <i class="crm-i fa-external-link"></i>
+    {{:: ts('View Display') }}
+  </a>
+</div>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 55bcb1f8b7..ad2f76f159 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -267,3 +267,15 @@ crm-search-admin-export,
 crm-search-admin-import {
   display: block;
 }
+
+#bootstrap-theme .crm-search-admin-relative {
+  position: relative;
+  display: block;
+}
+
+#bootstrap-theme .crm-search-admin-right {
+  position: absolute;
+  top: 1px;
+  right: 0;
+  background-color: white;
+}
-- 
2.25.1