Przeglądaj źródła

HUE-6584 [assist] Clicking on HDFS and S3 filter icon does not focus in the filter input

Romain Rigaux 8 lat temu
rodzic
commit
7710217da7

+ 7 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistHdfsEntry.js

@@ -45,6 +45,7 @@ var AssistHdfsEntry = (function () {
     self.hasMorePages = true;
     self.hasMorePages = true;
 
 
     self.isFilterVisible = ko.observable(false);
     self.isFilterVisible = ko.observable(false);
+    self.editingSearch = ko.observable(false);
     self.filter = ko.observable('').extend({ rateLimit: 400 });
     self.filter = ko.observable('').extend({ rateLimit: 400 });
 
 
     self.isFilterVisible.subscribe(function (newValue) {
     self.isFilterVisible.subscribe(function (newValue) {
@@ -81,6 +82,12 @@ var AssistHdfsEntry = (function () {
     huePubSub.publish('assist.dblClickHdfsItem', self);
     huePubSub.publish('assist.dblClickHdfsItem', self);
   };
   };
 
 
+  AssistHdfsEntry.prototype.toggleSearch = function () {
+    var self = this;
+    self.isFilterVisible(!self.isFilterVisible());
+    self.editingSearch(self.isFilterVisible());
+  };
+
   AssistHdfsEntry.prototype.loadEntries = function(callback) {
   AssistHdfsEntry.prototype.loadEntries = function(callback) {
     var self = this;
     var self = this;
     if (self.loading()) {
     if (self.loading()) {

+ 7 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistS3Entry.js

@@ -45,6 +45,7 @@ var AssistS3Entry = (function () {
     self.hasMorePages = true;
     self.hasMorePages = true;
 
 
     self.isFilterVisible = ko.observable(false);
     self.isFilterVisible = ko.observable(false);
+    self.editingSearch = ko.observable(false);
     self.filter = ko.observable('').extend({ rateLimit: 400 });
     self.filter = ko.observable('').extend({ rateLimit: 400 });
 
 
     self.isFilterVisible.subscribe(function (newValue) {
     self.isFilterVisible.subscribe(function (newValue) {
@@ -76,6 +77,12 @@ var AssistS3Entry = (function () {
     });
     });
   }
   }
 
 
+  AssistS3Entry.prototype.toggleSearch = function () {
+    var self = this;
+    self.isFilterVisible(!self.isFilterVisible());
+    self.editingSearch(self.isFilterVisible());
+  };
+
   AssistS3Entry.prototype.dblClick = function () {
   AssistS3Entry.prototype.dblClick = function () {
     var self = this;
     var self = this;
     huePubSub.publish('assist.dblClickS3Item', self);
     huePubSub.publish('assist.dblClickS3Item', self);

+ 4 - 4
desktop/core/src/desktop/templates/assist.mako

@@ -292,7 +292,7 @@ from notebook.conf import get_ordered_interpreters
 
 
   <script type="text/html" id="assist-s3-header-actions">
   <script type="text/html" id="assist-s3-header-actions">
     <div class="assist-db-header-actions">
     <div class="assist-db-header-actions">
-      <a class="inactive-action" href="javascript:void(0)" data-bind="toggle: isFilterVisible, css: { 'blue': isFilterVisible }" title="Filter"><i class="pointer fa fa-filter"></i></a>
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: toggleSearch, css: { 'blue': isFilterVisible }" title="Filter"><i class="pointer fa fa-filter"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.s3.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${_('Manual refresh')}"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.s3.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${_('Manual refresh')}"></i></a>
     </div>
     </div>
   </script>
   </script>
@@ -316,7 +316,7 @@ from notebook.conf import get_ordered_interpreters
       <!-- ko template: 'assist-s3-header-actions' --><!-- /ko -->
       <!-- ko template: 'assist-s3-header-actions' --><!-- /ko -->
     </div>
     </div>
     <div class="assist-flex-file-search" data-bind="visible: isFilterVisible()">
     <div class="assist-flex-file-search" data-bind="visible: isFilterVisible()">
-      <div class="assist-filter"><input class="clearable" type="text" placeholder="${ _('Filter...') }" data-bind="clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/></div>
+      <div class="assist-filter"><input class="clearable" type="text" placeholder="${ _('Filter...') }" data-bind="clearable: filter, hasFocus: editingSearch, value: filter, valueUpdate: 'afterkeydown'"/></div>
     </div>
     </div>
     <div class="assist-flex-fill assist-s3-scrollable">
     <div class="assist-flex-fill assist-s3-scrollable">
       <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">
       <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">
@@ -434,7 +434,7 @@ from notebook.conf import get_ordered_interpreters
   <script type="text/html" id="assist-hdfs-header-actions">
   <script type="text/html" id="assist-hdfs-header-actions">
     <div class="assist-db-header-actions">
     <div class="assist-db-header-actions">
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: goHome" title="Go to ${ home_dir }"><i class="pointer fa fa-home"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: goHome" title="Go to ${ home_dir }"><i class="pointer fa fa-home"></i></a>
-      <a class="inactive-action" href="javascript:void(0)" data-bind="toggle: isFilterVisible, css: { 'blue': isFilterVisible }" title="Filter"><i class="pointer fa fa-filter"></i></a>
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: toggleSearch, css: { 'blue': isFilterVisible }" title="Filter"><i class="pointer fa fa-filter"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.hdfs.refresh'); }" title="${_('Manual refresh')}"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.hdfs.refresh'); }" title="${_('Manual refresh')}"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }"></i></a>
     </div>
     </div>
   </script>
   </script>
@@ -458,7 +458,7 @@ from notebook.conf import get_ordered_interpreters
       <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
       <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
     </div>
     </div>
     <div class="assist-flex-hdfs-search" data-bind="visible: isFilterVisible()">
     <div class="assist-flex-hdfs-search" data-bind="visible: isFilterVisible()">
-      <div class="assist-filter"><input class="clearable" type="text" placeholder="${ _('Filter...') }" data-bind="clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/></div>
+      <div class="assist-filter"><input class="clearable" type="text" placeholder="${ _('Filter...') }" data-bind="clearable: filter, hasFocus: editingSearch, value: filter, valueUpdate: 'afterkeydown'"/></div>
     </div>
     </div>
     <div class="assist-flex-fill assist-hdfs-scrollable">
     <div class="assist-flex-fill assist-hdfs-scrollable">
       <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">
       <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">