feat: remove the extension list (#250)

Author: chrismwendt

src/shared/components/options/BrowserSettingsEditor.tsx

@@ -44,7 +44,6 @@ export class BrowserSettingsEditor extends React.Component<{}, State> {
     public render(): JSX.Element | null {
         return (
             <div>
-                <div className="options__section-header">Client settings</div>
                 <div className="options__section-contents">
                     <FormGroup>
                         <Label className="options__input">

src/shared/components/options/ClientSettingsCard.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'
+import { BrowserSettingsEditor } from './BrowserSettingsEditor'
+
+export class ClientSettingsCard extends React.Component {
+    public render(): JSX.Element | null {
+        return (
+            <Row className="pb-3">
+                <Col>
+                    <Card>
+                        <CardHeader>Client settings</CardHeader>
+                        <CardBody>
+                            <BrowserSettingsEditor />
+                        </CardBody>
+                    </Card>
+                </Col>
+            </Row>
+        )
+    }
+}

src/shared/components/options/ExtensionRegistry.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Card, CardBody, CardHeader, Col, Form, FormGroup, Input, Label, Row } from 'reactstrap'
 import storage from '../../../browser/storage'
 import { StorageItems } from '../../../browser/types'
+import { sourcegraphUrl } from '../../util/context'
 
 interface Props {
     storage: StorageItems
@@ -96,6 +97,15 @@ export class FeatureFlagCard extends React.Component<Props, {}> {
                                             type="checkbox"
                                         />{' '}
                                         Use Sourcegraph extensions
+                                        {useExtensions && (
+                                            <>
+                                                {' '}
+                                                and{' '}
+                                                <a href={sourcegraphUrl + '/extensions'} target="_blank">
+                                                    enable extensions on the registry
+                                                </a>
+                                            </>
+                                        )}
                                     </Label>
                                 </FormGroup>
                                 <FormGroup check={true}>

src/shared/components/options/FeatureFlagCard.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
-import { RouteComponentProps } from 'react-router'
 import { Subscription } from 'rxjs'
 import * as permissions from '../../../browser/permissions'
 import storage from '../../../browser/storage'
 import { StorageItems } from '../../../browser/types'
 import { GQL } from '../../../types/gqlschema'
 import { fetchCurrentUser } from '../../backend/server'
+import { ClientSettingsCard } from './ClientSettingsCard'
 import { ConnectionCard } from './ConnectionCard'
 import { FeatureFlagCard } from './FeatureFlagCard'
 
-interface Props extends RouteComponentProps<any> {}
+interface Props {}
 interface State {
     currentUser: GQL.IUser | undefined
     storage: StorageItems | undefined
@@ -78,6 +78,7 @@ export class OptionsConfiguration extends React.Component<Props, State> {
             <div className="options-configuation-page">
                 <ConnectionCard permissionOrigins={permissionOrigins} storage={storage} currentUser={currentUser} />
                 <FeatureFlagCard storage={storage} />
+                {storage.useExtensions && <ClientSettingsCard />}
             </div>
         )
     }

src/shared/components/options/OptionsConfiguration.tsx

@@ -1,38 +1,14 @@
 import * as React from 'react'
-import { Redirect, Route, Switch } from 'react-router'
-import { HashRouter } from 'react-router-dom'
-import { sourcegraphUrl } from '../../util/context'
-import { ExtensionRegistry } from './ExtensionRegistry'
 import { OptionsConfiguration } from './OptionsConfiguration'
-import { OptionsPageSidebar } from './OptionsPageSidebar'
-
-const EXTENSION_ROUTE = '/extensions/:url/:author/:extension?'
 
 export class OptionsDashboard extends React.Component<any, {}> {
-    /**
-     * extensionRedirectComponent redirects to the extension page on Sourcegraph instead of showing
-     * the extension in the options page and keeps the user on the extension registry page.
-     */
-    private extensionRedirectComponent = (): JSX.Element | null => {
-        const extensionUrl = window.location.hash.replace('#', sourcegraphUrl)
-        window.open(extensionUrl, '_blank')
-        return <Redirect from={EXTENSION_ROUTE} to="/extensions" />
-    }
-
     public render(): JSX.Element {
         return (
-            <HashRouter>
-                <div className="site-admin-area area">
-                    <OptionsPageSidebar className="area__sidebar" />
-                    <div className="area__content">
-                        <Switch>
-                            <Route path="/" component={OptionsConfiguration} exact={true} />
-                            <Route path="/extensions" component={ExtensionRegistry} exact={true} />
-                            <Route path={EXTENSION_ROUTE} component={this.extensionRedirectComponent} />
-                        </Switch>
-                    </div>
+            <div className="site-admin-area area">
+                <div className="area__content">
+                    <OptionsConfiguration />
                 </div>
-            </HashRouter>
+            </div>
         )
     }
 }