Skip to content

Disable eCAPRIS Notes Filter #1620

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.

Sign up for GitHub

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

Merged
roseeichelmann merged 5 commits into from
Jul 2, 2025
Merged

Disable eCAPRIS Notes Filter #1620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
78df2da
pass disable ecapris filter prop
roseeichelmann Jun 30, 2025
5c0567e
disable when there is no syncing, render tooltip
roseeichelmann Jun 30, 2025
6fa3e6b
update var name
roseeichelmann Jul 1, 2025
f0004df
add to docstring
roseeichelmann Jul 1, 2025
30c8a34
Add comment explaining tooltip span
roseeichelmann Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions moped-editor/src/views/projects/projectView/ProjectNotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,11 @@ const ProjectNotes = ({
noteTypeId={type.id}
label={type.name}
key={type.slug}
isDisabled={
type.slug === "ecapris_status_update" &&
(!hasECaprisId || !shouldSyncFromECAPRIS)
}
disabledMessage="Enable eCAPRIS syncing to filter to eCAPRIS statuses"
/>
))}
</Grid>
Expand Down
37 changes: 25 additions & 12 deletions moped-editor/src/views/projects/projectView/ProjectNotes/NoteTypeButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { Button } from "@mui/material";
import { Button, Tooltip } from "@mui/material";

/**
* Defines the NoteTypeButton with a toggle style-change behavior.
* @param {Object} props
* @param {number} noteTypeId - id of note type for button
* @param {number} noteTypeId - id of note type for buttClickon
* @param {function} setFilterNoteType - function to set the filter note type state
* @param {string} filterNoteType - id for toggled note type
* @param {string} label - button label
* @param {boolean} isDisabled - should the button be disabled
* @param {string} disabledMessage - message to render in tooltip if button is disabled
* @return {JSX.Element}
* @constructor
*/
Expand All @@ -15,15 +17,26 @@ const NoteTypeButton = ({
setFilterNoteType,
filterNoteType,
label,
}) => (
<Button
color="primary"
sx={{ margin: 2 }}
variant={filterNoteType === noteTypeId ? "contained" : "outlined"}
onClick={() => setFilterNoteType(noteTypeId)}
>
{label}
</Button>
);
isDisabled,
disabledMessage,
}) => {
return (
// Disabled buttons dont trigger user interactions so the tooltip
// wont show unless button is wrapped in a span https://v5.mui.com/material-ui/react-tooltip/#disabled-elements
<Tooltip title={isDisabled ? disabledMessage : ""}>
<span>

@mddilley mddilley Jul 1, 2025 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This was a TIL for me that tooltips won't show on disabled buttons since user interactions don't trigger on them. Could you add a comment or link to the docs here to help us avoid an accidental regression / deletion of that important span? 🙏

@chiaberry chiaberry Jul 2, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

+1, I could definitely see future me deleting this span that is silently doing so much work here

@roseeichelmann roseeichelmann Jul 2, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

ahh thanks for reminding me to comment about this! i meant to :))

<Button
color="primary"
sx={{ margin: 2 }}
variant={filterNoteType === noteTypeId ? "contained" : "outlined"}
onClick={() => setFilterNoteType(noteTypeId)}
disabled={isDisabled}
>
{label}
</Button>
</span>
</Tooltip>
);
};

export default NoteTypeButton;