diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx index 3aee7effe8..ca5a592ab1 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx @@ -17,6 +17,7 @@ import { ReviewPanelEntry } from './review-panel-entry' import { useModalsContext } from '@/features/ide-react/context/modals-context' import { ExpandableContent } from './review-panel-expandable-content' import { useUserContext } from '@/shared/context/user-context' +import { PreventSelectingEntry } from './review-panel-prevent-selecting' export const ReviewPanelChange = memo<{ change: Change @@ -109,52 +110,56 @@ export const ReviewPanelChange = memo<{ {editable && (
{permissions.write && ( - - - + + + )} {(permissions.write || (permissions.trackedWrite && isChangeAuthor)) && ( - - - + + + )}
)} diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx index 2f6c69c67e..c8495e7779 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx @@ -48,7 +48,7 @@ export const ReviewPanelEntry: FC<{ const [selected, setSelected] = useState(false) const [focused, setFocused] = useState(false) const [textareaFocused, setTextareaFocused] = useState(false) - const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext() + const { setReviewPanelOpen } = useLayoutContext() const highlighted = isSelectionWithinOp(op, state.selection.main) const entryRef = useRef(null) const mousePressedRef = useRef(false) @@ -61,17 +61,6 @@ export const ReviewPanelEntry: FC<{ event => { setFocused(true) - if ( - event.target instanceof HTMLButtonElement || - event.target instanceof HTMLLinkElement || - event.target instanceof HTMLAnchorElement || - (event.target instanceof HTMLTextAreaElement && !reviewPanelOpen) - ) { - // Ignore focus events on certain elements so as to not affect - // their behavior - return - } - if (event.target instanceof HTMLTextAreaElement) { const entryBottom = (entryRef.current?.offsetTop || 0) + @@ -120,7 +109,6 @@ export const ReviewPanelEntry: FC<{ view, position, openDocWithId, - reviewPanelOpen, ] ) diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx index f16556a049..3850614281 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx @@ -2,6 +2,7 @@ import { FC, useCallback, useRef, useState } from 'react' import OLButton from '@/features/ui/components/ol/ol-button' import { useTranslation } from 'react-i18next' import classNames from 'classnames' +import { PreventSelectingEntry } from './review-panel-prevent-selecting' export const ExpandableContent: FC<{ className?: string @@ -58,25 +59,27 @@ export const ExpandableContent: FC<{ 'review-panel-expandable-inline': inline, })} > - {isExpanded ? ( - - {t('show_less')} - - ) : ( - isOverflowing && ( + + {isExpanded ? ( - {t('show_more')} + {t('show_less')} - ) - )} + ) : ( + isOverflowing && ( + + {t('show_more')} + + ) + )} + ) diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx index f0251314ae..c01e895264 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx @@ -14,6 +14,7 @@ import ReviewPanelDeleteCommentModal from './review-panel-delete-comment-modal' import { useUserContext } from '@/shared/context/user-context' import ReviewPanelEntryUser from './review-panel-entry-user' import { usePermissionsContext } from '@/features/ide-react/context/permissions-context' +import { PreventSelectingEntry } from './review-panel-prevent-selecting' export const ReviewPanelMessage: FC<{ message: ReviewPanelCommentThreadMessage @@ -72,35 +73,39 @@ export const ReviewPanelMessage: FC<{
{!editing && !isReply && !isThreadResolved && canResolve && ( - - - + + + )} {!editing && !isThreadResolved && ( - + + + )}
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-prevent-selecting.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-prevent-selecting.tsx new file mode 100644 index 0000000000..cad04048ce --- /dev/null +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-prevent-selecting.tsx @@ -0,0 +1,15 @@ +const stopPropagation = (e: React.FocusEvent | React.MouseEvent) => + e.stopPropagation() + +export const PreventSelectingEntry = ({ + children, +}: { + children: React.ReactNode +}) => { + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
+ {children} +
+ ) +}