Adjust Nylas component implementation

client/web/compose/src/components/PageBlocks/Nylas/Components/Mailbox.vue

@@ -23,8 +23,8 @@ export default {
 
   computed: {
     queryString () {
-      const { queryString = [] } = this.prefillValues
-      return `from=${queryString}`
+      const { queryString = '' } = this.prefillValues
+      return queryString ? `from=${queryString}` : undefined
     },
   },
 }

client/web/compose/src/components/PageBlocks/Nylas/Components/base.vue

@@ -8,7 +8,7 @@ export default {
 
     accessToken: {
       type: String,
-      required: true,
+      default: undefined,
     },
   },
 }

client/web/compose/src/components/PageBlocks/Nylas/NylasBase.vue

@@ -5,7 +5,7 @@
   >
     <div
       v-if="hideComponent"
-      class="d-flex flex-column align-items-center justify-content-center h-100 overflow-hidden"
+      class="d-flex flex-column align-items-center justify-content-center text-center h-100 overflow-hidden p-2 "
     >
       <b-spinner
         v-if="processing"
@@ -60,7 +60,7 @@ export default {
 
       isExternalConfigured: false,
 
-      accessToken: '',
+      accessToken: undefined,
 
       tokenCheckInterval: undefined,
 
@@ -79,7 +79,8 @@ export default {
     },
 
     hideComponent () {
-      return this.processing || !this.isExternalConfigured || !this.accessToken || !this.options.componentID
+      // If access token is required, check if external is configured and we have it
+      return this.processing || !this.options.componentID || (this.options.accessTokenRequired && !(this.isExternalConfigured && this.accessToken))
     },
   },
 
@@ -87,6 +88,11 @@ export default {
     'record.recordID': {
       immediate: true,
       async handler () {
+        if (!this.options.accessTokenRequired) {
+          this.processPrefillValues()
+          return
+        }
+
         this.processing = true
         // Check if nylas is configured as a provider
         const { enabled: externalEnabled = false, providers = [] } = this.$Settings.get('auth.external', {})
@@ -105,8 +111,17 @@ export default {
           .finally(() => {
             this.processing = false
           })
+      },
+    },
 
-        this.processPrefillValues()
+    options: {
+      deep: true,
+      handler () {
+        this.processing = true
+
+        setTimeout(() => {
+          this.processing = false
+        }, 300)
       },
     },
   },
@@ -118,7 +133,7 @@ export default {
           to: this.mapFieldToValue('to').map(v => ({ email: v })),
           subject: this.mapFieldToValue('subject').join(','),
           body: this.mapFieldToValue('body').join('<br />'),
-          queryString: this.mapFieldToValue('queryString').join(','),
+          queryString: this.mapFieldToValue('queryString')[0],
         }
       }
     },

client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue

@@ -1,21 +1,51 @@
 <template>
   <b-tab :title="$t('label')">
-    <b-form-group
-      :label="$t('kind')"
-    >
-      <b-form-select
-        v-model="options.kind"
-        :options="nylasComponentKinds"
-      />
-    </b-form-group>
+    <b-row>
+      <b-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          :label="$t('kind')"
+          label-class="text-primary"
+        >
+          <b-form-select
+            v-model="options.kind"
+            :options="nylasComponentKinds"
+          />
+        </b-form-group>
+      </b-col>
 
-    <b-form-group
-      :label="$t('componentID')"
-    >
-      <b-form-input
-        v-model="options.componentID"
-      />
-    </b-form-group>
+      <b-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          :label="$t('componentID')"
+          label-class="text-primary"
+        >
+          <b-form-input
+            v-model="options.componentID"
+          />
+        </b-form-group>
+      </b-col>
+
+      <b-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          :label="$t('accessTokenRequired')"
+          label-class="text-primary"
+        >
+          <c-input-checkbox
+            v-model="options.accessTokenRequired"
+            switch
+            :labels="checkboxLabels"
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
 
     <template v-if="showPreviewSection">
       <hr class="my-3">
@@ -149,7 +179,7 @@ export default {
         { value: 'Mailbox', text: this.$t('kinds.mailbox') },
       ],
 
-      checkboxLabel: {
+      checkboxLabels: {
         on: this.$t('general:label.yes'),
         off: this.$t('general:label.no'),
       },

lib/js/src/compose/types/page-block/nylas.ts

@@ -6,6 +6,7 @@ const kind = 'Nylas'
 interface Options {
   kind: string,
   componentID: string;
+  accessTokenRequired: boolean;
   magnifyOption: string;
   prefill: Prefill;
 }
@@ -20,6 +21,7 @@ interface Prefill {
 const defaults: Readonly<Options> = Object.freeze({
   kind: 'Composer', // Default kind of nylas component
   componentID: '',
+  accessTokenRequired: true,
   magnifyOption: '',
   prefill: {
     to: '',
@@ -43,6 +45,7 @@ export class PageBlockNylas extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, String, 'kind', 'componentID', 'magnifyOption')
+    Apply(this.options, o, Boolean, 'accessTokenRequired')
 
     this.options.prefill = { ...defaults.prefill, ...o.prefill }
   }

locale/en/corteza-webapp-compose/block.yaml

@@ -729,6 +729,7 @@ nylas:
     label: Office365/Google
     kind: Component kind
     componentID: Component ID
+    accessTokenRequired: Access token required
     prefill:
       title: Prefill values
       selectField: Select field