diff --git a/moped-editor/src/views/projects/projectView/ProjectNotes.js b/moped-editor/src/views/projects/projectView/ProjectNotes.js index 4acbc34bd0..396b8a86f8 100644 --- a/moped-editor/src/views/projects/projectView/ProjectNotes.js +++ b/moped-editor/src/views/projects/projectView/ProjectNotes.js @@ -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" /> ))} diff --git a/moped-editor/src/views/projects/projectView/ProjectNotes/NoteTypeButton.js b/moped-editor/src/views/projects/projectView/ProjectNotes/NoteTypeButton.js index 097fe10813..7d0d607e85 100644 --- a/moped-editor/src/views/projects/projectView/ProjectNotes/NoteTypeButton.js +++ b/moped-editor/src/views/projects/projectView/ProjectNotes/NoteTypeButton.js @@ -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 */ @@ -15,15 +17,26 @@ const NoteTypeButton = ({ setFilterNoteType, filterNoteType, label, -}) => ( - -); + 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 + + + + + + ); +}; export default NoteTypeButton;