refactor(core): reactify pipelineRoles component (#7104)

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>
+  );
+};

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']));

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,
 ]);

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();
+      };
     },
   ]);

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">