Merge branch 'master' into devin/1738726985-convert-ts-annotation-activity-menu

Author: mergify[bot]

…ed/comment/components/BaseCommentMenu.js …mment/components/BaseCommentMenu.js.flowsrc/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.js renamed to src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.js.flow src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.js renamed to src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.js.flow

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 
 import { FormattedMessage } from 'react-intl';

src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.scss

@@ -1,4 +1,4 @@
-.BaseCommentMenu.bdl-Media-menu {
+.bcs-BaseCommentMenu.bdl-Media-menu {
     // to override float:right from .bdl-Media-menu
     float: none;
 }

src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import TetherComponent from 'react-tether';
+
+import Checkmark16 from '../../../../../icon/line/Checkmark16';
+import DeleteConfirmation from '../../common/delete-confirmation';
+import Media from '../../../../../components/media';
+import Pencil16 from '../../../../../icon/line/Pencil16';
+import Trash16 from '../../../../../icon/line/Trash16';
+import X16 from '../../../../../icon/fill/X16';
+import { MenuItem } from '../../../../../components/menu';
+
+import { ACTIVITY_TARGETS } from '../../../../common/interactionTargets';
+import { COMMENT_STATUS_OPEN, COMMENT_STATUS_RESOLVED } from '../../../../../constants';
+
+import messages from '../messages';
+
+import type { FeedItemStatus } from '../../../../../common/types/feed';
+
+import './BaseCommentMenu.scss';
+
+export interface BaseCommentMenuProps {
+    canDelete: boolean;
+    canEdit: boolean;
+    canResolve: boolean;
+    handleDeleteCancel: () => void;
+    handleDeleteClick: () => void;
+    handleDeleteConfirm: () => void;
+    handleEditClick: () => void;
+    handleMenuClose: () => void;
+    handleStatusUpdate: (selectedStatus: FeedItemStatus) => void;
+    isConfirmingDelete: boolean;
+    isResolved: boolean;
+    onSelect: (isSelected: boolean) => void;
+}
+
+export const BaseCommentMenu = ({
+    canDelete,
+    canEdit,
+    canResolve,
+    handleDeleteCancel,
+    handleDeleteClick,
+    handleDeleteConfirm,
+    handleEditClick,
+    handleMenuClose,
+    handleStatusUpdate,
+    isConfirmingDelete,
+    isResolved,
+    onSelect,
+}: BaseCommentMenuProps) => {
+    return (
+        <TetherComponent
+            // @ts-expect-error Awaiting proper types from @types/react-tether
+            attachment="top right"
+            className="bcs-Comment-deleteConfirmationModal"
+            constraints={[{ to: 'scrollParent', attachment: 'together' }]}
+            targetAttachment="bottom right"
+        >
+            <Media.Menu
+                className="bcs-BaseCommentMenu"
+                data-testid="comment-actions-menu"
+                dropdownProps={{
+                    onMenuClose: handleMenuClose,
+                    onMenuOpen: () => onSelect(true),
+                }}
+                isDisabled={isConfirmingDelete}
+                menuProps={{
+                    'data-resin-component': ACTIVITY_TARGETS.COMMENT_OPTIONS,
+                }}
+            >
+                {canResolve && isResolved && (
+                    <MenuItem
+                        className="bcs-Comment-unresolveComment"
+                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
+                        data-testid="unresolve-comment"
+                        onClick={() => handleStatusUpdate(COMMENT_STATUS_OPEN)}
+                    >
+                        <X16 />
+                        <FormattedMessage {...messages.commentUnresolveMenuItem} />
+                    </MenuItem>
+                )}
+                {canResolve && !isResolved && (
+                    <MenuItem
+                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
+                        data-testid="resolve-comment"
+                        onClick={() => handleStatusUpdate(COMMENT_STATUS_RESOLVED)}
+                    >
+                        <Checkmark16 />
+                        <FormattedMessage {...messages.commentResolveMenuItem} />
+                    </MenuItem>
+                )}
+                {canEdit && (
+                    <MenuItem
+                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
+                        data-testid="edit-comment"
+                        onClick={handleEditClick}
+                    >
+                        <Pencil16 />
+                        <FormattedMessage {...messages.commentEditMenuItem} />
+                    </MenuItem>
+                )}
+                {canDelete && (
+                    <MenuItem
+                        aria-label={messages.commentDeleteMenuItem.defaultMessage}
+                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_DELETE}
+                        data-testid="delete-comment"
+                        onClick={handleDeleteClick}
+                    >
+                        <Trash16 />
+                        <FormattedMessage {...messages.commentDeleteMenuItem} />
+                    </MenuItem>
+                )}
+            </Media.Menu>
+            {isConfirmingDelete && (
+                <DeleteConfirmation
+                    data-resin-component={ACTIVITY_TARGETS.COMMENT_OPTIONS}
+                    isOpen={isConfirmingDelete}
+                    message={messages.commentDeletePrompt}
+                    onDeleteCancel={handleDeleteCancel}
+                    onDeleteConfirm={handleDeleteConfirm}
+                />
+            )}
+        </TetherComponent>
+    );
+};