Merge branch 'feat/Tapis-v3-redesign' into task/DES-2629--v3-apps-form

client/modules/_common_components/src/datafiles/index.ts

@@ -0,0 +1,2 @@
+export * from './FileListingTable/FileListingTable';
+export * from './DatafilesBreadcrumb/DatafilesBreadcrumb';

client/modules/_common_components/src/index.ts

@@ -1,4 +1 @@
-export * from './lib/common-components';
-export { Spinner } from './lib/Spinner';
-export { Icon } from './lib/Icon';
-export { SecondaryButton, PrimaryButton } from './lib/Button';
+export * from './datafiles';

client/modules/_common_components/vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
     globals: true,
     cache: { dir: '../../node_modules/.vitest' },
     environment: 'jsdom',
+    passWithNoTests: true,
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {

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

@@ -3,3 +3,5 @@ export type { TPublicationListingItem } from './usePublishedListing';
 export { usePublicationDetail } from './usePublicationDetail';
 export { usePublicationVersions } from './usePublicationVersions';
 export { usePublishProject } from './usePublishProject';
+export { useVersionProject } from './useVersionProject';
+export { useAmendProject } from './useAmendProject';

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

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '../../apiClient';
+
+async function amendProject(projectId: string) {
+  const res = await apiClient.post(`/api/publications/v2/amend/`, {
+    projectId,
+  });
+  return res.data;
+}
+
+export function useAmendProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ projectId }: { projectId: string }) =>
+      amendProject(projectId),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ['datafiles', 'published'],
+      }),
+  });
+}

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

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '../../apiClient';
+
+async function versionProject(
+  projectId: string,
+  entityUuids: string[],
+  versionInfo: string
+) {
+  const res = await apiClient.post(`/api/publications/v2/version/`, {
+    projectId,
+    entityUuids,
+    versionInfo,
+  });
+  return res.data;
+}
+
+export function useVersionProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      projectId,
+      entityUuids,
+      versionInfo,
+    }: {
+      projectId: string;
+      entityUuids: string[];
+      versionInfo: string;
+    }) => versionProject(projectId, entityUuids, versionInfo),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ['datafiles', 'published'],
+      }),
+  });
+}

client/modules/datafiles/src/AddFileFolder/AddFileFolder.tsx

@@ -24,6 +24,7 @@ export const AddFileFolder: React.FC = () => {
   const isNees = matches.find((m) => m.id === 'nees');
 
   const isReadOnly = !!(
+    (isProjects && !projectId) ||
     isPublished ||
     isNees ||
     system === 'designsafe.storage.community'

client/modules/datafiles/src/DatafilesModal/CopyModal/CopyModal.tsx

@@ -10,8 +10,8 @@ import {
 import {
   FileListingTable,
   TFileListingColumns,
-} from '../../FileListing/FileListingTable/FileListingTable';
-import { BaseFileListingBreadcrumb } from '../../DatafilesBreadcrumb/DatafilesBreadcrumb';
+} from '@client/common-components';
+import { BaseFileListingBreadcrumb } from '@client/common-components';
 import styles from './CopyModal.module.css';
 import { toBytes } from '../../FileListing/FileListing';
 import { CopyModalProjectListing } from './CopyModalProjectListing';

client/modules/datafiles/src/DatafilesModal/MoveModal/MoveModal.tsx

@@ -6,13 +6,14 @@ import {
   usePathDisplayName,
   useSelectedFiles,
 } from '@client/hooks';
+
+import { BaseFileListingBreadcrumb } from '@client/common-components';
+import styles from './MoveModal.module.css';
+import { toBytes } from '../../FileListing/FileListing';
 import {
   FileListingTable,
   TFileListingColumns,
-} from '../../FileListing/FileListingTable/FileListingTable';
-import { BaseFileListingBreadcrumb } from '../../DatafilesBreadcrumb/DatafilesBreadcrumb';
-import styles from './MoveModal.module.css';
-import { toBytes } from '../../FileListing/FileListing';
+} from '@client/common-components';
 
 const SelectedFilesColumns: TFileListingColumns = [
   {

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

@@ -4,7 +4,7 @@ import { Button, TableProps } from 'antd';
 import {
   FileListingTable,
   TFileListingColumns,
-} from './FileListingTable/FileListingTable';
+} from '@client/common-components';
 import { NavLink } from 'react-router-dom';
 import { PreviewModalBody } from '../DatafilesModal/PreviewModal';
 

client/modules/datafiles/src/index.ts

@@ -5,7 +5,6 @@ export * from './AddFileFolder/AddFileFolder';
 export * from './FileListing/FileListing';
 export { default as DatafilesModal } from './DatafilesModal/DatafilesModal';
 export * from './DatafilesToolbar/DatafilesToolbar';
-export * from './DatafilesBreadcrumb/DatafilesBreadcrumb';
 
 export * from './nees';
 export * from './projects';

client/modules/datafiles/src/nees/NeesDetails.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
 import styles from './NeesDetails.module.css';
-import { DatafilesBreadcrumb } from '../DatafilesBreadcrumb/DatafilesBreadcrumb';
+import { DatafilesBreadcrumb } from '@client/common-components';
 import { FileListing } from '../FileListing/FileListing';
 
 export const DescriptionExpander: React.FC<React.PropsWithChildren> = ({

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   FileListingTable,
   TFileListingColumns,
-} from '../../FileListing/FileListingTable/FileListingTable';
+} from '@client/common-components';
 import { toBytes } from '../../FileListing/FileListing';
 import { PreviewModalBody } from '../../DatafilesModal/PreviewModal';
 import { NavLink } from 'react-router-dom';

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

@@ -6,7 +6,7 @@ import {
 import { Alert, Button } from 'antd';
 import { FileListing } from '../../FileListing/FileListing';
 import { useEffect, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
 export const PipelineOtherSelectFiles: React.FC<{
   projectId: string;
@@ -18,6 +18,7 @@ export const PipelineOtherSelectFiles: React.FC<{
   const [canContinue, setCanContinue] = useState(false);
   const [showError, setShowError] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
+  const [searchParams] = useSearchParams();
 
   const { mutate } = useSetFileAssociations(projectId);
 
@@ -31,10 +32,14 @@ export const PipelineOtherSelectFiles: React.FC<{
     setSelectedFiles([]);
   }, [setSelectedFiles, projectId]);
 
+  // If amending, skip this step. Published data cannot be changed without versioning.
+  useEffect(() => {
+    if (searchParams.get('operation') === 'amend') setCanContinue(true);
+  }, [searchParams]);
+
   const onSaveSelections = () => {
     console.log(selectedFiles);
     if (selectedFiles.length > 0 && !!data) {
-      // TODO: mutation to set project's fileObjs attribute to the selected files.
       mutate(
         { fileObjs: selectedFiles, entityUuid: data.baseProject.uuid },
         {
@@ -118,19 +123,37 @@ export const PipelineOtherSelectFiles: React.FC<{
             message="Please select at least 1 file or folder."
           />
         )}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <h3>Select Files</h3>{' '}
-          <Button type="primary" onClick={onSaveSelections}>
-            Save Selections
-          </Button>
-        </div>
-        <FileListing api="tapis" system={`project-${data.baseProject.uuid}`} />
+        {searchParams.get('operation') === 'amend' ? (
+          <Alert
+            showIcon
+            description={
+              <span>
+                File selections cannot be changed when amending a publication.
+                If you need to make a change to published files, please create a
+                new version instead.
+              </span>
+            }
+          />
+        ) : (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <h3>Select Files</h3>{' '}
+              <Button type="primary" onClick={onSaveSelections}>
+                Save Selections
+              </Button>
+            </div>
+            <FileListing
+              api="tapis"
+              system={`project-${data.baseProject.uuid}`}
+            />
+          </>
+        )}
       </section>
     </>
   );

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

@@ -1,13 +1,18 @@
-import { usePublishProject } from '@client/hooks';
-import { Button, Checkbox, Modal } from 'antd';
+import {
+  useAmendProject,
+  usePublishProject,
+  useVersionProject,
+} from '@client/hooks';
+import { Button, Checkbox, Input, Modal } from 'antd';
 import React, { useState } from 'react';
 
 export const PipelinePublishModal: React.FC<{
   projectId: string;
   entityUuids: string[];
+  operation: string;
   projectType: string;
   disabled: boolean;
-}> = ({ projectId, entityUuids, projectType, disabled }) => {
+}> = ({ projectId, entityUuids, operation, projectType, disabled }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const showModal = () => {
@@ -17,17 +22,40 @@ export const PipelinePublishModal: React.FC<{
   const handleCancel = () => {
     setIsModalOpen(false);
   };
-  const { mutate } = usePublishProject();
+
+  const [versionInfo, setVersionInfo] = useState('');
+
+  const { mutate: publishMutation } = usePublishProject();
+  const { mutate: amendMutation } = useAmendProject();
+  const { mutate: versionMutation } = useVersionProject();
+
   const doPublish = () => {
-    mutate({ projectId, entityUuids });
+    switch (operation) {
+      case 'publish':
+        publishMutation({ projectId, entityUuids });
+        break;
+      case 'amend':
+        amendMutation({ projectId });
+        break;
+      case 'version':
+        versionMutation({ projectId, entityUuids, versionInfo });
+        break;
+    }
+  };
+
+  const publishButtonText: Record<string, string> = {
+    amend: 'Submit Amendments',
+    version: 'Create a New Version',
+    publish: 'Request DOI & Publish',
   };
 
   const [protectedDataAgreement, setProtectedDataAgreement] = useState(false);
   const [publishingAgreement, setPublishingAgreement] = useState(false);
 
   const canPublish =
     publishingAgreement &&
-    (projectType === 'field_recon' ? protectedDataAgreement : true);
+    (projectType === 'field_recon' ? protectedDataAgreement : true) &&
+    (operation === 'version' ? !!versionInfo : true);
 
   return (
     <>
@@ -38,7 +66,8 @@ export const PipelinePublishModal: React.FC<{
         type="primary"
         onClick={showModal}
       >
-        <i role="none" className="fa fa-globe"></i>Request DOI and Publish
+        <i role="none" className="fa fa-globe"></i>&nbsp;
+        {publishButtonText[operation]}
       </Button>
       <Modal
         width="60%"
@@ -67,7 +96,7 @@ export const PipelinePublishModal: React.FC<{
               type="primary"
               className="success-button"
             >
-              Request DOI and Publish
+              {publishButtonText[operation]}
             </Button>
           </div>
         )}
@@ -327,6 +356,24 @@ export const PipelinePublishModal: React.FC<{
             issues that may arise from the publication.
           </p>
         </div>
+        {operation === 'version' && (
+          <>
+            {' '}
+            <label htmlFor="version-info-input">
+              Version Changes (required)
+            </label>{' '}
+            <div>
+              Specify what files you are adding, removing, or replacing, and why
+              these changes are needed. This will be displayed to those viewing
+              your publication, so be detailed and formal in your explanation.
+            </div>
+            <Input.TextArea
+              autoSize={{ minRows: 3 }}
+              onChange={(e) => setVersionInfo(e.target.value)}
+              id="version-info-input"
+            />
+          </>
+        )}
       </Modal>
     </>
   );