Move edit and delete buttons on chat messages to dropdown menu (#7820)

* Move edit and delete buttons on chat messages to dropdown menu

* Move edit and delete buttons on chat messages to dropdown menu

* Use 'up arrow' as shortcut to edit last message

* Use 'delete key' as shortcut to delete last message

* Change span to button and handle case when lastMessage is undefined

* Fix up code

* Fix code

app/assets/stylesheets/chat.scss

@@ -939,13 +939,48 @@
 
 .message__info__actions {
   display: grid;
-  grid-template-columns: 4fr 1fr;
+  grid-template-columns: 19fr 1fr;
 }
 
 .message__actions {
   display: none;
+  position: relative;
   justify-content: end;
   -webkit-justify-content: flex-end;
+
+  .ellipsis__menubutton {
+    height: 17px;
+    cursor: pointer;
+    color: var(--theme-color, #0a0a0a);
+  }
+
+  &:hover {
+    .messagebody__dropdownmenu {
+      display: block;
+    }
+  }
+
+  img {
+    height: 100%;
+    opacity: 0.6;
+  }
+
+  .messagebody__dropdownmenu {
+    display: none;
+    position: absolute;
+    background-color: var(--theme-container-background, #fff);
+    border-style: solid;
+    border-color: var(--theme-color, #0a0a0a);
+    border-radius: 5px;
+    border-width: 1px;
+    margin-top: 1em;
+    margin-right: -0.6em;
+
+    button {
+      width: 100%;
+      text-align: left;
+    }
+  }
 }
 
 .message__actions span {

app/assets/stylesheets/scaffolds.scss

@@ -154,6 +154,7 @@ body.ten-x-hacker-theme {
   .icon-image,
   .dev-badge,
   .chatchannels__config img,
+  .message__actions img,
   .external-link-img,
   .group-img,
   .user-profile-header .social a {

app/javascript/chat/chat.jsx

@@ -550,7 +550,13 @@ export default class Chat extends Component {
   };
 
   handleKeyDown = (e) => {
-    const { showMemberlist, activeContent, activeChannelId } = this.state;
+    const {
+      showMemberlist,
+      activeContent,
+      activeChannelId,
+      messages,
+      currentUserId,
+    } = this.state;
     const enterPressed = e.keyCode === 13;
     const leftPressed = e.keyCode === 37;
     const rightPressed = e.keyCode === 39;
@@ -558,6 +564,8 @@ export default class Chat extends Component {
     const targetValue = e.target.value;
     const messageIsEmpty = targetValue.length === 0;
     const shiftPressed = e.shiftKey;
+    const upArrowPressed = e.keyCode === 38;
+    const deletePressed = e.keyCode === 46;
 
     if (enterPressed) {
       if (showMemberlist) {
@@ -617,6 +625,21 @@ export default class Chat extends Component {
         expanded: window.innerWidth > 600,
       });
     }
+    if (messageIsEmpty) {
+      const messagesByCurrentUser = messages[activeChannelId].filter(
+        (message) => message.user_id === currentUserId,
+      );
+      const lastMessage =
+        messagesByCurrentUser[messagesByCurrentUser.length - 1];
+
+      if (lastMessage) {
+        if (upArrowPressed) {
+          this.triggerEditMessage(lastMessage.id);
+        } else if (deletePressed) {
+          this.triggerDeleteMessage(lastMessage.id);
+        }
+      }
+    }
   };
 
   handleKeyDownEdit = (e) => {
@@ -800,16 +823,16 @@ export default class Chat extends Component {
     }
   };
 
-  triggerDeleteMessage = (e) => {
-    this.setState({ messageDeleteId: e.target.dataset.content });
+  triggerDeleteMessage = (messageId) => {
+    this.setState({ messageDeleteId: messageId });
     this.setState({ showDeleteModal: true });
   };
 
-  triggerEditMessage = (e) => {
+  triggerEditMessage = (messageId) => {
     const { messages, activeChannelId } = this.state;
     this.setState({
       activeEditMessage: messages[activeChannelId].filter(
-        (message) => message.id === parseInt(e.target.dataset.content, 10),
+        (message) => message.id === messageId,
       )[0],
     });
     this.setState({ startEditing: true });

app/javascript/chat/message.jsx

@@ -1,7 +1,10 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-unresolved
+import ThreeDotsIcon from 'images/overflow-horizontal.svg';
 import { adjustTimestamp } from './util';
 import ErrorMessage from './messages/errorMessage';
+import { Button } from '@crayons';
 
 const Message = ({
   currentUserId,
@@ -32,6 +35,26 @@ const Message = ({
     />
   );
 
+  const dropdown = (
+    <div className="message__actions">
+      <span className="ellipsis__menubutton">
+        <img src={ThreeDotsIcon} alt="dropdown menu icon" />
+      </span>
+
+      <div className="messagebody__dropdownmenu">
+        <Button variant="ghost" onClick={(_) => onEditMessageTrigger(id)}>
+          Edit
+        </Button>
+        <Button
+          variant="ghost-danger"
+          onClick={(_) => onDeleteMessageTrigger(id)}
+        >
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+
   return (
     <div className="chatmessage">
       <div className="chatmessage__profilepic">
@@ -41,13 +64,13 @@ const Message = ({
           rel="noopener noreferrer"
           data-content="sidecar-user"
           onClick={onContentTrigger}
+          aria-label="View User Profile"
         >
           <img
             className="chatmessagebody__profileimage"
             src={profileImageUrl}
             alt={`${user} profile`}
             data-content="sidecar-user"
-            onClick={onContentTrigger}
           />
         </a>
       </div>
@@ -90,34 +113,7 @@ const Message = ({
               ' '
             )}
           </div>
-          {userID === currentUserId ? (
-            <div className="message__actions">
-              <span
-                role="button"
-                data-content={id}
-                onClick={onDeleteMessageTrigger}
-                tabIndex="0"
-                onKeyUp={(e) => {
-                  if (e.keyCode === 13) onDeleteMessageTrigger();
-                }}
-              >
-                Delete
-              </span>
-              <span
-                role="button"
-                data-content={id}
-                onClick={onEditMessageTrigger}
-                tabIndex="0"
-                onKeyUp={(e) => {
-                  if (e.keyCode === 13) onEditMessageTrigger();
-                }}
-              >
-                Edit
-              </span>
-            </div>
-          ) : (
-            ' '
-          )}
+          {userID === currentUserId ? dropdown : ' '}
         </div>
         <div className="chatmessage__bodytext">{messageArea}</div>
       </div>