From 368678c7c43fbae47a8cd454b89ffa8ef6f5aa5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Fri, 17 Mar 2023 12:12:21 +0100
Subject: [PATCH] Fix add missing avatars (#3351)

---
 locale/defaultMessages.json                   |  8 --
 src/components/Sidebar/user/Info.tsx          |  9 +--
 src/components/Timeline/Timeline.tsx          |  9 ++-
 src/components/Timeline/TimelineNote.tsx      |  8 +-
 src/components/UserAvatar/UserAvatar.tsx      | 19 +++++
 src/components/UserAvatar/index.ts            |  1 +
 src/components/UserChip/UserChip.tsx          | 66 -----------------
 src/components/UserChip/index.ts              |  2 -
 src/fragments/permissionGroups.ts             |  2 +-
 src/fragments/staff.ts                        |  4 +-
 src/graphql/hooks.generated.ts                |  8 +-
 src/graphql/hooks.transactions.generated.ts   |  6 +-
 .../AssignMembersDialog.tsx                   | 63 ++++++----------
 .../PermissionGroupMemberList.tsx             | 73 ++++++-------------
 src/staff/components/StaffList/StaffList.tsx  | 33 +++------
 src/staff/queries.ts                          |  2 +-
 16 files changed, 96 insertions(+), 217 deletions(-)
 create mode 100644 src/components/UserAvatar/UserAvatar.tsx
 create mode 100644 src/components/UserAvatar/index.ts
 delete mode 100644 src/components/UserChip/UserChip.tsx
 delete mode 100644 src/components/UserChip/index.ts

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 0583f4578..9e86d5f47 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -698,10 +698,6 @@
     "context": "payment status",
     "string": "Fully paid"
   },
-  "2r4cTE": {
-    "context": "button",
-    "string": "Enable Dark Mode"
-  },
   "2rJcFa": {
     "context": "delete app",
     "string": "Deleting this app, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace."
@@ -4842,10 +4838,6 @@
     "context": "title",
     "string": "Reserved stock"
   },
-  "X8+Lpa": {
-    "context": "button",
-    "string": "Account Settings"
-  },
   "X8qjg3": {
     "context": "inactive",
     "string": "Inactive"
diff --git a/src/components/Sidebar/user/Info.tsx b/src/components/Sidebar/user/Info.tsx
index 986b87b93..bcaac325b 100644
--- a/src/components/Sidebar/user/Info.tsx
+++ b/src/components/Sidebar/user/Info.tsx
@@ -1,6 +1,7 @@
 import { useUser } from "@dashboard/auth";
+import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { getUserInitials, getUserName } from "@dashboard/misc";
-import { Avatar, Box, Text } from "@saleor/macaw-ui/next";
+import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 import { UserControls } from "./Controls";
@@ -21,11 +22,7 @@ export const UserInfo = () => {
       justifyContent="space-between"
     >
       <Box display="flex" gap={6} alignItems="center">
-        {user?.avatar?.url ? (
-          <Avatar.User scheme="decorative3" src={user.avatar.url} />
-        ) : (
-          <Avatar.User initials={getUserInitials(user)} scheme="decorative3" />
-        )}
+        <UserAvatar initials={getUserInitials(user)} url={user?.avatar?.url} />
         <Box __width={128} className="ellipsis">
           <Text variant="bodyStrong" size="small">
             {getUserName(user, true)}
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index ef56e15e6..ab838a865 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -3,10 +3,12 @@ import { Button } from "@dashboard/components/Button";
 import { getUserInitials } from "@dashboard/misc";
 import { CardContent, TextField } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Avatar, vars } from "@saleor/macaw-ui/next";
+import { vars } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { UserAvatar } from "../UserAvatar";
+
 const useStyles = makeStyles(
   theme => ({
     avatar: {
@@ -91,10 +93,9 @@ export const TimelineAddNote: React.FC<TimelineAddNoteProps> = props => {
   return (
     <div className={classes.noteRoot}>
       <CardContent className={classes.noteTitle}>
-        <Avatar.User
+        <UserAvatar
+          url={user?.avatar?.url}
           initials={getUserInitials(user)}
-          scheme="decorative2"
-          src={user?.avatar?.url}
           className={classes.avatar}
         />
         <TextField
diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index 356c1af54..7cca8f007 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/src/components/Timeline/TimelineNote.tsx
@@ -2,10 +2,11 @@ import { useUser } from "@dashboard/auth";
 import { getUserInitials } from "@dashboard/misc";
 import { Card, CardContent, Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Avatar, vars } from "@saleor/macaw-ui/next";
+import { vars } from "@saleor/macaw-ui/next";
 import React from "react";
 
 import { DateTime } from "../Date";
+import { UserAvatar } from "../UserAvatar";
 
 const useStyles = makeStyles(
   theme => ({
@@ -87,10 +88,9 @@ export const TimelineNote: React.FC<TimelineNoteProps> = props => {
   return (
     <div className={classes.root}>
       {user && (
-        <Avatar.User
+        <UserAvatar
           initials={getUserInitials(currentUser)}
-          scheme="decorative2"
-          src={currentUser?.avatar?.url}
+          url={currentUser?.avatar?.url}
           className={classes.avatar}
         />
       )}
diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
new file mode 100644
index 000000000..1e3b9c548
--- /dev/null
+++ b/src/components/UserAvatar/UserAvatar.tsx
@@ -0,0 +1,19 @@
+import { Avatar } from "@saleor/macaw-ui/next";
+import React from "react";
+
+interface UserAvatarProps {
+  url?: string;
+  initials?: string;
+  className?: string;
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({
+  url,
+  initials,
+  ...rest
+}) =>
+  url ? (
+    <Avatar.User scheme="decorative3" src={url} {...rest} />
+  ) : (
+    <Avatar.User scheme="decorative3" initials={initials} {...rest} />
+  );
diff --git a/src/components/UserAvatar/index.ts b/src/components/UserAvatar/index.ts
new file mode 100644
index 000000000..80c818864
--- /dev/null
+++ b/src/components/UserAvatar/index.ts
@@ -0,0 +1 @@
+export * from "./UserAvatar";
diff --git a/src/components/UserChip/UserChip.tsx b/src/components/UserChip/UserChip.tsx
deleted file mode 100644
index c60303668..000000000
--- a/src/components/UserChip/UserChip.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { UserFragment } from "@dashboard/graphql";
-import { getUserInitials, getUserName } from "@dashboard/misc";
-import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
-import { FormControlLabel, Switch } from "@material-ui/core";
-import { UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
-
-export interface UserChipProps {
-  isDarkThemeEnabled: boolean;
-  user: UserFragment;
-  onLogout: () => void;
-  onThemeToggle: () => void;
-}
-
-const UserChip: React.FC<UserChipProps> = ({
-  isDarkThemeEnabled,
-  user,
-  onLogout,
-  onThemeToggle,
-}) => {
-  const intl = useIntl();
-
-  return (
-    <UserChipMenu
-      initials={getUserInitials(user)}
-      name={getUserName(user, true)}
-      avatar={user?.avatar?.url}
-    >
-      <UserChipMenuItem data-test-id="account-settings-button">
-        <Link to={staffMemberDetailsUrl(user?.id)}>
-          <FormattedMessage
-            id="X8+Lpa"
-            defaultMessage="Account Settings"
-            description="button"
-          />
-        </Link>
-      </UserChipMenuItem>
-      <UserChipMenuItem onClick={onLogout} data-test-id="log-out-button">
-        <FormattedMessage
-          id="qLbse5"
-          defaultMessage="Log out"
-          description="button"
-        />
-      </UserChipMenuItem>
-      <UserChipMenuItem
-        leaveOpen
-        data-test-id="theme-switch"
-        data-test-is-dark={isDarkThemeEnabled}
-      >
-        <FormControlLabel
-          control={<Switch checked={isDarkThemeEnabled} disableRipple />}
-          label={intl.formatMessage({
-            id: "2r4cTE",
-            defaultMessage: "Enable Dark Mode",
-            description: "button",
-          })}
-          onChange={onThemeToggle}
-        />
-      </UserChipMenuItem>
-    </UserChipMenu>
-  );
-};
-UserChip.displayName = "UserChip";
-export default UserChip;
diff --git a/src/components/UserChip/index.ts b/src/components/UserChip/index.ts
deleted file mode 100644
index 125a4544b..000000000
--- a/src/components/UserChip/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./UserChip";
-export { default } from "./UserChip";
diff --git a/src/fragments/permissionGroups.ts b/src/fragments/permissionGroups.ts
index 1eac0b406..932ce2678 100644
--- a/src/fragments/permissionGroups.ts
+++ b/src/fragments/permissionGroups.ts
@@ -23,7 +23,7 @@ export const permissionFragment = gql`
 export const permissionGroupMember = gql`
   fragment PermissionGroupMember on User {
     ...StaffMember
-    avatar(size: 48) {
+    avatar(size: 128) {
       url
     }
   }
diff --git a/src/fragments/staff.ts b/src/fragments/staff.ts
index 05003e427..7c45ddd61 100644
--- a/src/fragments/staff.ts
+++ b/src/fragments/staff.ts
@@ -21,7 +21,7 @@ export const staffMemberDetailsFragment = gql`
       code
       name
     }
-    avatar(size: 120) {
+    avatar(size: 512) {
       url
     }
   }
@@ -30,7 +30,7 @@ export const staffMemberDetailsFragment = gql`
 export const staffMemberAvatarFragment = gql`
   fragment StaffMemberAvatar on User {
     ...StaffMember
-    avatar(size: 120) {
+    avatar(size: 512) {
       url
     }
   }
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 8ba99bfbb..d0a86b899 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -1834,7 +1834,7 @@ export const StaffMemberFragmentDoc = gql`
 export const PermissionGroupMemberFragmentDoc = gql`
     fragment PermissionGroupMember on User {
   ...StaffMember
-  avatar(size: 48) {
+  avatar(size: 128) {
     url
   }
 }
@@ -2461,7 +2461,7 @@ export const StaffMemberDetailsFragmentDoc = gql`
     code
     name
   }
-  avatar(size: 120) {
+  avatar(size: 512) {
     url
   }
 }
@@ -2469,7 +2469,7 @@ export const StaffMemberDetailsFragmentDoc = gql`
 export const StaffMemberAvatarFragmentDoc = gql`
     fragment StaffMemberAvatar on User {
   ...StaffMember
-  avatar(size: 120) {
+  avatar(size: 512) {
     url
   }
 }
@@ -15088,7 +15088,7 @@ export const StaffListDocument = gql`
       cursor
       node {
         ...StaffMember
-        avatar(size: 48) {
+        avatar(size: 128) {
           url
         }
       }
diff --git a/src/graphql/hooks.transactions.generated.ts b/src/graphql/hooks.transactions.generated.ts
index 9308806be..c0fc1ecc7 100644
--- a/src/graphql/hooks.transactions.generated.ts
+++ b/src/graphql/hooks.transactions.generated.ts
@@ -1331,7 +1331,7 @@ export const StaffMemberFragmentDoc = gql`
 export const StaffMemberAvatarFragmentDoc = gql`
     fragment StaffMemberAvatar on User {
   ...StaffMember
-  avatar(size: 120) {
+  avatar(size: 512) {
     url
   }
 }
@@ -2243,7 +2243,7 @@ export const PermissionFragmentDoc = gql`
 export const PermissionGroupMemberFragmentDoc = gql`
     fragment PermissionGroupMember on User {
   ...StaffMember
-  avatar(size: 48) {
+  avatar(size: 128) {
     url
   }
 }
@@ -2870,7 +2870,7 @@ export const StaffMemberDetailsFragmentDoc = gql`
     code
     name
   }
-  avatar(size: 120) {
+  avatar(size: 512) {
     url
   }
 }
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index f116c1a82..f53250496 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -4,6 +4,7 @@ import ConfirmButton from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableRowLink from "@dashboard/components/TableRowLink";
+import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { SearchStaffMembersQuery } from "@dashboard/graphql";
 import useElementScroll, {
   isScrolledToBottom,
@@ -31,9 +32,9 @@ import {
   TableBody,
   TableCell,
   TextField,
-  Typography,
 } from "@material-ui/core";
 import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { Box, Text } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
@@ -43,16 +44,6 @@ import { messages } from "./messages";
 
 const useStyles = makeStyles(
   theme => ({
-    avatar: {
-      alignItems: "center",
-      borderRadius: "100%",
-      display: "grid",
-      float: "left",
-      height: 32,
-      justifyContent: "center",
-      overflow: "hidden",
-      width: 32,
-    },
     avatarCell: {
       padding: 0,
       width: 32,
@@ -113,9 +104,6 @@ const useStyles = makeStyles(
     table: {
       marginBottom: theme.spacing(3),
     },
-    statusText: {
-      color: "#9E9D9D",
-    },
     wideCell: {
       width: "80%",
     },
@@ -258,37 +246,30 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
                         />
                       </TableCell>
                       <TableCell className={classes.avatarCell}>
-                        <div className={classes.avatar}>
-                          {!!member?.avatar?.url ? (
-                            <img
-                              className={classes.avatarImage}
-                              src={member.avatar.url}
-                            />
-                          ) : (
-                            <div className={classes.avatarDefault}>
-                              <Typography>{getUserInitials(member)}</Typography>
-                            </div>
-                          )}
-                        </div>
+                        <UserAvatar
+                          url={member?.avatar?.url}
+                          initials={getUserInitials(member)}
+                        />
                       </TableCell>
                       <TableCell className={classes.colName}>
-                        <Typography>
-                          {getUserName(member) || <Skeleton />}
-                        </Typography>
-                        <Typography
-                          variant={"caption"}
-                          className={classes.statusText}
+                        <Box
+                          display="flex"
+                          flexDirection="column"
+                          justifyContent="center"
                         >
-                          {!!member ? (
-                            member.isActive ? (
-                              intl.formatMessage(messages.staffActive)
+                          <Text>{getUserName(member) || <Skeleton />}</Text>
+                          <Text variant="caption" color="textNeutralSubdued">
+                            {!!member ? (
+                              member.isActive ? (
+                                intl.formatMessage(messages.staffActive)
+                              ) : (
+                                intl.formatMessage(messages.staffInactive)
+                              )
                             ) : (
-                              intl.formatMessage(messages.staffInactive)
-                            )
-                          ) : (
-                            <Skeleton />
-                          )}
-                        </Typography>
+                              <Skeleton />
+                            )}
+                          </Text>
+                        </Box>
                       </TableCell>
                     </TableRowLink>
                   );
diff --git a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
index c776136c2..b9adf211c 100644
--- a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
+++ b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
@@ -6,7 +6,9 @@ import Skeleton from "@dashboard/components/Skeleton";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
 import TableHead from "@dashboard/components/TableHead";
 import TableRowLink from "@dashboard/components/TableRowLink";
+import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { PermissionGroupMemberFragment } from "@dashboard/graphql";
+import { commonStatusMessages } from "@dashboard/intl";
 import {
   getUserInitials,
   getUserName,
@@ -25,6 +27,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { Box, Text, vars } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -38,20 +41,11 @@ const useStyles = makeStyles(
       colEmail: {
         width: 300,
       },
-      colName: {
-        width: "auto",
-      },
     },
-    avatar: {
+    colName: {
+      display: "flex",
       alignItems: "center",
-      borderRadius: "100%",
-      display: "grid",
-      float: "left",
-      height: 47,
-      justifyContent: "center",
-      marginRight: theme.spacing(1),
-      overflow: "hidden",
-      width: 47,
+      gap: vars.space[5],
     },
     avatarDefault: {
       "& div": {
@@ -68,15 +62,11 @@ const useStyles = makeStyles(
       width: "100%",
     },
     colActions: {
-      paddingRight: theme.spacing(),
       textAlign: "right",
     },
     helperText: {
       textAlign: "center",
     },
-    statusText: {
-      color: "#9E9D9D",
-    },
     tableRow: {},
   }),
   { name: "PermissionGroup" },
@@ -218,41 +208,22 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
                       />
                     </TableCell>
                     <TableCell className={classes.colName}>
-                      <div className={classes.avatar}>
-                        {user?.avatar?.url ? (
-                          <img
-                            className={classes.avatarImage}
-                            src={user?.avatar?.url}
-                          />
-                        ) : (
-                          <div className={classes.avatarDefault}>
-                            <Typography>{getUserInitials(user)}</Typography>
-                          </div>
-                        )}
-                      </div>
-                      <Typography>
-                        {getUserName(user) || <Skeleton />}
-                      </Typography>
-                      <Typography
-                        variant={"caption"}
-                        className={classes.statusText}
-                      >
-                        {!user ? (
-                          <Skeleton />
-                        ) : user.isActive ? (
-                          intl.formatMessage({
-                            id: "9Zlogd",
-                            defaultMessage: "Active",
-                            description: "staff member status",
-                          })
-                        ) : (
-                          intl.formatMessage({
-                            id: "7WzUxn",
-                            defaultMessage: "Inactive",
-                            description: "staff member status",
-                          })
-                        )}
-                      </Typography>
+                      <UserAvatar
+                        initials={getUserInitials(user)}
+                        url={user?.avatar?.url}
+                      />
+                      <Box display="flex" flexDirection="column">
+                        <Text>{getUserName(user) || <Skeleton />}</Text>
+                        <Text variant="caption" color="textNeutralSubdued">
+                          {!user ? (
+                            <Skeleton />
+                          ) : user.isActive ? (
+                            intl.formatMessage(commonStatusMessages.active)
+                          ) : (
+                            intl.formatMessage(commonStatusMessages.notActive)
+                          )}
+                        </Text>
+                      </Box>
                     </TableCell>
                     <TableCell className={classes.colEmail}>
                       {user?.email || <Skeleton />}
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index 2d2af040d..8449ef695 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -3,7 +3,9 @@ import Skeleton from "@dashboard/components/Skeleton";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
+import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { StaffListQuery } from "@dashboard/graphql";
+import { commonStatusMessages } from "@dashboard/intl";
 import {
   getUserInitials,
   getUserName,
@@ -22,7 +24,7 @@ import {
   TableHead,
 } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Avatar, Box, Text } from "@saleor/macaw-ui/next";
+import { Box, Text } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -122,19 +124,10 @@ const StaffList: React.FC<StaffListProps> = props => {
             >
               <TableCell>
                 <Box display="flex" alignItems="center" gap={5}>
-                  {staffMember?.avatar?.url ? (
-                    <Avatar.User
-                      scheme="decorative3"
-                      src={staffMember.avatar.url}
-                      size="large"
-                    />
-                  ) : (
-                    <Avatar.User
-                      initials={getUserInitials(staffMember)}
-                      scheme="decorative3"
-                      size="large"
-                    />
-                  )}
+                  <UserAvatar
+                    url={staffMember?.avatar?.url}
+                    initials={getUserInitials(staffMember)}
+                  />
                   <Box display="flex" flexDirection="column">
                     <Text>{getUserName(staffMember) || <Skeleton />}</Text>
                     <Text
@@ -143,16 +136,8 @@ const StaffList: React.FC<StaffListProps> = props => {
                       color="textNeutralSubdued"
                     >
                       {staffMember?.isActive
-                        ? intl.formatMessage({
-                            id: "9Zlogd",
-                            defaultMessage: "Active",
-                            description: "staff member status",
-                          })
-                        : intl.formatMessage({
-                            id: "7WzUxn",
-                            defaultMessage: "Inactive",
-                            description: "staff member status",
-                          })}
+                        ? intl.formatMessage(commonStatusMessages.active)
+                        : intl.formatMessage(commonStatusMessages.notActive)}
                     </Text>
                   </Box>
                 </Box>
diff --git a/src/staff/queries.ts b/src/staff/queries.ts
index a5eb027bd..208f13a24 100644
--- a/src/staff/queries.ts
+++ b/src/staff/queries.ts
@@ -21,7 +21,7 @@ export const staffList = gql`
         cursor
         node {
           ...StaffMember
-          avatar(size: 48) {
+          avatar(size: 128) {
             url
           }
         }