task/WG-253 - File Listing Component using Chonky

react/package.json

@@ -43,6 +43,7 @@
     "@types/geojson": "^7946.0.14",
     "@types/leaflet.markercluster": "^1.5.1",
     "axios": "^1.6.2",
+    "chonky": "^2.3.2",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",

react/src/__fixtures__/fileFixture.ts

@@ -0,0 +1,137 @@
+import { File } from '../types/file';
+
+export const files: File[] = [
+  {
+    name: 'Folder 3',
+    path: 'user/Folder_2/Folder_3',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 31000,
+    permissions: 'ALL',
+    format: 'folder',
+    system: 'designsafe.storage.default',
+    mimeType: 'text/directory',
+    type: 'dir',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Folder_1',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'Test Map 3.hazmapper',
+    path: 'user/Folder_2/Folder_3/Test Map 3.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 7000,
+    permissions: 'READ_WRITE',
+    format: 'raw',
+    system: 'designsafe.storage.default',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Test%20Map.hazmapper',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'Folder_1',
+    path: 'user/Folder_1',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 31,
+    permissions: 'ALL',
+    format: 'folder',
+    system: 'designsafe.storage.default',
+    mimeType: 'text/directory',
+    type: 'dir',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Folder_1',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'Folder_2',
+    path: 'user/Folder_2',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 4096,
+    permissions: 'ALL',
+    format: 'folder',
+    system: 'designsafe.storage.default',
+    mimeType: 'text/directory',
+    type: 'dir',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Folder_2',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'New Map.hazmapper',
+    path: 'user/New Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 70,
+    permissions: 'READ_WRITE',
+    format: 'raw',
+    system: 'designsafe.storage.default',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/New%20Map.hazmapper',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'Test Map.hazmapper',
+    path: 'user/Test Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 70,
+    permissions: 'READ_WRITE',
+    format: 'raw',
+    system: 'designsafe.storage.default',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Test%20Map.hazmapper',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+  {
+    name: 'Test Map 2.hazmapper',
+    path: 'user/Folder_2/Test Map 2.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    length: 70,
+    permissions: 'READ_WRITE',
+    format: 'raw',
+    system: 'designsafe.storage.default',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    _links: {
+      self: {
+        href: 'https://agave.designsafe-ci.org/files/v2/media/system/designsafe.storage.default//user/Test%20Map.hazmapper',
+      },
+      system: {
+        href: 'https://agave.designsafe-ci.org/systems/v2/designsafe.storage.default',
+      },
+    },
+  },
+];

react/src/components/CreateMapModal/CreateMapModal.module.css

@@ -44,3 +44,18 @@
     width: 115%;
   }
 }
+
+.section {
+  height: 55vh;
+}
+
+.link-heading {
+  border-bottom: 0;
+  padding-bottom: 0.5rem;
+}
+
+.link-subheading {
+  font-style: italic;
+  font-weight: 100;
+  padding-bottom: 2rem;
+}

react/src/components/CreateMapModal/CreateMapModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button } from '../../core-components';
+import { Button, Section, SectionTableWrapper } from '../../core-components';
 import styles from './CreateMapModal.module.css';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
@@ -14,6 +14,7 @@ import {
   FormikTextarea,
   FormikCheck,
 } from '../../core-wrappers';
+import { FileListing } from '../Files';
 
 type CreateMapModalProps = {
   isOpen: boolean;
@@ -46,6 +47,19 @@ const CreateMapModal = ({
     parentToggle(); // Call the original toggle function passed as a prop
   };
 
+  const [selectedDirectory, setSelectedDirectory] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState([] as any[]);
+
+  const handleDirectoryChange = (directory: string) => {
+    console.log('selected directory', directory);
+    setSelectedDirectory(directory);
+  };
+
+  const handleSelectedFiles = (files: any[]) => {
+    console.log('selected files', files);
+    setSelectedFiles(files);
+  };
+
   const handleCreateProject = (projectData: ProjectRequest) => {
     createProject(projectData, {
       onSuccess: (newProject) => {
@@ -82,82 +96,119 @@ const CreateMapModal = ({
     };
     handleCreateProject(projectData);
   };
+
   return (
-    <Modal isOpen={isOpen} toggle={handleClose}>
+    <Modal isOpen={isOpen} toggle={handleClose} size="xl">
       <ModalHeader toggle={handleClose}>Create a New Map</ModalHeader>
-      <ModalBody>
-        <Formik
-          initialValues={{
-            name: '',
-            description: '',
-            system_file: '',
-            system_id: 'designsafe.storage.default',
-            system_path: '',
-            syncFolder: false,
-          }}
-          validationSchema={validationSchema}
-          onSubmit={handleSubmit}
-        >
-          {() => (
-            <Form className="c-form">
-              <FieldWrapperFormik name="map-form-info" label="">
-                <FormikInput
-                  name="name"
-                  label="Name"
-                  required
-                  data-testid="name-input"
-                />
-                <FormikTextarea
-                  name="description"
-                  label="Description"
-                  required
-                />
-                <div className={`${styles['field-wrapper']}`}>
-                  <FormikInput
-                    name="system_file"
-                    label="Custom File Name"
-                    required
-                    className={`${styles['input-custom-size']}`}
-                  />
-                  <span className={`${styles['hazmapper-suffix']}`}>
-                    .hazmapper
-                  </span>
-                </div>
-                <div className={`${styles['field-wrapper-alt']}`}>
-                  <FormikInput
-                    name="save-location-label"
-                    label="Save Location"
-                    value={`/${userData?.username}`}
-                    readOnly
-                    disabled
-                  />
-                </div>
-                <FormikCheck
-                  name="syncFolder"
-                  label="Sync Folder"
-                  description="When enabled, files in this folder are automatically synced
+      <ModalBody className={`${'modal-body'}`}>
+        <Section
+          bodyClassName="has-loaded-dashboard"
+          contentLayoutName={'twoColumn'}
+          // contentShouldScroll
+          className={`${styles['section']}`}
+          content={
+            <>
+              <SectionTableWrapper>
+                <Formik
+                  initialValues={{
+                    name: '',
+                    description: '',
+                    system_file: '',
+                    system_id: 'designsafe.storage.default',
+                    system_path: '',
+                    syncFolder: false,
+                  }}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {() => (
+                    <Form className="c-form">
+                      <FieldWrapperFormik name="map-form-info" label="">
+                        <FormikInput
+                          name="name"
+                          label="Name"
+                          required
+                          data-testid="name-input"
+                        />
+                        <FormikTextarea
+                          name="description"
+                          label="Description"
+                          required
+                        />
+                        <div className={`${styles['field-wrapper']}`}>
+                          <FormikInput
+                            name="system_file"
+                            label="Custom File Name"
+                            required
+                            className={`${styles['input-custom-size']}`}
+                          />
+                          <span className={`${styles['hazmapper-suffix']}`}>
+                            .hazmapper
+                          </span>
+                        </div>
+                        <div className={`${styles['field-wrapper-alt']}`}>
+                          <FormikInput
+                            name="save-location-label"
+                            label="Save Location"
+                            value={`/${userData?.username}`}
+                            readOnly
+                            disabled
+                          />
+                        </div>
+                        <FormikCheck
+                          name="syncFolder"
+                          label="Sync Folder"
+                          description="When enabled, files in this folder are automatically synced
                   into the map periodically."
+                        />
+                      </FieldWrapperFormik>
+                      {errorMessage && (
+                        <div className="c-form__errors">{errorMessage}</div>
+                      )}
+                      <ModalFooter className="justify-content-start">
+                        <Button
+                          size="short"
+                          type="secondary"
+                          onClick={handleClose}
+                        >
+                          Close
+                        </Button>
+                        <Button
+                          size="short"
+                          type="primary"
+                          attr="submit"
+                          isLoading={isCreatingProject}
+                        >
+                          Create
+                        </Button>
+                      </ModalFooter>
+                    </Form>
+                  )}
+                </Formik>
+              </SectionTableWrapper>
+              <SectionTableWrapper
+                manualHeader={
+                  <>
+                    <h2 className={`${styles['link-heading']}`}>
+                      Select Link Save Location
+                    </h2>
+                    <h4 className={`${styles['link-subheading']}`}>
+                      If no folder is selected, the link file will be saved to
+                      the root of the selected system.If you select a project,
+                      you can link the current map to the project.
+                    </h4>
+                  </>
+                }
+              >
+                <FileListing
+                  disableSelection={false}
+                  onDirectoryChange={handleDirectoryChange}
+                  onFileSelect={handleSelectedFiles}
                 />
-              </FieldWrapperFormik>
-              {errorMessage && (
-                <div className="c-form__errors">{errorMessage}</div>
-              )}
-              <ModalFooter className="justify-content-start">
-                <Button size="short" type="secondary" onClick={handleClose}>
-                  Close
-                </Button>
-                <Button
-                  size="short"
-                  type="primary"
-                  attr="submit"
-                  isLoading={isCreatingProject}
-                >
-                  Create
-                </Button>
-              </ModalFooter>
-            </Form>
-          )}
-        </Formik>
+              </SectionTableWrapper>
+            </>
+          }
+        ></Section>
       </ModalBody>
     </Modal>
   );