feat(slack): Introduce slack support channel selector (#7658)

* feat(slack): Introduce slack support channel selector * Use ReactSelectInput * Use hooks instead of class compoonent * Disable slack in settings * Add useLatestPromise hook * Rebase with updated react-select modules * Rebase with updated react-select modules * Update test * Update test * Refactor test
spinnaker · Dec 2, 2019 · bf2ffe2 · bf2ffe2
1 parent fc0c9d5
commit bf2ffe2
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 0 deletions.
diff --git a/app/scripts/modules/core/src/application/config/applicationAttributes.directive.html b/app/scripts/modules/core/src/application/config/applicationAttributes.directive.html
@@ -11,6 +11,16 @@
       <pager-duty-tag api-key="vm.application.attributes.pdApiKey"></pager-duty-tag>
     </dd>
   </render-if-feature>
+  <render-if-feature feature="slack">
+    <dt ng-if="vm.application.attributes.slackChannel && vm.application.attributes.slackChannel.name">Slack Channel</dt>
+    <dd ng-if="vm.application.attributes.slackChannel && vm.application.attributes.slackChannel.name">
+      <a
+        target="_blank"
+        href="https://netflix.slack.com/app_redirect?channel={{vm.application.attributes.slackChannel.name}}"
+        >#{{vm.application.attributes.slackChannel.name}}</a
+      >
+    </dd>
+  </render-if-feature>
   <dt ng-if="vm.application.attributes.repoType">Source Repo Type</dt>
   <dd ng-if="vm.application.attributes.repoType">{{vm.application.attributes.repoType}}</dd>
   <dt ng-if="vm.application.attributes.repoProjectKey">Source Repo Project</dt>

diff --git a/app/scripts/modules/core/src/application/modal/createApplication.modal.controller.js b/app/scripts/modules/core/src/application/modal/createApplication.modal.controller.js
@@ -129,5 +129,8 @@ module.exports = angular
         }
         this.createApplicationForTests();
       };
+
+      // Enables setting the attributes as a callback in react components
+      this.setAttribute = (name, value) => (this.application[name] = value);
     },
   ]);
diff --git a/app/scripts/modules/core/src/application/modal/editApplication.html b/app/scripts/modules/core/src/application/modal/editApplication.html
@@ -110,6 +110,13 @@ <h3 data-purpose="modal-header">Edit Application</h3>
         <pager-duty-select-field component="editApp.applicationAttributes"></pager-duty-select-field>
       </render-if-feature>
 
+      <render-if-feature feature="slack">
+        <slack-channel-selector
+          channel="editApp.applicationAttributes.slackChannel"
+          callback="editApp.setAttribute"
+        ></slack-channel-selector>
+      </render-if-feature>
+
       <div class="form-group row">
         <div class="col-sm-3 sm-label-right">Description</div>
         <div class="col-sm-9">

diff --git a/app/scripts/modules/core/src/application/modal/newapplication.html b/app/scripts/modules/core/src/application/modal/newapplication.html
@@ -129,6 +129,13 @@ <h3 data-purpose="modal-header">New Application</h3>
         <pager-duty-select-field component="newAppModal.application"></pager-duty-select-field>
       </render-if-feature>
 
+      <render-if-feature feature="slack">
+        <slack-channel-selector
+          channel="newAppModal.application.slackChannel"
+          callback="newAppModal.setAttribute"
+        ></slack-channel-selector>
+      </render-if-feature>
+
       <div class="form-group row">
         <div class="col-sm-3 sm-label-right">Description</div>
         <div class="col-sm-9">

diff --git a/app/scripts/modules/core/src/config/settings.ts b/app/scripts/modules/core/src/config/settings.ts
@@ -46,6 +46,7 @@ export interface IFeatures {
   pipelineTemplates?: boolean;
   quietPeriod?: boolean;
   roscoMode?: boolean;
+  slack?: boolean;
   snapshots?: boolean;
   travis?: boolean;
   versionedProviders?: boolean;

diff --git a/app/scripts/modules/core/src/core.module.ts b/app/scripts/modules/core/src/core.module.ts
@@ -59,6 +59,7 @@ import { REACT_MODULE } from './reactShims';
 import { REGION_MODULE } from './region/region.module';
 import { SERVERGROUP_MODULE } from './serverGroup/serverGroup.module';
 import { SERVER_GROUP_MANAGER_MODULE } from './serverGroupManager/serverGroupManager.module';
+import { SLACK_COMPONENT } from './slack';
 import { STYLEGUIDE_MODULE } from './styleguide/styleguide.module';
 import { SUBNET_MODULE } from './subnet/subnet.module';
 
@@ -139,6 +140,7 @@ module(CORE_MODULE, [
   require('./securityGroup/securityGroup.module').name,
   SERVERGROUP_MODULE,
   SERVER_GROUP_MANAGER_MODULE,
+  SLACK_COMPONENT,
   STYLEGUIDE_MODULE,
   SUBNET_MODULE,
 

diff --git a/app/scripts/modules/core/src/index.ts b/app/scripts/modules/core/src/index.ts
@@ -77,6 +77,7 @@ export * from './serverGroup';
 export * from './serverGroupManager';
 export * from './serviceAccount';
 export * from './services';
+export * from './slack';
 export * from './state';
 export * from './storage';
 export * from './subnet';

diff --git a/app/scripts/modules/core/src/slack/SlackChannelSelector.tsx b/app/scripts/modules/core/src/slack/SlackChannelSelector.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as Select from 'react-select';
+import { ReactSelectInput, useLatestPromise } from '@spinnaker/core';
+
+import { ISlackChannel, SlackReader } from './SlackReader';
+
+export interface ISlackChannelSelectorProps {
+  channel: ISlackChannel;
+  callback: (name: string, value: any) => void;
+}
+
+export interface ISlackChannelSelectorState {
+  channels: ISlackChannel[];
+  selected: ISlackChannel;
+  loading: boolean;
+}
+
+export default function SlackChannelSelector({ channel, callback }: ISlackChannelSelectorProps) {
+  const [selectedChannel, setSelectedChannel] = React.useState(channel);
+  const fetchChannels = useLatestPromise(() => SlackReader.getChannels(), []);
+  const channels = fetchChannels.result;
+  const isLoading = fetchChannels.status === 'PENDING';
+
+  const onInputChange = (evt: Select.Option<ISlackChannel>) => {
+    const newChannel = evt ? evt.target.value : null;
+    callback('slackChannel', newChannel || {});
+    setSelectedChannel(newChannel);
+  };
+
+  return (
+    <div className="form-group row">
+      <div className="col-sm-3 sm-label-right">Slack Channel</div>
+      <div className="col-sm-9">
+        <ReactSelectInput
+          inputClassName="form-control input-sm"
+          mode="VIRTUALIZED"
+          options={(channels || []).map((ch: ISlackChannel) => ({ value: ch, label: ch.name }))}
+          value={selectedChannel && { value: selectedChannel, label: selectedChannel.name }}
+          onChange={onInputChange}
+          isLoading={isLoading}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/scripts/modules/core/src/slack/SlackReader.spec.ts b/app/scripts/modules/core/src/slack/SlackReader.spec.ts
@@ -0,0 +1,38 @@
+import { API } from '@spinnaker/core';
+import { ISlackChannel, SlackReader } from './SlackReader';
+
+const mockSlackChannels: ISlackChannel[] = [
+  {
+    id: '0-test',
+    name: 'testchannel',
+    is_channel: true,
+    creator: 'creator',
+    is_archived: false,
+    name_normalized: 'testchannel',
+    num_members: 25,
+  },
+  {
+    id: '1-test',
+    name: 'fakechannel',
+    is_channel: true,
+    creator: 'creator2',
+    is_archived: false,
+    name_normalized: 'fakechannel',
+    num_members: 25,
+  },
+];
+
+describe('SlackReader', () => {
+  it('should fetch a list of public Slack channels', () => {
+    spyOn(SlackReader, 'getChannels').and.callThrough();
+    spyOn(API, 'one')
+      .and.callThrough()
+      .and.returnValue({ getList: () => Promise.resolve(mockSlackChannels) });
+
+    SlackReader.getChannels().then((channels: ISlackChannel[]) => {
+      expect(SlackReader.getChannels).toHaveBeenCalled();
+      expect(channels.length).toEqual(2);
+      expect(API.one).toHaveBeenCalledWith('slack/channels');
+    });
+  });
+});
diff --git a/app/scripts/modules/core/src/slack/SlackReader.ts b/app/scripts/modules/core/src/slack/SlackReader.ts
@@ -0,0 +1,20 @@
+import { IPromise } from 'angular';
+import { API } from '@spinnaker/core';
+
+export interface ISlackChannel {
+  id: string;
+  name: string;
+  is_channel: boolean;
+  creator: string;
+  is_archived: boolean;
+  name_normalized: string;
+  num_members: number;
+}
+
+export class SlackReader {
+  public static getChannels(): IPromise<ISlackChannel[]> {
+    return API.one('slack/channels')
+      .getList()
+      .catch(() => [] as ISlackChannel[]);
+  }
+}
diff --git a/app/scripts/modules/core/src/slack/index.ts b/app/scripts/modules/core/src/slack/index.ts
@@ -0,0 +1,2 @@
+export * from './slackChannelSelector.component';
+export * from './SlackReader';
diff --git a/app/scripts/modules/core/src/slack/slackChannelSelector.component.ts b/app/scripts/modules/core/src/slack/slackChannelSelector.component.ts
@@ -0,0 +1,11 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import SlackChannelSelector from './SlackChannelSelector';
+
+export const SLACK_COMPONENT = 'spinnaker.application.slackChannelSelector.component';
+
+module(SLACK_COMPONENT, []).component(
+  'slackChannelSelector',
+  react2angular(SlackChannelSelector, ['channel', 'callback']),
+);
diff --git a/halconfig/settings.js b/halconfig/settings.js
@@ -177,6 +177,7 @@ window.spinnakerSettings = {
     pipelines: true,
     pipelineTemplates: pipelineTemplatesEnabled,
     roscoMode: true,
+    slack: false,
     snapshots: false,
     travis: travisEnabled,
     versionedProviders: true,

diff --git a/settings.js b/settings.js
@@ -95,6 +95,7 @@ window.spinnakerSettings = {
     pipelines: true,
     quietPeriod: false,
     roscoMode: false,
+    slack: false,
     snapshots: false,
     travis: false,
     versionedProviders: true,