From 2ede746d8a579ef6cc7f3b0f5dd50ba83509de08 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Wed, 15 Jan 2025 10:53:43 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20hide=20search=20and=20cre?=
 =?UTF-8?q?ate=20doc=20button=20if=20not=20logged?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 CHANGELOG.md                                  |  1 +
 .../app-impress/doc-visibility.spec.ts        |  5 ++++
 .../docs/docs-grid/components/DocsGrid.tsx    |  2 +-
 .../left-panel/components/LeftPanelHeader.tsx | 24 ++++++++++++-------
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71f5bccc..43bff667 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to
 ## Fixed
 
 - 🐛(backend) fix create document via s2s if sub unknown but email found #543
+- 🐛(frontend) hide search and create doc button if not authenticated #555
 
 ## [1.10.0] - 2024-12-17
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
index 364d0e2f..f493c8de 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
@@ -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();
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index e74d7f62..a220f4c6 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -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')}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index 66f59c0c..81748507 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -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}