opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-08-02 02:40:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): align secondary sidebar help trigger (#39862)

Browse Source
This commit is contained in:
yyh 2026-08-01 04:33:27 +08:00 committed by GitHub
parent 4557f127ff
commit c4d9919d30
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/app/components/detail-sidebar/__tests__/index.spec.tsx
View File

@ -92,7 +92,6 @@ describe('DetailSidebarFrame', () => {
it('renders expanded detail content by default and registers the shortcut for focused inputs', () => {
renderDetailSidebarFrame()
expect(screen.getByRole('complementary')).toHaveClass('w-62')
expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
expect(hotkeyRegistrations.get('Mod+B')?.options).toEqual(
@ -105,8 +104,8 @@ describe('DetailSidebarFrame', () => {
act(() => hotkeyRegistrations.get('Mod+B')?.handler())
expect(screen.getByRole('complementary')).toHaveClass('w-16')
expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'false')
expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
})
it('collapses detail content from the top toggle and hides environment metadata', () => {
@ -119,7 +118,6 @@ describe('DetailSidebarFrame', () => {
renderDetailSidebarFrame()
fireEvent.click(screen.getByTestId('detail-toggle'))
expect(screen.getByRole('complementary')).toHaveClass('w-16')
expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'false')
expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'false')
expect(screen.queryByText('Environment tag')).not.toBeInTheDocument()
@ -131,20 +129,17 @@ describe('DetailSidebarFrame', () => {
fireEvent.click(screen.getByTestId('detail-toggle'))
fireEvent.mouseEnter(screen.getByTestId('detail-top').parentElement!)
expect(screen.getByRole('complementary')).toHaveClass('w-16', 'overflow-visible')
expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
})
it('persists expansion without width animation when the hovered preview toggle is clicked', () => {
it('persists expansion when the hovered preview toggle is clicked', () => {
renderDetailSidebarFrame()
fireEvent.click(screen.getByTestId('detail-toggle'))
fireEvent.mouseEnter(screen.getByTestId('detail-top').parentElement!)
fireEvent.click(screen.getByTestId('detail-toggle'))
expect(screen.getByRole('complementary')).toHaveClass('w-62', 'transition-none')
expect(screen.getByRole('complementary')).not.toHaveClass('overflow-visible')
expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('expand')

14
web/app/components/detail-sidebar/index.tsx
View File

@ -29,7 +29,13 @@ const secondarySidebarHelpTriggerIcon = (
function SecondarySidebarHelpMenu({ triggerClassName }: { triggerClassName?: string }) {
return (
<HelpMenu triggerIcon={secondarySidebarHelpTriggerIcon} triggerClassName={triggerClassName} />
<HelpMenu
triggerIcon={secondarySidebarHelpTriggerIcon}
triggerClassName={cn(
'size-8 border-0 bg-transparent shadow-none hover:bg-state-base-hover hover:text-text-secondary',
triggerClassName,
)}
/>
)
}
@ -150,7 +156,7 @@ export function DetailSidebarFrame({
className={cn(
!bottomNavigationExpanded
? 'flex w-full shrink-0 flex-col items-center gap-0.5 rounded-lg px-2 pt-1 pb-3'
: 'flex w-60 items-center justify-between bg-components-panel-bg py-3 pr-1 pl-3',
: 'flex w-60 items-center justify-between bg-components-panel-bg p-3',
)}
>
{!bottomNavigationExpanded ? (
@ -163,9 +169,7 @@ export function DetailSidebarFrame({
<div className="flex min-w-0 items-center gap-1 overflow-hidden">
<AccountSection />
</div>
<div className="flex shrink-0 items-center justify-center rounded-full p-1">
<SecondarySidebarHelpMenu />
</div>
<SecondarySidebarHelpMenu />
</>
)}
</div>

26
web/app/components/main-nav/__tests__/index.spec.tsx
View File

@ -688,32 +688,6 @@ describe('MainNav', () => {
expect(screen.queryByRole('link', { name: /common.menus.deployments/ })).not.toBeInTheDocument()
})
it('aligns the global navigation spacing with the main sidebar design', async () => {
mockInstalledApps = [createInstalledApp()]
const { container } = renderMainNav()
const mainNav = container.querySelector('aside')
expect(mainNav).toHaveClass('w-62', 'p-1')
expect(mainNav?.firstElementChild).toHaveClass('w-60')
const logoLink = screen.getByLabelText('Dify')
expect(logoLink).not.toHaveClass('px-2')
expect(logoLink.parentElement).toHaveClass('pt-3', 'pr-2', 'pb-2', 'pl-4')
const homeLink = screen.getByRole('link', { name: /common.mainNav.home/ })
expect(homeLink.closest('nav')).toHaveClass('isolate', 'flex', 'flex-col', 'gap-px', 'p-2')
expect(homeLink).toHaveClass('h-8', 'w-full', 'rounded-[10px]', 'px-2', 'py-1.5')
const webAppsButton = await screen.findByRole('button', { name: 'explore.sidebar.webApps' })
expect(webAppsButton.parentElement).toHaveClass('py-1', 'pr-2', 'pl-2')
const helpButton = screen.getByRole('button', { name: 'common.mainNav.help.openMenu' })
expect(helpButton.parentElement?.parentElement).toHaveClass('w-60')
expect(helpButton.parentElement?.parentElement).not.toHaveClass('w-full')
expect(helpButton.parentElement).toHaveClass('shrink-0', 'rounded-full', 'p-1')
})
it('orders the Step-by-step Tour before the account and help actions', async () => {
localStorage.setItem(STEP_BY_STEP_TOUR_SHELL_MODE_STORAGE_KEY, 'collapsed')