(frontend) hide search and create doc button if not logged

- Added visibility checks for 'search' and 'New doc' buttons in the
document visibility tests.
- Updated LeftPanelHeader to conditionally render 'search' and 'New doc'
buttons based on user authentication status, improving user experience
and access control.
This commit is contained in:
Nathan Panchout
2025-01-15 10:53:43 +01:00
committed by Anthony LC
parent 5bd0764bdd
commit 2ede746d8a
4 changed files with 22 additions and 10 deletions

View File

@@ -232,6 +232,9 @@ test.describe('Doc Visibility: Public', () => {
cardContainer.getByText('Public document', { exact: true }),
).toBeVisible();
await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
const urlDoc = page.url();
await page
@@ -245,6 +248,8 @@ test.describe('Doc Visibility: Public', () => {
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
const card = page.getByLabel('It is the card information');
await expect(card).toBeVisible();

View File

@@ -89,7 +89,7 @@ export const DocsGrid = ({
{title}
</Text>
{!hasDocs && (
{!hasDocs && !loading && (
<Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
<Text $size="sm" $variation="600" $weight="700">
{t('No documents found')}

View File

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
import { PropsWithChildren } from 'react';
import { Box, Icon, SeparatedSection } from '@/components';
import { useAuthStore } from '@/core';
import { useCreateDoc } from '@/features/docs/doc-management';
import { DocSearchModal } from '@/features/docs/doc-search';
import { useCmdK } from '@/hook/useCmdK';
@@ -13,6 +14,7 @@ import { useLeftPanelStore } from '../stores';
export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
const router = useRouter();
const searchModal = useModal();
const auth = useAuthStore();
useCmdK(searchModal.open);
const { togglePanel } = useLeftPanelStore();
@@ -52,16 +54,20 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
<Icon $variation="800" $theme="primary" iconName="house" />
}
/>
<Button
onClick={searchModal.open}
size="medium"
color="tertiary-text"
icon={
<Icon $variation="800" $theme="primary" iconName="search" />
}
/>
{auth.authenticated && (
<Button
onClick={searchModal.open}
size="medium"
color="tertiary-text"
icon={
<Icon $variation="800" $theme="primary" iconName="search" />
}
/>
)}
</Box>
<Button onClick={createNewDoc}>{t('New doc')}</Button>
{auth.authenticated && (
<Button onClick={createNewDoc}>{t('New doc')}</Button>
)}
</Box>
</SeparatedSection>
{children}