From 4df8a1df90191d35cc41ed929a8ed2fa3553b9b6 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 21 Jan 2021 10:38:34 -0500
Subject: [PATCH] SearchKit - Make UI less confusing by not allowing joins to
 be switched

Switching a join was confusing and buggy. Best to disable that and only allow them to be deleted
---
 ext/search/ang/crmSearchAdmin/compose/criteria.html      | 5 ++++-
 .../ang/crmSearchAdmin/crmSearchAdmin.component.js       | 9 ---------
 ext/search/css/search.css                                | 3 ---
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/ext/search/ang/crmSearchAdmin/compose/criteria.html b/ext/search/ang/crmSearchAdmin/compose/criteria.html
index 78c75a391a..eefa730caa 100644
--- a/ext/search/ang/crmSearchAdmin/compose/criteria.html
+++ b/ext/search/ang/crmSearchAdmin/compose/criteria.html
@@ -4,8 +4,11 @@
       <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join">
         <div class="form-inline">
           <label for="crm-search-join-{{ $index }}">{{:: ts('With') }}</label>
-          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" ng-change="changeJoin($index)" />
+          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" disabled >
           <select class="form-control" ng-model="join[1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
+          <button class="btn btn-xs btn-danger-outline" ng-click="$ctrl.clearParam('join', $index)" title="{{:: ts('Remove join') }}">
+            <i class="crm-i fa-trash" aria-hidden="true"></i>
+          </button>
         </div>
         <fieldset class="api4-clause-fieldset">
           <crm-search-clause clauses="join" format="json" skip="2 + getJoin(join[0]).conditions.length" op="AND" label="{{ ts('If') }}" fields="fieldsForWhere" ></crm-search-clause>
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
index ad1580caec..353851435f 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -255,15 +255,6 @@
         });
       };
 
-      $scope.changeJoin = function(idx) {
-        if (ctrl.savedSearch.api_params.join[idx][0]) {
-          ctrl.savedSearch.api_params.join[idx].length = 2;
-          loadFieldOptions();
-        } else {
-          ctrl.clearParam('join', idx);
-        }
-      };
-
       $scope.changeGroupBy = function(idx) {
         if (!ctrl.savedSearch.api_params.groupBy[idx]) {
           ctrl.clearParam('groupBy', idx);
diff --git a/ext/search/css/search.css b/ext/search/css/search.css
index 319fdb1400..d6ac891b3c 100644
--- a/ext/search/css/search.css
+++ b/ext/search/css/search.css
@@ -69,9 +69,6 @@
   right: 0;
   top: 0;
 }
-#bootstrap-theme.crm-search crm-search-clause > .btn-group .btn {
-  border: 0 none;
-}
 
 #bootstrap-theme.crm-search fieldset div.api4-input {
   margin-bottom: 10px;
-- 
2.25.1