All the client linting fixes,but not part of the base PR. Separated u…

client/src/components/DataFiles/DataFiles.jsx

@@ -114,9 +114,8 @@ const DataFilesSwitch = React.memo(() => {
       <Route
         path={`${path}/tapis/projects/:root_system/:system/:path*`}
         render={({ match: { params } }) => {
-
           const decodedPath = getDecodedPath(params.path);
-  
+
           return (
             <DataFilesProjectFileListing
               rootSystem={params.root_system}

client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx

@@ -21,7 +21,6 @@ const BreadcrumbsDropdown = ({
   section,
   isPublic,
 }) => {
-
   // encode path to handle special characters
   path = path.split('/').map(encodeURIComponent).join('/');
 

client/src/components/DataFiles/DataFilesListing/DataFilesListingCells.jsx

@@ -84,8 +84,9 @@ export const FileNavCell = React.memo(
     if (!basePath) basePath = isPublic ? '/public-data' : '/workbench/data';
 
     // encoding for % and # in path. Done twice due to react-router encoding bug. fixed in react router v6
-    path = path.replace(/%/g, encodeURIComponent(encodeURIComponent('%')))
-              .replace(/#/g, encodeURIComponent(encodeURIComponent('#')));
+    path = path
+      .replace(/%/g, encodeURIComponent(encodeURIComponent('%')))
+      .replace(/#/g, encodeURIComponent(encodeURIComponent('#')));
 
     return (
       <>

client/src/components/DataFiles/DataFilesModals/DataFilesAddProjectModal.jsx

@@ -88,7 +88,9 @@ const DataFilesAddProjectModal = () => {
           username: member.user.username,
           access: member.access,
         })),
-        metadata: DataFilesAddProjectModalAddon ? { title, description, ...values } : null,
+        metadata: DataFilesAddProjectModalAddon
+          ? { title, description, ...values }
+          : null,
         onCreate,
       },
     });
@@ -153,7 +155,9 @@ const DataFilesAddProjectModal = () => {
                     <br />
                   </div>
                 }
-                description={'The title should be descriptive and distinctive from related publications.'}
+                description={
+                  'The title should be descriptive and distinctive from related publications.'
+                }
               />
               {!!minDescriptionLength && (
                 <FormField
@@ -179,7 +183,9 @@ const DataFilesAddProjectModal = () => {
                   type="textarea"
                 />
               )}
-              {DataFilesAddProjectModalAddon && <DataFilesAddProjectModalAddon />}
+              {DataFilesAddProjectModalAddon && (
+                <DataFilesAddProjectModalAddon />
+              )}
               <DataFilesProjectMembers
                 members={members}
                 onAdd={onAdd}

client/src/components/DataFiles/DataFilesModals/DataFilesCopyModal.jsx

@@ -181,4 +181,4 @@ const DataFilesCopyModal = React.memo(() => {
   );
 });
 
-export default DataFilesCopyModal;
+export default DataFilesCopyModal;

client/src/components/DataFiles/DataFilesModals/DataFilesFormModal.jsx

@@ -1,6 +1,12 @@
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { Modal, ModalHeader, ModalBody, ModalFooter, FormText } from 'reactstrap';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  FormText,
+} from 'reactstrap';
 import { DynamicForm } from '_common/Form/DynamicForm';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
@@ -14,7 +20,9 @@ const DataFilesFormModal = () => {
   const location = useLocation();
 
   const reloadPage = (updatedPath = '') => {
-    const match = location.pathname.match(/^\/workbench\/data\/tapis\/[^\/]+\/[^\/]+\/[^\/]+/);
+    const match = location.pathname.match(
+      /^\/workbench\/data\/tapis\/[^\/]+\/[^\/]+\/[^\/]+/
+    );
     if (!match) return;
 
     const projectUrl = match[0];
@@ -73,7 +81,6 @@ const DataFilesFormModal = () => {
 
   const validationSchema = Yup.object().shape({
     ...(form?.form_fields ?? []).reduce((schema, field) => {
-
       let validator;
 
       if (field.type === 'number') {
@@ -120,7 +127,7 @@ const DataFilesFormModal = () => {
           .max(
             field.validation?.max ?? Infinity,
             `${field.label} must be less than or equal to ${field.validation?.max} characters`
-          )
+          );
       }
 
       schema[field.name] = validator;
@@ -149,10 +156,7 @@ const DataFilesFormModal = () => {
                 </ModalHeader>
                 <ModalBody className={styles['modal-body-container']}>
                   {form?.description && (
-                    <FormText
-                      className="form-field__help"
-                      color='muted'
-                    >
+                    <FormText className="form-field__help" color="muted">
                       {form.description}
                     </FormText>
                   )}

client/src/components/DataFiles/DataFilesModals/DataFilesPreviewModal.jsx

@@ -37,7 +37,7 @@
     !isLoading && !hasError && params.path && fileType == 'brainmap';
   const [isFrameLoading, setIsFrameLoading] = useState(true);
 
   const portalName = useSelector((state) => state.workbench.portalName);
   const { DataFilesPreviewModalAddon } = useAddonComponents({ portalName });
 
   useEffect(() => {
@@ -103,9 +103,11 @@
         File Preview: {params.name}
       </ModalHeader>
       <ModalBody className={`${styles.root} ${styles['modal-body']}`}>
-        {DataFilesPreviewModalAddon && !isLoading && params.scheme === 'projects' && (
-          <DataFilesPreviewModalAddon metadata={params.metadata} />
-        )}
+        {DataFilesPreviewModalAddon &&
+          !isLoading &&
+          params.scheme === 'projects' && (
+            <DataFilesPreviewModalAddon metadata={params.metadata} />
+          )}
         {(isLoading || (previewUsingHref && isFrameLoading)) && (
           <div className={styles['loading-style']}>
             <LoadingSpinner />

client/src/components/DataFiles/DataFilesModals/DataFilesProjectEditDescriptionModal.jsx

@@ -87,110 +87,114 @@ const DataFilesProjectEditDescriptionModal = () => {
     [projectId, dispatch]
   );
 
-  const [validationSchema, setValidationSchema] = useState(Yup.object().shape({
-    title: Yup.string()
-      .min(3, 'Title must be at least 3 characters')
-      .max(maxTitleLength, `Title must be at most ${maxTitleLength} characters`)
-      .required('Please enter a title.'),
-    description: Yup.string()
-      .min(
-        minDescriptionLength,
-        `Description must be at least ${minDescriptionLength} characters`
-      )
-      .when([], {
-        is: () => minDescriptionLength > 0,
-        then: (schema) => schema.required('Please enter a description.'),
-        otherwise: (schema) => schema.notRequired(),
+  const [validationSchema, setValidationSchema] = useState(
+    Yup.object().shape({
+      title: Yup.string()
+        .min(3, 'Title must be at least 3 characters')
+        .max(
+          maxTitleLength,
+          `Title must be at most ${maxTitleLength} characters`
+        )
+        .required('Please enter a title.'),
+      description: Yup.string()
+        .min(
+          minDescriptionLength,
+          `Description must be at least ${minDescriptionLength} characters`
+        )
+        .when([], {
+          is: () => minDescriptionLength > 0,
+          then: (schema) => schema.required('Please enter a description.'),
+          otherwise: (schema) => schema.notRequired(),
+        }),
+      ...(enableWorkspaceKeywords && {
+        keywords: Yup.array().of(Yup.string()),
       }),
-    ...(enableWorkspaceKeywords && {
-      keywords: Yup.array().of(Yup.string()
-      ),
-    }),
-  }));
+    })
+  );
 
   return (
     <Modal size="xl" isOpen={isOpen} toggle={toggle} className="dataFilesModal">
       {/* <ModalBody> */}
-        <Formik
-          initialValues={initialValues}
-          initialTouched={{
-            title: true,
-            description: true,
-            keywords: true,
-          }}
-          onSubmit={setProjectTitleDescription}
-          validationSchema={validationSchema}
-          validateOnMount
-        >
-          {({ isValid, dirty }) => (
-            <Form>
-              <ModalHeader toggle={toggle} charCode="&#xe912;">
-                Edit Dataset
-              </ModalHeader>
-              <ModalBody className={styles['modal-body']}>
+      <Formik
+        initialValues={initialValues}
+        initialTouched={{
+          title: true,
+          description: true,
+          keywords: true,
+        }}
+        onSubmit={setProjectTitleDescription}
+        validationSchema={validationSchema}
+        validateOnMount
+      >
+        {({ isValid, dirty }) => (
+          <Form>
+            <ModalHeader toggle={toggle} charCode="&#xe912;">
+              Edit Dataset
+            </ModalHeader>
+            <ModalBody className={styles['modal-body']}>
+              <FormField
+                name="title"
+                aria-label="title"
+                disabled={!isOwner}
+                label={
+                  <div>
+                    Title{' '}
+                    <small>
+                      <em>(Maximum {maxTitleLength} characters)</em>
+                    </small>
+                  </div>
+                }
+              />
+              {!!minDescriptionLength && (
                 <FormField
-                  name="title"
-                  aria-label="title"
+                  name="description"
+                  aria-label="description"
                   disabled={!isOwner}
                   label={
                     <div>
-                      Title{' '}
+                      Description{' '}
                       <small>
-                        <em>(Maximum {maxTitleLength} characters)</em>
+                        <em>(Minimum {minDescriptionLength} characters)</em>
                       </small>
                     </div>
                   }
+                  type="textarea"
+                  className={styles['description-textarea']}
                 />
-                {!!minDescriptionLength && (
-                  <FormField
-                    name="description"
-                    aria-label="description"
-                    disabled={!isOwner}
-                    label={
-                      <div>
-                        Description{' '}
-                        <small>
-                          <em>(Minimum {minDescriptionLength} characters)</em>
-                        </small>
-                      </div>
-                    }
-                    type="textarea"
-                    className={styles['description-textarea']}
-                  />
-                )}
-                {!!enableWorkspaceKeywords && (
-                  <FormField
-                    name="keywords"
-                    aria-label="keywords"
-                    tags
-                    label={<div>Keywords</div>}
-                    type="textarea"
-                    className={styles['description-textarea']}
-                  />
-                )}
-                {DataFilesProjectEditDescriptionModalAddon && (
-                  <DataFilesProjectEditDescriptionModalAddon
-                    setValidationSchema={setValidationSchema}
-                  />
+              )}
+              {!!enableWorkspaceKeywords && (
+                <FormField
+                  name="keywords"
+                  aria-label="keywords"
+                  tags
+                  label={<div>Keywords</div>}
+                  type="textarea"
+                  className={styles['description-textarea']}
+                />
+              )}
+              {DataFilesProjectEditDescriptionModalAddon && (
+                <DataFilesProjectEditDescriptionModalAddon
+                  setValidationSchema={setValidationSchema}
+                />
+              )}
+              <div className={styles['button-container']}>
+                {updatingError && (
+                  <Message type="error" dataTestid="updating-error">
+                    Something went wrong.
+                  </Message>
                 )}
-                <div className={styles['button-container']}>
-                  {updatingError && (
-                    <Message type="error" dataTestid="updating-error">
-                      Something went wrong.
-                    </Message>
-                  )}
-                  <Button
-                    attr="submit"
-                    type="primary"
-                    size="long"
-                    disabled={!isValid}
-                    className={styles['update-button']}
-                    isLoading={isUpdating}
-                  >
-                    Update Changes
-                  </Button>
-                </div>
-              </ModalBody>
+                <Button
+                  attr="submit"
+                  type="primary"
+                  size="long"
+                  disabled={!isValid}
+                  className={styles['update-button']}
+                  isLoading={isUpdating}
+                >
+                  Update Changes
+                </Button>
+              </div>
+            </ModalBody>
           </Form>
         )}
       </Formik>

client/src/components/DataFiles/DataFilesModals/DataFilesProjectTreeModal.module.scss

@@ -1,4 +1,4 @@
 .modal-body {
-    overflow: auto;
-    max-height: 80vh;
+  overflow: auto;
+  max-height: 80vh;
 }

client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx

@@ -50,7 +50,9 @@ function DataFilesUploadModalListingTable({
 
   const { params } = useFileListing('FilesListing');
   const portalName = useSelector((state) => state.workbench.portalName);
-  const { DataFilesUploadModalListingTableAddon } = useAddonComponents({ portalName });
+  const { DataFilesUploadModalListingTableAddon } = useAddonComponents({
+    portalName,
+  });
 
   return (
     <div className={styles['table-wrapper']}>
@@ -71,20 +73,21 @@ function DataFilesUploadModalListingTable({
                 <FileLengthCell cell={{ value: file.data.size }} />
               </td>
               <td>
-                {DataFilesUploadModalListingTableAddon && params.scheme === 'projects' && (
-                  <DataFilesUploadModalListingTableAddon
-                    file={file}
-                    onToggleAdvancedImageFile={(fileId, value) =>
-                      setUploadedFiles((prevFiles) =>
-                        prevFiles.map((f) =>
-                          f.id === fileId
-                            ? { ...f, is_advanced_image_file: value }
-                            : f
+                {DataFilesUploadModalListingTableAddon &&
+                  params.scheme === 'projects' && (
+                    <DataFilesUploadModalListingTableAddon
+                      file={file}
+                      onToggleAdvancedImageFile={(fileId, value) =>
+                        setUploadedFiles((prevFiles) =>
+                          prevFiles.map((f) =>
+                            f.id === fileId
+                              ? { ...f, is_advanced_image_file: value }
+                              : f
+                          )
                         )
-                      )
-                    }
-                  />
-                )}
+                      }
+                    />
+                  )}
               </td>
               <td>
                 <span className="float-right">