refactor(core/delivery): Convert execution filters to React (#4197)

app/scripts/modules/core/src/cluster/filter/FilterSection.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { BindAll } from 'lodash-decorators';
+
+import { HelpField } from 'core/help/HelpField';
+
+export interface IFilterSectionProps {
+  heading: string;
+  expanded?: boolean;
+  helpKey?: string;
+}
+
+export interface IFilterSectionState {
+  expanded: boolean;
+}
+
+@BindAll()
+export class FilterSection extends React.Component<IFilterSectionProps, IFilterSectionState> {
+  constructor(props: IFilterSectionProps) {
+    super(props);
+    this.state = { expanded: props.expanded };
+  }
+
+  public getIcon() {
+    return this.state.expanded ? 'down' : 'right';
+  }
+
+  public toggle() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
+  public render() {
+    return (
+      <div className="collapsible-filter-section">
+        <div className="section-heading clickable" onClick={this.toggle}>
+          <h4>
+            <span className={`glyphicon glyphicon-chevron-${this.getIcon()}`}/>
+            {` ${this.props.heading}`}
+            {this.props.helpKey && (<span> <HelpField id={this.props.helpKey} placement="right"/></span>)}
+          </h4>
+        </div>
+        { this.state.expanded && (
+          <div className="content-body">
+            {this.props.children}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

app/scripts/modules/core/src/cluster/filter/clusterFilter.component.ts

@@ -1,11 +1,12 @@
-import {compact, uniq, map} from 'lodash';
-import {IScope, module} from 'angular';
+import { IScope, module } from 'angular';
+import { compact, uniq, map } from 'lodash';
+import { Subscription } from 'rxjs';
 
-import {CLUSTER_FILTER_SERVICE, ClusterFilterService} from 'core/cluster/filter/clusterFilter.service';
-import {Application} from 'core/application/application.model';
+import { Application } from 'core/application/application.model';
 import { CLUSTER_FILTER_MODEL, ClusterFilterModel } from './clusterFilter.model';
-import { Subscription } from 'rxjs';
+import { CLUSTER_FILTER_SERVICE, ClusterFilterService } from 'core/cluster/filter/clusterFilter.service';
 import { IFilterTag } from 'core/filterModel/FilterTags';
+
 export const CLUSTER_FILTER = 'spinnaker.core.cluster.filter.component';
 
 const ngmodule = module(CLUSTER_FILTER, [

app/scripts/modules/core/src/cluster/filter/collapsibleFilterSection.directive.js

@@ -4,7 +4,7 @@ const angular = require('angular');
 
 module.exports = angular
   .module('cluster.filter.collapse', [])
-  .directive('filterSection', function ($timeout) {
+  .directive('filterSection', function () {
     return {
       restrict: 'E',
       transclude: true,
@@ -14,7 +14,7 @@ module.exports = angular
         helpKey: '@?'
       },
       templateUrl: require('./collapsibleFilterSection.html'),
-      link:  function (scope, elem) {
+      link: function (scope) {
         var expanded = (scope.expanded === 'true');
         scope.state = {expanded: expanded};
         scope.getIcon = function () {
@@ -24,50 +24,6 @@ module.exports = angular
         scope.toggle = function () {
           scope.state.expanded = !scope.state.expanded;
         };
-
-        scope.$on('parent::clearAll', function() {
-          $timeout(function() {  // This is needed b/c we don't want to trigger another digest cycle while one is currently in flight.
-            elem.find(':checked').trigger('click');
-            elem.find('input').val('').trigger('change');
-          }, 0, false);
-        });
       },
-
-      controller: function($scope) {
-        $scope.$on('parent::toggle', function(event, isShow) {
-          $scope.state = {expanded: isShow };
-        });
-      }
-    };
-  })
-  .directive('filterToggleAll', function () {
-    return {
-      restrict: 'E',
-      transclude: true,
-      template: [
-        '<div>',
-          '<div class="btn-group btn-group-xs">',
-            '<button class="btn btn-default" ng-click="toggle()">{{buttonName}}</button>',
-            '<button class="btn btn-default" ng-click="clearAll()">Clear All</button>',
-          '</div>',
-          '<div ng-transclude ></div>',
-        '</div>'
-      ].join(''),
-      controller: function ($scope) {
-        function toggle() {
-          $scope.show = !$scope.show;
-          $scope.$broadcast('parent::toggle', $scope.show);
-          $scope.buttonName = ($scope.show ? 'Hide All' : 'Show All');
-        }
-
-        function clearAll() {
-          $scope.$broadcast('parent::clearAll');
-        }
-
-        $scope.show = false;
-        $scope.buttonName = ($scope.show ? 'Hide All' : 'Show All');
-        $scope.toggle = toggle;
-        $scope.clearAll = clearAll;
-      }
     };
   });

app/scripts/modules/core/src/delivery/delivery.module.js

@@ -8,6 +8,7 @@ import { EXECUTION_DETAILS_CONTROLLER } from './details/executionDetails.control
 import { BUILD_DISPLAY_NAME_FILTER } from './executionBuild/buildDisplayName.filter';
 import { EXECUTION_BUILD_NUMBER_COMPONENT } from './executionBuild/executionBuildNumber.component';
 import { EXECUTION_COMPONENT } from './executionGroup/execution/execution.component';
+import { EXECUTION_FILTERS_COMPONENT } from './filter/executionFilters.component';
 import { EXECUTION_GROUPS_COMPONENT } from './executionGroup/executionGroups.component';
 import { EXECUTIONS_COMPONENT } from './executions/executions.component';
 import { STAGE_FAILURE_MESSAGE_COMPONENT } from './stageFailureMessage/stageFailureMessage.component';
@@ -27,7 +28,7 @@ module.exports = angular.module('spinnaker.delivery', [
   BUILD_DISPLAY_NAME_FILTER,
   EXECUTION_BUILD_NUMBER_COMPONENT,
 
-  require('./filter/executionFilters.directive.js').name,
+  EXECUTION_FILTERS_COMPONENT,
 
   require('./manualExecution/manualPipelineExecution.controller.js').name,