feat: add back client settings (for unauthed users only)

sqs · sqs · commit 5793ce0932fc · 2018-10-31T17:18:12.000-07:00
Unauthenticated users can use client settings (again, partially reverted from 288706e). This means that unauthed users can use extensions that modify settings. Client settings are IGNORED for authed users; all settings reads and writes go directly to the associated Sourcegraph user account on their instance. This is to reduce UX complexity.
diff --git a/package.json b/package.json
@@ -113,7 +113,7 @@
   "dependencies": {
     "@slimsag/react-shortcuts": "^1.2.1",
     "@sourcegraph/codeintellify": "^3.9.1",
-    "@sourcegraph/extensions-client-common": "^10.4.2",
+    "@sourcegraph/extensions-client-common": "^10.5.1",
     "@sourcegraph/react-loading-spinner": "0.0.6",
     "@sqs/jsonc-parser": "^1.0.3",
     "@types/uglifyjs-webpack-plugin": "1.1.0",
diff --git a/src/browser/types.ts b/src/browser/types.ts
@@ -67,6 +67,10 @@ export interface StorageItems {
      */
     featureFlags: FeatureFlags
     clientConfiguration: ClientConfigurationDetails
+    /**
+     * Overrides settings from Sourcegraph.
+     */
+    clientSettings: string
 }
 
 interface ClientConfigurationDetails {
@@ -106,6 +110,7 @@ export const defaultStorageItems: StorageItems = {
             url: 'https://sourcegraph.com',
         },
     },
+    clientSettings: '',
 }
 
 export type StorageChange = { [key in keyof StorageItems]: chrome.storage.StorageChange }
diff --git a/src/shared/backend/extensions.ts b/src/shared/backend/extensions.ts
@@ -2,22 +2,32 @@ import { UpdateExtensionSettingsArgs } from '@sourcegraph/extensions-client-comm
 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'
-import { ConfigurationSubject, gqlToCascade, Settings } from '@sourcegraph/extensions-client-common/lib/settings'
+import {
+    ConfigurationCascade,
+    ConfigurationCascadeOrError,
+    ConfigurationSubject,
+    gqlToCascade,
+    mergeSettings,
+    Settings,
+} from '@sourcegraph/extensions-client-common/lib/settings'
 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
+import { applyEdits } from '@sqs/jsonc-parser'
+import * as JSONC from '@sqs/jsonc-parser'
+import { removeProperty, setProperty } from '@sqs/jsonc-parser/lib/edit'
 import { isEqual } from 'lodash'
 import AddIcon from 'mdi-react/AddIcon'
 import Alert from 'mdi-react/AlertIcon'
 import InfoIcon from 'mdi-react/InformationIcon'
 import MenuDown from 'mdi-react/MenuDownIcon'
 import Menu from 'mdi-react/MenuIcon'
 import SettingsIcon from 'mdi-react/SettingsIcon'
-import { combineLatest, Observable, Subject, throwError } from 'rxjs'
+import { combineLatest, from, Observable, Subject, throwError } from 'rxjs'
 import { distinctUntilChanged, map, mapTo, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators'
 import { MessageTransports } from 'sourcegraph/module/protocol/jsonrpc2/connection'
 import { TextDocumentDecoration } from 'sourcegraph/module/protocol/plainTypes'
 import uuid from 'uuid'
 import { Disposable } from 'vscode-languageserver'
-import storage from '../../browser/storage'
+import storage, { StorageItems } from '../../browser/storage'
 import { GQL } from '../../types/gqlschema'
 import { ExtensionConnectionInfo, onFirstMessage } from '../messaging'
 import { canFetchForURL } from '../util/context'
@@ -128,6 +138,45 @@ export const applyDecoration = ({
     return mergeDisposables(...disposables)
 }
 
+const storageConfigurationCascade: Observable<
+    ConfigurationCascade<ConfigurationSubject, Settings>
+> = storage.observeSync('clientSettings').pipe(
+    map(clientSettingsString => JSONC.parse(clientSettingsString || '')),
+    map(clientSettings => ({
+        subjects: [
+            {
+                subject: {
+                    id: 'Client',
+                    settingsURL: 'N/A',
+                    viewerCanAdminister: true,
+                    __typename: 'Client',
+                    displayName: 'Client',
+                } as ConfigurationSubject,
+                settings: clientSettings,
+            },
+        ],
+        merged: clientSettings || {},
+    }))
+)
+
+const mergeCascades = (
+    cascadeOrError: ConfigurationCascadeOrError<ConfigurationSubject, Settings>,
+    cascade: ConfigurationCascade<ConfigurationSubject, Settings>
+): ConfigurationCascadeOrError<ConfigurationSubject, Settings> => ({
+    subjects:
+        cascadeOrError.subjects === null
+            ? cascade.subjects
+            : isErrorLike(cascadeOrError.subjects)
+                ? cascadeOrError.subjects
+                : [...cascadeOrError.subjects, ...cascade.subjects],
+    merged:
+        cascadeOrError.merged === null
+            ? cascade.merged
+            : isErrorLike(cascadeOrError.merged)
+                ? cascadeOrError.merged
+                : mergeSettings([cascadeOrError.merged, cascade.merged]),
+})
+
 const configurationCascadeFragment = gql`
     fragment ConfigurationCascadeFields on ConfigurationCascade {
         subjects {
@@ -169,7 +218,7 @@ const configurationCascadeRefreshes = new Subject<void>()
  * Always represents the entire configuration cascade; i.e., it contains the
  * individual configs from the various config subjects (orgs, user, etc.).
  */
-export const configurationCascade = combineLatest(
+export const gqlConfigurationCascade = combineLatest(
     storage.observeSync('sourcegraphURL'),
     configurationCascadeRefreshes.pipe(
         mapTo(null),
@@ -194,23 +243,50 @@ export const configurationCascade = combineLatest(
                 if (!data || !data.viewerConfiguration) {
                     throw createAggregateError(errors)
                 }
+
+                for (const subject of data.viewerConfiguration.subjects) {
+                    // User/org/global settings cannot be edited from the
+                    // browser extension (only client settings can).
+                    subject.viewerCanAdminister = false
+                }
+
                 return data.viewerConfiguration
             })
         )
     )
 )
 
+const EMPTY_CONFIGURATION_CASCADE: ConfigurationCascade = { subjects: [], merged: {} }
+
+/**
+ * The active configuration cascade.
+ *
+ * - For unauthenticated users, this is the GraphQL settings plus client settings (which are stored locally in the
+ *   browser extension.
+ * - For authenticated users, this is just the GraphQL settings (client settings are ignored to simplify the UX).
+ */
+export const configurationCascade: Observable<
+    ConfigurationCascadeOrError<ConfigurationSubject, Settings>
+> = combineLatest(gqlConfigurationCascade, storageConfigurationCascade).pipe(
+    map(([gqlCascade, storageCascade]) =>
+        mergeCascades(
+            gqlToCascade(gqlCascade),
+            gqlCascade.subjects.some(subject => subject.__typename === 'User')
+                ? EMPTY_CONFIGURATION_CASCADE
+                : storageCascade
+        )
+    ),
+    distinctUntilChanged((a, b) => isEqual(a, b))
+)
+
 export function createExtensionsContextController(
     sourcegraphUrl: string
 ): ExtensionsContextController<ConfigurationSubject, Settings> {
     const sourcegraphLanguageServerURL = new URL(sourcegraphUrl)
     sourcegraphLanguageServerURL.pathname = '.api/xlang'
 
     return new ExtensionsContextController<ConfigurationSubject, Settings>({
-        configurationCascade: configurationCascade.pipe(
-            map(gqlCascade => gqlToCascade(gqlCascade)),
-            distinctUntilChanged((a, b) => isEqual(a, b))
-        ),
+        configurationCascade,
         updateExtensionSettings,
         queryGraphQL: (request, variables, requestMightContainPrivateInfo) =>
             storage.observeSync('sourcegraphURL').pipe(
@@ -250,11 +326,11 @@ export function createExtensionsContextController(
 }
 
 // TODO(sqs): copied from sourcegraph/sourcegraph temporarily
-function updateExtensionSettings(subject: string, args: UpdateExtensionSettingsArgs): Observable<void> {
-    return configurationCascade.pipe(
+function updateUserSettings(subject: string, args: UpdateExtensionSettingsArgs): Observable<void> {
+    return gqlConfigurationCascade.pipe(
         take(1),
-        switchMap(configurationCascade => {
-            const subjectConfig = configurationCascade.subjects.find(s => s.id === subject)
+        switchMap(gqlConfigurationCascade => {
+            const subjectConfig = gqlConfigurationCascade.subjects.find(s => s.id === subject)
             if (!subjectConfig) {
                 throw new Error(`no configuration subject: ${subject}`)
             }
@@ -308,3 +384,44 @@ function editConfiguration(subject: GQL.ID, lastID: number | null, edit: GQL.ICo
 function toGQLKeyPath(keyPath: (string | number)[]): GQL.IKeyPathSegment[] {
     return keyPath.map(v => (typeof v === 'string' ? { property: v } : { index: v }))
 }
+
+const updateClientSettings = (subjectID: 'Client', args: UpdateExtensionSettingsArgs): Observable<void> =>
+    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)
+                    })
+                )
+            }
+        )
+    )
+
+export const updateExtensionSettings = (subjectID: string, args: UpdateExtensionSettingsArgs): Observable<void> => {
+    if (subjectID === 'Client') {
+        return updateClientSettings(subjectID, args)
+    }
+    return updateUserSettings(subjectID, args)
+}
diff --git a/src/shared/backend/server.ts b/src/shared/backend/server.ts
@@ -41,6 +41,7 @@ export const fetchCurrentUser = (useAccessToken = true): Observable<GQL.IUser |
                 username
                 avatarURL
                 url
+                settingsURL
                 emails {
                     email
                 }
diff --git a/src/shared/components/options/BrowserSettingsEditor.tsx b/src/shared/components/options/BrowserSettingsEditor.tsx
@@ -0,0 +1,69 @@
+// We want to polyfill first.
+import '../../../config/polyfill'
+
+import * as React from 'react'
+import { Button, FormGroup, Input, Label } from 'reactstrap'
+import { Subscription } from 'rxjs'
+import storage from '../../../browser/storage'
+
+interface State {
+    clientSettings: string
+}
+
+export class BrowserSettingsEditor extends React.Component<{}, State> {
+    private subscriptions = new Subscription()
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            clientSettings: 'Loading...',
+        }
+    }
+
+    public componentDidMount(): void {
+        this.subscriptions.add(
+            storage.observeSync('clientSettings').subscribe(clientSettings => {
+                this.setState(() => ({ clientSettings }))
+            })
+        )
+    }
+
+    public componentWillUnmount(): void {
+        this.subscriptions.unsubscribe()
+    }
+
+    private saveLocalSettings = () => {
+        storage.setSync({ clientSettings: this.state.clientSettings })
+    }
+
+    private onSettingsChanged = event => {
+        const value = event.target.value
+        this.setState(() => ({ clientSettings: value }))
+    }
+
+    public render(): JSX.Element | null {
+        return (
+            <div>
+                <div className="options__section-contents">
+                    <FormGroup>
+                        <Label className="options__input">
+                            <Input
+                                className="options__input-textarea"
+                                type="textarea"
+                                value={this.state.clientSettings}
+                                onChange={this.onSettingsChanged}
+                                autoComplete="off"
+                                autoCorrect="off"
+                                autoCapitalize="off"
+                                spellCheck={false}
+                            />
+                        </Label>
+                        <Button className="options__cta" color="primary" onClick={this.saveLocalSettings}>
+                            Save
+                        </Button>
+                    </FormGroup>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/src/shared/components/options/OptionsConfiguration.tsx b/src/shared/components/options/OptionsConfiguration.tsx
@@ -7,6 +7,7 @@ import { GQL } from '../../../types/gqlschema'
 import { fetchCurrentUser } from '../../backend/server'
 import { ConnectionCard } from './ConnectionCard'
 import { FeatureFlagCard } from './FeatureFlagCard'
+import { SettingsCard } from './SettingsCard'
 
 interface Props {}
 interface State {
@@ -31,7 +32,7 @@ export class OptionsConfiguration extends React.Component<Props, State> {
     }
 
     public componentDidMount(): void {
-        fetchCurrentUser().subscribe(user => {
+        fetchCurrentUser(true).subscribe(user => {
             this.setState(() => ({ currentUser: user }))
         })
         storage.onChanged(() => {
@@ -77,6 +78,7 @@ export class OptionsConfiguration extends React.Component<Props, State> {
             <div className="options-configuration-page">
                 <ConnectionCard permissionOrigins={permissionOrigins} storage={storage} currentUser={currentUser} />
                 <FeatureFlagCard storage={storage} />
+                {storage.useExtensions && <SettingsCard currentUser={currentUser} />}
             </div>
         )
     }
diff --git a/src/shared/components/options/SettingsCard.tsx b/src/shared/components/options/SettingsCard.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export const fetchCurrentUser = (useAccessToken = true): Observable<GQL.IUser \|`
`41`	`41`	`username`
`42`	`42`	`avatarURL`
`43`	`43`	`url`
	`44`	`+ settingsURL`
`44`	`45`	`emails {`
`45`	`46`	`email`
`46`	`47`	`}`