Merge branch...

Merge branch '280-license-information-not-displayed-in-the-left-panel-new-interface' into 'development'

Resolve "License information not displayed in the left panel (new interface)"

Closes #280

See merge request !228

src/components/FunctionalArea/Modal/LicenseModal/LicenseModal.component.tsx

+import React from 'react';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { projectSelector } from '@/redux/project/project.selectors';
+
+export const LicenseModal = (): React.ReactNode => {
+  const project = useAppSelector(projectSelector).data;
+
+  let licenseDescription = '';
+  if (project) {
+    licenseDescription = project.license
+      ? `<a href="${project.license.url}" target="_blank">Link</a><br/><br/>${project.license.content}`
+      : `<a href="${project.customLicenseUrl}" target="_blank">Link: ${project.customLicenseUrl}</a>`;
+  }
+  return (
+    <div className="w-full overflow-auto border border-t-[#E1E0E6] bg-white p-[24px]">
+      <div dangerouslySetInnerHTML={{ __html: licenseDescription }} />
+    </div>
+  );
+};

src/components/FunctionalArea/Modal/LicenseModal/index.ts

+export { LicenseModal } from './LicenseModal.component';

src/components/FunctionalArea/Modal/Modal.component.tsx

@@ -3,6 +3,7 @@ import { modalSelector } from '@/redux/modal/modal.selector';
 import dynamic from 'next/dynamic';
 import { AccessDeniedModal } from '@/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component';
 import { AddCommentModal } from '@/components/FunctionalArea/Modal/AddCommentModal/AddCommentModal.component';
+import { LicenseModal } from '@/components/FunctionalArea/Modal/LicenseModal';
 import { EditOverlayModal } from './EditOverlayModal';
 import { LoginModal } from './LoginModal';
 import { ErrorReportModal } from './ErrorReportModal';
@@ -41,6 +42,11 @@ export const Modal = (): React.ReactNode => {
           <ErrorReportModal />
         </ModalLayout>
       )}
+      {isOpen && modalName === 'license' && (
+        <ModalLayout>
+          <LicenseModal />
+        </ModalLayout>
+      )}
       {isOpen && modalName === 'publications' && <PublicationsModal />}
       {isOpen && modalName === 'edit-overlay' && (
         <ModalLayout>

src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx

 import { apiPath } from '@/redux/apiPath';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { openPublicationsModal } from '@/redux/modal/modal.slice';
+import { openLicenseModal, openPublicationsModal } from '@/redux/modal/modal.slice';
 import { mainMapModelDescriptionSelector } from '@/redux/models/models.selectors';
 import {
   diseaseLinkSelector,
@@ -9,6 +9,7 @@ import {
   organismLinkSelector,
   organismNameSelector,
   projectNameSelector,
+  projectSelector,
   versionSelector,
 } from '@/redux/project/project.selectors';
 import { DrawerHeading } from '@/shared/DrawerHeading';
@@ -23,11 +24,18 @@ export const ProjectInfoDrawer = (): JSX.Element => {
   const organismLink = useAppSelector(organismLinkSelector);
   const organismName = useAppSelector(organismNameSelector);
   const projectName = useAppSelector(projectNameSelector);
+  const project = useAppSelector(projectSelector).data;
   const version = useAppSelector(versionSelector);
   const description = useAppSelector(mainMapModelDescriptionSelector);
 
   const sourceDownloadLink = window.location.hostname + apiPath.getSourceFile();
 
+  let licenseName: string = '';
+  if (project) {
+    licenseName = project.license ? project.license.name : project.customLicenseName;
+  }
+  const licenseExists = licenseName !== '';
+
   useEffect(() => {
     // dispatch(getPublications());
   }, [dispatch]);
@@ -36,6 +44,10 @@ export const ProjectInfoDrawer = (): JSX.Element => {
     dispatch(openPublicationsModal());
   };
 
+  const onLicenseClick = (): void => {
+    dispatch(openLicenseModal(licenseName));
+  };
+
   return (
     <div data-testid="export-drawer" className="h-full max-h-full">
       <DrawerHeading title="Project info" />
@@ -76,6 +88,13 @@ export const ProjectInfoDrawer = (): JSX.Element => {
               </a>
             </li>
           )}
+          {licenseExists && (
+            <li className="mt-2 text-hyperlink-blue">
+              <button type="button" onClick={onLicenseClick} className="text-base font-semibold">
+                License: {licenseName}
+              </button>
+            </li>
+          )}
           {organismName && (
             <li className="mt-2 text-hyperlink-blue">
               <span className="text-black">Organism: </span>

src/models/disease.ts

 import { z } from 'zod';
 
 export const disease = z.object({
-  link: z.string(),
+  id: z.number().int().positive(),
+  link: z.string().optional(),
   type: z.string(),
   resource: z.string(),
-  id: z.number(),
   annotatorClassName: z.string(),
 });

src/models/licenseSchema.ts

+import { z } from 'zod';
+
+export const licenseSchema = z.object({
+  id: z.number().int().positive(),
+  name: z.string(),
+  url: z.string(),
+  content: z.string(),
+});

src/models/organism.ts

 import { z } from 'zod';
 
 export const organism = z.object({
-  link: z.string(),
+  id: z.number().int().positive(),
+  link: z.string().optional(),
   type: z.string(),
   resource: z.string(),
-  id: z.number(),
   annotatorClassName: z.string(),
 });

src/models/projectSchema.ts

 import { z } from 'zod';
+import { licenseSchema } from '@/models/licenseSchema';
 import { disease } from './disease';
 import { organism } from './organism';
 import { overviewImageView } from './overviewImageView';
@@ -23,4 +24,7 @@ export const projectSchema = z.object({
   creationDate: z.string(),
   overviewImageViews: z.array(overviewImageView),
   topOverviewImage: overviewImageView.nullable(),
+  license: z.optional(licenseSchema).nullable(),
+  customLicenseName: z.string(),
+  customLicenseUrl: z.string(),
 });

src/redux/modal/modal.reducers.ts

@@ -103,3 +103,9 @@ export const openEditOverlayModalReducer = (
   state.modalTitle = action.payload.name;
   state.editOverlayState = action.payload;
 };
+
+export const openLicenseModalReducer = (state: ModalState, action: PayloadAction<string>): void => {
+  state.isOpen = true;
+  state.modalName = 'license';
+  state.modalTitle = `License: ${action.payload}`;
+};

src/redux/modal/modal.slice.ts

@@ -14,6 +14,7 @@ import {
   openErrorReportModalReducer,
   openAccessDeniedModalReducer,
   openSelectProjectModalReducer,
+  openLicenseModalReducer,
 } from './modal.reducers';
 
 const modalSlice = createSlice({
@@ -33,6 +34,7 @@ const modalSlice = createSlice({
     openErrorReportModal: openErrorReportModalReducer,
     openAccessDeniedModal: openAccessDeniedModalReducer,
     openSelectProjectModal: openSelectProjectModalReducer,
+    openLicenseModal: openLicenseModalReducer,
   },
 });
 
@@ -50,6 +52,7 @@ export const {
   openErrorReportModal,
   openAccessDeniedModal,
   openSelectProjectModal,
+  openLicenseModal,
 } = modalSlice.actions;
 
 export default modalSlice.reducer;

src/types/modal.ts

@@ -4,6 +4,7 @@ export type ModalName =
   | 'overview-images'
   | 'mol-art'
   | 'login'
+  | 'license'
   | 'publications'
   | 'edit-overlay'
   | 'error-report'