Skip to content

[MA-19]: MM-61641: Ensure implicit list markup is avoided #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ayush-chauhan233 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[MA-19]: MM-61641: Ensure implicit list markup is avoided #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abd15f6
MM-61641: Update post options to use semantic list elements
Dec 23, 2024
60a2389
MM-61641: Fix lint
Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 71 additions & 56 deletions webapp/channels/src/components/post/post_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ type Props = {
};

const PostOptions = (props: Props): JSX.Element => {
const dotMenuRef = useRef<HTMLDivElement>(null);
const dotMenuRef = useRef<HTMLUListElement>(null);

const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const [showDotMenu, setShowDotMenu] = useState(false);
Expand Down Expand Up @@ -120,12 +120,14 @@ const PostOptions = (props: Props): JSX.Element => {
let commentIcon;
if (showCommentIcon) {
commentIcon = (
<CommentIcon
handleCommentClick={props.handleCommentClick}
postId={post.id}
extraClass={commentIconExtraClass}
commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
/>
<li key='commentIcon__listItem'>
<CommentIcon
handleCommentClick={props.handleCommentClick}
postId={post.id}
extraClass={commentIconExtraClass}
commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
/>
</li>
);
}

Expand All @@ -152,38 +154,44 @@ const PostOptions = (props: Props): JSX.Element => {
let postReaction;
if (showReactionIcon) {
postReaction = (
<PostReaction
channelId={post.channel_id}
location={props.location}
postId={post.id}
teamId={props.teamId}
getDotMenuRef={getDotMenuRef}
showEmojiPicker={showEmojiPicker}
toggleEmojiPicker={toggleEmojiPicker}
/>
<li key='postReaction__listItem'>
<PostReaction
channelId={post.channel_id}
location={props.location}
postId={post.id}
teamId={props.teamId}
getDotMenuRef={getDotMenuRef}
showEmojiPicker={showEmojiPicker}
toggleEmojiPicker={toggleEmojiPicker}
/>
</li>
);
}

let flagIcon: ReactNode = null;
if (!isMobileView && (!isEphemeral && !post.failed && !systemMessage)) {
flagIcon = (
<PostFlagIcon
location={props.location}
postId={post.id}
isFlagged={props.isFlagged}
/>
<li key='flagIcon__listItem'>
<PostFlagIcon
location={props.location}
postId={post.id}
isFlagged={props.isFlagged}
/>
</li>
);
}

// Action menus
const showActionsMenuIcon = props.shouldShowActionsMenu && (isMobileView || hoverLocal);
const actionsMenu = showActionsMenuIcon && (
<ActionsMenu
post={post}
location={props.location}
handleDropdownOpened={handleActionsMenuOpened}
isMenuOpen={showActionsMenu}
/>
<li key='actionsMenu__listItem'>
<ActionsMenu
post={post}
location={props.location}
handleDropdownOpened={handleActionsMenuOpened}
isMenuOpen={showActionsMenu}
/>
</li>
);

let pluginItems: ReactNode = null;
Expand All @@ -193,28 +201,31 @@ const PostOptions = (props: Props): JSX.Element => {
if (item.component) {
const Component = item.component as any;
return (
<Component
post={props.post}
key={item.id}
/>
<li key={item.id}>
<Component
post={props.post}
/>
</li>
);
}
return null;
}) || [];
}

const dotMenu = (
<DotMenu
post={props.post}
location={props.location}
isFlagged={props.isFlagged}
handleDropdownOpened={handleDotMenuOpened}
handleCommentClick={props.handleCommentClick}
handleAddReactionClick={toggleEmojiPicker}
isReadOnly={isReadOnly || channelIsArchived}
isMenuOpen={showDotMenu}
enableEmojiPicker={props.enableEmojiPicker}
/>
<li key='dotMenu__listItem'>
<DotMenu
post={props.post}
location={props.location}
isFlagged={props.isFlagged}
handleDropdownOpened={handleDotMenuOpened}
handleCommentClick={props.handleCommentClick}
handleAddReactionClick={toggleEmojiPicker}
isReadOnly={isReadOnly || channelIsArchived}
isMenuOpen={showDotMenu}
enableEmojiPicker={props.enableEmojiPicker}
/>
</li>
);

// Build post options
Expand All @@ -235,10 +246,11 @@ const PostOptions = (props: Props): JSX.Element => {
} else if (props.location === Locations.SEARCH) {
const hasCRTFooter = props.collapsedThreadsEnabled && !post.root_id && (post.reply_count > 0 || post.is_following);
options = (
<div className='col__controls post-menu'>
<ul className='col__controls post-menu'>
{dotMenu}
{flagIcon}
{props.canReply && !hasCRTFooter &&
<li key='commentIcon__listItem'>
<CommentIcon
location={props.location}
handleCommentClick={props.handleCommentClick}
Expand All @@ -247,22 +259,25 @@ const PostOptions = (props: Props): JSX.Element => {
searchStyle={'search-item__comment'}
extraClass={props.replyCount ? 'icon--visible' : ''}
/>
</li>
}
<a
href='#'
onClick={props.handleJumpClick}
className='search-item__jump'
>
<FormattedMessage
id='search_item.jump'
defaultMessage='Jump'
/>
</a>
</div>
<li key='searchItem__listItem'>
<a
href='#'
onClick={props.handleJumpClick}
className='search-item__jump'
>
<FormattedMessage
id='search_item.jump'
defaultMessage='Jump'
/>
</a>
</li>
</ul>
);
} else if (!props.isPostBeingEdited) {
options = (
<div
<ul
ref={dotMenuRef}
data-testid={`post-menu-${props.post.id}`}
className={classnames('col post-menu', {'post-menu--position': !hoverLocal && showCommentIcon})}
Expand All @@ -275,7 +290,7 @@ const PostOptions = (props: Props): JSX.Element => {
{actionsMenu}
{commentIcon}
{(collapsedThreadsEnabled || showRecentlyUsedReactions) && dotMenu}
</div>
</ul>
);
}

Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export type Props = WrappedComponentProps & {
channelId?: string;
postId: string;
teamId: string;
getDotMenuRef: () => HTMLDivElement | null;
getDotMenuRef: () => HTMLUListElement | null;
location?: keyof typeof Locations;
showEmojiPicker: boolean;
toggleEmojiPicker: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
Expand Down
4 changes: 2 additions & 2 deletions webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,13 @@ export default class PostRecentReactions extends React.PureComponent<Props, Stat
emoji={getEmojiName(emoji)}
isEmojiLarge={true}
>
<div>
<li>
<EmojiItem
emoji={emoji}
onItemClick={this.handleToggleEmoji}
order={n}
/>
</div>
</li>
</WithTooltip>
</ChannelPermissionGate>
),
Expand Down
1 change: 1 addition & 0 deletions webapp/channels/src/sass/components/_post-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
padding: 4px;
border: 1px solid transparent;
border-radius: 4px;
list-style: none;
white-space: normal;
}

Expand Down