diff --git a/src/components/StyledFormComponents/StyledAsterisk.tsx b/src/components/StyledFormComponents/StyledAsterisk.tsx index 491575b6f..9a4c6fcbc 100644 --- a/src/components/StyledFormComponents/StyledAsterisk.tsx +++ b/src/components/StyledFormComponents/StyledAsterisk.tsx @@ -1,6 +1,7 @@ +import { forwardRef } from "react"; import { styled } from "@mui/material"; -const Asterisk = styled("span")(() => ({ +const StyledAsterisk = styled("span")(() => ({ color: "#C93F08", marginLeft: "2px", fontWeight: 700, @@ -9,6 +10,12 @@ const Asterisk = styled("span")(() => ({ lineHeight: "18.8px", })); -const StyledAsterisk = () => *; +const Asterisk = forwardRef>( + (props, ref) => ( + + * + + ) +); -export default StyledAsterisk; +export default Asterisk; diff --git a/src/content/users/ProfileView.tsx b/src/content/users/ProfileView.tsx index 7dafafb2d..9fd2ea26d 100644 --- a/src/content/users/ProfileView.tsx +++ b/src/content/users/ProfileView.tsx @@ -30,13 +30,14 @@ import { UpdateMyUserInput, UpdateMyUserResp, } from "../../graphql"; -import { formatFullStudyName, formatIDP, formatStudySelectionValue } from "../../utils"; +import { formatFullStudyName, formatIDP, formatStudySelectionValue, Logger } from "../../utils"; import { DataCommons } from "../../config/DataCommons"; import usePageTitle from "../../hooks/usePageTitle"; import { useSearchParamsContext } from "../../components/Contexts/SearchParamsContext"; import BaseSelect from "../../components/StyledFormComponents/StyledSelect"; import BaseOutlinedInput from "../../components/StyledFormComponents/StyledOutlinedInput"; import BaseAutocomplete from "../../components/StyledFormComponents/StyledAutocomplete"; +import BaseAsterisk from "../../components/StyledFormComponents/StyledAsterisk"; import useProfileFields, { VisibleFieldState } from "../../hooks/useProfileFields"; import AccessRequest from "../../components/AccessRequest"; import PermissionPanel from "../../components/PermissionPanel"; @@ -113,8 +114,8 @@ const StyledField = styled("div", { shouldForwardProp: (p) => p !== "visible" }) const StyledLabel = styled("span")({ color: "#356AAD", fontWeight: "700", - marginRight: "40px", - minWidth: "127px", + marginRight: "30px", + minWidth: "137px", }); const BaseInputStyling = { @@ -151,6 +152,12 @@ const StyledTag = styled("div")({ paddingLeft: "12px", }); +const StyledAsterisk = styled(BaseAsterisk, { shouldForwardProp: (p) => p !== "visible" })<{ + visible?: boolean; +}>(({ visible = true }) => ({ + display: visible ? undefined : "none", +})); + /** * User Profile View Component * @@ -251,7 +258,8 @@ const ProfileView: FC = ({ _id, viewType }: Props) => { setSaving(false); if (errors || !d?.updateMyUser) { - enqueueSnackbar(errors || "Unable to save profile changes", { variant: "error" }); + Logger.error("ProfileView: Error from API", errors); + enqueueSnackbar("Unable to save profile changes", { variant: "error" }); return; } @@ -272,7 +280,8 @@ const ProfileView: FC = ({ _id, viewType }: Props) => { setSaving(false); if (errors || !d?.editUser) { - enqueueSnackbar(errors || "Unable to save user profile changes", { variant: "error" }); + Logger.error("ProfileView: Error from API", errors); + enqueueSnackbar("Unable to save user profile changes", { variant: "error" }); return; } @@ -395,7 +404,6 @@ const ProfileView: FC = ({ _id, viewType }: Props) => { profile icon - = ({ _id, viewType }: Props) => { {user.email} - First name + + First name + + {VisibleFieldState.includes(fieldset.firstName) ? ( = ({ _id, viewType }: Props) => { )} - Last name + + Last name + + {VisibleFieldState.includes(fieldset.lastName) ? ( = ({ _id, viewType }: Props) => { )} - Role + + Role + + {VisibleFieldState.includes(fieldset.role) ? ( = ({ _id, viewType }: Props) => { )} - Studies + + Studies + + {VisibleFieldState.includes(fieldset.studies) ? ( = ({ _id, viewType }: Props) => { 0 ? undefined : "Select studies"} - inputProps={{ "aria-labelledby": "userStudies", ...inputProps }} + inputProps={{ + "aria-labelledby": "userStudies", + required: studiesField.length === 0, + ...inputProps, + }} onBlur={sortStudyOptions} /> )} @@ -526,7 +550,10 @@ const ProfileView: FC = ({ _id, viewType }: Props) => { ) : null} - Account Status + + Account Status + + {VisibleFieldState.includes(fieldset.userStatus) ? ( = ({ _id, viewType }: Props) => { )} - Data Commons + + Data Commons + + {VisibleFieldState.includes(fieldset.dataCommons) ? ( = ({ _id, viewType }: Props) => { disabled={fieldset.dataCommons === "DISABLED"} MenuProps={{ disablePortal: true }} inputProps={{ "aria-labelledby": "userDataCommons" }} + required multiple > {DataCommons.map((dc) => (