task/WG-74: Create Map React Modal #193

tjgrafft · 2024-01-12T17:16:13Z

Overview:

Create a new map modal in react. See the current angular "Create new map" modal for comparison.

skip doing the file/project browser as it requires to much work.

Add POST request to Geoapi's /projectsendpoint by adding/using a new hook in react/src/hooks (and due to being blocked by WG-208, it defaults to always creating a map linked with the users My Data.)

PR Status:

Ready.
Work in Progress.
Hold.

Related Jira tickets:

WG-74

Summary of Changes:

Created a new UI for creating a map project (custom modal)
Added form validation with UI/UX for user (see screenshots)
Added working POST request that creates new projects (currently using v2 endpoint, but Nathan and I are working on WG-212 to improve backend and get it ready to use v3)
Added unit tests for new CreateMapModal component
system_path is now dynamic based off the currently logged in and authenticated user. This is used on the new modal for Save Location. When we add a File Browser System, this will need to change to include selected files.
Used tacc's core-styles to update new modal's style and layout. In WG-246 we will update this to use FieldWrapperFormik from Tup's core-wrappers lib.
Added a useCreateProject hook to handle the POST request with the form data.

Testing Steps:

Start up React frontend (npm ci and npm run dev)
Go to localhost:4200 in browser
On the Main Menu click the new "Create Map" button
Once Modal is open click the Submit button (without any input in the fields to verify form validation is working should see red text prompting user to fill in missing input)
Fill in the three fields (Name, Description, Custom File Name) with test input
Try using symbols other than a hyphen and/or underscore in the Custom File Name field and make sure form validation prompts user with correct message (see screenshot)
Once all three fields are populated, click the "Create" button.
You should be taken to the map page (this map is just a placeholder from a set fixture, for now but the project uuid in the URL is correct)
Open dev tools in Chrome and check the console to see the data that was sent in POST request (if you decided to check the 'Sync Folder' box, you should see both observable and watch_content as true in the payload)
Go to Hazmapper prod and check that new project is present in project listing
You should also see that your "You have ___ projects" on the Main Menu for react has increased in number by one.

UI Photos:

Core Styles Added:

Notes:

This new Modal will require follow-up work relating to WG-246 (using FieldWrapperFormik), as well as adding the feature/behavior where the filename is updated by the map name (unless the user manually changes the filename after). See https://tacc-main.atlassian.net/browse/WG-249.

nathanfranklin · 2024-01-12T18:13:46Z

react/package-lock.json

@@ -1,1759 +1,1031 @@
 {
    "name": "hazmapper",
    "version": "0.0.0",
-    "lockfileVersion": 3,


can you recreate your package-lock.json. you should switch to a newer version of ~~npm~~ node (via nvm). like npm version 20.x

nathanfranklin

Looks great. 👍 I left a variety of comments and suggestions. We can address some in this PR and then create follow on tickets for other ones (i.e. things that take longer)

react/src/requests.ts

nathanfranklin · 2024-01-22T17:33:02Z

react/package.json

        "@testing-library/react": "^13.4.0",
        "@types/leaflet.markercluster": "^1.5.1",
        "axios": "^1.6.2",
+        "bootstrap": "^5.3.2",


can bootstrap package be removed now that we are using the cdn?

Yes, it should still work with just the cdn. Let me test that though

nathanfranklin · 2024-01-22T17:34:48Z

react/src/components/MapModal/MapModal.test.tsx

+  const mockUsername = 'mockUser';
+  const mockEmail = '[email protected]';
+
+  const mockToken = {
+    token: 'mockTokenValue',
+    expires: Date.now() + 1000 * 60 * 60,
+  };


the entries (like authenticatedUser in react/src/__fixtures__/authStateFixtures.ts could be used here (and they can be altered or extended if they don't cover what is needed).

This part can be deleted once useName (WG-219) becomes available. I wonder if I should just pull that branch into this one, so I can use it for the unit test and MapModal comp?

react/index.html

nathanfranklin · 2024-01-22T18:33:35Z

react/src/components/MapModal/MapModal.tsx

@@ -0,0 +1,200 @@
+import React from 'react';


Suggestion: what about making the name more specific? something likeMapCreateModal instead of MapModal? 🤷‍♂️

or NewMapModal? or CreateMapModal

nathanfranklin · 2024-01-22T21:49:29Z

react/src/components/MapModal/MapModal.tsx

+              <FormGroup className="row align-items-center">
+                <Label className="col-sm-4">Save Location:</Label>
+                <div className="col-sm-8 text-primary">
+                  {user ? `/${user.name}` : 'Loading...'}


should we add a comment (with TODO_REACT) in it here, reminding us. or maybe this one is too obvious for a comment?

Sure, I can add a comment reminding us that this part will change once the File Browser comp is built

nathanfranklin · 2024-01-22T21:50:53Z

react/src/components/MapModal/MapModal.tsx

+              <FormGroup>
+                <Label for="system_file">Custom File Name</Label>
+                <div className="input-group">
+                  <Field


should we match the behavior on the current app where the user inputs the map name and the file initially matches the map name? Lets add a follow on Jira issue

nathanfranklin · 2024-01-22T21:54:52Z

react/src/pages/MainMenu/MainMenu.tsx


 function MainMenu() {
  const { data, isLoading, error } = useProjects();
+  const { mutate: createProject, isLoading: isCreatingProject } =


could line 14 and the handleCreateProject (20-33) be moved into the MapModal?

nathanfranklin · 2024-01-22T21:57:09Z

react/src/pages/MainMenu/MainMenu.tsx

+        toggleModal();
+      },
+      onError: (err) => {
+        // Handle error (e.g., show error message)


we need to not let the modal close and then show an error in the modal for users to see.

we should match the current behavior where we show the error message or the text " That folder is already syncing with a different map!"

nathanfranklin · 2024-01-22T22:11:11Z

react/src/pages/MainMenu/MainMenu.tsx

+  const handleCreateProject = (projectData) => {
+    createProject(projectData, {
+      onSuccess: () => {
+        // TO-ADD: Handle success (e.g., show success message, refetch projects, etc.)


we want to navigate to the new map as now we know the new uuid:

import { useNavigate } from 'react-router-dom'; import { Project } from '../../types'; .... onSuccess: (newProject: Project) => { navigate(`/project/${newProject.uuid}`); },

this /project/uuid route is already supported in react/src/AppRouter.tsx and bring us to a MapProject page (with fixtures for map data)

nathanfranklin · 2024-01-25T15:53:35Z

react/src/components/MapModal/MapModal.tsx

+                  size="short"
+                  type="primary"
+                  attr="submit"
+                  disabled={isCreating}


I think we should use isLoading instead of disabled property here. the isLoading disables the button and gives us a loading spinner as we wait for the action to occur. Then the shown text would just be "Create"

…d of MainMenu

nathanfranklin · 2024-02-06T19:00:04Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+  };
+  return (
+    <Modal isOpen={isOpen} toggle={toggle}>
+      <ModalHeader toggle={toggle}>Create a New Map</ModalHeader>


Suggested change

<ModalHeader toggle={toggle}>Create a New Map</ModalHeader>

<ModalHeader toggle={toggle} charCode="">Create a New Map</ModalHeader>

Could we use this and then drop the related button close CSS from CreateMapModal.module.css?

This didn't work for me. Don't think ModalHeader has charCode as a prop? I'd have to add it

hmm. we did it that way in CEP. wonder what the difference is. maybe dropped from bootstrap or react-strap?

I'll look in CEP and see if I can find an example. Normally the close button is built in with the react-strap ModalHeader, but bc we're using a lower version of bootstrap in our project, that btn-close class doesn't exist. But if I can find it in CEP, I'll use that code here

You're right, it is used like that in CEP:

<ModalHeader toggle={toggle} charCode=""> Authenticate with TACC Token </ModalHeader>

I'll try to figure out why it didn't work for me

/* To render modal close button icon as a Cortal icon /
/ CAVEAT: Pass charCode="" to <ModalHeader> /
.modal-header .close span {
/ To mimic .icon styles without @extend or composes (unavailable) /
/ HACK: Copied (and reduced and edited) from src/styles/trumps/icon... /
font-size: 1.5rem; / bigger to match header text font height (like design) */
font-family: Cortal-Icons !important;
}

Looks like a custom handling

cool. let's ignore and revisit whenever we do another modal.

Looks like a custom handling

thanks for tracking that down.

nathanfranklin · 2024-02-06T19:00:47Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+          validationSchema={validationSchema}
+          onSubmit={handleSubmit}
+        >
+          {/*TODO-REACT: Will change to core-style's FormField comp instead of Formik's Form & Field comp*/}


Can you add the Jira issue here and/or in PR decription?

and TODO-REACT -> TODO_REACT

nathanfranklin · 2024-02-06T19:11:32Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+    useCreateProject();
+  const navigate = useNavigate();
+
+  const handleCreateProject = (projectData, actions) => {


Suggested change

const handleCreateProject = (projectData, actions) => {

const handleCreateProject = (projectData: ProjectRequest, actions) => {

would be good to use type here.

nathanfranklin · 2024-02-06T19:15:52Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+                  </div>
+                )}
+              </FormGroup>
+              {/* TODO-REACT: This part will change once the FileBrowser component is added*/}


Suggested change

{/* TODO-REACT: This part will change once the FileBrowser component is added*/}

{/* TODO_REACT: This part will change once the FileBrowser component is added. https://tacc-main.atlassian.net/browse/WG-208*/}

nathanfranklin · 2024-02-06T20:52:46Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+    });
+  };
+
+  const handleSubmit = (values, actions) => {


are the actions and actions.setSubmitting needed.

They're not necessary, but keeping track of the submitting state might be helpful down the road when/if we add the feature to disable the Submit button, while the form is still handling the POST request? But I can take it out and we can add it back at that time?

I might be missing something, but I think you have that case covered already by using isCreatingProject and the Button's isLoading parameter which adds a spinner and disables the button:

<Button size="short" type="primary" attr="submit" isLoading={isCreatingProject} > Create </Button>

Oh yep you're right. Forgot we're using the core-style's Button wrapper now. I'll take the code out.

nathanfranklin · 2024-02-06T20:53:36Z

react/src/types/projects.ts

+  observable?: boolean;
+  watch_content?: boolean;


what about making these not optional

Suggested change

observable?: boolean;

watch_content?: boolean;

observable: boolean;

watch_content: boolean;

nathanfranklin · 2024-02-07T15:08:47Z

react/src/components/CreateMapModal/CreateMapModal.tsx

+        setErrorMessage('An error occurred while creating the project.');
+        if (err?.response?.status === 409) {
+          setErrorMessage(
+            'That folder is already syncing with a different map.'
+          );
+        } else if (err?.response?.status === 500) {
+          setErrorMessage('Internal server error. Please contact support.');
+        }


what about just having two types of error messages? one for the 409 and one for just the general error?

Suggested change

setErrorMessage('An error occurred while creating the project.');

if (err?.response?.status === 409) {

setErrorMessage(

'That folder is already syncing with a different map.'

);

} else if (err?.response?.status === 500) {

setErrorMessage('Internal server error. Please contact support.');

}

if (err?.response?.status === 409) {

setErrorMessage(

'That folder is already syncing with a different map.'

);

} else {

setErrorMessage('An error occurred while creating the project. Please contact support.');

}

nathanfranklin

LGTM 👍

task/WG-74: Create Map React Modal

55eb4e7

nathanfranklin reviewed Jan 12, 2024

View reviewed changes

Taylor Grafft and others added 7 commits January 12, 2024 13:07

recreating lock file

61fa55c

working POST request and unit tests added

a59ebe1

made system_path dynamic to current user that's logged in

01da5e3

fixing unit tests and modifying auth.ts file for AuthenticatedUser

1e6067d

adding tacc-core-styles to Modal

11c90ab

Merge branch 'master' into task/WG-74-react-map-modal

dce9921

fixing lint issues and unit test

8129ec1

tjgrafft marked this pull request as ready for review January 19, 2024 22:06

tjgrafft requested review from nathanfranklin, sophia-massie, shayanaijaz and taoteg January 19, 2024 22:06

refactoring usePost and useCreateProject to be more efficient

a857ea6

nathanfranklin requested changes Jan 22, 2024

View reviewed changes

nathanfranklin reviewed Jan 25, 2024

View reviewed changes

Taylor Grafft and others added 5 commits January 25, 2024 10:15

renaming MapModal comp and adding error message to modal

a1492b0

Merge branch 'master' into task/WG-74-react-map-modal

4dfe23a

adding useAuthenticatedUser hook and replacing redux

4b0328c

Refactoring CreateMapModal to handle its own states and errors instea…

fb11b80

…d of MainMenu

fixing MainMenu comp to match master

a9c9e7f

nathanfranklin reviewed Feb 6, 2024

View reviewed changes

Updating comments and type cleanup

2e2378a

nathanfranklin reviewed Feb 7, 2024

View reviewed changes

Taylor Grafft added 3 commits February 7, 2024 09:13

removing actions and submitting state management

36c7e9e

Modifying error message handling

0170c08

Updating CreateMapModal test to reflect new error handling

b636ca2

nathanfranklin approved these changes Feb 8, 2024

View reviewed changes

Taylor Grafft and others added 3 commits February 9, 2024 10:59

updating package.json to fix conflicts with lock file

b39c3ec

Merge branch 'master' into task/WG-74-react-map-modal

6f4e2e0

Merge branch 'master' into task/WG-74-react-map-modal

b7fae15

tjgrafft merged commit e90c794 into master Feb 13, 2024
5 checks passed

tjgrafft deleted the task/WG-74-react-map-modal branch February 13, 2024 17:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

task/WG-74: Create Map React Modal #193

task/WG-74: Create Map React Modal #193

tjgrafft commented Jan 12, 2024 •

edited by nathanfranklin

Loading

nathanfranklin Jan 12, 2024 •

edited

Loading

tjgrafft Jan 12, 2024

nathanfranklin left a comment

nathanfranklin Jan 22, 2024

tjgrafft Jan 22, 2024

nathanfranklin Jan 22, 2024

tjgrafft Jan 22, 2024

nathanfranklin Jan 22, 2024

nathanfranklin Jan 22, 2024

tjgrafft Jan 22, 2024

nathanfranklin Jan 22, 2024

nathanfranklin Jan 22, 2024

tjgrafft Jan 31, 2024

nathanfranklin Jan 22, 2024

nathanfranklin Jan 22, 2024

nathanfranklin Jan 25, 2024

nathanfranklin Feb 6, 2024

tjgrafft Feb 6, 2024

nathanfranklin Feb 6, 2024

tjgrafft Feb 6, 2024

tjgrafft Feb 6, 2024

tjgrafft Feb 6, 2024

nathanfranklin Feb 6, 2024 •

edited

Loading

nathanfranklin Feb 6, 2024 •

edited

Loading

nathanfranklin Feb 6, 2024

nathanfranklin Feb 6, 2024

nathanfranklin Feb 6, 2024

tjgrafft Feb 7, 2024

nathanfranklin Feb 7, 2024

tjgrafft Feb 7, 2024

nathanfranklin Feb 6, 2024

nathanfranklin Feb 7, 2024

nathanfranklin left a comment

	<ModalHeader toggle={toggle}>Create a New Map</ModalHeader>
	<ModalHeader toggle={toggle} charCode="">Create a New Map</ModalHeader>

	const handleCreateProject = (projectData, actions) => {
	const handleCreateProject = (projectData: ProjectRequest, actions) => {

	{/* TODO-REACT: This part will change once the FileBrowser component is added*/}
	{/* TODO_REACT: This part will change once the FileBrowser component is added. https://tacc-main.atlassian.net/browse/WG-208*/}

task/WG-74: Create Map React Modal #193

task/WG-74: Create Map React Modal #193

Conversation

tjgrafft commented Jan 12, 2024 • edited by nathanfranklin Loading

Overview:

PR Status:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

Core Styles Added:

Notes:

nathanfranklin Jan 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nathanfranklin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nathanfranklin Feb 6, 2024 • edited Loading

Choose a reason for hiding this comment

nathanfranklin Feb 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nathanfranklin left a comment

Choose a reason for hiding this comment

tjgrafft commented Jan 12, 2024 •

edited by nathanfranklin

Loading

nathanfranklin Jan 12, 2024 •

edited

Loading

nathanfranklin Feb 6, 2024 •

edited

Loading

nathanfranklin Feb 6, 2024 •

edited

Loading