feat: remote-tab-session-key (#127)

* feat: remote-tab-session-key

* chore(docs): add attr description

blocks/ExternalSource/ExternalSource.js

@@ -2,6 +2,7 @@ import { create } from '../../submodules/symbiote/core/symbiote.js';
 import { Block } from '../../abstract/Block.js';
 import { registerMessage, unregisterMessage } from './messages.js';
 import { buildStyles } from './buildStyles.js';
+import { queryString } from './query-string.js';
 
 export class ExternalSource extends Block {
   activityType = Block.activities.EXTERNAL;
@@ -20,6 +21,8 @@ export class ExternalSource extends Block {
   _iframe = null;
 
   initCallback() {
+    this.bindCssData('--cfg-remote-tab-session-key');
+
     this.registerActivity(this.activityType, () => {
       let { externalSourceType } = this.activityParams;
 
@@ -79,10 +82,19 @@ export class ExternalSource extends Block {
 
   remoteUrl() {
     let pubkey = this.$['*--cfg-pubkey'];
-    let version = '3.11.3';
     let imagesOnly = false.toString();
     let { externalSourceType } = this.activityParams;
-    return `https://social.uploadcare.com/window3/${externalSourceType}?lang=en&public_key=${pubkey}&widget_version=${version}&images_only=${imagesOnly}&pass_window_open=false`;
+    let params = {
+      lang: 'en', // TOOD: pass correct lang
+      // TODO: we should add a new property to the social sources application
+      // to collect uc-blocks data separately from legacy widget
+      widget_version: '3.11.3',
+      public_key: pubkey,
+      images_only: imagesOnly,
+      pass_window_open: false,
+      session_key: this.$['*--cfg-remote-tab-session-key']
+    }
+    return `https://social.uploadcare.com/window3/${externalSourceType}?${queryString(params)}`;
   }
 
   mountIframe() {

blocks/ExternalSource/query-string.js

@@ -0,0 +1,14 @@
+/**
+ * @param {{[key: string]: string | number | boolean | null | undefined}} params
+ * @return {string}
+ */
+export function queryString(params) {
+  let list = []
+  for(let [key, value] of Object.entries(params)) {
+    if (value === undefined || value === null || (typeof value === 'string' && value.length === 0)) {
+      continue
+    }
+    list.push(`${key}=${encodeURIComponent(value)}`)
+  }
+  return list.join('&')
+}

blocks/themes/uc-basic/config.css

@@ -27,4 +27,6 @@
   --cfg-data-output-fire-events: 1;
   --cfg-data-output-from: '*dataOutput';
   --cfg-data-output-form-value: 1;
+
+  --cfg-remote-tab-session-key: '';
 }

docs/configuration/README.md

@@ -19,6 +19,7 @@ This is the list of pre-defined parameters, used by default in our uploader buil
   --cfg-show-empty-list: 0;
   --cfg-use-local-image-editor: 0;
   --cfg-use-cloud-image-editor: 0;
+  --cfg-remote-tab-session-key: '';
 }
 ```
 As you can see, all properties are grouped for the set of selectors:
@@ -49,6 +50,7 @@ Any configuration value can be defined and redefined at any level of the DOM tre
 |`--cfg-show-empty-list`| Show uploads list when it's empty | `1` or `0` | `0` |
 |`--cfg-use-local-image-editor`| Enable local image editing | `1` or `0` | `0` |
 |`--cfg-use-cloud-image-editor`| Enable cloud image editing | `1` or `0` | `0` |
+|`--cfg-remote-tab-session-key`| Key to revoke Custom OAuth access. See [docs](https://uploadcare.com/docs/start/settings/#project-settings-advanced-oauth) for details | string | none |
 
 ## Possible values for the source list
 
@@ -83,11 +85,11 @@ import { BlockComponent } from 'upload-blocks/BlockComponent/BlockComponent.js';
 
 class MyBlock extends BlockComponent {
   initCallback() {
-    let statePropName = this.bindCssData('--cfg-my-custom-property'); 
+    let statePropName = this.bindCssData('--cfg-my-custom-property');
     // ^ this will return '*--cfg-my-custom-property'
     this.sub(statePropName, (val) => {
       console.log(val);
     });
   }
 }
-```
+```