From 8e43d45b3f524c34d4554d038fcbf0e8d9f699bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Thu, 21 Mar 2024 09:50:12 +0100 Subject: [PATCH] Fix search date suggestion crash (#26476) * Fix search date suggestion crash * Fix tests * Improve snapshots * Fix snapshot --- .../search_date_suggestion/index.ts | 2 +- .../search_date_suggestion.tsx | 6 +-- .../suggestion/search_suggestion_list.tsx | 29 +----------- .../components/suggestion/suggestion_date.tsx | 9 ++-- .../components/suggestion/suggestion_list.tsx | 4 +- .../user_group_popover.test.tsx.snap | 46 +------------------ .../user_group_popover.test.tsx | 4 +- .../user_group_popover/user_group_popover.tsx | 19 ++++---- .../src/components/widgets/popover/index.tsx | 12 ++--- 9 files changed, 31 insertions(+), 100 deletions(-) diff --git a/webapp/channels/src/components/suggestion/search_date_suggestion/index.ts b/webapp/channels/src/components/suggestion/search_date_suggestion/index.ts index 0f3185188e..d717f8ed59 100644 --- a/webapp/channels/src/components/suggestion/search_date_suggestion/index.ts +++ b/webapp/channels/src/components/suggestion/search_date_suggestion/index.ts @@ -24,4 +24,4 @@ function mapStateToProps(state: GlobalState) { }; } -export default connect(mapStateToProps)(SearchDateSuggestion); +export default connect(mapStateToProps, null, null, {forwardRef: true})(SearchDateSuggestion); diff --git a/webapp/channels/src/components/suggestion/search_date_suggestion/search_date_suggestion.tsx b/webapp/channels/src/components/suggestion/search_date_suggestion/search_date_suggestion.tsx index 983ad728bb..2cabb45b07 100644 --- a/webapp/channels/src/components/suggestion/search_date_suggestion/search_date_suggestion.tsx +++ b/webapp/channels/src/components/suggestion/search_date_suggestion/search_date_suggestion.tsx @@ -15,9 +15,9 @@ import 'react-day-picker/dist/style.css'; type Props = SuggestionProps & { currentDate?: Date; - handleEscape: () => void; + handleEscape?: () => void; locale: string; - preventClose: () => void; + preventClose?: () => void; } export default class SearchDateSuggestion extends React.PureComponent { @@ -36,7 +36,7 @@ export default class SearchDateSuggestion extends React.PureComponent { if (Keyboard.isKeyPressed(e, Constants.KeyCodes.DOWN) && document.activeElement?.id === 'searchBox') { this.setState({datePickerFocused: true}); } else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) { - this.props.handleEscape(); + this.props.handleEscape?.(); } }; diff --git a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx index 664908270e..032fc9134c 100644 --- a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx +++ b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx @@ -10,6 +10,7 @@ import Popover from 'components/widgets/popover'; import Constants from 'utils/constants'; import type {UserProfile} from './command_provider/app_command_parser/app_command_parser_dependencies'; +import type {Props} from './suggestion_list'; import SuggestionList from './suggestion_list'; interface Item extends UserProfile { @@ -18,34 +19,6 @@ interface Item extends UserProfile { name: string; } -interface Props { - ariaLiveRef?: React.RefObject; - inputRef?: React.RefObject; - open: boolean; - position?: 'top' | 'bottom'; - renderDividers?: string[]; - renderNoResults?: boolean; - onCompleteWord: (term: string, matchedPretext: string, e?: React.KeyboardEventHandler) => boolean; - preventClose?: () => void; - onItemHover: (term: string) => void; - pretext: string; - cleared: boolean; - matchedPretext: string[]; - items: any[]; - terms: string[]; - selection: string; - components: Array>; - wrapperHeight?: number; - - // suggestionBoxAlgn is an optional object that can be passed to align the SuggestionList with the keyboard caret - // as the user is typing. - suggestionBoxAlgn?: { - lineHeight: number; - pixelsToMoveX: number; - pixelsToMoveY: number; - }; -} - export default class SearchSuggestionList extends SuggestionList { popoverRef: React.RefObject; itemsContainerRef: React.RefObject; diff --git a/webapp/channels/src/components/suggestion/suggestion_date.tsx b/webapp/channels/src/components/suggestion/suggestion_date.tsx index f4737f9403..ad019db375 100644 --- a/webapp/channels/src/components/suggestion/suggestion_date.tsx +++ b/webapp/channels/src/components/suggestion/suggestion_date.tsx @@ -6,8 +6,12 @@ import React, {memo} from 'react'; import Popover from 'components/widgets/popover'; type SuggestionItem = { + date: string; + label: string; +} + +type SuggestionItemProps = { key: string; - ref: string; item: SuggestionItem; term: string; matchedPretext: string; @@ -24,7 +28,7 @@ type Props = { terms: string[]; preventClose: () => void; handleEscape: () => void; - components: Array>; + components: Array>; } const SuggestionDate = ({ @@ -54,7 +58,6 @@ const SuggestionDate = ({ > ; inputRef?: React.RefObject; open: boolean; @@ -28,7 +28,7 @@ interface Props { items: any[]; terms: string[]; selection: string; - components: Array>; + components: Array>; wrapperHeight?: number; // suggestionBoxAlgn is an optional object that can be passed to align the SuggestionList with the keyboard caret diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap index 0b1782ec2a..33bc1546c4 100644 --- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap +++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap @@ -56,7 +56,6 @@ exports[`component/user_group_popover should match snapshot 1`] = ` }, } } - canManageGroup={true} group={ Object { "allow_reference": true, @@ -79,49 +78,8 @@ exports[`component/user_group_popover should match snapshot 1`] = ` searchTerm="" showUserOverlay={[MockFunction]} > - - + diff --git a/webapp/channels/src/components/user_group_popover/user_group_popover.test.tsx b/webapp/channels/src/components/user_group_popover/user_group_popover.test.tsx index a5cc7b887e..0c698e59f2 100644 --- a/webapp/channels/src/components/user_group_popover/user_group_popover.test.tsx +++ b/webapp/channels/src/components/user_group_popover/user_group_popover.test.tsx @@ -2,6 +2,7 @@ // See LICENSE.txt for license information. import type {ReactWrapper} from 'enzyme'; +import type {ComponentProps} from 'react'; import React from 'react'; import {Provider} from 'react-redux'; import {BrowserRouter} from 'react-router-dom'; @@ -100,10 +101,9 @@ describe('component/user_group_popover', () => { }, }; - const baseProps = { + const baseProps: ComponentProps = { searchTerm: '', group: group1, - canManageGroup: true, showUserOverlay: jest.fn(), hide: jest.fn(), returnFocus: jest.fn(), diff --git a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx index 3b1efcbcad..23e2cd8a63 100644 --- a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx +++ b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx @@ -64,16 +64,14 @@ export type Props = { }; } -const UserGroupPopover = (props: Props) => { - const { - group, - actions, - hide, - returnFocus, - searchTerm, - showUserOverlay, - } = props; - +const UserGroupPopover = ({ + actions, + group, + hide, + returnFocus, + searchTerm, + showUserOverlay, +}: Props) => { const {formatMessage} = useIntl(); const closeRef = useRef(null); @@ -183,7 +181,6 @@ const UserGroupPopover = (props: Props) => { return ( {tabCatcher} diff --git a/webapp/channels/src/components/widgets/popover/index.tsx b/webapp/channels/src/components/widgets/popover/index.tsx index 3eae8ae746..fa28cb24fd 100644 --- a/webapp/channels/src/components/widgets/popover/index.tsx +++ b/webapp/channels/src/components/widgets/popover/index.tsx @@ -19,10 +19,9 @@ interface Props { style?: React.CSSProperties; onMouseOut?: React.MouseEventHandler; // didn't find a better way to satisfy typing, so for now we have a slight 'bootstrap leakage' onMouseOver?: React.MouseEventHandler; - ref?: React.Ref; } -const Popover = ({ +const Popover = React.forwardRef(({ placement = 'right', popoverSize = 'sm', children, @@ -33,8 +32,7 @@ const Popover = ({ onMouseOver, className, style, - ref, -}: Props) => { +}, ref?) => { return ( {children} ); -}; +}); + +Popover.displayName = 'Popover'; export default React.memo(Popover);