From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 10 Mar 2021 20:17:43 +0000 (-0500)
Subject: SearchKit - Additional link settings for opening in new tab or popup
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=2dbf2d72404de0a94ea0ea860247b424c328d2ef;p=civicrm-core.git

SearchKit - Additional link settings for opening in new tab or popup
---

diff --git a/css/civicrm.css b/css/civicrm.css
index c928b5fb5b..0114b04132 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -24,21 +24,24 @@
   flex-wrap: wrap;
   box-sizing: border-box;
 }
-.crm-container .crm-flex-box > * {
+.crm-flex-box > * {
   flex: 1;
   box-sizing: border-box;
   min-width: 0; /* prevents getting squashed by whitespace:nowrap content */
 }
-.crm-container .crm-flex-box > .crm-flex-2 {
+.crm-container .crm-flex-1 {
+  flex: 1;
+}
+.crm-container .crm-flex-2 {
   flex: 2;
 }
-.crm-container .crm-flex-box > .crm-flex-3 {
+.crm-container .crm-flex-3 {
   flex: 3;
 }
-.crm-container .crm-flex-box > .crm-flex-4 {
+.crm-container .crm-flex-4 {
   flex: 4;
 }
-.crm-container .crm-flex-box > .crm-flex-5 {
+.crm-container .crm-flex-5 {
   flex: 5;
 }
 
diff --git a/ext/search/CRM/Search/Upgrader.php b/ext/search/CRM/Search/Upgrader.php
index 670d3ca545..f8fbc76f22 100644
--- a/ext/search/CRM/Search/Upgrader.php
+++ b/ext/search/CRM/Search/Upgrader.php
@@ -84,4 +84,30 @@ class CRM_Search_Upgrader extends CRM_Search_Upgrader_Base {
     return TRUE;
   }
 
+  /**
+   * Upgrade 1002 - embellish search display link data
+   * @return bool
+   */
+  public function upgrade_1002() {
+    $this->ctx->log->info('Applying update 1002 - embellish search display link data.');
+    $displays = \Civi\Api4\SearchDisplay::get(FALSE)
+      ->setSelect(['id', 'settings'])
+      ->execute();
+    foreach ($displays as $display) {
+      $update = FALSE;
+      foreach ($display['settings']['columns'] ?? [] as $c => $column) {
+        if (!empty($column['link'])) {
+          $display['settings']['columns'][$c]['link'] = ['path' => $column['link']];
+          $update = TRUE;
+        }
+      }
+      if ($update) {
+        \Civi\Api4\SearchDisplay::update(FALSE)
+          ->setValues($display)
+          ->execute();
+      }
+    }
+    return TRUE;
+  }
+
 }
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 560445ff53..f5806fcf40 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -173,6 +173,31 @@
         return values;
       }
 
+      this.toggleLink = function(column) {
+        if (column.link) {
+          ctrl.onChangeLink(column, column.link.path, '');
+        } else {
+          var defaultLink = ctrl.getLinks()[0];
+          column.link = {path: defaultLink ? defaultLink.path : 'civicrm/'};
+          ctrl.onChangeLink(column, null, column.link.path);
+        }
+      };
+
+      this.onChangeLink = function(column, before, after) {
+        var beforeLink = before && _.findWhere(ctrl.getLinks(), {path: before}),
+          afterLink = after && _.findWhere(ctrl.getLinks(), {path: after});
+        if (!after) {
+          if (beforeLink && column.title === beforeLink.title) {
+            delete column.title;
+          }
+          delete column.link;
+        } else if (afterLink && ((!column.title && !before) || (beforeLink && beforeLink.title === column.title))) {
+          column.title = afterLink.title;
+        } else if (!afterLink && (beforeLink && beforeLink.title === column.title)) {
+          delete column.title;
+        }
+      };
+
       this.getLinks = function() {
         if (!ctrl.links) {
           ctrl.links = buildLinks();
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
index b528ad0ba6..3ff0962ecb 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
@@ -15,19 +15,8 @@
 
       this.styles = CRM.crmSearchAdmin.styles;
 
-      this.setValue = function(val, index) {
-        var link = ctrl.getLink(val),
-          item = ctrl.group[index];
-        if (item.path === val) {
-          return;
-        }
-        item.path = val;
-        item.icon = link ? defaultIcons[link.action] : 'fa-external-link';
-        if (val === 'civicrm/') {
-          $timeout(function () {
-            $('tr:eq(' + index + ') input[type=text]', $element).focus();
-          });
-        }
+      this.getStyle = function(item) {
+        return _.findWhere(this.styles, {key: item.style});
       };
 
       this.sortableOptions = {
@@ -78,15 +67,11 @@
             ctrl.addItem('civicrm/');
           }
         }
-        $element.on('change', 'select.crm-search-admin-select-path', function() {
+        $element.on('change', 'select.crm-search-admin-add-link', function() {
           var $select = $(this);
           $scope.$apply(function() {
-            if ($select.closest('tfoot').length) {
-              ctrl.addItem($select.val());
-              $select.val('');
-            } else {
-              ctrl.setValue($select.val(), $select.closest('tr').index());
-            }
+            ctrl.addItem($select.val());
+            $select.val('');
           });
         });
       };
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
index 2846b60073..5f5157d488 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
@@ -3,6 +3,7 @@
     <tr>
       <th class="crm-search-admin-icon-col"></th>
       <th class="crm-search-admin-icon-col">{{:: ts('Icon') }}</th>
+      <th>{{:: ts('Open') }}</th>
       <th>{{:: ts('Text') }}</th>
       <th>{{:: ts('Link') }}</th>
       <th>{{:: ts('Style') }}</th>
@@ -10,34 +11,39 @@
     </tr>
   </thead>
   <tbody ui-sortable="$ctrl.sortableOptions" ng-model="$ctrl.group">
-    <tr ng-repeat="item in $ctrl.group" class="bg-{{ item.style }}">
+    <tr ng-repeat="item in $ctrl.group">
       <td class="crm-search-admin-icon-col">
         <i class="crm-i fa-arrows disabled"></i>
       </td>
       <td class="crm-search-admin-icon-col">
         <span class="crm-editable-enabled" ng-click="pickIcon($index)">
-          <i class="{{ item.icon ? 'crm-i ' + item.icon : '' }}"></i>
+          <i class="{{ item.icon ? 'crm-i ' + item.icon : '' }}" style="opacity: 1"></i>
         </span>
       </td>
+      <td>
+        <select class="form-control" ng-model="item.target">
+          <option value>{{:: ts('Normal') }}</option>
+          <option value="_blank">{{:: ts('New tab') }}</option>
+          <option value="crm-popup">{{:: ts('Popup dialog') }}</option>
+        </select>
+      </td>
       <td>
         <input type="text" class="form-control" ng-model="item.text">
       </td>
       <td class="form-inline">
-        <select class="form-control crm-search-admin-select-path" ng-show="$ctrl.links.length">
-          <option ng-repeat="link in $ctrl.links" value="{{ link.path }}" ng-selected="item.path === link.path">
-            {{ link.title }}
-          </option>
-          <option value="civicrm/" ng-selected="item.path && !$ctrl.getLink(item.path)">
-            {{ ts('Other...') }}
-          </option>
-        </select>
-        <input class="form-control" type="text" ng-if="item.path && !$ctrl.getLink(item.path)" ng-model="item.path" ng-model-options="{updateOn: 'blur'}" />
-        <crm-search-admin-token-select ng-if="item.path && !$ctrl.getLink(item.path)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="item" field="path"></crm-search-admin-token-select>
+        <crm-search-admin-link-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" link="item" links="$ctrl.links"></crm-search-admin-link-select>
       </td>
-      <td class="form-inline">
-        <select class="form-control" ng-model="item.style">
-          <option ng-repeat="opt in $ctrl.styles" value="{{ opt.key }}">{{ opt.value }}</option>
-        </select>
+      <td>
+        <div class="btn-group">
+          <button type="button" style="min-width: 85px" class="btn btn-{{ item.style }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{ $ctrl.getStyle(item).value }} <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li ng-repeat="opt in $ctrl.styles">
+              <a href class="bg-{{:: opt.key }}" ng-click="item.style = opt.key">{{:: opt.value }}</a>
+            </li>
+          </ul>
+        </div>
       </td>
       <td class="crm-search-admin-icon-col">
         <button ng-if="$ctrl.group.length > 1" type="button" class="btn btn-xs btn-danger-outline" ng-click="$ctrl.group.splice($index, 1)">
@@ -49,7 +55,7 @@
   <tfoot>
     <tr>
       <td colspan="6" class="form-inline">
-        <select class="form-control crm-search-admin-select-path" ng-show="$ctrl.links.length">
+        <select class="form-control crm-search-admin-add-link" ng-show="$ctrl.links.length">
           <option value="">
             + {{:: ts('Add...') }}
           </option>
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
index eb8604e9e9..6d39b945c8 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
@@ -3,10 +3,11 @@
 
   angular.module('crmSearchAdmin').component('crmSearchAdminLinkSelect', {
     bindings: {
-      column: '<',
+      link: '<',
       apiEntity: '<',
       apiParams: '<',
-      links: '<'
+      links: '<',
+      onChange: '&'
     },
     templateUrl: '~/crmSearchAdmin/crmSearchAdminLinkSelect.html',
     controller: function ($scope, $element, $timeout) {
@@ -14,38 +15,16 @@
         ctrl = this;
 
       this.setValue = function(val) {
+        ctrl.link  = ctrl.link  || {};
         var link = ctrl.getLink(val),
-          oldLink = ctrl.getLink(ctrl.column.link);
-        if (link) {
-          ctrl.column.link = link.path;
-          ctrl.column.title = link.title;
-          delete ctrl.column.editable;
-        } else {
-          if (val === 'civicrm/') {
-            ctrl.column.link = val;
-            $timeout(function () {
-              $('input[type=text]', $element).focus();
-            });
-          } else {
-            ctrl.column.link = '';
-          }
-          if (oldLink && ctrl.column.title === oldLink.title) {
-            ctrl.column.title = '';
-          }
+          oldVal = ctrl.link.path;
+        ctrl.link.path = val;
+        if (!link) {
+          $timeout(function () {
+            $('input[type=text]', $element).focus();
+          });
         }
-      };
-
-      function onChange() {
-        var val = $('select', $element).val();
-        if (val !== ctrl.column.link) {
-          ctrl.setValue(val);
-        }
-      }
-
-      this.$onInit = function() {
-        $('select', $element).on('change', function() {
-          $scope.$apply(onChange);
-        });
+        ctrl.onChange({before: oldVal, after: val});
       };
 
       this.getLink = function(path) {
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
index 855f9fdb71..9cd67a5a6c 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
@@ -1,14 +1,20 @@
-<label title="{{ ts('Display as clickable link') }}" >
-  <input type="checkbox" ng-checked="$ctrl.column.link" ng-click="$ctrl.setValue($ctrl.column.link ? '' : ($ctrl.links[0] && $ctrl.links[0].path || 'civicrm/'))" >
-  {{ $ctrl.column.link ? ts('Link:') : ts('Link') }}
-</label>
-<select class="form-control" ng-show="$ctrl.links.length && $ctrl.column.link">
-  <option ng-repeat="link in $ctrl.links" value="{{ link.path }}" ng-selected="$ctrl.column.link === link.path">
-    {{ link.title }}
-  </option>
-  <option value="civicrm/" ng-selected="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)">
-    {{ ts('Other...') }}
-  </option>
-</select>
-<input class="form-control" type="text" ng-if="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)" ng-model="$ctrl.column.link" ng-model-options="{updateOn: 'blur'}" />
-<crm-search-admin-token-select ng-if="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="$ctrl.column" field="link"></crm-search-admin-token-select>
+<div class="crm-flex-1 input-group" >
+  <input type="text" class="form-control" ng-if="!$ctrl.getLink($ctrl.link.path)" ng-model="$ctrl.link.path" ng-model-options="{updateOn: 'blur'}" ng-change="$ctrl.onChange({before: 'civicrm/', after: $ctrl.link.path})">
+  <div class="input-group-btn" style="{{ $ctrl.getLink($ctrl.link.path) ? '' : 'width:27px' }}">
+    <button type="button" class="btn btn-default-outline dropdown-toggle" style="min-width: 200px; text-align: left;" ng-if="$ctrl.getLink($ctrl.link.path)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ $ctrl.getLink($ctrl.link.path).title }}
+    </button>
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu {{ $ctrl.getLink($ctrl.link.path) ? '' : 'dropdown-menu-right' }}" style="min-width: 223px;">
+      <li ng-repeat="link in $ctrl.links" ng-class="{disabled: $ctrl.link.path === link.path}">
+        <a href ng-click="$ctrl.setValue(link.path)">{{:: link.title }}</a>
+      </li>
+      <li ng-class="{disabled: !$ctrl.getLink($ctrl.link.path)}">
+        <a href ng-click="$ctrl.setValue('civicrm/')">{{:: ts('Other...') }}</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<crm-search-admin-token-select ng-if="!$ctrl.getLink($ctrl.link.path)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="$ctrl.link" field="path"></crm-search-admin-token-select>
diff --git a/ext/search/ang/crmSearchAdmin/displays/colType/field.html b/ext/search/ang/crmSearchAdmin/displays/colType/field.html
index 5960cc5ef2..7b0969cbd2 100644
--- a/ext/search/ang/crmSearchAdmin/displays/colType/field.html
+++ b/ext/search/ang/crmSearchAdmin/displays/colType/field.html
@@ -1,10 +1,22 @@
-<crm-search-admin-link-select class="form-inline crm-search-admin-flex-row" column="col" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" links=":: $ctrl.parent.getLinks()"></crm-search-admin-link-select>
+<div class="form-inline crm-search-admin-flex-row">
+  <label title="{{ ts('Display as clickable link') }}" >
+    <input type="checkbox" ng-checked="col.link" ng-click="$ctrl.parent.toggleLink(col)" >
+    {{ col.link ? ts('Link:') : ts('Link') }}
+  </label>
+  <select class="form-control" ng-model="$ctrl.link.target" ng-if="col.link">
+    <option value>{{:: ts('Open normally') }}</option>
+    <option value="_blank">{{:: ts('New tab') }}</option>
+    <option value="crm-popup">{{:: ts('Popup dialog') }}</option>
+  </select>
+  <crm-search-admin-link-select ng-if="col.link" link="col.link" on-change="$ctrl.parent.onChangeLink(col, before, after)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" links=":: $ctrl.parent.getLinks()">
+  </crm-search-admin-link-select>
+</div>
 <div class="form-inline crm-search-admin-flex-row">
   <label>
     <input type="checkbox" ng-checked="col.title" ng-click="col.title = col.title ? null : $ctrl.parent.getFieldLabel(col.key)" >
     {{ col.title ? ts('Tooltip:') : ts('Tooltip') }}
   </label>
-  <input class="form-control" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
+  <input class="form-control crm-flex-1" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
   <crm-search-admin-token-select ng-if="col.title" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="title"></crm-search-admin-token-select>
 </div>
 <div class="form-inline crm-search-admin-flex-row">
@@ -12,7 +24,7 @@
     <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
     {{ col.rewrite ? ts('Rewrite:') : ts('Rewrite') }}
   </label>
-  <input type="text" class="form-control" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}">
+  <input type="text" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}">
   <crm-search-admin-token-select ng-if="col.rewrite" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="rewrite"></crm-search-admin-token-select>
 </div>
 <div class="form-inline">
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 382c808751..bf4870cb93 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -40,7 +40,7 @@
           <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getColLabel(col)" >
           {{ col.label ? ts('Label:') : ts('Label') }}
         </label>
-        <input ng-if="col.label" class="form-control" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+        <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
         <crm-search-admin-token-select ng-if="col.label" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="label"></crm-search-admin-token-select>
       </div>
       <div class="form-inline" ng-if="col.label">
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 7aa5d91f68..83b9ef670d 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -21,7 +21,7 @@
       <legend>{{ $ctrl.parent.getColLabel(col) }}</legend>
       <div class="form-inline crm-search-admin-flex-row">
         <label for="crm-search-admin-edit-col-{{ $index }}">{{:: ts('Header:') }}</label>
-        <input id="crm-search-admin-edit-col-{{ $index }}" class="form-control" type="text" ng-model="col.label" >
+        <input id="crm-search-admin-edit-col-{{ $index }}" class="form-control crm-flex-1" type="text" ng-model="col.label" >
         <button type="button" class="btn-xs" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
           <i class="crm-i fa-ban"></i>
         </button>
diff --git a/ext/search/ang/crmSearchDisplay.module.js b/ext/search/ang/crmSearchDisplay.module.js
index a8f7cb8501..1a27992c4a 100644
--- a/ext/search/ang/crmSearchDisplay.module.js
+++ b/ext/search/ang/crmSearchDisplay.module.js
@@ -36,7 +36,11 @@
           displayValue = column.rewrite ? replaceTokens(column.rewrite, rowData, rowMeta) : formatRawValue(column, rowData[key]),
           result = _.escape(displayValue);
         if (column.link) {
-          result = '<a href="' + _.escape(getUrl(column.link, rowData)) + '">' + result + '</a>';
+          var target = '';
+          if (column.link.target) {
+            target = column.link.target === 'crm-popup' ? 'class="crm-popup" ' : 'target="' + column.link.target + '" ';
+          }
+          result = '<a ' + target + 'href="' + _.escape(getUrl(column.link.path, rowData)) + '">' + result + '</a>';
         }
         return result;
       }
diff --git a/ext/search/ang/crmSearchDisplay/colType/buttons.html b/ext/search/ang/crmSearchDisplay/colType/buttons.html
index f18030cf3c..7630a9b863 100644
--- a/ext/search/ang/crmSearchDisplay/colType/buttons.html
+++ b/ext/search/ang/crmSearchDisplay/colType/buttons.html
@@ -1,5 +1,5 @@
 <span ng-repeat="item in col.links">
-  <a class="btn {{:: col.size }} btn-{{:: item.style }}" href="{{:: displayUtils.getUrl(item.path, row) }}">
+  <a class="btn {{:: col.size }} btn-{{:: item.style }} {{:: item.target }}" target="{{:: item.target }}" href="{{:: displayUtils.getUrl(item.path, row) }}">
     <i ng-if=":: item.icon" class="crm-i {{:: item.icon }}"></i>
     {{:: item.text }}
   </a>
diff --git a/ext/search/ang/crmSearchDisplay/colType/links.html b/ext/search/ang/crmSearchDisplay/colType/links.html
index d0a2480473..d84651693d 100644
--- a/ext/search/ang/crmSearchDisplay/colType/links.html
+++ b/ext/search/ang/crmSearchDisplay/colType/links.html
@@ -1,5 +1,5 @@
 <span ng-repeat="item in col.links">
-  <a class="text-{{:: item.style }}" href="{{:: displayUtils.getUrl(item.path, row) }}">
+  <a class="text-{{:: item.style }} {{:: item.target }}" target="{{:: item.target }}" href="{{:: displayUtils.getUrl(item.path, row) }}">
     <i ng-if=":: item.icon" class="crm-i {{:: item.icon }}"></i>
     {{:: item.text }}
   </a>
diff --git a/ext/search/ang/crmSearchDisplay/colType/menu.html b/ext/search/ang/crmSearchDisplay/colType/menu.html
index a11b5319be..213f814424 100644
--- a/ext/search/ang/crmSearchDisplay/colType/menu.html
+++ b/ext/search/ang/crmSearchDisplay/colType/menu.html
@@ -5,7 +5,7 @@
   </button>
   <ul class="dropdown-menu {{ col.alignment === 'text-right' ? 'dropdown-menu-right' : '' }}" ng-if=":: col.open">
     <li ng-repeat="item in col.links" class="bg-{{:: item.style }}">
-      <a href="{{:: displayUtils.getUrl(item.path, row) }}">
+      <a href="{{:: displayUtils.getUrl(item.path, row) }}" class="{{:: item.target }}" target="{{:: item.target }}">
         <i ng-if=":: item.icon" class="crm-i {{:: item.icon }}"></i>
         {{:: item.text }}
       </a>
diff --git a/ext/search/css/crmSearchAdmin.css b/ext/search/css/crmSearchAdmin.css
index aaf1c5bc26..2a50fe9cf3 100644
--- a/ext/search/css/crmSearchAdmin.css
+++ b/ext/search/css/crmSearchAdmin.css
@@ -160,6 +160,7 @@
   background-color: rgba(255, 255, 255, .8);
 }
 
+/* A flex-row arranges elements inline, with the 'crm-flex-*' item(s) taking up all remaining space */
 #bootstrap-theme .crm-search-admin-flex-row {
   display: flex;
   align-items: center;
@@ -167,9 +168,6 @@
 #bootstrap-theme .crm-search-admin-flex-row > *:not(:first-child) {
   margin-left: 6px;
 }
-#bootstrap-theme .crm-search-admin-flex-row > input[type=text] {
-  flex: 1;
-}
 
 #bootstrap-theme .crm-search-admin-unused-columns fieldset {
   min-height: 60px;