Feature: Slack - receive messages, create threads, send replies (chat…

…woot#974)

Co-authored-by: Pranav Raj S <[email protected]>

.circleci/config.yml

@@ -16,7 +16,7 @@ defaults: &defaults
  - image: circleci/redis:alpine
  environment:
  - CC_TEST_REPORTER_ID: b1b5c4447bf93f6f0b06a64756e35afd0810ea83649f03971cbf303b4449456f
-
+ - RAILS_LOG_TO_STDOUT: false
 jobs:
  build:
  <<: *defaults
@@ -69,11 +69,11 @@ jobs:
  - run:
  name: Download cc-test-reporter
  command: |
- mkdir -p tmp/
- curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./tmp/cc-test-reporter
- chmod +x ./tmp/cc-test-reporter
+ mkdir -p ~/tmp
+ curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
+ chmod +x ~/tmp/cc-test-reporter
  - persist_to_workspace:
- root: tmp
+ root: ~/tmp
  paths:
  - cc-test-reporter
 
@@ -99,31 +99,33 @@ jobs:
  name: Run backend tests
  command: |
  bundle exec rspec $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
- ./tmp/cc-test-reporter format-coverage -t simplecov -o tmp/codeclimate.backend.json coverage/backend/.resultset.json
+ ~/tmp/cc-test-reporter format-coverage -t simplecov -o ~/tmp/codeclimate.backend.json coverage/backend/.resultset.json
  - persist_to_workspace:
- root: tmp
+ root: ~/tmp
  paths:
  - codeclimate.backend.json
 
  - run:
  name: Run frontend tests
  command: |
  yarn test:coverage
- ./tmp/cc-test-reporter format-coverage -t lcov -o tmp/codeclimate.frontend.json buildreports/lcov.info
+ ~/tmp/cc-test-reporter format-coverage -t lcov -o ~/tmp/codeclimate.frontend.json buildreports/lcov.info
  - persist_to_workspace:
- root: tmp
+ root: ~/tmp
  paths:
  - codeclimate.frontend.json
 
  # collect reports
  - store_test_results:
- path: /tmp/test-results
+ path: ~/tmp/test-results
  - store_artifacts:
- path: /tmp/test-results
+ path: ~/tmp/test-results
  destination: test-results
+ - store_artifacts:
+ path: log
 
  - run:
  name: Upload coverage results to Code Climate
  command: |
- ./tmp/cc-test-reporter sum-coverage tmp/codeclimate.*.json -p 2 -o tmp/codeclimate.total.json
- ./tmp/cc-test-reporter upload-coverage -i tmp/codeclimate.total.json
+ ~/tmp/cc-test-reporter sum-coverage ~/tmp/codeclimate.*.json -p 2 -o ~/tmp/codeclimate.total.json
+ ~/tmp/cc-test-reporter upload-coverage -i ~/tmp/codeclimate.total.json

.env.example

@@ -59,6 +59,7 @@ MANDRILL_INGRESS_API_KEY=
 ACTIVE_STORAGE_SERVICE=local
 
 # Amazon S3
+# documentation: https://www.chatwoot.com/docs/configuring-s3-bucket-as-cloud-storage
 S3_BUCKET_NAME=
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
@@ -74,20 +75,23 @@ LOG_LEVEL=info
 LOG_SIZE=500
 
 ### This environment variables are only required if you are setting up social media channels
-#facebook
+
+# Facebook
+# documentation: https://www.chatwoot.com/docs/facebook-setup
 FB_VERIFY_TOKEN=
 FB_APP_SECRET=
 FB_APP_ID=
 
 # Twitter
+# documentation: https://www.chatwoot.com/docs/twitter-app-setup
 TWITTER_APP_ID=
 TWITTER_CONSUMER_KEY=
 TWITTER_CONSUMER_SECRET=
 TWITTER_ENVIRONMENT=
 
-#slack
+#slack integration
 SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET
+SLACK_CLIENT_SECRET=
 
 ### Change this env variable only if you are using a custom build mobile app
 ## Mobile app env variables

app/controllers/api/v1/accounts/integrations/apps_controller.rb

@@ -9,7 +9,7 @@ def show; end
  private
 
  def fetch_apps
- @apps = Integrations::App.all
+ @apps = Integrations::App.all.select(&:active?)
  end
 
  def fetch_app

app/controllers/api/v1/accounts/integrations/slack_controller.rb

@@ -7,18 +7,12 @@ def create
  code: params[:code],
  inbox_id: params[:inbox_id]
  )
-
  @hook = builder.perform
-
- render json: @hook
+ create_chatwoot_slack_channel
  end
 
  def update
- builder = Integrations::Slack::ChannelBuilder.new(
- hook: @hook, channel: params[:channel]
- )
- builder.perform
-
+ create_chatwoot_slack_channel
  render json: @hook
  end
 
@@ -31,6 +25,14 @@ def destroy
  private
 
  def fetch_hook
- @hook = Integrations::Hook.find(params[:id])
+ @hook = Integrations::Hook.find_by(app_id: 'slack')
+ end
+
+ def create_chatwoot_slack_channel
+ channel = params[:channel] || 'customer-conversations'
+ builder = Integrations::Slack::ChannelBuilder.new(
+ hook: @hook, channel: channel
+ )
+ builder.perform
  end
 end

app/javascript/dashboard/api/ApiClient.js

@@ -10,6 +10,10 @@ class ApiClient {
  }
 
  get url() {
+ return `${this.baseUrl()}/${this.resource}`;
+ }
+
+ baseUrl() {
  let url = this.apiVersion;
  if (this.options.accountScoped) {
  const isInsideAccountScopedURLs = window.location.pathname.includes(
@@ -21,7 +25,8 @@ class ApiClient {
  url = `${url}/accounts/${accountId}`;
  }
  }
- return `${url}/${this.resource}`;
+
+ return url;
  }
 
  get() {

app/javascript/dashboard/api/integrations.js

@@ -0,0 +1,21 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class IntegrationsAPI extends ApiClient {
+ constructor() {
+ super('integrations/apps', { accountScoped: true });
+ }
+
+ connectSlack(code) {
+ return axios.post(`${this.baseUrl()}/integrations/slack`, {
+ code: code,
+ });
+ }
+
+ delete(integrationId) {
+ return axios.delete(`${this.baseUrl()}/integrations/${integrationId}`);
+ }
+}
+
+export default new IntegrationsAPI();

app/javascript/dashboard/assets/scss/views/settings/integrations.scss

@@ -3,16 +3,17 @@
  background: $color-white;
  border: 1px solid $color-border;
  border-radius: $space-smaller;
+ margin-bottom: $space-normal;
  padding: $space-normal;
 
  .integration--image {
  display: flex;
  margin-right: $space-normal;
- width: 8rem;
+ width: 10rem;
 
  img {
- max-width: 8rem;
- padding: $space-small;
+ max-width: 100%;
+ padding: $space-medium;
  }
  }
 

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -121,7 +121,6 @@ export default {
  computed: {
  ...mapGetters({
  currentUser: 'getCurrentUser',
- daysLeft: 'getTrialLeft',
  globalConfig: 'globalConfig/get',
  inboxes: 'inboxes/getInboxes',
  accountId: 'getCurrentAccountId',

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -1,14 +1,26 @@
 <template>
- <span class="back-button ion-ios-arrow-left" @click.capture="goBack">Back</span>
+ <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+ {{ $t('GENERAL_SETTINGS.BACK') }}
+ </span>
 </template>
 <script>
 import router from '../../routes/index';
 
 export default {
+ props: {
+ backUrl: {
+ type: [String, Object],
+ default: '',
+ },
+ },
  methods: {
  goBack() {
- router.go(-1);
+ if (this.backUrl !== '') {
+ router.push(this.backUrl);
+ } else {
+ router.go(-1);
+ }
  },
  },
 };
-</script>
+</script>

app/javascript/dashboard/i18n/default-sidebar.js

@@ -52,6 +52,7 @@ export const getSidebarItems = accountId => ({
  'settings_inbox_finish',
  'settings_integrations',
  'settings_integrations_webhook',
+ 'settings_integrations_integration',
  'general_settings',
  'general_settings_index',
  ],

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -2,6 +2,7 @@
  "GENERAL_SETTINGS": {
  "TITLE": "Account settings",
  "SUBMIT": "Update settings",
+ "BACK": "Back",
  "UPDATE": {
  "ERROR": "Could not update settings, try again!",
  "SUCCESS": "Successfully updated account settings"

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -49,6 +49,15 @@
  "NO": "No, Keep it"
  }
  }
- }
+ },
+ "DELETE": {
+ "BUTTON_TEXT": "Delete",
+ "API": {
+ "SUCCESS_MESSAGE": "Integration deleted successfully"
+ }
+ },
+ "CONNECT": {
+ "BUTTON_TEXT": "Connect"
+ } 
  }
 }

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -2,7 +2,7 @@
  <div class="settings-header">
  <h1 class="page-title">
  <woot-sidemenu-icon></woot-sidemenu-icon>
- <back-button v-if="showBackButton"></back-button>
+ <back-button v-if="showBackButton" :back-url="backUrl"></back-button>
  <i :class="iconClass"></i>
  <span>{{ headerTitle }}</span>
  </h1>
@@ -45,6 +45,10 @@ export default {
  },
  showBackButton: { type: Boolean, default: false },
  showNewButton: { type: Boolean, default: false },
+ backUrl: {
+ type: [String, Object],
+ default: '',
+ },
  },
  computed: {
  ...mapGetters({

app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue

@@ -6,6 +6,7 @@
  :header-title="$t(headerTitle)"
  :button-text="$t(headerButtonText)"
  :show-back-button="showBackButton"
+ :back-url="backUrl"
  :show-new-button="showNewButton"
  />
  <keep-alive>
@@ -34,6 +35,10 @@ export default {
  type: Boolean,
  default: false,
  },
+ backUrl: {
+ type: [String, Object],
+ default: '',
+ },
  },
  data() {
  return {};