fix(admin): cascading errors and updated typings

src/bp/ui-admin/src/Pages/Server/Debug.tsx

@@ -13,9 +13,9 @@ import {
   FaPlusSquare,
   FaSquare
 } from 'react-icons/fa'
+import { toastSuccess } from '~/utils/toaster'
 
 import api from '../../api'
-import { AppToaster } from '../../utils/toaster'
 import SectionLayout from '../Layouts/Section'
 
 export default class Debug extends React.Component<Props, State> {
@@ -57,7 +57,7 @@ export default class Debug extends React.Component<Props, State> {
     const debugScope = this.state.checked && this.state.checked.join(',')
     await api.getSecured().post(`/admin/server/debug`, { debugScope, persist: this.state.persist })
 
-    AppToaster.show({ message: 'Debug configuration updated successfully!', intent: Intent.SUCCESS, timeout: 2000 })
+    toastSuccess('Debug configuration updated successfully!')
   }
 
   handlePersistChanged = (e: any) => this.setState({ persist: e.target.checked })

src/bp/ui-admin/src/Pages/Server/Languages/Language.tsx

@@ -54,7 +54,6 @@ const Language: FC<Props> = props => {
   const loadLanguage = async () => {
     setLoading(true)
     try {
-      // @ts-ignore
       await api.getSecured({ timeout: 10000 }).post(`/admin/languages/${props.language.code}/load`)
     } catch (err) {
       console.log('error loading model')

src/bp/ui-admin/src/Pages/Workspace/Bots/ImportBotModal.tsx

@@ -43,7 +43,6 @@ class ImportBotModal extends Component<Props, State> {
     this.setState({ isProcessing: true })
 
     try {
-      // @ts-ignore
       await api.getSecured({ timeout: 30000 }).post(`/admin/bots/${this.state.botId}/import`, this.state.fileContent, {
         headers: { 'Content-Type': 'application/tar+gzip' }
       })

src/bp/ui-admin/src/api.ts

@@ -0,0 +1,71 @@
+import axios from 'axios'
+import Promise from 'bluebird'
+import _ from 'lodash'
+
+import { toastError } from './utils/toaster'
+import { getActiveWorkspace, logout, pullToken } from './Auth'
+
+const createClient = (clientOptions: any, options: { toastErrors?: boolean }) => {
+  const client = axios.create({ timeout: 2000, ...clientOptions })
+
+  client.interceptors.response.use(
+    response => response,
+    error => {
+      const wrappedError = _.get(error, 'response.data')
+      const errorCode = _.get(wrappedError, 'errorCode')
+      if (errorCode) {
+        if (['BP_0041'].includes(errorCode)) {
+          return logout()
+        }
+        return Promise.reject(wrappedError)
+      } else {
+        return Promise.reject(error)
+      }
+    }
+  )
+
+  if (options.toastErrors) {
+    client.interceptors.response.use(
+      response => response,
+      error => {
+        toastError(error)
+
+        return Promise.reject(error)
+      }
+    )
+  }
+  return client
+}
+
+const overrideApiUrl = process.env.REACT_APP_API_URL
+  ? { baseURL: `${process.env.REACT_APP_API_URL}/api/v1` }
+  : { baseURL: `${window['ROOT_PATH']}/api/v1` }
+
+export default {
+  getApiPath() {
+    return overrideApiUrl.baseURL
+  },
+
+  getSecured({ token = undefined, toastErrors = true, timeout = 2000 } = {}) {
+    if (!token) {
+      const ls = pullToken()
+      token = ls && ls.token
+    }
+
+    return createClient(
+      {
+        timeout,
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'X-BP-Workspace': getActiveWorkspace()
+        },
+        ...overrideApiUrl
+      },
+      { toastErrors }
+    )
+  },
+
+  getAnonymous({ toastErrors = true } = {}) {
+    return createClient(overrideApiUrl, { toastErrors })
+  }
+}

src/bp/ui-admin/src/utils/toaster.tsx

@@ -1,6 +1,40 @@
-import { Position, Toaster } from '@blueprintjs/core'
+import { Intent, Position, Toaster } from '@blueprintjs/core'
+import _ from 'lodash'
+import React from 'react'
 
-export const AppToaster = Toaster.create({
-  className: 'recipe-toaster',
-  position: Position.TOP
-})
+export const toastSuccess = message =>
+  Toaster.create({ className: 'recipe-toaster', position: Position.TOP_RIGHT }).show({
+    message,
+    intent: Intent.SUCCESS,
+    timeout: 1000
+  })
+
+export const toastFailure = message =>
+  Toaster.create({ className: 'recipe-toaster', position: Position.TOP_RIGHT }).show({
+    message,
+    intent: Intent.DANGER,
+    timeout: 3000
+  })
+
+export const toastError = error => {
+  const errorCode = _.get(error, 'response.data.errorCode') || _.get(error, 'errorCode')
+  const details = _.get(error, 'response.data.message') || _.get(error, 'message')
+  const docs = _.get(error, 'response.data.docs') || _.get(error, 'docs')
+
+  let message = (
+    <span>
+      {errorCode && <span>[{errorCode}]</span>} {details}{' '}
+      {docs && (
+        <a href={docs} target="_blank">
+          More informations
+        </a>
+      )}
+    </span>
+  )
+
+  if (!errorCode && !message) {
+    message = <span>Something wrong happened. Please try again later.</span>
+  }
+
+  toastFailure(message)
+}