feat: accept settings updates from Sourcegraph pages (#146)

Author: chrismwendt

package-lock.json

@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@sourcegraph/codeintellify": "^3.8.3",
-    "@sourcegraph/extensions-client-common": "^8.1.4",
+    "@sourcegraph/extensions-client-common": "^8.2.0",
     "@sourcegraph/react-loading-spinner": "0.0.6",
     "@sqs/jsonc-parser": "^1.0.3",
     "bootstrap": "^4.0.0",

package.json

@@ -1,20 +1,44 @@
+import { connectAsClient } from '@sourcegraph/extensions-client-common/lib/messaging'
+import storage from '../../browser/storage'
+import { updateExtensionSettings } from '../../shared/backend/extensions'
+
 export function injectSourcegraphApp(marker: HTMLElement): void {
     if (document.getElementById(marker.id)) {
         return
     }
 
+    // Generate and insert DOM element, in case this code executes first.
+    document.body.appendChild(marker)
+
+    connectAsClient()
+        .then(connection => {
+            storage.observeSync('clientSettings').subscribe(settings => {
+                connection.sendSettings(settings)
+            })
+
+            connection.onEditSetting(edit => updateExtensionSettings('Client', edit).toPromise())
+
+            connection.onGetSettings(
+                () =>
+                    new Promise<string>(resolve => {
+                        storage.getSync(storageItems => {
+                            resolve(storageItems.clientSettings)
+                        })
+                    })
+            )
+        })
+        .catch(error => console.error(error))
+
     window.addEventListener('load', () => {
-        dispatchSourcegraphEvents(marker)
+        dispatchSourcegraphEvents()
     })
 
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
-        dispatchSourcegraphEvents(marker)
+        dispatchSourcegraphEvents()
     }
 }
 
-function dispatchSourcegraphEvents(marker: HTMLElement): void {
-    // Generate and insert DOM element, in case this code executes first.
-    document.body.appendChild(marker)
+function dispatchSourcegraphEvents(): void {
     // Send custom webapp <-> extension registration event in case webapp listener is attached first.
     document.dispatchEvent(new CustomEvent<{}>('sourcegraph:browser-extension-registration'))
 }

src/libs/sourcegraph/inject.tsx

@@ -1,3 +1,4 @@
+import { UpdateExtensionSettingsArgs } from '@sourcegraph/extensions-client-common/lib/context'
 import { Controller as ExtensionsContextController } from '@sourcegraph/extensions-client-common/lib/controller'
 import { ConfiguredExtension } from '@sourcegraph/extensions-client-common/lib/extensions/extension'
 import { gql, graphQLContent } from '@sourcegraph/extensions-client-common/lib/graphql'
@@ -17,15 +18,14 @@ import { isEqual } from 'lodash'
 import Alert from 'mdi-react/AlertIcon'
 import MenuDown from 'mdi-react/MenuDownIcon'
 import Menu from 'mdi-react/MenuIcon'
-import { combineLatest, Observable, Subject, throwError } from 'rxjs'
+import { combineLatest, from, Observable, throwError } from 'rxjs'
 import { distinctUntilChanged, map, mergeMap, switchMap, take } from 'rxjs/operators'
 import { ClientOptions } from 'sourcegraph/module/client/client'
 import { MessageTransports } from 'sourcegraph/module/jsonrpc2/connection'
 import { TextDocumentDecoration } from 'sourcegraph/module/protocol'
-import { ConfigurationUpdateParams } from 'sourcegraph/module/protocol'
 import uuid from 'uuid'
 import { Disposable } from 'vscode-languageserver'
-import storage from '../../browser/storage'
+import storage, { StorageItems } from '../../browser/storage'
 import { ExtensionConnectionInfo } from '../../extension/scripts/background'
 import { onFirstMessage } from '../../extension/scripts/background'
 import { getContext } from './context'
@@ -255,45 +255,7 @@ export function createExtensionsContextController(
             map(([gqlCascade, storageCascade]) => mergeCascades(gqlToCascade(gqlCascade), storageCascade)),
             distinctUntilChanged((a, b) => isEqual(a, b))
         ),
-        updateExtensionSettings: (
-            subjectID,
-            args: { extensionID: string; edit?: ConfigurationUpdateParams; enabled?: boolean; remove?: boolean }
-        ) => {
-            if (subjectID !== 'Client') {
-                return throwError('Cannot update settings for ' + subjectID + '.')
-            }
-            const update = new Subject<undefined>()
-            storage.getSync(storageItems => {
-                let clientSettings = storageItems.clientSettings
-
-                const format = { tabSize: 2, insertSpaces: true, eol: '\n' }
-
-                if (args.edit) {
-                    clientSettings = applyEdits(
-                        clientSettings,
-                        // TODO(chris): remove `.slice()` (which guards against
-                        // mutation) once
-                        // https://github.com/Microsoft/node-jsonc-parser/pull/12
-                        // is merged in.
-                        setProperty(clientSettings, args.edit.path.slice(), args.edit.value, format)
-                    )
-                } else if (typeof args.enabled === 'boolean') {
-                    clientSettings = applyEdits(
-                        clientSettings,
-                        setProperty(clientSettings, ['extensions', args.extensionID], args.enabled, format)
-                    )
-                } else if (args.remove) {
-                    clientSettings = applyEdits(
-                        clientSettings,
-                        removeProperty(clientSettings, ['extensions', args.extensionID], format)
-                    )
-                }
-                storage.setSync({ clientSettings }, () => {
-                    update.next(undefined)
-                })
-            })
-            return update
-        },
+        updateExtensionSettings,
         queryGraphQL: (request, variables) =>
             storage.observeSync('sourcegraphURL').pipe(
                 take(1),
@@ -315,3 +277,41 @@ export function createExtensionsContextController(
         },
     })
 }
+
+export const updateExtensionSettings = (subjectID, args: UpdateExtensionSettingsArgs): Observable<undefined> => {
+    if (subjectID !== 'Client') {
+        return throwError('Cannot update settings for ' + subjectID + '.')
+    }
+    return from(
+        new Promise<StorageItems>(resolve => storage.getSync(storageItems => resolve(storageItems))).then(
+            storageItems => {
+                let clientSettings = storageItems.clientSettings
+
+                const format = { tabSize: 2, insertSpaces: true, eol: '\n' }
+
+                if ('edit' in args && args.edit) {
+                    clientSettings = applyEdits(
+                        clientSettings,
+                        // TODO(chris): remove `.slice()` (which guards against
+                        // mutation) once
+                        // https://github.com/Microsoft/node-jsonc-parser/pull/12
+                        // is merged in.
+                        setProperty(clientSettings, args.edit.path.slice(), args.edit.value, format)
+                    )
+                } else if ('extensionID' in args) {
+                    clientSettings = applyEdits(
+                        clientSettings,
+                        typeof args.enabled === 'boolean'
+                            ? setProperty(clientSettings, ['extensions', args.extensionID], args.enabled, format)
+                            : removeProperty(clientSettings, ['extensions', args.extensionID], format)
+                    )
+                }
+                return new Promise<undefined>(resolve =>
+                    storage.setSync({ clientSettings }, () => {
+                        resolve(undefined)
+                    })
+                )
+            }
+        )
+    )
+}

src/shared/backend/extensions.ts

@@ -45,13 +45,17 @@ export class ConnectionCard extends React.Component<Props, State> {
         }
     }
 
+    private setContentScriptUrls(props: Props): void {
+        this.contentScriptUrls = [...props.storage.clientConfiguration.contentScriptUrls, props.storage.sourcegraphURL]
+    }
+
     public componentDidMount(): void {
-        this.contentScriptUrls = this.props.storage.clientConfiguration.contentScriptUrls
+        this.setContentScriptUrls(this.props)
         this.checkConnection()
     }
 
     public componentWillReceiveProps(nextProps: Props): void {
-        this.contentScriptUrls = nextProps.storage.clientConfiguration.contentScriptUrls
+        this.setContentScriptUrls(nextProps)
     }
 
     private sourcegraphServerAlert = (): JSX.Element => {
@@ -74,12 +78,14 @@ export class ConnectionCard extends React.Component<Props, State> {
                 </div>
             )
         }
-        const hasPermissions = this.contentScriptUrls.every(val => permissionOrigins.indexOf(`${val}/*`) >= 0)
-        if (!hasPermissions && !permissionOrigins.includes('<all_urls>')) {
+        const forbiddenUrls = permissionOrigins.includes('<all_urls>')
+            ? []
+            : this.contentScriptUrls.filter(url => !permissionOrigins.includes(`${url}/*`))
+        if (forbiddenUrls.length !== 0) {
             return (
                 <div className="pt-2">
                     <Alert color="warning">
-                        {`Missing content script permissions: ${this.contentScriptUrls.join(', ')}.`}
+                        {`Missing content script permissions: ${forbiddenUrls.join(', ')}.`}
                         <div className="pt-2">
                             <Button
                                 onClick={this.requestPermissions}