[MINT-3221] MTO Table Action Component #1552

garyjzhao · 2024-12-04T20:52:59Z

MINT-3221

Description

Created MTOTableActions component, along with its copy and test
Add MTOTableActions to MTOTable
Add Solution Library link to SolutionForm
Remove temporary buttons on Home page

How to test this change

Navigate to a Model Plan with MTO
Ensure that the Table Actions is visible and matches figma
Play with buttons and ensure modals still work

tablet and smaller screen sizes are still WIP as of 12/4/2024: https://cmsgov.slack.com/archives/C01B9TEC65A/p1733340956122379

PR Author Checklist

I have provided a detailed description of the changes in this PR.
I have provided clear instructions on how to test the changes in this PR.
I have updated tests or written new tests as appropriate in this PR.
Updated the Postman Collection if necessary.

PR Reviewer Guidelines

It's best to pull the branch locally and test it, rather than just looking at the code online!
When approving a PR, provide a reason why you're approving it
- e.g. "Approving because I tested it locally and all functionality works as expected"
- e.g. "Approving because the change is simple and matches the Figma design"
Don't be afraid to leave comments or ask questions, especially if you don't understand why something was done! (This is often a great time to suggest code comments or documentation updates)
Check that all code is adequately covered by tests - if it isn't feel free to suggest the addition of tests.

garyjzhao · 2024-12-04T20:53:54Z

src/features/ModelPlan/ModelToOperations/_components/Modal/SolutionForm/index.tsx

+                    history.push(
+                      `/models/${modelID}/collaboration-area/model-to-operations/solution-library`
+                    );


Solution Library url does not exist, but just inferring based on the milestone library url

I think that makes sense!

ClayBenson94 · 2024-12-05T15:24:59Z

If #1553 gets merged first, we could probably implement calling that mutation in here, just FYI!

garyjzhao · 2024-12-05T19:42:28Z

src/features/ModelPlan/ModelToOperations/_components/Table/Actions/index.tsx

+  const handleCreate = () => {
+    create().then(response => {
+      if (!response?.errors) {
+        alert('Standard categories created successfully');
+      }
+    });
+  };


Added in createStandardCategories from #1553

@ClayBenson94

patrickseguraoddball

Nice Gary

Do we want to persist the selection in localStorage to hide/show table actions? @ClayBenson94

patrickseguraoddball · 2024-12-06T18:59:45Z

src/features/ModelPlan/ModelToOperations/Home/index.tsx

@@ -85,7 +77,10 @@ const MTOHome = () => {
        ]}
      />

-      {!isModalOpen && message && <Expire delay={45000}>{message}</Expire>}
+      {
+        // !isModalOpen &&


Can remove this commented out code

patrickseguraoddball

dupe

patrickseguraoddball · 2024-12-06T19:10:23Z

src/features/ModelPlan/ModelToOperations/_components/Table/index.tsx

@@ -492,6 +493,7 @@ const MTOTable = () => {

  return (
    <>
+      <MTOTableActions />


I hesitate to put the component within <MTOTable />. It can be moved as a sibling inside of the home component. This allows some flexibility and decoupling of the components if they want to be used independently elsewhere

{currentView === 'milestones' && <><MTOTableActions /><MTOTable />< />}

patrickseguraoddball

Getting some mapping errors for dupe keys on subcategories.

Also I think we need to add refetch queries to each of the mutations to update the table after a custom is added

refetchQueries: [
      {
        query: GetModelToOperationsMatrixDocument,
        variables: {
          id: modelID
        }
      }
    ]

patrickseguraoddball · 2024-12-09T14:48:01Z

I cant seem to replicate the select issue, may have been wonkiness with my unclean db. Adding the refetch queries can be done at a later time if needed. Let me know if you want to track the refetchqueries change to address later and I can approve

garyjzhao · 2024-12-10T19:41:49Z

src/features/ModelPlan/ModelToOperations/Home/index.tsx

+  const { data, loading, error, refetch } = useGetModelToOperationsMatrixQuery({
    variables: {
      id: modelID
    }


the useGetModelToOperationsMatrixQuery is also used in <MTOTable /> component. So, I thought to pass down the data needed, instead of calling the gql again.

Also, this allowed me to pass refetch down to the sibling component <MTOTableActions />

garyjzhao · 2024-12-10T19:43:08Z

src/features/ModelPlan/ModelToOperations/_components/Table/index.tsx

-  const {
-    data: queryData,
-    loading,
-    error
-  } = useGetModelToOperationsMatrixQuery({
-    variables: {
-      id: modelID
-    }
-  });
-


the gql call is pushed up to the parent component and queryData is passed down as a prop. see above comment

patrickseguraoddball

LG

garyjzhao commented Dec 4, 2024

View reviewed changes

garyjzhao force-pushed the MINT-3221/table-actions branch from c9653d5 to 09ce599 Compare December 5, 2024 16:58

garyjzhao commented Dec 5, 2024

View reviewed changes

garyjzhao marked this pull request as ready for review December 5, 2024 19:43

garyjzhao requested a review from a team as a code owner December 5, 2024 19:43

garyjzhao requested review from patrickseguraoddball and removed request for a team December 5, 2024 19:43

garyjzhao force-pushed the MINT-3221/table-actions branch from 92af6b7 to d3809ef Compare December 6, 2024 17:58

patrickseguraoddball requested changes Dec 6, 2024

View reviewed changes

garyjzhao requested review from patrickseguraoddball and ClayBenson94 December 6, 2024 20:28

patrickseguraoddball requested changes Dec 9, 2024

View reviewed changes

patrickseguraoddball closed this Dec 9, 2024

patrickseguraoddball reopened this Dec 9, 2024

patrickseguraoddball self-requested a review December 9, 2024 14:48

garyjzhao added 12 commits December 10, 2024 10:14

Add TableActions component

9690922

add the milestone buttons

7d15493

Add solutions and template buttons

e3b588f

adjust copy and classnames

6cc912c

add comment and adjust the icons

f0a28cf

Add the standard categories pill

0f35f2a

add teh gap

23a6c9c

addressing the routes

28092ef

add GetMTOCommonSolutions

e6d18f4

add milestoneData and solutionData

518f8dc

add test and mocks

57c0294

add enum to mock

ed292ff

garyjzhao added 10 commits December 10, 2024 10:15

updated snaps

b8fd282

remove comments

44de617

good work

f342c29

add index.scss

7845d92

using grid and scs

84b3557

add CreateStandardCategories

7f56474

Adding create mutation to actions

67b961f

updated snaps

7de4303

remove alert and add todo comment

0650ed9

update code based on pr feedback

1b96257

garyjzhao force-pushed the MINT-3221/table-actions branch from 09afa80 to 1b96257 Compare December 10, 2024 15:16

garyjzhao added 2 commits December 10, 2024 10:20

fix new import routes for mtomodal

94585c3

moved data query to parent to allow passing down to siblings

af2c6c3

garyjzhao commented Dec 10, 2024

View reviewed changes

patrickseguraoddball approved these changes Dec 10, 2024

View reviewed changes

garyjzhao merged commit c33a12b into feature/MINT-3175_mto Dec 10, 2024
10 checks passed

garyjzhao deleted the MINT-3221/table-actions branch December 10, 2024 21:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MINT-3221] MTO Table Action Component #1552

[MINT-3221] MTO Table Action Component #1552

garyjzhao commented Dec 4, 2024 •

edited

Loading

garyjzhao Dec 4, 2024

ClayBenson94 Dec 5, 2024

ClayBenson94 commented Dec 5, 2024

garyjzhao Dec 5, 2024

garyjzhao Dec 5, 2024

patrickseguraoddball left a comment

patrickseguraoddball Dec 6, 2024

patrickseguraoddball left a comment •

edited

Loading

patrickseguraoddball Dec 6, 2024 •

edited

Loading

patrickseguraoddball left a comment

patrickseguraoddball commented Dec 9, 2024 •

edited

Loading

garyjzhao Dec 10, 2024

garyjzhao Dec 10, 2024

patrickseguraoddball left a comment

[MINT-3221] MTO Table Action Component #1552

[MINT-3221] MTO Table Action Component #1552

Conversation

garyjzhao commented Dec 4, 2024 • edited Loading

Description

How to test this change

tablet and smaller screen sizes are still WIP as of 12/4/2024: https://cmsgov.slack.com/archives/C01B9TEC65A/p1733340956122379

PR Author Checklist

PR Reviewer Guidelines

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ClayBenson94 commented Dec 5, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickseguraoddball left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickseguraoddball left a comment • edited Loading

Choose a reason for hiding this comment

patrickseguraoddball Dec 6, 2024 • edited Loading

Choose a reason for hiding this comment

patrickseguraoddball left a comment

Choose a reason for hiding this comment

patrickseguraoddball commented Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickseguraoddball left a comment

Choose a reason for hiding this comment

garyjzhao commented Dec 4, 2024 •

edited

Loading

patrickseguraoddball left a comment •

edited

Loading

patrickseguraoddball Dec 6, 2024 •

edited

Loading

patrickseguraoddball commented Dec 9, 2024 •

edited

Loading