Don't render delete button if user doesn't have an avatar (#1803)

* Make "delete" button appear only when user has an avatar

* Remove unused import

* Update tests

* Refetch user on avatar update

locale/defaultMessages.json

@@ -7639,17 +7639,17 @@
     "context": "section header",
     "string": "Preferences"
   },
+  "src_dot_staff_dot_components_dot_StaffProperties_dot_1473195966": {
+    "context": "avatar change button",
+    "string": "Change"
+  },
   "src_dot_staff_dot_components_dot_StaffProperties_dot_2650522200": {
     "context": "section header",
     "string": "Staff Member Information"
   },
-  "src_dot_staff_dot_components_dot_StaffProperties_dot_2771097267": {
-    "context": "button",
-    "string": "Change photo"
-  },
-  "src_dot_staff_dot_components_dot_StaffProperties_dot_457748370": {
-    "context": "button",
-    "string": "Delete photo"
+  "src_dot_staff_dot_components_dot_StaffProperties_dot_3645414921": {
+    "context": "avatar delete button",
+    "string": "Delete"
   },
   "src_dot_staff_dot_components_dot_UserStatus_dot_userDisableInstruction": {
     "string": "If you want to disable this User please uncheck the box below."

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { getUserInitials, maybe } from "../../../misc";
+import { getUserInitials } from "../../../misc";
 import { StaffMemberDetails_user } from "../../types/StaffMemberDetails";
 
 const useStyles = makeStyles(
@@ -128,6 +128,8 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
   const clickImgInput = () => imgInputAnchor.current.click();
   const formErrors = getFormErrors(["id"], errors || []);
 
+  const hasAvatar = !!staffMember?.avatar?.url;
+
   return (
     <Card className={className}>
       <CardTitle
@@ -140,10 +142,10 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
         <div className={classes.root}>
           <div>
             <div className={classes.avatar}>
-              {maybe(() => staffMember.avatar.url) ? (
+              {hasAvatar ? (
                 <img
                   className={classes.avatarImage}
-                  src={maybe(() => staffMember.avatar.url)}
+                  src={staffMember.avatar.url}
                 />
               ) : (
                 <div className={classes.avatarDefault}>
@@ -158,19 +160,23 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                     className={classes.avatarActionText}
                   >
                     <FormattedMessage
-                      defaultMessage="Change photo"
-                      description="button"
-                    />
-                  </Typography>
-                  <Typography
-                    onClick={onImageDelete}
-                    className={classes.avatarActionText}
-                  >
-                    <FormattedMessage
-                      defaultMessage="Delete photo"
-                      description="button"
+                      defaultMessage="Change"
+                      description="avatar change button"
                     />
                   </Typography>
+                  {hasAvatar && (
+                    <>
+                      <Typography
+                        onClick={onImageDelete}
+                        className={classes.avatarActionText}
+                      >
+                        <FormattedMessage
+                          defaultMessage="Delete"
+                          description="avatar delete button"
+                        />
+                      </Typography>
+                    </>
+                  )}
                   <input
                     className={classes.fileField}
                     id="fileUpload"

src/staff/views/StaffDetails.tsx

@@ -101,7 +101,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
 
   return (
     <TypedStaffMemberDetailsQuery displayLoader variables={{ id }}>
-      {({ data, loading }) => {
+      {({ data, loading, refetch }) => {
         const staffMember = data?.user;
 
         if (staffMember === null) {
@@ -123,6 +123,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
               status: "success",
               text: intl.formatMessage(commonMessages.savedChanges)
             });
+            refetch();
           } else {
             notify({
               status: "error",
@@ -138,6 +139,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
               text: intl.formatMessage(commonMessages.savedChanges)
             });
             navigate(staffMemberDetailsUrl(id));
+            refetch();
           }
         };
 

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -240749,12 +240749,12 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
                       <div
                         class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
                       >
-                        Change photo
+                        Change
                       </div>
                       <div
                         class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
                       >
-                        Delete photo
+                        Delete
                       </div>
                       <input
                         class="StaffProperties-fileField-id"