new expand/collapse button

jasonhawkharris · jasonhawkharris · commit 3f647d2a9959 · 2023-10-13T10:51:03.000-05:00
diff --git a/client/web/src/repo/RepoHeader.tsx b/client/web/src/repo/RepoHeader.tsx
@@ -29,7 +29,7 @@ class RepoHeaderContributionStore {
     constructor(
         /** The common ancestor component's setState method. */
         private setState: (callback: (previousState: RepoHeaderContribution[]) => RepoHeaderContribution[]) => void
-    ) {}
+    ) { }
 
     private onRepoHeaderContributionAdd(item: RepoHeaderContribution): void {
         if (!item.children || typeof item.children !== 'function') {
@@ -115,7 +115,7 @@ export interface RepoHeaderContext {
     actionType: 'nav' | 'dropdown'
 }
 
-export interface RepoHeaderActionButton extends ActionButtonDescriptor<RepoHeaderContext> {}
+export interface RepoHeaderActionButton extends ActionButtonDescriptor<RepoHeaderContext> { }
 
 interface Props extends PlatformContextProps, TelemetryProps, BreadcrumbsProps {
     /**
@@ -168,6 +168,10 @@ export const RepoHeader: React.FunctionComponent<React.PropsWithChildren<Props>>
         onLifecyclePropsChange(repoHeaderContributionStore.props)
     }, [onLifecyclePropsChange, repoHeaderContributionStore.props])
 
+    // useEffect(() => {
+    //     console.log(props.breadcrumbs)
+    // }, [])
+
     const context: Omit<RepoHeaderContext, 'actionType'> = useMemo(
         () => ({
             repoName: props.repoName,
diff --git a/client/web/src/repo/RepoRevisionSidebar.tsx b/client/web/src/repo/RepoRevisionSidebar.tsx
@@ -1,6 +1,6 @@
 import { type FC, useCallback, useState } from 'react'
 
-import { mdiChevronDoubleRight, mdiChevronDoubleLeft } from '@mdi/js'
+import { mdiPageLayoutSidebarRight } from '@mdi/js'
 import classNames from 'classnames'
 
 import type { Scalars } from '@sourcegraph/shared/src/graphql-operations'
@@ -12,7 +12,6 @@ import type { RepoFile } from '@sourcegraph/shared/src/util/url'
 import {
     Button,
     useLocalStorage,
-    useMatchMedia,
     Tab,
     TabList,
     TabPanel,
@@ -23,7 +22,6 @@ import {
     Tooltip,
 } from '@sourcegraph/wildcard'
 
-import settingsSchemaJSON from '../../../../schema/settings.schema.json'
 import type { AuthenticatedUser } from '../auth'
 import { useFeatureFlag } from '../featureFlags/useFeatureFlag'
 import { GettingStartedTour } from '../tour/GettingStartedTour'
@@ -41,46 +39,29 @@ interface RepoRevisionSidebarProps extends RepoFile, TelemetryProps, SettingsCas
     className: string
     authenticatedUser: AuthenticatedUser | null
     isSourcegraphDotCom: boolean
+    isVisible: boolean
+    handleSidebarToggle: (value: boolean) => void
 }
 
 const SIZE_STORAGE_KEY = 'repo-revision-sidebar'
 const TABS_KEY = 'repo-revision-sidebar-last-tab'
-const SIDEBAR_KEY = 'repo-revision-sidebar-toggle'
 /**
  * The sidebar for a specific repo revision that shows the list of files and directories.
  */
 export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
     const [persistedTabIndex, setPersistedTabIndex] = useLocalStorage(TABS_KEY, 0)
-    const [persistedIsVisible, setPersistedIsVisible] = useLocalStorage(
-        SIDEBAR_KEY,
-        settingsSchemaJSON.properties.fileSidebarVisibleByDefault.default
-    )
     const showOnboardingTour = useShowOnboardingTour({
         authenticatedUser: props.authenticatedUser,
         isSourcegraphDotCom: props.isSourcegraphDotCom,
     })
 
-    const isWideScreen = useMatchMedia('(min-width: 768px)', false)
-    const [isVisible, setIsVisible] = useState(persistedIsVisible && isWideScreen)
-
     const [initialFilePath, setInitialFilePath] = useState<string>(props.filePath)
     const [initialFilePathIsDir, setInitialFilePathIsDir] = useState<boolean>(props.isDir)
     const onExpandParent = useCallback((parent: string) => {
         setInitialFilePath(parent)
         setInitialFilePathIsDir(true)
     }, [])
 
-    const handleSidebarToggle = useCallback(
-        (value: boolean) => {
-            props.telemetryService.log('FileTreeViewClicked', {
-                action: 'click',
-                label: 'expand / collapse file tree view',
-            })
-            setPersistedIsVisible(value)
-            setIsVisible(value)
-        },
-        [setPersistedIsVisible, props.telemetryService]
-    )
     const handleSymbolClick = useCallback(
         () => props.telemetryService.log('SymbolTreeViewClicked'),
         [props.telemetryService]
@@ -94,14 +75,27 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
 
     return (
         <>
-            {isVisible ? (
+            {props.isVisible && (
                 <Panel
                     defaultSize={256}
                     minSize={150}
                     position="left"
                     storageKey={SIZE_STORAGE_KEY}
                     ariaLabel="File sidebar"
                 >
+                    <Tooltip content="Hide sidebar" placement="right">
+                        <Button
+                            aria-label="Hide sidebar"
+                            variant="icon"
+                            className={classNames(
+                                'position-absolute border mr-2',
+                                styles.toggle
+                            )}
+                            onClick={() => props.handleSidebarToggle(false)}
+                        >
+                            <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarRight} />
+                        </Button>
+                    </Tooltip>
                     <div className="d-flex flex-column h-100 w-100">
                         {showOnboardingTour && (
                             <GettingStartedTour
@@ -120,22 +114,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             behavior="memoize"
                         >
                             <TabList
-                                wrapperClassName="mr-3"
-                                actions={
-                                    <Tooltip content="Hide sidebar" placement="right">
-                                        <Button
-                                            aria-label="Hide sidebar"
-                                            onClick={() => handleSidebarToggle(false)}
-                                            className="bg-transparent border-0 ml-auto p-1 position-relative focus-behaviour"
-                                        >
-                                            <Icon
-                                                className={styles.closeIcon}
-                                                aria-hidden={true}
-                                                svgPath={mdiChevronDoubleLeft}
-                                            />
-                                        </Button>
-                                    </Tooltip>
-                                }
+                                wrapperClassName="mr-3 ml-5"
                             >
                                 <Tab data-tab-content="files">
                                     <span className="tablist-wrapper--tab-label">Files</span>
@@ -182,21 +161,8 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                         </Tabs>
                     </div>
                 </Panel>
-            ) : (
-                <Tooltip content="Show sidebar">
-                    <Button
-                        aria-label="Show sidebar"
-                        variant="icon"
-                        className={classNames(
-                            'position-absolute border-top border-bottom border-right mt-4',
-                            styles.toggle
-                        )}
-                        onClick={() => handleSidebarToggle(true)}
-                    >
-                        <Icon aria-hidden={true} svgPath={mdiChevronDoubleRight} />
-                    </Button>
-                </Tooltip>
-            )}
+            )
+            }
 
             {enableBlobPageSwitchAreasShortcuts && (
                 <>
@@ -206,7 +172,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             {...keybinding}
                             allowDefault={true}
                             onMatch={() => {
-                                handleSidebarToggle(true)
+                                props.handleSidebarToggle(true)
                                 setPersistedTabIndex(0)
                                 setFileTreeFocusKey(Date.now().toString())
                             }}
@@ -218,7 +184,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             {...keybinding}
                             allowDefault={true}
                             onMatch={() => {
-                                handleSidebarToggle(true)
+                                props.handleSidebarToggle(true)
                                 setPersistedTabIndex(1)
                                 setSymbolsFocusKey(Date.now().toString())
                             }}
diff --git a/client/web/src/repo/RepositoryFileTreePage.tsx b/client/web/src/repo/RepositoryFileTreePage.tsx
@@ -1,12 +1,13 @@
-import type { FC } from 'react'
+import { FC, useCallback, useState } from 'react'
 
 import { Navigate, useLocation } from 'react-router-dom'
 
+import settingsSchemaJSON from '../../../../schema/settings.schema.json'
 import { appendLineRangeQueryParameter } from '@sourcegraph/common'
 import { TraceSpanProvider } from '@sourcegraph/observability-client'
 import { getModeFromPath } from '@sourcegraph/shared/src/languages'
 import { isLegacyFragment, parseQueryAndHash, toRepoURL } from '@sourcegraph/shared/src/util/url'
-import { LoadingSpinner } from '@sourcegraph/wildcard'
+import { LoadingSpinner, useLocalStorage, useMatchMedia } from '@sourcegraph/wildcard'
 
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import type { SourcegraphContext } from '../jscontext'
@@ -58,6 +59,27 @@ export const RepositoryFileTreePage: FC<RepositoryFileTreePageProps> = props =>
         return <Navigate to={url} replace={true} />
     }
 
+    const SIDEBAR_KEY = 'repo-revision-sidebar-toggle'
+
+    const [persistedIsVisible, setPersistedIsVisible] = useLocalStorage(
+        SIDEBAR_KEY,
+        settingsSchemaJSON.properties.fileSidebarVisibleByDefault.default
+    )
+    const isWideScreen = useMatchMedia('(min-width: 768px)', false)
+    const [isVisible, setIsVisible] = useState(persistedIsVisible && isWideScreen)
+
+    const handleSidebarToggle = useCallback(
+        (value: boolean) => {
+            props.telemetryService.log('FileTreeViewClicked', {
+                action: 'click',
+                label: 'expand / collapse file tree view',
+            })
+            setPersistedIsVisible(value)
+            setIsVisible(value)
+        },
+        [setPersistedIsVisible, props.telemetryService]
+    )
+
     // For blob pages with legacy URL fragment hashes like "#L17:19-21:23$foo:bar"
     // redirect to the modern URL fragment hashes like "#L17:19-21:23&tab=foo:bar"
     if (!hideRepoRevisionContent && objectType === 'blob' && isLegacyFragment(location.hash)) {
@@ -86,6 +108,8 @@ export const RepositoryFileTreePage: FC<RepositoryFileTreePageProps> = props =>
                 repoName={repoName}
                 isDir={objectType === 'tree'}
                 defaultBranch={resolvedRevision?.defaultBranch || 'HEAD'}
+                isVisible={isVisible}
+                handleSidebarToggle={handleSidebarToggle}
             />
             {!hideRepoRevisionContent && (
                 <>
@@ -108,6 +132,7 @@ export const RepositoryFileTreePage: FC<RepositoryFileTreePageProps> = props =>
                                     fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges}
                                     className={styles.pageContent}
                                     context={globalContext}
+                                    handleSidebarToggle={handleSidebarToggle}
                                 />
                             </TraceSpanProvider>
                         ) : resolvedRevision ? (
diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx
@@ -91,26 +91,27 @@ const RenderedNotebookMarkdown = lazyComponent(() => import('./RenderedNotebookM
 
 interface BlobPageProps
     extends RepoFile,
-        ModeSpec,
-        RepoHeaderContributionsLifecycleProps,
-        SettingsCascadeProps,
-        PlatformContextProps,
-        TelemetryProps,
-        ExtensionsControllerProps,
-        HoverThresholdProps,
-        BreadcrumbSetters,
-        SearchStreamingProps,
-        Pick<SearchContextProps, 'searchContextsEnabled'>,
-        Pick<StreamingSearchResultsListProps, 'fetchHighlightedFileLineRanges'>,
-        Pick<CodeIntelligenceProps, 'codeIntelligenceEnabled' | 'useCodeIntel'>,
-        NotebookProps,
-        OwnConfigProps {
+    ModeSpec,
+    RepoHeaderContributionsLifecycleProps,
+    SettingsCascadeProps,
+    PlatformContextProps,
+    TelemetryProps,
+    ExtensionsControllerProps,
+    HoverThresholdProps,
+    BreadcrumbSetters,
+    SearchStreamingProps,
+    Pick<SearchContextProps, 'searchContextsEnabled'>,
+    Pick<StreamingSearchResultsListProps, 'fetchHighlightedFileLineRanges'>,
+    Pick<CodeIntelligenceProps, 'codeIntelligenceEnabled' | 'useCodeIntel'>,
+    NotebookProps,
+    OwnConfigProps {
     authenticatedUser: AuthenticatedUser | null
     isMacPlatform: boolean
     isSourcegraphDotCom: boolean
     repoID?: Scalars['ID']
     repoUrl?: string
     repoServiceType?: string
+    handleSidebarToggle: (value: boolean) => void
 
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
     className?: string
@@ -296,7 +297,7 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
 
     const blobInfoOrError = enableLazyBlobSyntaxHighlighting
         ? // Fallback to formatted blob whilst we do not have the highlighted blob
-          highlightedBlobInfoOrError || formattedBlobInfoOrError
+        highlightedBlobInfoOrError || formattedBlobInfoOrError
         : highlightedBlobInfoOrError
 
     const onExtendTimeoutClick = useCallback(
@@ -322,9 +323,9 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
 
     const isSearchNotebook = Boolean(
         blobInfoOrError &&
-            !isErrorLike(blobInfoOrError) &&
-            blobInfoOrError.filePath.endsWith(SEARCH_NOTEBOOK_FILE_EXTENSION) &&
-            props.notebooksEnabled
+        !isErrorLike(blobInfoOrError) &&
+        blobInfoOrError.filePath.endsWith(SEARCH_NOTEBOOK_FILE_EXTENSION) &&
+        props.notebooksEnabled
     )
 
     const onCopyNotebook = useCallback(
@@ -454,6 +455,7 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
                     revision={revision}
                     filePath={filePath}
                     enableOwnershipPanel={enableOwnershipPanel}
+                    handleSidebarToggle={props.handleSidebarToggle}
                 />
             )}
         </>
diff --git a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react'
 
-import { mdiAccount } from '@mdi/js'
+import { mdiAccount, mdiPageLayoutSidebarLeft } from '@mdi/js'
 import classNames from 'classnames'
 import { useNavigate } from 'react-router-dom'
 
@@ -23,7 +23,8 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
     revision?: string
     filePath: string
     enableOwnershipPanel: boolean
-}> = ({ repoID, revision, filePath, enableOwnershipPanel }) => {
+    handleSidebarToggle: (value: boolean) => void
+}> = ({ repoID, revision, filePath, enableOwnershipPanel, handleSidebarToggle }) => {
     const navigate = useNavigate()
 
     const openOwnershipPanel = useCallback(() => {
@@ -86,6 +87,19 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
         <div className={styles.wrapper}>
             {history && (
                 <div className={styles.historyPanel}>
+                    <Tooltip content="Hide sidebar" placement="right">
+                        <Button
+                            aria-label="Hide sidebar"
+                            variant="icon"
+                            className={classNames(
+                                'border mr-2',
+                                // styles.toggle
+                            )}
+                            onClick={() => handleSidebarToggle(true)}
+                        >
+                            <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarLeft} />
+                        </Button>
+                    </Tooltip>
                     <GitCommitNode
                         node={history}
                         extraCompact={true}
