From f7f65de322c86918314ef1e9a1bc535205f7db41 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 14:36:47 -0400
Subject: [PATCH] Improvements to the MyStories row

---
 stylesheets/components/MyStories.scss     |   4 +
 stylesheets/components/StoryListItem.scss |   9 --
 ts/components/ContextMenu.tsx             |  47 +++++--
 ts/components/MyStoriesButton.stories.tsx |   3 +-
 ts/components/MyStoriesButton.tsx         | 159 +++++++++++++---------
 ts/components/StoriesAddStoryButton.tsx   |  90 ++++++++++++
 ts/components/StoriesPane.tsx             |  60 +-------
 ts/util/lint/exceptions.json              |  21 ++-
 8 files changed, 244 insertions(+), 149 deletions(-)
 create mode 100644 ts/components/StoriesAddStoryButton.tsx

diff --git a/stylesheets/components/MyStories.scss b/stylesheets/components/MyStories.scss
index c006e8137c..fec508d577 100644
--- a/stylesheets/components/MyStories.scss
+++ b/stylesheets/components/MyStories.scss
@@ -129,3 +129,7 @@
     }
   }
 }
+
+.StoryListItem__button:hover .MyStories__avatar__add-story {
+  border-color: $color-gray-65;
+}
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index 2282d86bf0..3e35463449 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -83,15 +83,6 @@
     position: relative;
     width: 46px;
 
-    &--add {
-      &::after {
-        content: '';
-        @include color-svg('../images/icons/v2/plus-20.svg', $color-gray-15);
-        height: 18px;
-        width: 18px;
-      }
-    }
-
     &--image {
       @include button-reset;
 
diff --git a/ts/components/ContextMenu.tsx b/ts/components/ContextMenu.tsx
index 98e50c4e0e..2729435509 100644
--- a/ts/components/ContextMenu.tsx
+++ b/ts/components/ContextMenu.tsx
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { KeyboardEvent, ReactNode } from 'react';
-import type { Options } from '@popperjs/core';
+import type { Options, VirtualElement } from '@popperjs/core';
 import FocusTrap from 'focus-trap-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import { noop } from 'lodash';
@@ -23,6 +23,7 @@ export type ContextMenuOptionType<T> = {
 };
 
 export type PropsType<T> = {
+  readonly ariaLabel?: string;
   readonly children?: ReactNode;
   readonly i18n: LocalizerType;
   readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
@@ -37,7 +38,27 @@ export type PropsType<T> = {
 
 let closeCurrentOpenContextMenu: undefined | (() => unknown);
 
+// https://popper.js.org/docs/v2/virtual-elements/
+// Generating a virtual element here so that we can make the menu pop up
+// right under the mouse cursor.
+function generateVirtualElement(x: number, y: number): VirtualElement {
+  return {
+    getBoundingClientRect: () => ({
+      bottom: y,
+      height: 0,
+      left: x,
+      right: x,
+      toJSON: () => ({ x, y }),
+      top: y,
+      width: 0,
+      x,
+      y,
+    }),
+  };
+}
+
 export function ContextMenu<T>({
+  ariaLabel,
   children,
   i18n,
   menuOptions,
@@ -56,14 +77,21 @@ export function ContextMenu<T>({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
     null
   );
+
+  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));
+
   const [referenceElement, setReferenceElement] =
     useState<HTMLButtonElement | null>(null);
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top-start',
-    strategy: 'fixed',
-    ...popperOptions,
-  });
+  const { styles, attributes } = usePopper(
+    virtualElement.current,
+    popperElement,
+    {
+      placement: 'top-start',
+      strategy: 'fixed',
+      ...popperOptions,
+    }
+  );
 
   useEffect(() => {
     if (onMenuShowingChanged) {
@@ -129,9 +157,10 @@ export function ContextMenu<T>({
     }
   };
 
-  const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
+  const handleClick = (ev: React.MouseEvent) => {
     closeCurrentOpenContextMenu?.();
     closeCurrentOpenContextMenu = () => setIsMenuShowing(false);
+    virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY);
     setIsMenuShowing(true);
     ev.stopPropagation();
     ev.preventDefault();
@@ -147,7 +176,7 @@ export function ContextMenu<T>({
       )}
     >
       <button
-        aria-label={i18n('ContextMenu--button')}
+        aria-label={ariaLabel || i18n('ContextMenu--button')}
         className={classNames(
           getClassName('__button'),
           isMenuShowing ? getClassName('__button--active') : undefined
diff --git a/ts/components/MyStoriesButton.stories.tsx b/ts/components/MyStoriesButton.stories.tsx
index 2be178cf55..7ad0b52e23 100644
--- a/ts/components/MyStoriesButton.stories.tsx
+++ b/ts/components/MyStoriesButton.stories.tsx
@@ -36,6 +36,7 @@ export default {
     onAddStory: { action: true },
     onClick: { action: true },
     queueStoryDownload: { action: true },
+    showToast: { action: true },
   },
 } as Meta;
 
@@ -50,7 +51,7 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
   await userEvent.click(btnAddStory);
   await expect(args.onAddStory).toHaveBeenCalled();
 
-  const [btnStory] = canvas.getAllByLabelText('Story');
+  const [btnStory] = canvas.getAllByText('My Stories');
   await userEvent.click(btnStory);
   await expect(args.onClick).toHaveBeenCalled();
 };
diff --git a/ts/components/MyStoriesButton.tsx b/ts/components/MyStoriesButton.tsx
index 249697a639..88572be537 100644
--- a/ts/components/MyStoriesButton.tsx
+++ b/ts/components/MyStoriesButton.tsx
@@ -5,11 +5,14 @@ import React from 'react';
 import classNames from 'classnames';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { StoryImage } from './StoryImage';
 import { getAvatarColor } from '../types/Colors';
 
+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
+
 export type PropsType = {
   hasMultiple: boolean;
   i18n: LocalizerType;
@@ -18,6 +21,7 @@ export type PropsType = {
   onAddStory: () => unknown;
   onClick: () => unknown;
   queueStoryDownload: (storyId: string) => unknown;
+  showToast: ShowToastActionCreatorType;
 };
 
 export const MyStoriesButton = ({
@@ -28,6 +32,7 @@ export const MyStoriesButton = ({
   onAddStory,
   onClick,
   queueStoryDownload,
+  showToast,
 }: PropsType): JSX.Element => {
   const {
     acceptedMessageRequest,
@@ -40,9 +45,14 @@ export const MyStoriesButton = ({
     title,
   } = me;
 
-  return (
-    <div className="Stories__my-stories">
-      <div className="StoryListItem__button">
+  if (!newestStory) {
+    return (
+      <StoriesAddStoryButton
+        i18n={i18n}
+        moduleClassName="StoryListItem"
+        onAddStory={onAddStory}
+        showToast={showToast}
+      >
         <div className="MyStories__avatar-container">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
@@ -53,7 +63,6 @@ export const MyStoriesButton = ({
             i18n={i18n}
             isMe={Boolean(isMe)}
             name={name}
-            onClick={onAddStory}
             profileName={profileName}
             sharedGroupNames={sharedGroupNames}
             size={AvatarSize.FORTY_EIGHT}
@@ -62,74 +71,88 @@ export const MyStoriesButton = ({
           <div
             aria-label={i18n('Stories__add')}
             className="MyStories__avatar__add-story"
-            onClick={ev => {
-              onAddStory();
-              ev.stopPropagation();
-              ev.preventDefault();
-            }}
-            onKeyDown={ev => {
-              if (ev.key === 'Enter') {
-                onAddStory();
-                ev.stopPropagation();
-                ev.preventDefault();
-              }
-            }}
-            role="button"
-            tabIndex={0}
           />
         </div>
-        <div
-          className="StoryListItem__click-container"
-          onClick={onClick}
-          onKeyDown={ev => {
-            if (ev.key === 'Enter') {
-              onClick();
-              ev.stopPropagation();
-              ev.preventDefault();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="StoryListItem__info">
-            <>
-              <div className="StoryListItem__info--title">
-                {i18n('Stories__mine')}
-              </div>
-              {!newestStory && (
-                <div className="StoryListItem__info--timestamp">
-                  {i18n('Stories__add')}
-                </div>
-              )}
-            </>
-          </div>
+        <div className="StoryListItem__info">
+          <>
+            <div className="StoryListItem__info--title">
+              {i18n('Stories__mine')}
+            </div>
+            <div className="StoryListItem__info--timestamp">
+              {i18n('Stories__add')}
+            </div>
+          </>
+        </div>
+      </StoriesAddStoryButton>
+    );
+  }
 
+  return (
+    <div className="StoryListItem__button">
+      <div className="MyStories__avatar-container">
+        <StoriesAddStoryButton
+          i18n={i18n}
+          onAddStory={onAddStory}
+          showToast={showToast}
+        >
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            badge={undefined}
+            color={getAvatarColor(color)}
+            conversationType="direct"
+            i18n={i18n}
+            isMe={Boolean(isMe)}
+            name={name}
+            profileName={profileName}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.FORTY_EIGHT}
+            title={title}
+          />
           <div
-            aria-label={i18n('StoryListItem__label')}
-            className={classNames('StoryListItem__previews', {
-              'StoryListItem__previews--multiple': hasMultiple,
-            })}
-          >
-            {hasMultiple && <div className="StoryListItem__previews--more" />}
-            {newestStory ? (
-              <StoryImage
-                attachment={newestStory.attachment}
-                firstName={i18n('you')}
-                i18n={i18n}
-                isMe
-                isThumbnail
-                label=""
-                moduleClassName="StoryListItem__previews--image"
-                queueStoryDownload={queueStoryDownload}
-                storyId={newestStory.messageId}
-              />
-            ) : (
-              <div
-                aria-label={i18n('Stories__add')}
-                className="StoryListItem__previews--add StoryListItem__previews--image"
-              />
-            )}
-          </div>
+            aria-label={i18n('Stories__add')}
+            className="MyStories__avatar__add-story"
+          />
+        </StoriesAddStoryButton>
+      </div>
+      <div
+        className="StoryListItem__click-container"
+        onClick={onClick}
+        onKeyDown={ev => {
+          if (ev.key === 'Enter') {
+            onClick();
+            ev.stopPropagation();
+            ev.preventDefault();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+      >
+        <div className="StoryListItem__info">
+          <>
+            <div className="StoryListItem__info--title">
+              {i18n('Stories__mine')}
+            </div>
+          </>
+        </div>
+        <div
+          aria-label={i18n('StoryListItem__label')}
+          className={classNames('StoryListItem__previews', {
+            'StoryListItem__previews--multiple': hasMultiple,
+          })}
+        >
+          {hasMultiple && <div className="StoryListItem__previews--more" />}
+          <StoryImage
+            attachment={newestStory.attachment}
+            firstName={i18n('you')}
+            i18n={i18n}
+            isMe
+            isThumbnail
+            label=""
+            moduleClassName="StoryListItem__previews--image"
+            queueStoryDownload={queueStoryDownload}
+            storyId={newestStory.messageId}
+          />
         </div>
       </div>
     </div>
diff --git a/ts/components/StoriesAddStoryButton.tsx b/ts/components/StoriesAddStoryButton.tsx
new file mode 100644
index 0000000000..666b7aaf49
--- /dev/null
+++ b/ts/components/StoriesAddStoryButton.tsx
@@ -0,0 +1,90 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
+import { ContextMenu } from './ContextMenu';
+import { Theme } from '../util/theme';
+import { ToastType } from '../state/ducks/toast';
+import {
+  isVideoGoodForStories,
+  ReasonVideoNotGood,
+} from '../util/isVideoGoodForStories';
+
+export type PropsType = {
+  children?: ReactNode;
+  i18n: LocalizerType;
+  moduleClassName?: string;
+  onAddStory: (file?: File) => unknown;
+  showToast: ShowToastActionCreatorType;
+};
+
+export const StoriesAddStoryButton = ({
+  children,
+  i18n,
+  moduleClassName,
+  onAddStory,
+  showToast,
+}: PropsType): JSX.Element => {
+  return (
+    <ContextMenu
+      ariaLabel={i18n('Stories__add')}
+      i18n={i18n}
+      menuOptions={[
+        {
+          label: i18n('Stories__add-story--media'),
+          onClick: () => {
+            const input = document.createElement('input');
+            input.accept = 'image/*,video/mp4';
+            input.type = 'file';
+            input.onchange = async () => {
+              const file = input.files ? input.files[0] : undefined;
+
+              if (!file) {
+                return;
+              }
+
+              const result = await isVideoGoodForStories(file);
+
+              if (
+                result === ReasonVideoNotGood.UnsupportedCodec ||
+                result === ReasonVideoNotGood.UnsupportedContainer
+              ) {
+                showToast(ToastType.StoryVideoUnsupported);
+                return;
+              }
+
+              if (result === ReasonVideoNotGood.TooLong) {
+                showToast(ToastType.StoryVideoTooLong);
+                return;
+              }
+
+              if (result !== ReasonVideoNotGood.AllGoodNevermind) {
+                showToast(ToastType.StoryVideoError);
+                return;
+              }
+
+              onAddStory(file);
+            };
+            input.click();
+          },
+        },
+        {
+          label: i18n('Stories__add-story--text'),
+          onClick: () => onAddStory(),
+        },
+      ]}
+      moduleClassName={moduleClassName}
+      popperOptions={{
+        placement: 'bottom',
+        strategy: 'absolute',
+      }}
+      theme={Theme.Dark}
+    >
+      {children}
+    </ContextMenu>
+  );
+};
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
index e183025c7e..581dd59453 100644
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@@ -20,14 +20,10 @@ import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import { ContextMenu } from './ContextMenu';
 import { MyStoriesButton } from './MyStoriesButton';
 import { SearchInput } from './SearchInput';
+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
 import { StoryListItem } from './StoryListItem';
 import { Theme } from '../util/theme';
-import { ToastType } from '../state/ducks/toast';
 import { isNotNil } from '../util/isNotNil';
-import {
-  isVideoGoodForStories,
-  ReasonVideoNotGood,
-} from '../util/isVideoGoodForStories';
 
 const FUSE_OPTIONS: Fuse.IFuseOptions<ConversationStoryType> = {
   getFn: (story, path) => {
@@ -126,58 +122,11 @@ export const StoriesPane = ({
         <div className="Stories__pane__header--title">
           {i18n('Stories__title')}
         </div>
-        <ContextMenu
+        <StoriesAddStoryButton
           i18n={i18n}
-          menuOptions={[
-            {
-              label: i18n('Stories__add-story--media'),
-              onClick: () => {
-                const input = document.createElement('input');
-                input.accept = 'image/*,video/mp4';
-                input.type = 'file';
-                input.onchange = async () => {
-                  const file = input.files ? input.files[0] : undefined;
-
-                  if (!file) {
-                    return;
-                  }
-
-                  const result = await isVideoGoodForStories(file);
-
-                  if (
-                    result === ReasonVideoNotGood.UnsupportedCodec ||
-                    result === ReasonVideoNotGood.UnsupportedContainer
-                  ) {
-                    showToast(ToastType.StoryVideoUnsupported);
-                    return;
-                  }
-
-                  if (result === ReasonVideoNotGood.TooLong) {
-                    showToast(ToastType.StoryVideoTooLong);
-                    return;
-                  }
-
-                  if (result !== ReasonVideoNotGood.AllGoodNevermind) {
-                    showToast(ToastType.StoryVideoError);
-                    return;
-                  }
-
-                  onAddStory(file);
-                };
-                input.click();
-              },
-            },
-            {
-              label: i18n('Stories__add-story--text'),
-              onClick: () => onAddStory(),
-            },
-          ]}
           moduleClassName="Stories__pane__add-story"
-          popperOptions={{
-            placement: 'bottom',
-            strategy: 'absolute',
-          }}
-          theme={Theme.Dark}
+          onAddStory={onAddStory}
+          showToast={showToast}
         />
         <ContextMenu
           i18n={i18n}
@@ -218,6 +167,7 @@ export const StoriesPane = ({
             onAddStory={onAddStory}
             onClick={onMyStoriesClicked}
             queueStoryDownload={queueStoryDownload}
+            showToast={showToast}
           />
           {renderedStories.map(story => (
             <StoryListItem
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 154316911f..03f7f5aca7 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -8959,6 +8959,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-30T16:57:33.618Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/ContextMenu.tsx",
+    "line": "  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-08-19T17:09:38.534Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/ConversationList.tsx",
@@ -9203,13 +9210,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-11-30T10:15:33.662Z"
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/TextStoryCreator.tsx",
-    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2022-06-16T23:23:32.306Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryImage.tsx",
@@ -9252,6 +9252,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2022-06-16T23:23:32.306Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/TextStoryCreator.tsx",
+    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-06-16T23:23:32.306Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/Tooltip.tsx",