[web] Introduce barebones EditThreadAvatarMenu

Summary:
Similar to `EditUserAvatarMenu`, but for threads.

This diff only introduces the "Reset to default" functionality. Next diff will add image avatar support. The diff after that will add emoji support.

Test Plan:
1. Set thread avatar
2. Press "Reset to default" button and observe that thread avatar is unset in DB

Reviewers: ashoat, ginsu

Reviewed By: ginsu

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8840

web/avatars/edit-thread-avatar-menu.react.js

@@ -0,0 +1,57 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './edit-avatar-menu.css';
+import MenuItem from '../components/menu-item.react.js';
+import Menu from '../components/menu.react.js';
+
+const editIcon = (
+  <div className={css.editAvatarBadge}>
+    <SWMansionIcon icon="edit-2" size={20} />
+  </div>
+);
+
+type Props = {
+  +threadInfo: RawThreadInfo | ThreadInfo,
+};
+function EditThreadAvatarMenu(props: Props): React.Node {
+  const { threadInfo } = props;
+
+  const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
+  invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
+
+  const { baseSetThreadAvatar } = editThreadAvatarContext;
+
+  const removeThreadAvatar = React.useCallback(
+    () => baseSetThreadAvatar(threadInfo.id, { type: 'remove' }),
+    [baseSetThreadAvatar, threadInfo.id],
+  );
+
+  const removeMenuItem = React.useMemo(
+    () => (
+      <MenuItem
+        key="remove"
+        text="Reset to default"
+        icon="trash-2"
+        onClick={removeThreadAvatar}
+      />
+    ),
+    [removeThreadAvatar],
+  );
+
+  const menuItems = React.useMemo(() => [removeMenuItem], [removeMenuItem]);
+
+  return (
+    <div>
+      <Menu icon={editIcon}>{menuItems}</Menu>
+    </div>
+  );
+}
+
+export default EditThreadAvatarMenu;

web/avatars/edit-thread-avatar.react.js

@@ -4,8 +4,11 @@ import invariant from 'invariant';
 import * as React from 'react';
 
 import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import { threadHasPermission } from 'lib/shared/thread-utils.js';
+import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
+import EditThreadAvatarMenu from './edit-thread-avatar-menu.react.js';
 import css from './edit-thread-avatar.css';
 import ThreadAvatar from './thread-avatar.react.js';
 
@@ -20,6 +23,15 @@ function EditThreadAvatar(props: Props): React.Node {
   const { threadAvatarSaveInProgress } = editThreadAvatarContext;
 
   const { threadInfo } = props;
+  const canEditThreadAvatar = threadHasPermission(
+    threadInfo,
+    threadPermissions.EDIT_THREAD_AVATAR,
+  );
+
+  let editThreadAvatarMenu;
+  if (canEditThreadAvatar && !threadAvatarSaveInProgress) {
+    editThreadAvatarMenu = <EditThreadAvatarMenu threadInfo={threadInfo} />;
+  }
 
   return (
     <div className={css.editThreadAvatarContainer}>
@@ -28,6 +40,7 @@ function EditThreadAvatar(props: Props): React.Node {
         size="profile"
         showSpinner={threadAvatarSaveInProgress}
       />
+      {editThreadAvatarMenu}
     </div>
   );
 }

web/avatars/edit-user-avatar-menu.react.js

@@ -10,7 +10,7 @@ import { useENSAvatar } from 'lib/hooks/ens-cache.js';
 import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js';
 
 import { useUploadAvatarMedia } from './avatar-hooks.react.js';
-import css from './edit-user-avatar-menu.css';
+import css from './edit-avatar-menu.css';
 import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
 import CommIcon from '../CommIcon.react.js';
 import MenuItem from '../components/menu-item.react.js';

web/components/menu.react.js

@@ -116,6 +116,7 @@ function Menu(props: MenuProps): React.Node {
       ref={buttonRef}
       className={css.menuButton}
       onClick={onClickMenuCallback}
+      type="button"
     >
       {icon}
     </button>