Make time picker enable/disable more granular (#15189)

* Make time picker enable/disable more granular

This makes the timefilter API more granular by removing the timefilter.enabled boolean property and introducing timefilter.enableTimeRange(), timefilter.disableTimeRange(), timefilter.enableAutoRefresh(), and timefilter.disableAutoRefresh() methods to toggle the enabled/disabled state of the time range selector and auto-refresh selector, respectively. Further, the current state of these two selectors can be read via timefilter.isTimeRangeEnabled and timefilter.isAutoRefreshEnabled.

* Clearer naming of API methods

* Reverting to !! instead of Boolean cast

* Wrapping the consequent in {} per style guide

* Removing outdated comment

src/core_plugins/kibana/public/context/app.js

@@ -50,8 +50,8 @@ function ContextAppController($scope, config, Private, timefilter) {
   const queryParameterActions = Private(QueryParameterActionsProvider);
   const queryActions = Private(QueryActionsProvider);
 
-  // this is apparently the "canonical" way to disable the time picker
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   this.state = createInitialState(
     parseInt(config.get('context:step'), 10),

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -116,7 +116,8 @@ app.directive('dashboardApp', function ($injector) {
         filterBar.getFilters()
       );
 
-      timefilter.enabled = true;
+      timefilter.enableAutoRefreshSelector();
+      timefilter.enableTimeRangeSelector();
       dash.searchSource.highlightAll(true);
       dash.searchSource.version(true);
       courier.setRootSearchSource(dash.searchSource);

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -15,7 +15,8 @@ export function DashboardListingController($injector, $scope, $location) {
   const config = $injector.get('config');
   const dashboardConfig = $injector.get('dashboardConfig');
 
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   const limitTo = $filter('limitTo');
   // TODO: Extract this into an external service.

src/core_plugins/kibana/public/discover/controllers/discover.js

@@ -324,7 +324,13 @@ function discoverController(
         $scope.$listen(queryFilter, 'fetch', $scope.fetch);
 
         $scope.$watch('opts.timefield', function (timefield) {
-          timefilter.enabled = !!timefield;
+          if (!!timefield) {
+            timefilter.enableAutoRefreshSelector();
+            timefilter.enableTimeRangeSelector();
+          } else {
+            timefilter.disableAutoRefreshSelector();
+            timefilter.disableTimeRangeSelector();
+          }
         });
 
         $scope.$watch('state.interval', function () {

src/core_plugins/kibana/public/doc/__tests__/doc.js

@@ -121,7 +121,8 @@ describe('Doc app controller', function () {
 
   it('should disable the time filter', function (done) {
     init();
-    expect(timefilter.enabled).to.be(false);
+    expect(timefilter.isAutoRefreshSelectorEnabled).to.be(false);
+    expect(timefilter.isTimeRangeSelectorEnabled).to.be(false);
     done();
   });
 

src/core_plugins/kibana/public/doc/controllers/doc.js

@@ -32,7 +32,8 @@ uiRoutes
 
 app.controller('doc', function ($scope, $route, es, timefilter) {
 
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   // Pretty much only need this for formatting, not actually using it for fetching anything.
   $scope.indexPattern = $route.current.locals.indexPattern;

src/core_plugins/kibana/public/management/index.js

@@ -38,7 +38,8 @@ uiModules
       },
 
       link: function ($scope) {
-        timefilter.enabled = false;
+        timefilter.disableAutoRefreshSelector();
+        timefilter.disableTimeRangeSelector();
         $scope.sections = management.items.inOrder;
         $scope.section = management.getSection($scope.sectionName) || management;
 

src/core_plugins/kibana/public/visualize/editor/editor.js

@@ -195,7 +195,15 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
       'searchSource.get("index")',
       'vis.type.options.showTimePicker',
     ], function ([index, requiresTimePicker]) {
-      timefilter.enabled = Boolean((!index || index.timeFieldName) && requiresTimePicker);
+      const showTimeFilter = Boolean((!index || index.timeFieldName) && requiresTimePicker);
+
+      if (showTimeFilter) {
+        timefilter.enableAutoRefreshSelector();
+        timefilter.enableTimeRangeSelector();
+      } else {
+        timefilter.disableAutoRefreshSelector();
+        timefilter.disableTimeRangeSelector();
+      }
     });
 
     // update the searchSource when filters update

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

@@ -16,7 +16,8 @@ export function VisualizeListingController($injector) {
   const timefilter = $injector.get('timefilter');
   const config = $injector.get('config');
 
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;

src/core_plugins/kibana/public/visualize/wizard/wizard.js

@@ -32,7 +32,8 @@ routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
 });
 
 module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, timefilter, Private, config) {
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   const visTypeCategoryToHumanReadableMap = {
     [CATEGORY.BASIC]: 'Basic Charts',
@@ -223,7 +224,8 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
     );
   };
 
-  timefilter.enabled = false;
+  timefilter.disableAutoRefreshSelector();
+  timefilter.disableTimeRangeSelector();
 
   $scope.indexPattern = {
     selection: null,

src/core_plugins/timelion/public/app.js

@@ -70,7 +70,9 @@ app.controller('timelion', function (
   // TODO: For some reason the Kibana core doesn't correctly do this for all apps.
   moment.tz.setDefault(config.get('dateFormat:tz'));
 
-  timefilter.enabled = true;
+  timefilter.enableAutoRefreshSelector();
+  timefilter.enableTimeRangeSelector();
+
   const notify = new Notifier({
     location: 'Timelion'
   });

src/ui/public/agg_types/__tests__/buckets/date_histogram/_params.js

@@ -34,7 +34,8 @@ describe('params', function () {
 
     const now = moment();
     setTimeBounds = function (n, units) {
-      timefilter.enabled = true;
+      timefilter.enableAutoRefreshSelector();
+      timefilter.enableTimeRangeSelector();
       timefilter.getBounds = _.constant({
         min: now.clone().subtract(n, units),
         max: now.clone()

src/ui/public/timefilter/timefilter.js

@@ -32,7 +32,8 @@ uiModules
       const diffTime = Private(TimefilterLibDiffTimeProvider)(self);
       const diffInterval = Private(TimefilterLibDiffIntervalProvider)(self);
 
-      self.enabled = false;
+      self.isTimeRangeSelectorEnabled = false;
+      self.isAutoRefreshSelectorEnabled = false;
 
       self.init = _.once(function () {
         const timeDefaults = config.get('timepicker:timeDefaults');
@@ -108,7 +109,37 @@ uiModules
     };
 
     Timefilter.prototype.getActiveBounds = function () {
-      if (this.enabled) return this.getBounds();
+      if (this.isTimeRangeSelectorEnabled) {
+        return this.getBounds();
+      }
+    };
+
+    /**
+     * Show the time bounds selector part of the time filter
+     */
+    Timefilter.prototype.enableTimeRangeSelector = function () {
+      this.isTimeRangeSelectorEnabled = true;
+    };
+
+    /**
+     * Hide the time bounds selector part of the time filter
+     */
+    Timefilter.prototype.disableTimeRangeSelector = function () {
+      this.isTimeRangeSelectorEnabled = false;
+    };
+
+    /**
+     * Show the auto refresh part of the time filter
+     */
+    Timefilter.prototype.enableAutoRefreshSelector = function () {
+      this.isAutoRefreshSelectorEnabled = true;
+    };
+
+    /**
+     * Hide the auto refresh part of the time filter
+     */
+    Timefilter.prototype.disableAutoRefreshSelector = function () {
+      this.isAutoRefreshSelectorEnabled = false;
     };
 
     return new Timefilter();

src/ui/public/timepicker/__tests__/toggle.js

@@ -23,18 +23,29 @@ describe('kbnGlobalTimepicker', function () {
     const $el = compile();
     expect($el.attr('data-test-subj')).to.be('globalTimepicker');
   });
-  it('sets data-shared-timefilter to false when timefilter.enabled is false', function () {
+
+  it('sets data-shared-timefilter to true when auto-refresh selector is enabled', function () {
     scope.timefilter = {
-      enabled: false
-    };
-    const $el = compile();
-    expect($el.attr('data-shared-timefilter')).to.eql('false');
-  });
-  it('sets data-shared-timefilter to true when timefilter.enabled is true', function () {
-    scope.timefilter = {
-      enabled: true
+      isAutoRefreshSelectorEnabled: true,
+      isTimeRangeSelectorEnabled: false
     };
     const $el = compile();
     expect($el.attr('data-shared-timefilter')).to.eql('true');
   });
+  it('sets data-shared-timefilter to true when time range selector is enabled', function () {
+    scope.timefilter = {
+      isAutoRefreshSelectorEnabled: false,
+      isTimeRangeSelectorEnabled: true
+    };
+    const $el = compile();
+    expect($el.attr('data-shared-timefilter')).to.eql('true');
+  });
+  it(`sets data-shared-timefilter to false when auto-refresh and time range selectors are both disabled`, function () {
+    scope.timefilter = {
+      isAutoRefreshSelectorEnabled: false,
+      isTimeRangeSelectorEnabled: false
+    };
+    const $el = compile();
+    expect($el.attr('data-shared-timefilter')).to.eql('false');
+  });
 });

src/ui/public/timepicker/kbn_global_timepicker.html

@@ -1,9 +1,9 @@
-<div ng-show="timefilter.enabled" data-shared-timefilter="{{timefilter.enabled}}" class="kuiLocalMenu" data-test-subj="globalTimepicker">
+<div ng-show="timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled" data-shared-timefilter="{{timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled}}" class="kuiLocalMenu" data-test-subj="globalTimepicker">
   <button
     class="kuiLocalMenuItem"
     aria-label="{{ timefilter.refreshInterval.pause ? 'Resume refreshing data' : 'Pause refreshing data' }}"
     ng-click="toggleRefresh()"
-    ng-show="timefilter.refreshInterval.value > 0"
+    ng-show="timefilter.isAutoRefreshSelectorEnabled && (timefilter.refreshInterval.value > 0)"
   >
     <span
       class="kuiIcon"
@@ -15,7 +15,7 @@
   <button
     class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc"
     ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
-    ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')"
+    ng-show="timefilter.isAutoRefreshSelectorEnabled"
     ng-click="kbnTopNav.toggle('interval')"
   >
     <span ng-show="timefilter.refreshInterval.value === 0">
@@ -31,6 +31,7 @@
   </button>
 
   <button
+    ng-show="timefilter.isTimeRangeSelectorEnabled"
     class="kuiLocalMenuItem"
     ng-click="back()"
     aria-label="Move backward in time"
@@ -43,6 +44,7 @@
   </button>
 
   <button
+    ng-show="timefilter.isTimeRangeSelectorEnabled"
     data-test-subj="globalTimepickerButton"
     class="kuiLocalMenuItem navbar-timepicker-time-desc"
     ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
@@ -59,6 +61,7 @@
   </button>
 
   <button
+    ng-show="timefilter.isTimeRangeSelectorEnabled"
     class="kuiLocalMenuItem"
     ng-click="forward()"
     aria-label="Move forward in time"