feat(overlays): overlay is downloadable (MIN-237)

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx

@@ -17,6 +17,7 @@ import { apiPath } from '@/redux/apiPath';
 import { CORE_PD_MODEL_MOCK } from '@/models/mocks/modelsMock';
 import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
 import { parseOverlayBioEntityToOlRenderingFormat } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+import { BASE_API_URL } from '@/constants';
 import { OverlayListItem } from './OverlayListItem.component';
 
 const mockedAxiosNewClient = mockNetworkNewAPIResponse();
@@ -111,6 +112,29 @@ describe('OverlayListItem - component', () => {
     });
   });
 
-  // TODO implement when connecting logic to component
-  it.skip('should trigger download overlay to PC on download button click', () => {});
+  it('should trigger download overlay to PC on download button click', () => {
+    const OVERLAY_ID = 21;
+    renderComponent({
+      map: {
+        ...initialMapStateFixture,
+        data: { ...initialMapStateFixture.data, backgroundId: EMPTY_BACKGROUND_ID },
+      },
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+      overlayBioEntity: { ...OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK, overlaysId: [OVERLAY_ID] },
+      models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+    });
+
+    const downloadButton = screen.getByText('Download');
+
+    expect(downloadButton).toBeVisible();
+
+    const windowOpenMock = jest.spyOn(window, 'open').mockImplementation();
+
+    downloadButton.click();
+
+    expect(windowOpenMock).toHaveBeenCalledWith(
+      `${BASE_API_URL}/${apiPath.downloadOverlay(OVERLAY_ID)}`,
+      '_blank',
+    );
+  });
 });

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx

@@ -9,8 +9,8 @@ interface OverlayListItemProps {
 }
 
 export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.Element => {
-  const onDownloadOverlay = (): void => {};
-  const { toggleOverlay, isOverlayActive, isOverlayLoading } = useOverlay(overlayId);
+  const { toggleOverlay, isOverlayActive, isOverlayLoading, downloadOverlay } =
+    useOverlay(overlayId);
 
   return (
     <li className="flex flex-row flex-nowrap justify-between pl-5 [&:not(:last-of-type)]:mb-4">
@@ -32,7 +32,7 @@ export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.
           )}
           {isOverlayActive || isOverlayActive ? 'Disable' : 'View'}
         </Button>
-        <Button className="max-h-8" variantStyles="ghost" onClick={onDownloadOverlay}>
+        <Button className="max-h-8" variantStyles="ghost" onClick={downloadOverlay}>
           Download
         </Button>
       </div>

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useOverlay.ts

@@ -6,10 +6,13 @@ import {
 } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
 import { removeOverlayBioEntityForGivenOverlay } from '@/redux/overlayBioEntity/overlayBioEntity.slice';
 import { getOverlayBioEntityForAllModels } from '@/redux/overlayBioEntity/overlayBioEntity.thunk';
+import { BASE_API_URL } from '@/constants';
+import { apiPath } from '@/redux/apiPath';
 import { useEmptyBackground } from './useEmptyBackground';
 
 type UseOverlay = {
   toggleOverlay: () => void;
+  downloadOverlay: () => void;
   isOverlayActive: boolean;
   isOverlayLoading: boolean;
 };
@@ -29,5 +32,9 @@ export const useOverlay = (overlayId: number): UseOverlay => {
     }
   };
 
-  return { toggleOverlay, isOverlayActive, isOverlayLoading };
+  const downloadOverlay = (): void => {
+    window.open(`${BASE_API_URL}/${apiPath.downloadOverlay(overlayId)}`, '_blank');
+  };
+
+  return { toggleOverlay, isOverlayActive, isOverlayLoading, downloadOverlay };
 };

src/redux/apiPath.ts

@@ -44,6 +44,8 @@ export const apiPath = {
   getCompartmentPathwayDetails: (ids: number[]): string =>
     `projects/${PROJECT_ID}/models/*/bioEntities/elements/?id=${ids.join(',')}`,
   sendCompartmentPathwaysIds: (): string => `projects/${PROJECT_ID}/models/*/bioEntities/elements/`,
+  downloadOverlay: (overlayId: number): string =>
+    `projects/${PROJECT_ID}/overlays/${overlayId}:downloadSource`,
   getSourceFile: (): string => `/projects/${PROJECT_ID}:downloadSource`,
   getMesh: (meshId: string): string => `mesh/${meshId}`,
   getTaxonomy: (taxonomyId: string): string => `taxonomy/${taxonomyId}`,