From fd51e7c37d3d9089bf86e0d4bd4fa2ca0d446b34 Mon Sep 17 00:00:00 2001 From: Jason Harris Date: Fri, 13 Oct 2023 10:51:03 -0500 Subject: [PATCH 1/4] new expand/collapse button --- client/web/src/repo/RepoHeader.tsx | 8 +- client/web/src/repo/RepoRevisionSidebar.tsx | 78 ++++++------------- .../web/src/repo/RepositoryFileTreePage.tsx | 29 ++++++- client/web/src/repo/blob/BlobPage.tsx | 38 ++++----- .../src/repo/blob/own/HistoryAndOwnBar.tsx | 18 ++++- 5 files changed, 91 insertions(+), 80 deletions(-) diff --git a/client/web/src/repo/RepoHeader.tsx b/client/web/src/repo/RepoHeader.tsx index cd7ac474e0e1..60560b95d2e5 100644 --- 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 {} +export interface RepoHeaderActionButton extends ActionButtonDescriptor { } interface Props extends PlatformContextProps, TelemetryProps, BreadcrumbsProps { /** @@ -168,6 +168,10 @@ export const RepoHeader: React.FunctionComponent> onLifecyclePropsChange(repoHeaderContributionStore.props) }, [onLifecyclePropsChange, repoHeaderContributionStore.props]) + // useEffect(() => { + // console.log(props.breadcrumbs) + // }, []) + const context: Omit = useMemo( () => ({ repoName: props.repoName, diff --git a/client/web/src/repo/RepoRevisionSidebar.tsx b/client/web/src/repo/RepoRevisionSidebar.tsx index 2bc2bd0c2391..b1350eb5a5ee 100644 --- 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,28 +39,22 @@ 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 = 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(props.filePath) const [initialFilePathIsDir, setInitialFilePathIsDir] = useState(props.isDir) const onExpandParent = useCallback((parent: string) => { @@ -70,17 +62,6 @@ export const RepoRevisionSidebar: FC = props => { 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 = props => { return ( <> - {isVisible ? ( + {props.isVisible && ( = props => { storageKey={SIZE_STORAGE_KEY} ariaLabel="File sidebar" > + + +
{showOnboardingTour && ( = props => { behavior="memoize" > - - - } + wrapperClassName="mr-3 ml-5" > Files @@ -182,21 +161,8 @@ export const RepoRevisionSidebar: FC = props => {
- ) : ( - - - - )} + ) + } {enableBlobPageSwitchAreasShortcuts && ( <> @@ -206,7 +172,7 @@ export const RepoRevisionSidebar: FC = props => { {...keybinding} allowDefault={true} onMatch={() => { - handleSidebarToggle(true) + props.handleSidebarToggle(true) setPersistedTabIndex(0) setFileTreeFocusKey(Date.now().toString()) }} @@ -218,7 +184,7 @@ export const RepoRevisionSidebar: FC = 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 index 9a1740fe86da..1aa9fc3b90d5 100644 --- 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 = props => return } + 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 = props => repoName={repoName} isDir={objectType === 'tree'} defaultBranch={resolvedRevision?.defaultBranch || 'HEAD'} + isVisible={isVisible} + handleSidebarToggle={handleSidebarToggle} /> {!hideRepoRevisionContent && ( <> @@ -108,6 +132,7 @@ export const RepositoryFileTreePage: FC = props => fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges} className={styles.pageContent} context={globalContext} + handleSidebarToggle={handleSidebarToggle} /> ) : resolvedRevision ? ( diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx index 94e87886ac02..8df3b9cde7ed 100644 --- 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, - Pick, - Pick, - NotebookProps, - OwnConfigProps { + ModeSpec, + RepoHeaderContributionsLifecycleProps, + SettingsCascadeProps, + PlatformContextProps, + TelemetryProps, + ExtensionsControllerProps, + HoverThresholdProps, + BreadcrumbSetters, + SearchStreamingProps, + Pick, + Pick, + Pick, + 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 className?: string @@ -296,7 +297,7 @@ export const BlobPage: React.FunctionComponent = ({ 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 = ({ 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 = ({ 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 index a9800bcb9386..b5ffd95d2a40 100644 --- 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<{
{history && (
+ + + Date: Fri, 13 Oct 2023 11:02:24 -0500 Subject: [PATCH 2/4] sidebar icon in blob header not visible if sidebar open --- client/web/src/repo/RepoRevisionSidebar.tsx | 2 +- .../web/src/repo/RepositoryFileTreePage.tsx | 1 + client/web/src/repo/blob/BlobPage.tsx | 2 ++ .../src/repo/blob/own/HistoryAndOwnBar.tsx | 32 +++++++++++-------- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/client/web/src/repo/RepoRevisionSidebar.tsx b/client/web/src/repo/RepoRevisionSidebar.tsx index b1350eb5a5ee..d9d3e4dd0d45 100644 --- a/client/web/src/repo/RepoRevisionSidebar.tsx +++ b/client/web/src/repo/RepoRevisionSidebar.tsx @@ -88,7 +88,7 @@ export const RepoRevisionSidebar: FC = props => { aria-label="Hide sidebar" variant="icon" className={classNames( - 'position-absolute border mr-2', + 'position-absolute border mr-2 mb-1', styles.toggle )} onClick={() => props.handleSidebarToggle(false)} diff --git a/client/web/src/repo/RepositoryFileTreePage.tsx b/client/web/src/repo/RepositoryFileTreePage.tsx index 1aa9fc3b90d5..ee3e1de4ff07 100644 --- a/client/web/src/repo/RepositoryFileTreePage.tsx +++ b/client/web/src/repo/RepositoryFileTreePage.tsx @@ -132,6 +132,7 @@ export const RepositoryFileTreePage: FC = props => fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges} className={styles.pageContent} context={globalContext} + sidebarOpen={isVisible} handleSidebarToggle={handleSidebarToggle} /> diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx index 8df3b9cde7ed..88b4ade23d9f 100644 --- a/client/web/src/repo/blob/BlobPage.tsx +++ b/client/web/src/repo/blob/BlobPage.tsx @@ -111,6 +111,7 @@ interface BlobPageProps repoID?: Scalars['ID'] repoUrl?: string repoServiceType?: string + sidebarOpen: boolean handleSidebarToggle: (value: boolean) => void fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable @@ -455,6 +456,7 @@ export const BlobPage: React.FunctionComponent = ({ className, co revision={revision} filePath={filePath} enableOwnershipPanel={enableOwnershipPanel} + sidebarOpen={props.sidebarOpen} handleSidebarToggle={props.handleSidebarToggle} /> )} diff --git a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx index b5ffd95d2a40..7d563854b148 100644 --- a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx +++ b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx @@ -23,8 +23,9 @@ export const HistoryAndOwnBar: React.FunctionComponent<{ revision?: string filePath: string enableOwnershipPanel: boolean + sidebarOpen: boolean handleSidebarToggle: (value: boolean) => void -}> = ({ repoID, revision, filePath, enableOwnershipPanel, handleSidebarToggle }) => { +}> = ({ repoID, revision, filePath, enableOwnershipPanel, sidebarOpen, handleSidebarToggle }) => { const navigate = useNavigate() const openOwnershipPanel = useCallback(() => { @@ -87,19 +88,22 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
{history && (
- - - + {!sidebarOpen && ( + + + + )} + Date: Fri, 13 Oct 2023 12:18:55 -0500 Subject: [PATCH 3/4] clean up and match styles on buttons --- client/web/src/repo/RepoHeader.tsx | 8 ++--- .../src/repo/RepoRevisionSidebar.module.scss | 2 -- client/web/src/repo/RepoRevisionSidebar.tsx | 12 ++----- .../web/src/repo/RepositoryFileTreePage.tsx | 2 +- client/web/src/repo/blob/BlobPage.tsx | 36 +++++++++---------- .../blob/own/HistoryAndOwnBar.module.scss | 19 +++++++++- .../src/repo/blob/own/HistoryAndOwnBar.tsx | 14 ++++---- 7 files changed, 48 insertions(+), 45 deletions(-) diff --git a/client/web/src/repo/RepoHeader.tsx b/client/web/src/repo/RepoHeader.tsx index 60560b95d2e5..cd7ac474e0e1 100644 --- 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 { } +export interface RepoHeaderActionButton extends ActionButtonDescriptor {} interface Props extends PlatformContextProps, TelemetryProps, BreadcrumbsProps { /** @@ -168,10 +168,6 @@ export const RepoHeader: React.FunctionComponent> onLifecyclePropsChange(repoHeaderContributionStore.props) }, [onLifecyclePropsChange, repoHeaderContributionStore.props]) - // useEffect(() => { - // console.log(props.breadcrumbs) - // }, []) - const context: Omit = useMemo( () => ({ repoName: props.repoName, diff --git a/client/web/src/repo/RepoRevisionSidebar.module.scss b/client/web/src/repo/RepoRevisionSidebar.module.scss index 2bbfee4d0564..9a679910a9c9 100644 --- a/client/web/src/repo/RepoRevisionSidebar.module.scss +++ b/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); diff --git a/client/web/src/repo/RepoRevisionSidebar.tsx b/client/web/src/repo/RepoRevisionSidebar.tsx index d9d3e4dd0d45..0d3b0639c5c8 100644 --- a/client/web/src/repo/RepoRevisionSidebar.tsx +++ b/client/web/src/repo/RepoRevisionSidebar.tsx @@ -87,10 +87,7 @@ export const RepoRevisionSidebar: FC = props => {
- ) - } + )} {enableBlobPageSwitchAreasShortcuts && ( <> diff --git a/client/web/src/repo/RepositoryFileTreePage.tsx b/client/web/src/repo/RepositoryFileTreePage.tsx index ee3e1de4ff07..6e6a0246072e 100644 --- a/client/web/src/repo/RepositoryFileTreePage.tsx +++ b/client/web/src/repo/RepositoryFileTreePage.tsx @@ -2,13 +2,13 @@ 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, 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' diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx index 88b4ade23d9f..29a3201da131 100644 --- a/client/web/src/repo/blob/BlobPage.tsx +++ b/client/web/src/repo/blob/BlobPage.tsx @@ -91,20 +91,20 @@ const RenderedNotebookMarkdown = lazyComponent(() => import('./RenderedNotebookM interface BlobPageProps extends RepoFile, - ModeSpec, - RepoHeaderContributionsLifecycleProps, - SettingsCascadeProps, - PlatformContextProps, - TelemetryProps, - ExtensionsControllerProps, - HoverThresholdProps, - BreadcrumbSetters, - SearchStreamingProps, - Pick, - Pick, - Pick, - NotebookProps, - OwnConfigProps { + ModeSpec, + RepoHeaderContributionsLifecycleProps, + SettingsCascadeProps, + PlatformContextProps, + TelemetryProps, + ExtensionsControllerProps, + HoverThresholdProps, + BreadcrumbSetters, + SearchStreamingProps, + Pick, + Pick, + Pick, + NotebookProps, + OwnConfigProps { authenticatedUser: AuthenticatedUser | null isMacPlatform: boolean isSourcegraphDotCom: boolean @@ -298,7 +298,7 @@ export const BlobPage: React.FunctionComponent = ({ 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( @@ -324,9 +324,9 @@ export const BlobPage: React.FunctionComponent = ({ 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( diff --git a/client/web/src/repo/blob/own/HistoryAndOwnBar.module.scss b/client/web/src/repo/blob/own/HistoryAndOwnBar.module.scss index d5c0bf9a1890..32e6922cf9a5 100644 --- a/client/web/src/repo/blob/own/HistoryAndOwnBar.module.scss +++ b/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; diff --git a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx index 7d563854b148..b8f2fceae8c5 100644 --- a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx +++ b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx @@ -89,14 +89,12 @@ export const HistoryAndOwnBar: React.FunctionComponent<{ {history && (
{!sidebarOpen && ( - + -
{showOnboardingTour && ( = props => { // position, which tree is expanded) behavior="memoize" > - + + + + } + > Files diff --git a/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx b/client/web/src/repo/blob/own/HistoryAndOwnBar.tsx index b8f2fceae8c5..63a12ce10292 100644 --- 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, mdiPageLayoutSidebarLeft } from '@mdi/js' +import { mdiAccount, mdiChevronDoubleRight, mdiPageLayoutSidebarLeft } from '@mdi/js' import classNames from 'classnames' import { useNavigate } from 'react-router-dom' @@ -97,7 +97,7 @@ export const HistoryAndOwnBar: React.FunctionComponent<{ display="inline" onClick={() => handleSidebarToggle(true)} > - + )}