[MM-31708][MM-31726][MM-31739][MM-31727] - Fix regressions in RHS and…

… Status menu (#7290) (#7302)

Automatic Merge

components/search/search.tsx

@@ -64,8 +64,8 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
     const intl = useIntl();
 
     // generate intial component state and setters
-    const [focussed, setFocussed] = useState<boolean>(false);
-    const [keepInputFocussed, setKeepInputFocussed] = useState<boolean>(false);
+    const [focused, setFocused] = useState<boolean>(false);
+    const [keepInputFocused, setKeepInputFocused] = useState<boolean>(false);
     const [indexChangedViaKeyPress, setIndexChangedViaKeyPress] = useState<boolean>(false);
     const [highlightedSearchHintIndex, setHighlightedSearchHintIndex] = useState<number>(-1);
     const [visibleSearchHintOptions, setVisibleSearchHintOptions] = useState<SearchHintOption[]>(
@@ -85,13 +85,13 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
     }, [searchTerms]);
 
     useEffect((): void => {
-        if (!Utils.isMobile() && focussed && keepInputFocussed) {
+        if (!Utils.isMobile() && focused && keepInputFocused) {
             handleBlur();
         }
     }, [searchTerms]);
 
     useEffect((): void => {
-        if (props.isFocus) {
+        if (props.isFocus && !props.isRhsOpen) {
             handleFocus();
         } else {
             handleBlur();
@@ -102,30 +102,30 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
     const handleClose = (): void => actions.closeRightHandSide();
 
     // focus the search input
-    const handleFocus = (): void => setFocussed(true);
+    const handleFocus = (): void => setFocused(true);
 
-    // release focus from the search input or unset `keepInputFocussed` value
-    // `keepInputFocussed` is used to keep the search input focussed when a
+    // release focus from the search input or unset `keepInputFocused` value
+    // `keepInputFocused` is used to keep the search input focused when a
     // user selects a suggestion from `SearchHint` with a click
     const handleBlur = (): void => {
         // add time out so that the pinned and member buttons are clickable
         // when focus is released from the search box.
         setTimeout((): void => {
-            if (keepInputFocussed) {
-                setKeepInputFocussed(false);
+            if (keepInputFocused) {
+                setKeepInputFocused(false);
             } else {
-                setFocussed(false);
+                setFocused(false);
             }
         }, 0);
 
         updateHighlightedSearchHint();
     };
 
     const handleSearchHintSelection = (): void => {
-        if (focussed) {
-            setKeepInputFocussed(true);
+        if (focused) {
+            setKeepInputFocused(true);
         } else {
-            setFocussed(true);
+            setFocused(true);
         }
     };
 
@@ -177,7 +177,7 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
         // `handleSubmit` function called from the `form`
         if (indexChangedViaKeyPress) {
             e.preventDefault();
-            setKeepInputFocussed(true);
+            setKeepInputFocused(true);
             handleAddSearchTerm(visibleSearchHintOptions[highlightedSearchHintIndex].searchTerm);
         }
 
@@ -191,8 +191,8 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
         e.preventDefault();
 
         handleSearch().then(() => {
-            setKeepInputFocussed(false);
-            setFocussed(false);
+            setKeepInputFocused(false);
+            setFocused(false);
         });
     };
 
@@ -218,7 +218,7 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
 
     const handleClear = (): void => {
         if (props.isMentionSearch) {
-            setFocussed(false);
+            setFocused(false);
             actions.updateRhsState(RHSStates.SEARCH);
         }
         actions.updateSearchTerms('');
@@ -301,7 +301,7 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
             return <></>;
         }
 
-        const helpClass = `search-help-popover${(focussed && termsUsed <= 2) ? ' visible' : ''}`;
+        const helpClass = `search-help-popover${(focused && termsUsed <= 2) ? ' visible' : ''}`;
 
         return (
             <Popover
@@ -343,8 +343,8 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
                 handleSubmit={handleSubmit}
                 handleFocus={handleFocus}
                 handleBlur={handleBlur}
-                keepFocussed={keepInputFocussed}
-                isFocussed={focussed}
+                keepFocused={keepInputFocused}
+                isFocused={focused}
                 suggestionProviders={suggestionProviders.current}
                 isSideBarRight={props.isSideBarRight}
                 isSearchingTerm={props.isSearchingTerm}

components/search_bar/__snapshots__/search_bar.test.jsx.snap

@@ -45,10 +45,10 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
     handleFocus={[MockFunction]}
     handleSubmit={[MockFunction]}
     isFocus={false}
-    isFocussed={false}
+    isFocused={false}
     isSearchingTerm={false}
     isSideBarRight={false}
-    keepFocussed={false}
+    keepFocused={false}
     searchTerms="test"
     suggestionProviders={
       Array [
@@ -124,10 +124,10 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
     handleFocus={[MockFunction]}
     handleSubmit={[MockFunction]}
     isFocus={false}
-    isFocussed={false}
+    isFocused={false}
     isSearchingTerm={false}
     isSideBarRight={false}
-    keepFocussed={false}
+    keepFocused={false}
     searchTerms=""
     suggestionProviders={
       Array [
@@ -203,10 +203,11 @@ exports[`components/search_bar/SearchBar should match snapshot without search on
     handleFocus={[MockFunction]}
     handleSubmit={[MockFunction]}
     isFocus={false}
+    isFocused={false}
     isFocussed={true}
     isSearchingTerm={false}
     isSideBarRight={false}
-    keepFocussed={false}
+    keepFocused={false}
     searchTerms=""
     suggestionProviders={
       Array [
@@ -282,10 +283,11 @@ exports[`components/search_bar/SearchBar should match snapshot without search on
     handleFocus={[MockFunction]}
     handleSubmit={[MockFunction]}
     isFocus={false}
+    isFocused={false}
     isFocussed={true}
     isSearchingTerm={false}
     isSideBarRight={false}
-    keepFocussed={false}
+    keepFocused={false}
     searchTerms=""
     suggestionProviders={
       Array [

components/search_bar/search_bar.test.jsx

@@ -39,8 +39,8 @@ describe('components/search_bar/SearchBar', () => {
     const baseProps = {
         suggestionProviders,
         searchTerms: '',
-        keepFocussed: false,
-        isFocussed: false,
+        keepFocused: false,
+        isFocused: false,
         isSideBarRight: false,
         isSearchingTerm: false,
         isFocus: false,

components/search_bar/search_bar.tsx

@@ -28,8 +28,8 @@ type Props = {
     handleClear: () => void;
     handleFocus: () => void;
     handleBlur: () => void;
-    keepFocussed: boolean;
-    isFocussed: boolean;
+    keepFocused: boolean;
+    isFocused: boolean;
     suggestionProviders: Provider[];
     isSearchingTerm: boolean;
     isFocus: boolean;
@@ -45,23 +45,23 @@ const defaultProps: Partial<Props> = {
 };
 
 const SearchBar: React.FunctionComponent<Props> = (props: Props): JSX.Element => {
-    const {isFocussed, keepFocussed, searchTerms, suggestionProviders} = props;
+    const {isFocused, keepFocused, searchTerms, suggestionProviders} = props;
 
     const searchRef = useRef<SuggestionBox>();
     const intl = useIntl();
 
     useEffect((): void => {
-        const shouldFocus = isFocussed || keepFocussed;
+        const shouldFocus = isFocused || keepFocused;
         if (shouldFocus) {
             // let redux handle changes before focussing the input
             setTimeout(() => searchRef.current?.focus(), 0);
         } else {
             setTimeout(() => searchRef.current?.blur(), 0);
         }
-    }, [isFocussed, keepFocussed]);
+    }, [isFocused, keepFocused]);
 
     useEffect((): void => {
-        if (isFocussed && !keepFocussed && searchTerms.endsWith('""')) {
+        if (isFocused && !keepFocused && searchTerms.endsWith('""')) {
             setTimeout(() => searchRef.current?.focus(), 0);
         }
     }, [searchTerms]);
@@ -102,7 +102,7 @@ const SearchBar: React.FunctionComponent<Props> = (props: Props): JSX.Element =>
         >
             <form
                 role='application'
-                className={classNames(['search__form', {'search__form--focused': isFocussed}])}
+                className={classNames(['search__form', {'search__form--focused': isFocused}])}
                 onSubmit={props.handleSubmit}
                 style={style.searchForm}
                 autoComplete='off'

components/search_results/search_results.tsx

@@ -170,7 +170,7 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
             </div>
         );
         break;
-    case (noResults && !searchTerms && !isMentionSearch):
+    case (noResults && !searchTerms && !isMentionSearch && !isPinnedPosts && !isFlaggedPosts):
         contentItems = (
             <div className='sidebar--right__subheader search__hints a11y__section'>
                 <SearchHint

components/sidebar_right/sidebar_right.jsx

@@ -9,6 +9,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
 import Constants from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 
+import FileUploadOverlay from 'components/file_upload_overlay';
 import RhsThread from 'components/rhs_thread';
 import RhsCard from 'components/rhs_card';
 import Search from 'components/search/index.tsx';
@@ -168,12 +169,15 @@ export default class SidebarRight extends React.PureComponent {
         switch (true) {
         case postRightVisible:
             content = (
-                <RhsThread
-                    previousRhsState={previousRhsState}
-                    currentUserId={currentUserId}
-                    toggleSize={this.toggleSize}
-                    shrink={this.onShrink}
-                />
+                <div className='post-right__container'>
+                    <FileUploadOverlay overlayType='right'/>
+                    <RhsThread
+                        previousRhsState={previousRhsState}
+                        currentUserId={currentUserId}
+                        toggleSize={this.toggleSize}
+                        shrink={this.onShrink}
+                    />
+                </div>
             );
             break;
         case postCardVisible:

components/widgets/menu/menu_items/menu_item.scss

@@ -83,7 +83,6 @@
 
             &.MenuItem__with-help {
                 height: auto;
-                padding: 0 24px;
 
                 .MenuItem__primary-text {
                     padding: 7px 0 3px;

components/widgets/separator/separator.scss

@@ -5,15 +5,13 @@
 @import 'utils/module';
 
 .Separator {
-    height: 2em;
+    height: 1px;
     margin: 0;
     position: relative;
     text-align: center;
     z-index: 0;
     pointer-events: none;
-
     z-index: 1;
-    height: 1px;
     margin-bottom: 1em;
     margin-top: -1em;