Fix add missing avatars (#3351)

2023-03-17 12:12:21 +01:00 · 2023-03-17 12:12:21 +01:00 · 368678c7c4
commit 368678c7c4
parent d95a800b4b
16 changed files with 96 additions and 217 deletions
--- 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"
--- 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)}
--- 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
--- 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}
        />
      )}
--- a/src/components/UserAvatar/UserAvatar.tsx
+++ 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} />
+  );
--- a/src/components/UserAvatar/index.ts
+++ b/src/components/UserAvatar/index.ts
@ -0,0 +1 @@
+export * from "./UserAvatar";
--- a/src/components/UserChip/UserChip.tsx
+++ b/src/components/UserChip/UserChip.tsx
@ -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;
--- a/src/components/UserChip/index.ts
+++ b/src/components/UserChip/index.ts
@ -1,2 +0,0 @@
-export * from "./UserChip";
-export { default } from "./UserChip";
--- 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
    }
  }
--- 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
    }
  }
--- 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
        }
      }
--- 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
  }
 }
--- 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>
                  );
--- 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 />}
--- 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>
--- 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
          }
        }