Search UI: revamp expand/collapse functionality for repo sidebar

client/web/src/repo/RepoRevisionSidebar.module.scss

@@ -15,8 +15,6 @@
     height: 2rem;
     z-index: 1;
     isolation: isolate;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
     color: var(--icon-color);
     background-color: var(--body-bg);
 

client/web/src/repo/RepoRevisionSidebar.tsx

@@ -1,6 +1,6 @@
 import { type FC, useCallback, useState } from 'react'
 
-import { mdiChevronDoubleRight, mdiChevronDoubleLeft } from '@mdi/js'
+import { mdiChevronDoubleLeft, 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,7 +75,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
 
     return (
         <>
-            {isVisible ? (
+            {props.isVisible && (
                 <Panel
                     defaultSize={256}
                     minSize={150}
@@ -125,7 +106,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                                     <Tooltip content="Hide sidebar" placement="right">
                                         <Button
                                             aria-label="Hide sidebar"
-                                            onClick={() => handleSidebarToggle(false)}
+                                            onClick={() => props.handleSidebarToggle(false)}
                                             className="bg-transparent border-0 ml-auto p-1 position-relative focus-behaviour"
                                         >
                                             <Icon
@@ -182,20 +163,6 @@ 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 +173,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             {...keybinding}
                             allowDefault={true}
                             onMatch={() => {
-                                handleSidebarToggle(true)
+                                props.handleSidebarToggle(true)
                                 setPersistedTabIndex(0)
                                 setFileTreeFocusKey(Date.now().toString())
                             }}
@@ -218,7 +185,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             {...keybinding}
                             allowDefault={true}
                             onMatch={() => {
-                                handleSidebarToggle(true)
+                                props.handleSidebarToggle(true)
                                 setPersistedTabIndex(1)
                                 setSymbolsFocusKey(Date.now().toString())
                             }}

client/web/src/repo/RepositoryFileTreePage.tsx

@@ -1,13 +1,14 @@
-import type { FC } from 'react'
+import { FC, useCallback, useState } from 'react'
 
 import { Navigate, useLocation } from 'react-router-dom'
 
 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 settingsSchemaJSON from '../../../../schema/settings.schema.json'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import type { SourcegraphContext } from '../jscontext'
 import type { NotebookProps } from '../notebooks'
@@ -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,8 @@ export const RepositoryFileTreePage: FC<RepositoryFileTreePageProps> = props =>
                                     fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges}
                                     className={styles.pageContent}
                                     context={globalContext}
+                                    sidebarOpen={isVisible}
+                                    handleSidebarToggle={handleSidebarToggle}
                                 />
                             </TraceSpanProvider>
                         ) : resolvedRevision ? (

client/web/src/repo/blob/BlobPage.tsx

@@ -111,6 +111,8 @@ interface BlobPageProps
     repoID?: Scalars['ID']
     repoUrl?: string
     repoServiceType?: string
+    sidebarOpen: boolean
+    handleSidebarToggle: (value: boolean) => void
 
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
     className?: string
@@ -454,6 +456,8 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
                     revision={revision}
                     filePath={filePath}
                     enableOwnershipPanel={enableOwnershipPanel}
+                    sidebarOpen={props.sidebarOpen}
+                    handleSidebarToggle={props.handleSidebarToggle}
                 />
             )}
         </>

client/web/src/repo/blob/own/HistoryAndOwnBar.module.scss

@@ -12,7 +12,7 @@
 .history-panel {
     padding: 0;
     display: flex;
-    align-items: stretch;
+    align-items: center;
     vertical-align: middle;
     font-weight: normal;
     letter-spacing: normal;
@@ -28,11 +28,28 @@
 
 .history {
     min-width: 0;
+    justify-content: center;
     padding: 0;
     font-size: 0.75rem;
     flex-shrink: 1000000; // Very high value to shrink this before shrinking the ownership side.
 }
 
+.toggle {
+    display: flex;
+    justify-content: center;
+    left: 0;
+    width: 2rem;
+    height: 2rem;
+    z-index: 1;
+    isolation: isolate;
+    color: var(--icon-color);
+    background-color: var(--body-bg);
+
+    &:hover {
+        background-color: var(--color-bg-3);
+    }
+}
+
 .own {
     padding: 0;
     display: flex;

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, mdiChevronDoubleRight, mdiPageLayoutSidebarLeft } from '@mdi/js'
 import classNames from 'classnames'
 import { useNavigate } from 'react-router-dom'
 
@@ -23,7 +23,9 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
     revision?: string
     filePath: string
     enableOwnershipPanel: boolean
-}> = ({ repoID, revision, filePath, enableOwnershipPanel }) => {
+    sidebarOpen: boolean
+    handleSidebarToggle: (value: boolean) => void
+}> = ({ repoID, revision, filePath, enableOwnershipPanel, sidebarOpen, handleSidebarToggle }) => {
     const navigate = useNavigate()
 
     const openOwnershipPanel = useCallback(() => {
@@ -86,17 +88,31 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
         <div className={styles.wrapper}>
             {history && (
                 <div className={styles.historyPanel}>
+                    {!sidebarOpen && (
+                        <Tooltip content="Show sidebar" placement="right">
+                            <Button
+                                aria-label="Show sidebar"
+                                variant="icon"
+                                className={classNames(styles.toggle, 'border mr-2 mb-1')}
+                                display="inline"
+                                onClick={() => handleSidebarToggle(true)}
+                            >
+                                <Icon aria-hidden={true} svgPath={mdiChevronDoubleRight} />
+                            </Button>
+                        </Tooltip>
+                    )}
+
                     <GitCommitNode
                         node={history}
                         extraCompact={true}
                         hideExpandCommitMessageBody={true}
-                        className={styles.history}
+                        className={classNames(sidebarOpen ? '' : 'mb-1', styles.history)}
                     />
                     <Button
                         variant="link"
                         size="sm"
                         display="inline"
-                        className="pt-0 pb-0 border-0"
+                        className={styles.history}
                         onClick={openHistoryPanel}
                     >
                         Show history