From a3e678ed3314963883527b588b2b802a5da1d52b Mon Sep 17 00:00:00 2001
From: Jammy Louie <jlouie@pivotal.io>
Date: Tue, 11 Jun 2019 12:06:01 -0400
Subject: [PATCH] refactor(core): reactify pipelineRoles component (#7104)

---
 .../config/triggers/PipelineRoles.tsx         | 46 +++++++++++++++++++
 .../triggers/pipelineRoles.component.ts       | 45 ------------------
 .../config/triggers/pipelineRoles.module.ts   |  7 +++
 .../config/triggers/trigger.module.js         |  4 +-
 .../config/triggers/triggers.directive.js     |  5 ++
 .../pipeline/config/triggers/triggers.html    |  2 +-
 6 files changed, 61 insertions(+), 48 deletions(-)
 create mode 100644 app/scripts/modules/core/src/pipeline/config/triggers/PipelineRoles.tsx
 delete mode 100644 app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.component.ts
 create mode 100644 app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.module.ts

diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/PipelineRoles.tsx b/app/scripts/modules/core/src/pipeline/config/triggers/PipelineRoles.tsx
new file mode 100644
index 00000000000..f68abc80fa9
--- /dev/null
+++ b/app/scripts/modules/core/src/pipeline/config/triggers/PipelineRoles.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Select, { Option } from 'react-select';
+
+import { AuthenticationService } from 'core/authentication';
+import { HelpField } from 'core/help';
+
+const { useState, useEffect } = React;
+
+export interface IPipelineRolesConfigProps {
+  roles: any[];
+  updateRoles: (roles: string[]) => void;
+}
+
+export const PipelineRoles = (props: IPipelineRolesConfigProps) => {
+  const [allowedRoles, setAllowedRoles] = useState([]);
+
+  useEffect(() => {
+    setAllowedRoles(AuthenticationService.getAuthenticatedUser().roles);
+  }, []);
+
+  const onAllowedRolesChanged = (options: Array<Option<string>>) => {
+    const roles = options.map(o => o.value);
+    props.updateRoles(roles);
+  };
+
+  return (
+    <div className="form-group row">
+      <div className="col-md-10">
+        <div className="row">
+          <label className="col-md-3 sm-label-right">
+            <span>Permissions </span>
+            <HelpField id="pipeline.config.roles.help" />
+          </label>
+          <div className="col-md-9">
+            <Select
+              multi={true}
+              onChange={onAllowedRolesChanged}
+              options={allowedRoles.map(a => ({ label: a, value: a }))}
+              value={props.roles || []}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.component.ts b/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.component.ts
deleted file mode 100644
index c3819bcf3bb..00000000000
--- a/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { IController, module } from 'angular';
-import { AuthenticationService } from 'core/authentication';
-
-class PipelineRolesController implements IController {
-  public pipeline: any;
-  public allowedRoles: string[];
-
-  public $onInit(): void {
-    this.allowedRoles = AuthenticationService.getAuthenticatedUser().roles;
-    this.pipeline.roles = this.pipeline.roles || [];
-  }
-}
-
-const pipelineRolesComponent: ng.IComponentOptions = {
-  template: `
-      <div class="form-group row">
-        <div class="col-md-10">
-          <div class="row">
-            <label class="col-md-3 sm-label-right">
-              Permissions
-              <help-field key="pipeline.config.roles.help"></help-field>
-            </label>
-            <div class="col-md-9">
-              <ui-select multiple ng-model="rolesCtrl.pipeline.roles" class="form-control input-sm">
-                <ui-select-match>
-                  {{$item}}
-                </ui-select-match>
-                <ui-select-choices repeat="role in rolesCtrl.allowedRoles | filter: $select.search ">
-                  <span ng-bind-html="role | highlight: $select.search"></span>
-                </ui-select-choices>
-              </ui-select>
-            </div>
-          </div>
-        </div>
-    </div>
- `,
-  controller: PipelineRolesController,
-  controllerAs: 'rolesCtrl',
-  bindings: {
-    pipeline: '=',
-  },
-};
-
-export const PIPELINE_ROLES_COMPONENT = 'spinnaker.core.pipeline.roles.component';
-module(PIPELINE_ROLES_COMPONENT, []).component('pipelineRoles', pipelineRolesComponent);
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.module.ts b/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.module.ts
new file mode 100644
index 00000000000..eaa6b57e809
--- /dev/null
+++ b/app/scripts/modules/core/src/pipeline/config/triggers/pipelineRoles.module.ts
@@ -0,0 +1,7 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { PipelineRoles } from './PipelineRoles';
+
+export const PIPELINE_ROLES = 'spinnaker.core.pipeline.roles.component';
+module(PIPELINE_ROLES, []).component('pipelineRoles', react2angular(PipelineRoles, ['roles', 'updateRoles']));
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/trigger.module.js b/app/scripts/modules/core/src/pipeline/config/triggers/trigger.module.js
index abe2cedea56..99a94c5136e 100644
--- a/app/scripts/modules/core/src/pipeline/config/triggers/trigger.module.js
+++ b/app/scripts/modules/core/src/pipeline/config/triggers/trigger.module.js
@@ -13,12 +13,12 @@ import './travis/travis.trigger';
 import './webhook/webhook.trigger';
 import './wercker/wercker.trigger';
 import { ARTIFACT_MODULE } from './artifacts/artifact.module';
-import { PIPELINE_ROLES_COMPONENT } from './pipelineRoles.component';
+import { PIPELINE_ROLES } from './pipelineRoles.module';
 
 module.exports = angular.module('spinnaker.core.pipeline.config.trigger', [
   ARTIFACT_MODULE,
   require('../stages/stage.module').name,
   require('./trigger.directive').name,
   require('./triggers.directive').name,
-  PIPELINE_ROLES_COMPONENT,
+  PIPELINE_ROLES,
 ]);
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/triggers.directive.js b/app/scripts/modules/core/src/pipeline/config/triggers/triggers.directive.js
index 35aa599816a..59dbb907618 100644
--- a/app/scripts/modules/core/src/pipeline/config/triggers/triggers.directive.js
+++ b/app/scripts/modules/core/src/pipeline/config/triggers/triggers.directive.js
@@ -108,5 +108,10 @@ module.exports = angular
         $scope.pipeline.parameterConfig = parameters;
         $scope.$digest();
       };
+
+      $scope.updateRoles = function(roles) {
+        $scope.pipeline.roles = roles;
+        $scope.$digest();
+      };
     },
   ]);
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html b/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html
index 9d6ab01ff7f..0f47fc7ed2a 100644
--- a/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html
+++ b/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html
@@ -59,7 +59,7 @@
         <div class="col-md-12">
           <div class="trigger-config">
             <render-if-feature feature="managedServiceAccounts">
-              <pipeline-roles pipeline="pipeline"></pipeline-roles>
+              <pipeline-roles roles="pipeline.roles" update-roles="updateRoles"></pipeline-roles>
             </render-if-feature>
             <render-if-feature feature="quietPeriod">
               <div class="row">