task/WG-253 - File Listing Component using Chonky (#230)

* Added file listing component using Chonky

* update FileListing and SystemSelect components

* updated tests, refactor code into fileUtils

* added FileListing tests

* fix wrong projects being listed, updated tests

* updated CreateMapModal

* added export statement to fix build error

* updated failing test

react/jest.setup.ts

@@ -6,6 +6,10 @@ jest.mock('@hazmapper/hooks/environment/getLocalAppConfiguration', () => ({
   getLocalAppConfiguration: jest.fn(() => testDevConfiguration),
 }));
 
+jest.mock('react-jss', () => ({
+  createUseStyles: () => () => ({}),
+}));
+
 /***** B) Ignore some known warnings/errors *****/
 
 // List of `console.warn` messages that can be ignored

react/package.json

@@ -43,6 +43,7 @@
     "@turf/turf": "^7.2.0",
     "antd": "^5.23.1",
     "axios": "^1.7.9",
+    "chonky": "^2.3.2",
     "dompurify": "^3.2.3",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",

react/src/__fixtures__/fileFixture.ts

@@ -0,0 +1,74 @@
+import { File } from '../types/file';
+
+export const filesMock: File[] = [
+  {
+    name: 'Folder 3',
+    path: 'user/Folder_2/Folder_3',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 31000,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Folder_3/',
+  },
+  {
+    name: 'Test Map 3.hazmapper',
+    path: 'user/Folder_2/Folder_3/Test Map 3.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 7000,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Folder_3/Test%20Map%203.hazmapper',
+  },
+  {
+    name: 'Folder_1',
+    path: 'user/Folder_1',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 31,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_1/',
+  },
+  {
+    name: 'Folder_2',
+    path: 'user/Folder_2',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 4096,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/',
+  },
+  {
+    name: 'New Map.hazmapper',
+    path: 'user/New Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/New%20Map.hazmapper',
+  },
+  {
+    name: 'Test Map.hazmapper',
+    path: 'user/Test Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Test%20Map.hazmapper',
+  },
+  {
+    name: 'Test Map 2.hazmapper',
+    path: 'user/Folder_2/Test Map 2.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Test%20Map%202.hazmapper',
+  },
+];

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

@@ -43,3 +43,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.test.tsx

@@ -10,6 +10,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { testQueryClient, server } from '@hazmapper/test/testUtil';
 import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 import { projectMock } from '@hazmapper/__fixtures__/projectFixtures';
+import { filesMock } from '@hazmapper/__fixtures__/fileFixture';
 
 jest.mock('@hazmapper/hooks/user/useAuthenticatedUser', () => ({
   __esModule: true,
@@ -20,13 +21,32 @@ jest.mock('@hazmapper/hooks/user/useAuthenticatedUser', () => ({
   }),
 }));
 
+jest.mock('@hazmapper/hooks/files/useFiles', () => ({
+  __esModule: true,
+  useFiles: jest.fn(() => ({
+    data: filesMock,
+    refetch: jest.fn(),
+  })),
+}));
+
 const mockNavigate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 
+jest.mock('chonky', () => {
+  const actualChonky = jest.requireActual('chonky');
+  return {
+    ...actualChonky,
+    FileBrowser: jest.fn(() => <div>Mock FileBrowser</div>),
+    FileNavbar: jest.fn(() => <div>Mock FileNavbar</div>),
+    FileList: jest.fn(() => <div>Mock FileList</div>),
+    ChonkyActions: actualChonky.ChonkyActions,
+  };
+});
+
 const toggleMock = jest.fn();
 
 const renderComponent = async (isOpen = true) => {