Merge branch...

Merge branch '259-min-326-hide-browse-overview-images-when-no-images-are-available' into 'development'

Resolve "[MIN-326] hide "Browse overview images" when no images are available"

Closes #259

See merge request !192

src/components/FunctionalArea/TopBar/TopBar.component.test.tsx

@@ -17,6 +17,9 @@ import {
 import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
 import { USER_INITIAL_STATE_MOCK } from '@/redux/user/user.mock';
 import { SEARCH_STATE_INITIAL_MOCK } from '@/redux/search/search.mock';
+import { ZOD_SEED } from '@/constants';
+import { createFixture } from 'zod-fixture';
+import { overviewImageView } from '@/models/overviewImageView';
 import { TopBar } from './TopBar.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -82,7 +85,25 @@ describe('TopBar - component', () => {
     expect(drawerName).toBe('overlays');
   });
   it('should render browse overview images button', () => {
-    renderComponent();
+    renderComponent({
+      user: USER_INITIAL_STATE_MOCK,
+      search: SEARCH_STATE_INITIAL_MOCK,
+      drawer: initialStateFixture,
+      project: {
+        ...PROJECT_STATE_INITIAL_MOCK,
+        data: {
+          ...projectFixture,
+          overviewImageViews: [
+            createFixture(overviewImageView, {
+              seed: ZOD_SEED,
+              array: { min: 1, max: 1 },
+            }),
+          ],
+        },
+      },
+      map: initialMapStateFixture,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
     expect(screen.getByText('Browse overview images')).toBeInTheDocument();
   });
 
@@ -108,8 +129,8 @@ describe('TopBar - component', () => {
       type: 'modal/openOverviewImagesModalById',
     });
   });
-  it('should disable button browse overview images if there are no overview images', () => {
-    const { store } = renderComponentWithActionListener({
+  it('should hide button browse overview images if there are no overview images', async () => {
+    renderComponentWithActionListener({
       user: USER_INITIAL_STATE_MOCK,
       search: SEARCH_STATE_INITIAL_MOCK,
       drawer: initialStateFixture,
@@ -124,11 +145,7 @@ describe('TopBar - component', () => {
       backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
     });
 
-    const overviewImageButton = screen.getByText('Browse overview images');
-    expect(overviewImageButton).toBeDisabled();
-    overviewImageButton.click();
-
-    const actions = store.getActions();
-    expect(actions).toStrictEqual([]);
+    const overviewImageButton = screen.queryByText('Browse overview images');
+    expect(overviewImageButton).toBeNull();
   });
 });

src/components/FunctionalArea/TopBar/TopBar.component.tsx

@@ -20,7 +20,7 @@ export const TopBar = (): JSX.Element => {
   const currentProject = useAppSelector(projectDataSelector);
   const defaultOverviewImageId = useSelector(projectDefaultOverviewImageIdSelector);
   const overviewImages = useSelector(projectOverviewImagesSelector);
-  const overviewImagesEmpty = overviewImages.length === ZERO;
+  const overviewImagesProvided = overviewImages.length > ZERO;
 
   const handleBrowseOverviewImagesClick = (): void => {
     dispatch(openOverviewImagesModalById(defaultOverviewImageId));
@@ -58,14 +58,15 @@ export const TopBar = (): JSX.Element => {
         </Button>
       </div>
       <div className="flex items-center">
-        <Button
-          className="mx-4 flex-none"
-          onClick={handleBrowseOverviewImagesClick}
-          disabled={overviewImagesEmpty}
-          variantStyles="secondary"
-        >
-          Browse overview images
-        </Button>
+        {overviewImagesProvided && (
+          <Button
+            className="mx-4 flex-none"
+            onClick={handleBrowseOverviewImagesClick}
+            variantStyles="secondary"
+          >
+            Browse overview images
+          </Button>
+        )}
         <div className="flex-none bg-primary-100 px-4 py-1 text-xs leading-6 text-primary-500">
           {currentProject?.name || ''}
         </div>