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) => {
-
= ({ _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) => (