Merge branch 'feat/Tapis-v3-redesign' into task/DES-2705-configure-sy…

…stems-during-login

README.md

@@ -49,11 +49,11 @@ If you are on a Mac or a Windows machine, the recommended method is to install
 3. Build the containers and frontend package
 
    ```
-   $ make build
+   $ make build-dev
    ```
    or
    ```
-   $ docker-compose -f conf/docker/docker-compose.yml build
+   $ docker-compose -f conf/docker/docker-compose-dev.yml build
    ```
 
    These lines install the node packages required for DesignSafe,

client/modules/_hooks/src/datafiles/projects/index.ts

@@ -10,6 +10,7 @@ export { useProjectEntityReorder } from './useProjectEntityReorder';
 export { useAddEntityToTree } from './useAddEntityToTree';
 export { useRemoveEntityFromTree } from './useRemoveEntityFromTree';
 export { useAddFileAssociation } from './useAddFileAssociation';
+export { useSetFileAssociations } from './useSetFileAssociations';
 export { useRemoveFileAssociation } from './useRemoveFileAssociation';
 export { useSetFileTags } from './useSetFileTags';
 export { usePatchEntityMetadata } from './usePatchEntityMetadata';

client/modules/_hooks/src/datafiles/projects/useAddFileAssociation.ts

@@ -7,7 +7,7 @@ async function addFileAssociation(
   entityUuid: string,
   fileObjs: TFileObj[]
 ) {
-  const res = await apiClient.post(
+  const res = await apiClient.patch(
     `/api/projects/v2/${projectId}/entities/${entityUuid}/files/`,
     { fileObjs }
   );

client/modules/_hooks/src/datafiles/projects/useSetFileAssociations.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '../../apiClient';
+import { TFileObj } from './types';
+
+async function setFileAssociations(
+  projectId: string,
+  entityUuid: string,
+  fileObjs: TFileObj[]
+) {
+  const res = await apiClient.put(
+    `/api/projects/v2/${projectId}/entities/${entityUuid}/files/`,
+    { fileObjs }
+  );
+  return res.data;
+}
+
+// Use for REPLACING all file associations for an entity, e.g. when setting selected
+// files to publish for a type Other publications.
+export function useSetFileAssociations(projectId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      fileObjs,
+      entityUuid,
+    }: {
+      fileObjs: TFileObj[];
+      entityUuid: string;
+    }) => setFileAssociations(projectId, entityUuid, fileObjs),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ['datafiles', 'projects', 'detail', projectId],
+      }),
+  });
+}

client/modules/_hooks/src/datafiles/publications/index.ts

@@ -1,3 +1,4 @@
 export { usePublishedListing } from './usePublishedListing';
 export type { TPublicationListingItem } from './usePublishedListing';
 export { usePublicationDetail } from './usePublicationDetail';
+export { usePublicationVersions } from './usePublicationVersions';

client/modules/_hooks/src/datafiles/publications/usePublicationVersions.ts

@@ -0,0 +1,24 @@
+import { useSearchParams } from 'react-router-dom';
+import { usePublicationDetail } from './usePublicationDetail';
+import { useMemo } from 'react';
+
+export function usePublicationVersions(projectId: string) {
+  const { data } = usePublicationDetail(projectId);
+  const [searchParams] = useSearchParams();
+
+  const [selectedVersion, allVersions] = useMemo(() => {
+    const _versionMap = data?.tree.children.map((child) => child.version ?? 1);
+    const _dedupedVersions = [...new Set(_versionMap)].sort();
+
+    const selectedVersionParam = searchParams.get('version');
+    let _selectedVersion = 1;
+    if (!selectedVersionParam) {
+      _selectedVersion = Math.max(...(_dedupedVersions ?? [1]));
+    } else {
+      _selectedVersion = parseInt(selectedVersionParam);
+    }
+    return [_selectedVersion, _dedupedVersions];
+  }, [searchParams, data]);
+
+  return { selectedVersion, allVersions };
+}

client/modules/datafiles/src/FileListing/FileListing.tsx

@@ -66,6 +66,7 @@ export const FileListing: React.FC<
           ) : (
             <Button
               type="link"
+              style={{ userSelect: 'text' }}
               onClick={() =>
                 setPreviewModalState({ isOpen: true, path: record.path })
               }

client/modules/datafiles/src/projects/BaseProjectDetails.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { TBaseProjectValue, TProjectUser } from '@client/hooks';
 
 import styles from './BaseProjectDetails.module.css';
-import { Button, Col, Popover, Row, Tooltip } from 'antd';
+import { Button, Col, Popover, Row, Select, Tooltip } from 'antd';
+import { useSearchParams } from 'react-router-dom';
 
 export const DescriptionExpander: React.FC<React.PropsWithChildren> = ({
   children,
@@ -131,14 +132,24 @@ const projectTypeMapping = {
 export const BaseProjectDetails: React.FC<{
   projectValue: TBaseProjectValue;
   publicationDate?: string;
-}> = ({ projectValue, publicationDate }) => {
+  versions?: number[];
+}> = ({ projectValue, publicationDate, versions }) => {
   const pi = projectValue.users.find((u) => u.role === 'pi');
   const coPis = projectValue.users.filter((u) => u.role === 'co_pi');
   const projectType = [
     projectTypeMapping[projectValue.projectType],
     ...(projectValue.frTypes?.map((t) => t.name) ?? []),
   ].join(' | ');
 
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const setSelectedVersion = (newVersion: number) => {
+    setSearchParams((prevParams) => {
+      prevParams.set('version', newVersion.toString());
+      return prevParams;
+    });
+  };
+
   return (
     <section style={{ marginBottom: '20px' }}>
       <table
@@ -162,10 +173,10 @@ export const BaseProjectDetails: React.FC<{
               <td>Co-PIs</td>
               <td style={{ fontWeight: 'bold' }}>
                 {coPis.map((u, i) => (
-                  <>
+                  <React.Fragment key={JSON.stringify(u)}>
                     <UsernamePopover user={u} />
                     {i !== coPis.length - 1 && '; '}
-                  </>
+                  </React.Fragment>
                 ))}
               </td>
             </tr>
@@ -176,10 +187,10 @@ export const BaseProjectDetails: React.FC<{
                 <td>Authors</td>
                 <td style={{ fontWeight: 'bold' }}>
                   {projectValue.authors.map((u, i) => (
-                    <>
+                    <React.Fragment key={JSON.stringify(u)}>
                       <UsernamePopover user={u} />
                       {i !== projectValue.authors.length - 1 && '; '}
-                    </>
+                    </React.Fragment>
                   ))}
                 </td>
               </tr>
@@ -198,12 +209,14 @@ export const BaseProjectDetails: React.FC<{
               </td>
             </tr>
           )}
-          <tr className={styles['prj-row']}>
-            <td>Natural Hazard Type(s)</td>
-            <td style={{ fontWeight: 'bold' }}>{`${projectValue.nhTypes
-              .map((t) => t.name)
-              .join(', ')}`}</td>
-          </tr>
+          {(projectValue.nhTypes?.length ?? 0) > 0 && (
+            <tr className={styles['prj-row']}>
+              <td>Natural Hazard Type(s)</td>
+              <td style={{ fontWeight: 'bold' }}>{`${projectValue.nhTypes
+                .map((t) => t.name)
+                .join(', ')}`}</td>
+            </tr>
+          )}
           {publicationDate && (
             <tr className={styles['prj-row']}>
               <td>Date of Publication</td>
@@ -310,6 +323,13 @@ export const BaseProjectDetails: React.FC<{
             </tr>
           )}
 
+          {projectValue.dois && projectValue.dois[0] && (
+            <tr className={styles['prj-row']}>
+              <td>DOI</td>
+              <td style={{ fontWeight: 'bold' }}>{projectValue.dois[0]}</td>
+            </tr>
+          )}
+
           {projectValue.projectType === 'other' && projectValue.license && (
             <tr className={styles['prj-row']}>
               <td>License</td>
@@ -318,6 +338,24 @@ export const BaseProjectDetails: React.FC<{
               </td>
             </tr>
           )}
+
+          {versions && versions.length > 1 && (
+            <tr className={styles['prj-row']}>
+              <td>Version</td>
+              <td style={{ fontWeight: 'bold' }}>
+                <Select
+                  style={{ width: '200px' }}
+                  size="small"
+                  options={versions.map((v) => ({ value: v, label: v }))}
+                  value={parseInt(
+                    searchParams.get('version') ??
+                      Math.max(...versions).toString()
+                  )}
+                  onChange={(newVal) => setSelectedVersion(newVal)}
+                />
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
       <DescriptionExpander>

client/modules/datafiles/src/projects/ProjectPipeline/PipelineOtherSelectFiles.tsx

@@ -1,8 +1,12 @@
-import { useProjectDetail, useSelectedFiles } from '@client/hooks';
+import {
+  useProjectDetail,
+  useSelectedFiles,
+  useSetFileAssociations,
+} from '@client/hooks';
 import { Alert, Button } from 'antd';
 import { FileListing } from '../../FileListing/FileListing';
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export const PipelineOtherSelectFiles: React.FC<{
   projectId: string;
@@ -13,8 +17,9 @@ export const PipelineOtherSelectFiles: React.FC<{
 
   const [canContinue, setCanContinue] = useState(false);
   const [showError, setShowError] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const { mutate } = useSetFileAssociations(projectId);
 
   const { selectedFiles, setSelectedFiles } = useSelectedFiles(
     'tapis',
@@ -28,18 +33,28 @@ export const PipelineOtherSelectFiles: React.FC<{
 
   const onSaveSelections = () => {
     console.log(selectedFiles);
-    if (selectedFiles.length > 0) {
+    if (selectedFiles.length > 0 && !!data) {
       // TODO: mutation to set project's fileObjs attribute to the selected files.
-      setCanContinue(true);
-      setShowError(false);
-
-      const newSearchParams = new URLSearchParams(searchParams);
-      data && newSearchParams.set('selected', data?.baseProject.uuid);
-      setSearchParams(newSearchParams);
+      mutate(
+        { fileObjs: selectedFiles, entityUuid: data.baseProject.uuid },
+        {
+          onSuccess: () => {
+            setCanContinue(true);
+            setShowError(false);
+            setShowSuccess(true);
+          },
+          onError: () => {
+            setCanContinue(false);
+            setShowError(true);
+            setShowSuccess(false);
+          },
+        }
+      );
       return;
     }
     setCanContinue(false);
     setShowError(true);
+    setShowSuccess(false);
   };
 
   if (!data || !projectId) return null;
@@ -53,10 +68,10 @@ export const PipelineOtherSelectFiles: React.FC<{
           marginTop: 24,
         }}
       >
-        <Button type="link" onClick={() => prevStep()}>
+        <NavLink to={`/projects/${projectId}/preview`}>
           <i role="none" className="fa fa-arrow-left"></i>&nbsp; Back to
-          Selection
-        </Button>
+          Publication Preview
+        </NavLink>
         <Button
           disabled={!canContinue}
           className="success-button"
@@ -89,6 +104,13 @@ export const PipelineOtherSelectFiles: React.FC<{
             for help with publishing.
           </li>
         </ul>
+        {showSuccess && (
+          <Alert
+            showIcon
+            type="success"
+            message="Your file selections have been saved."
+          />
+        )}
         {showError && (
           <Alert
             showIcon