feat: remove file tree

Reason: It is not the primary focus/draw of this extension, and we don't plan to make this available on other code hosts (so it leads to inconsistencies in product offerings among code hosts).

BREAKING CHANGE: The GitHub file tree is removed. Use [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) instead for this feature.

Author: sqs

src/browser/types.ts

@@ -44,7 +44,6 @@ export interface StorageItems {
     phabricatorURL: string
     inlineSymbolSearchEnabled: boolean
     renderMermaidGraphsEnabled: boolean
-    repositoryFileTreeEnabled: boolean
     executeSearchEnabled: boolean
     sourcegraphRepoSearchToggled: boolean
     openEditorEnabled: boolean
@@ -89,7 +88,6 @@ export const defaultStorageItems: StorageItems = {
     phabricatorURL: '',
     inlineSymbolSearchEnabled: true,
     renderMermaidGraphsEnabled: false,
-    repositoryFileTreeEnabled: true,
     executeSearchEnabled: false,
     sourcegraphRepoSearchToggled: true,
     openEditorEnabled: false,

src/extension/scripts/inject.tsx

@@ -10,7 +10,6 @@ import {
     setExecuteSearchEnabled,
     setInlineSymbolSearchEnabled,
     setRenderMermaidGraphsEnabled,
-    setRepositoryFileTreeEnabled,
     setSourcegraphUrl,
     setUseExtensions,
 } from '../../shared/util/context'
@@ -82,9 +81,6 @@ function injectApplication(): void {
             setInlineSymbolSearchEnabled(
                 items.inlineSymbolSearchEnabled === undefined ? false : items.inlineSymbolSearchEnabled
             )
-            setRepositoryFileTreeEnabled(
-                items.repositoryFileTreeEnabled === undefined ? true : items.repositoryFileTreeEnabled
-            )
             setExecuteSearchEnabled(items.executeSearchEnabled === undefined ? true : items.executeSearchEnabled)
             injectGitHubApplication(extensionMarker)
         } else if (isSourcegraphServer || /^https?:\/\/(www.)?sourcegraph.com/.test(href)) {

src/libs/cli/config.ts

@@ -44,39 +44,6 @@ const setUrlCommand: OmniCLI.Command = {
     description: 'Set your primary Sourcegraph URL',
 }
 
-function setFileTree([to]: string[]): void {
-    if ((to && to === 'true') || to === 'false') {
-        storage.setSync({
-            repositoryFileTreeEnabled: to === 'true',
-        })
-        return
-    }
-
-    storage.getSync(({ repositoryFileTreeEnabled }) =>
-        storage.setSync({ repositoryFileTreeEnabled: !repositoryFileTreeEnabled })
-    )
-}
-
-function getSetFileTreeSuggestions(): Promise<OmniCLI.Suggestion[]> {
-    return new Promise(resolve => {
-        storage.getSync(({ repositoryFileTreeEnabled }) =>
-            resolve([
-                {
-                    content: repositoryFileTreeEnabled ? 'false' : 'true',
-                    description: `${repositoryFileTreeEnabled ? 'Disable' : 'Enable'} File Tree`,
-                },
-            ])
-        )
-    })
-}
-
-const setFileTreeCommand: OmniCLI.Command = {
-    name: 'set-tree',
-    action: setFileTree,
-    getSuggestions: getSetFileTreeSuggestions,
-    description: 'Set or toggle the File Tree',
-}
-
 function setOpenFileOn([to]: string[]): void {
     if ((to && to === 'true') || to === 'false') {
         storage.setSync({
@@ -111,4 +78,4 @@ const setOpenFileOnCommand: OmniCLI.Command = {
     description: `Set whether you would like files to open on Sourcegraph of the given repo's code host`,
 }
 
-export default [addUrlCommand, setUrlCommand, setFileTreeCommand, setOpenFileOnCommand]
+export default [addUrlCommand, setUrlCommand, setOpenFileOnCommand]

src/libs/cli/file.ts

@@ -54,12 +54,7 @@ class FileCommand implements OmniCLI.Command {
 
     public getSuggestions = ([queryPath]: string[]): OmniCLI.Suggestion[] => {
         if (this.repos.size === 0) {
-            return [
-                {
-                    content: 'set-tree true',
-                    description: 'Open a tab to a GitHub repo and enable the file tree to use the fuzzy file finder',
-                },
-            ]
+            return []
         }
 
         const suggestions: FileSuggestion[] = []

src/libs/github/inject.tsx

@@ -31,7 +31,6 @@ import { combineLatest, forkJoin, from, of, Subject } from 'rxjs'
 import { filter, map, take, withLatestFrom } from 'rxjs/operators'
 import { Disposable } from 'vscode-languageserver'
 import { GitHubBlobUrl } from '.'
-import storage from '../../browser/storage'
 import { applyDecoration, createMessageTransports } from '../../shared/backend/extensions'
 import { createExtensionsContextController } from '../../shared/backend/extensions'
 import {
@@ -52,13 +51,11 @@ import { WithResolvedRev } from '../../shared/components/WithResolvedRev'
 import { AbsoluteRepoFile, DiffResolvedRevSpec } from '../../shared/repo'
 import { resolveRev, retryWhenCloneInProgressError } from '../../shared/repo/backend'
 import { hideTooltip } from '../../shared/repo/tooltips'
-import { RepoRevSidebar } from '../../shared/tree/RepoRevSidebar'
 import {
     eventLogger,
     getModeFromPath,
     inlineSymbolSearchEnabled,
     renderMermaidGraphsEnabled,
-    repositoryFileTreeEnabled,
     sourcegraphUrl,
     useExtensions,
 } from '../../shared/util/context'
@@ -288,79 +285,12 @@ function inject(): void {
     injectServerBanner()
     injectOpenOnSourcegraphButton()
 
-    injectFileTree()
     injectMermaid()
 
     initSearch()
     injectInlineSearch()
 }
 
-function hideFileTree(): void {
-    const tree = document.getElementById('sourcegraph-file-tree')
-    document.body.style.marginLeft = '0px'
-    if (!tree || !tree.parentNode) {
-        return
-    }
-    tree.parentNode.removeChild(tree)
-}
-
-const specChanges = new Subject<{ repoPath: string; commitID: string }>()
-
-function injectFileTree(): void {
-    if (!repositoryFileTreeEnabled) {
-        return
-    }
-    const { repoPath } = parseURL()
-
-    if (!repoPath) {
-        return
-    }
-    const pjaxContainer = document.getElementById('js-repo-pjax-container')
-    if (!pjaxContainer) {
-        return
-    }
-
-    let container = document.getElementById('sourcegraph-file-tree-container') as HTMLElement
-    let mount = document.getElementById('sourcegraph-file-tree') as HTMLElement
-    if (!mount) {
-        mount = document.createElement('div')
-        mount.id = 'sourcegraph-file-tree'
-        mount.className = 'tree-mount'
-        mount.setAttribute('data-pjax', 'true')
-        container = document.createElement('div')
-        container.id = 'sourcegraph-file-tree-container'
-        container.className = 'repo-rev-container'
-        mount.appendChild(container)
-        pjaxContainer.insertBefore(mount, pjaxContainer.firstElementChild!)
-    }
-
-    const gitHubState = getGitHubState(window.location.href)
-    if (!gitHubState) {
-        return
-    }
-    if (document.querySelector('.octotree')) {
-        storage.setSync({ repositoryFileTreeEnabled: false })
-        hideFileTree()
-        return
-    }
-    render(
-        <WithResolvedRev
-            component={RepoRevSidebar}
-            className="repo-rev-container__sidebar"
-            repoPath={repoPath}
-            rev={gitHubState.rev}
-            history={history}
-            scrollRootSelector="#explorer"
-            selectedPath={gitHubState.filePath}
-            filePath={gitHubState.filePath}
-            location={window.location}
-            defaultBranch={'HEAD'}
-        />,
-        container
-    )
-    specChanges.next({ repoPath, commitID: gitHubState.rev || '' })
-}
-
 /**
  * injectCodeSnippetAnnotator annotates the given containers and adds a view file button.
  * @param containers The blob containers that holds the code snippet to be annotated.

src/shared/app.scss

@@ -82,9 +82,6 @@ $theme-colors-light: (
 @import './repo/tooltips';
 @import './highlight';
 @import './options';
-@import './tree/tree';
-@import './tree/repoRevSidebar';
-@import './tree/resizable';
 @import './components/alerts';
 @import './components/symbols';
 @import './components/codeIntelStatusIndicator';

src/shared/components/Icons.tsx

@@ -44,37 +44,3 @@ export function makeCloseIcon(): HTMLElement {
     render(<CloseIcon size={17} />, el)
     return el
 }
-
-export class ShowFileTree extends React.Component<any, {}> {
-    public render(): JSX.Element {
-        return (
-            <IconBase viewBox="0 0 12 10" {...this.props}>
-                <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                    <g id="Vector" fillRule="nonzero" fill="#FFFFFF">
-                        <path
-                            d="M11,10 L1,10 C0.45,10 0,9.55 0,9 L0,1 C0,0.45 0.45,0 1,0 L11,0 C11.55,0 12,0.45 12,1 L12,9 C12,9.55 11.55,10 11,10 Z M3.5,1.25 C3.5,1.1 3.4,1 3.25,1 L1.25,1 C1.1,1 1,1.1 1,1.25 L1,8.75 C1,8.9 1.1,9 1.25,9 L3.25,9 C3.4,9 3.5,8.9 3.5,8.75 L3.5,1.25 Z M9.4,4.8 L6.9,3.05 C6.775,2.975 6.625,3 6.55,3.1 C6.525,3.15 6.5,3.2 6.5,3.25 L6.5,6.75 C6.5,6.9 6.625,7 6.75,7 C6.8,7 6.85,6.975 6.9,6.95 L9.4,5.2 C9.525,5.125 9.55,4.975 9.475,4.85 C9.45,4.825 9.425,4.8 9.4,4.8 Z"
-                            id="path0_fill"
-                        />
-                    </g>
-                </g>
-            </IconBase>
-        )
-    }
-}
-
-export class ToggleFileTree extends React.Component<any, {}> {
-    public render(): JSX.Element {
-        return (
-            <IconBase viewBox="0 0 12 10" {...this.props}>
-                <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                    <g id="ToggleFileTree" fillRule="nonzero" fill="#FFFFFF">
-                        <path
-                            d="M11,10 L1,10 C0.45,10 0,9.55 0,9 L0,1 C0,0.45 0.45,0 1,0 L11,0 C11.55,0 12,0.45 12,1 L12,9 C12,9.55 11.55,10 11,10 Z M3.5,1.25 C3.5,1.1 3.4,1 3.25,1 L1.25,1 C1.1,1 1,1.1 1,1.25 L1,8.75 C1,8.9 1.1,9 1.25,9 L3.25,9 C3.4,9 3.5,8.9 3.5,8.75 L3.5,1.25 Z M9,3.25 C9,3.1 8.875,3 8.75,3 C8.7,3 8.65,3.025 8.6,3.05 L6.125,4.8 C6,4.875 5.975,5.025 6.05,5.15 C6.075,5.175 6.1,5.2 6.125,5.225 L8.6,6.975 C8.725,7.05 8.875,7.025 8.95,6.925 C8.975,6.875 9,6.825 9,6.775 L9,3.25 Z"
-                            id="path0_fill"
-                        />
-                    </g>
-                </g>
-            </IconBase>
-        )
-    }
-}

src/shared/components/options/FeatureFlagCard.tsx

@@ -13,10 +13,6 @@ export class FeatureFlagCard extends React.Component<Props, {}> {
         storage.setSync({ executeSearchEnabled: !this.props.storage.executeSearchEnabled })
     }
 
-    private onFileTreeToggled = () => {
-        storage.setSync({ repositoryFileTreeEnabled: !this.props.storage.repositoryFileTreeEnabled })
-    }
-
     private onMermaidToggled = () => {
         const renderMermaidGraphsEnabled = !this.props.storage.renderMermaidGraphsEnabled
         storage.setSync({ renderMermaidGraphsEnabled })
@@ -34,7 +30,6 @@ export class FeatureFlagCard extends React.Component<Props, {}> {
         const {
             inlineSymbolSearchEnabled,
             renderMermaidGraphsEnabled,
-            repositoryFileTreeEnabled,
             executeSearchEnabled,
             useExtensions,
         } = this.props.storage
@@ -56,16 +51,6 @@ export class FeatureFlagCard extends React.Component<Props, {}> {
                                         your code host.
                                     </Label>
                                 </FormGroup>
-                                <FormGroup check={true}>
-                                    <Label check={true}>
-                                        <Input
-                                            onClick={this.onFileTreeToggled}
-                                            defaultChecked={repositoryFileTreeEnabled}
-                                            type="checkbox"
-                                        />{' '}
-                                        GitHub file tree navigation.
-                                    </Label>
-                                </FormGroup>
                                 <FormGroup check={true}>
                                     <Label check={true}>
                                         <Input

src/shared/repo/backend.tsx

@@ -187,41 +187,6 @@ export function retryWhenCloneInProgressError<T>(): (v: Observable<T>) => Observ
         )
 }
 
-export const fetchTree = memoizeObservable(
-    (args: { repoPath: string; commitID: string }): Observable<string[]> =>
-        queryGraphQL({
-            ctx: getContext({ repoKey: args.repoPath }),
-            request: `
-                query FileTree($repoPath: String!, $commitID: String!) {
-                    repository(uri: $repoPath) {
-                        commit(rev: $commitID) {
-                            tree(recursive: true) {
-                                files {
-                                    name
-                                }
-                            }
-                        }
-                    }
-                }
-            `,
-            variables: args,
-        }).pipe(
-            map(({ data, errors }) => {
-                if (
-                    !data ||
-                    !data.repository ||
-                    !data.repository.commit ||
-                    !data.repository.commit.tree ||
-                    !data.repository.commit.tree.files
-                ) {
-                    throw Object.assign(new Error((errors || []).map(e => e.message).join('\n')), { errors })
-                }
-                return data.repository.commit.tree.files.map(file => file.name)
-            })
-        ),
-    makeRepoURI
-)
-
 export const listAllSearchResults = memoizeAsync(
     (ctx: { query: string }): Promise<number> =>
         queryGraphQL({