Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MINT-3242] Linking Action Menu Add Milestone & Add Sub-Category to Respective Modals && pass down prepopulated categories #1566

Open
wants to merge 24 commits into
base: feature/MINT-3175_mto
Choose a base branch
from

Conversation

garyjzhao
Copy link
Contributor

@garyjzhao garyjzhao commented Dec 12, 2024

MINT-3242

Description

  • Add fireAfterOpening prop to Modal component to allow custom function to fire upon modal opening
  • Created MTOModalContext to allow for easier state management and prevent prop drilling for MTOTable and MTOTableActions
  • Updated defaultValues for AddCustomCategoryForm and AddCustomMilestoneForm to take in prepopulated categoryID and optional subcategoryID

How to test this change

  1. Navigate to a pre-populated MTO Table
  2. Play with the "..." action menu
  3. Verify things are functioning as expected
    a. Add model milestone on parent category to pop up milestone modal with primary category pre-populated
    b. Add sub-category on parent category to pop up custom category modal and with things pre-populated
    c. Add model milestone on subcategory to pop up milestone modal with primary category AND SUBCATEGORY pre-populated

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 garyjzhao changed the base branch from main to feature/MINT-3175_mto December 12, 2024 21:07
@garyjzhao garyjzhao marked this pull request as ready for review December 12, 2024 21:14
@garyjzhao garyjzhao requested a review from a team as a code owner December 12, 2024 21:14
@garyjzhao garyjzhao requested review from patrickseguraoddball and removed request for a team December 12, 2024 21:14
Comment on lines -210 to +228
{/* If column is the Actions column, render <ActionMenu /> with custom buttons that updates data state for reordering */}
{column.accessor === 'actions' ? (
<ActionMenu
rowType={rowType}
MoveUp={
<Button
type="button"
disabled={
currentIndex === 0 ||
currentIndex === (rowLength || 0) - 1
}
onClick={e => {
e.stopPropagation();
setRearrangedData(
moveRow(
setIndexes,
moveRowDirection(-1),
rowType,
sortedData,
updateOrder,
setError
)
);
}}
onKeyPress={e => {
e.stopPropagation();
}}
className="share-export-modal__menu-item padding-y-1 padding-x-2 action-menu-item"
unstyled
>
{t(
`modelToOperationsMisc:table.menu.${rowType === 'category' ? 'moveCategoryUp' : 'moveSubCategoryUp'}`
)}
</Button>
}
MoveDown={
<Button
type="button"
disabled={
currentIndex === (rowLength || 0) - 1 ||
currentIndex === (rowLength || 0) - 2
}
onClick={e => {
e.stopPropagation();
setRearrangedData(
moveRow(
setIndexes,
moveRowDirection(1),
rowType,
sortedData,
updateOrder,
setError
)
);
}}
onKeyPress={e => {
e.stopPropagation();
}}
className="share-export-modal__menu-item padding-y-1 padding-x-2 action-menu-item"
unstyled
>
{t(
`modelToOperationsMisc:table.menu.${rowType === 'category' ? 'moveCategoryDown' : 'moveSubCategoryDown'}`
)}
</Button>
}
/>
) : (
<>
{RenderCell ? (
<RenderCell row={row} rowType={rowType} expanded={expanded} />
) : (
row[column.accessor as keyof MilestoneType]
)}
</>
)}
</td>
);
})}
</>
);
const RenderCells = ({
row,
rowType,
expanded,
currentIndex,
rowLength,
categoryID,
subCategoryID,
categoryIndex
}: {
row: RowType;
rowType: MTORowType;
expanded: boolean;
currentIndex: number;
rowLength: number;
categoryID?: string;
subCategoryID?: string;
categoryIndex?: number;
}) => {
Copy link
Contributor Author

@garyjzhao garyjzhao Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Converted renderCells function to a functional component to aid in no longer needing to remember the function parameter order when calling the function and not needing to write out undefined for optional parameters.

i.e.

{renderCells(row, rowType, false, 0, 0, undefined, undefined, undefined)}

vs

<RenderCells 
  row={row}
  rowType={rowType}
  expanded={false}
  currentIndex={0}
  rowLength={0}
// categoryID, subCategoryID, categoryIndex omitted
/>

It was also easier for me to keep things in my head when developing 😂

Copy link
Contributor

@patrickseguraoddball patrickseguraoddball left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to approve once we talk through some of this and maybe add some comments for clarity.

Comment on lines +40 to +43

if (fireAfterOpening) {
fireAfterOpening();
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little unsure of the fireAfterOpening is created, would just calling the function needed on close work? Normally we run the resets when modals close, rather than after opening. Maybe we can sync to talk through ti

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants