Squashed commit of the following:

commit eb5a5aa Author: Caleb Roseland <[email protected]> Date: Fri Jul 8 01:48:18 2022 -0500 'final' e2e fix commit 937b65d Author: Caleb Roseland <[email protected]> Date: Fri Jul 8 01:10:23 2022 -0500 fix remaining e2e commit 656253b Author: Caleb Roseland <[email protected]> Date: Fri Jul 8 00:20:40 2022 -0500 fix e2e edit spec commit 4497839 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 23:57:12 2022 -0500 fix e2e commit 7deb0d0 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 23:07:34 2022 -0500 fix lint/forgotten commit 1694948 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 22:53:15 2022 -0500 fix lint/forgotten commit 7e55ba0 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 22:42:41 2022 -0500 drop unneeded backdrop commit 25c9f1c Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 22:42:18 2022 -0500 drop duplicate focus handler commit a0fab59 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 18:20:44 2022 -0500 fix checklist e2e commit f7234e1 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 17:52:52 2022 -0500 fix e2e, fix hover state issue commit 8a502d7 Merge: f761812 ef32b2d Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 16:13:11 2022 -0500 Merge branch 'master' into MM-45346-dropdowns-floating-ui commit f761812 Merge: eda1d30 da733f3 Author: Caleb Roseland <[email protected]> Date: Thu Jul 7 11:29:40 2022 -0500 Merge branch 'master' into MM-45346-dropdowns-floating-ui commit eda1d30 Author: Caleb Roseland <[email protected]> Date: Wed Jul 6 02:51:38 2022 -0500 wip
mattermost · Jul 8, 2022 · 9c1b0cc · 9c1b0cc
1 parent e8a828d
commit 9c1b0cc
Show file tree

Hide file tree

Showing 19 changed files with 203 additions and 367 deletions.
diff --git a/tests-e2e/cypress/integration/channels/rhs/checklist_spec.js b/tests-e2e/cypress/integration/channels/rhs/checklist_spec.js
@@ -278,18 +278,6 @@ describe('channels > rhs > checklist', () => {
             cy.findByText(newTasktext).should('exist');
         });
 
-        it('assignee selector is shifted up if it falls below window', {
-            retries: {runMode: 3},
-        }, () => {
-            // Hover over a checklist item at the end
-            cy.findAllByTestId('checkbox-item-container').eq(10).trigger('mouseover').within(() => {
-                // Click the profile icon
-                cy.get('.icon-account-plus-outline').click().wait(HALF_SEC);
-
-                cy.isInViewport('.playbook-run-user-select');
-            });
-        });
-
         it('creates a new checklist', () => {
             // # Click on the button to add a checklist
             cy.get('#rhsContainer').within(() => {

diff --git a/tests-e2e/cypress/integration/playbooks/edit_spec.js b/tests-e2e/cypress/integration/playbooks/edit_spec.js
@@ -63,12 +63,13 @@ describe('playbooks > edit', () => {
 
                     // * Verify the slash command input field now has focus
                     // * and starts with a slash prefix.
-                    cy.findByPlaceholderText('Slash Command').should('have.focus');
-                    cy.findByPlaceholderText('Slash Command').should('have.value', '/');
-
-                    // * Verify the autocomplete prompt is open
-                    cy.get('#suggestionList').should('exist');
+                    cy.focused()
+                        .should('have.attr', 'placeholder', 'Slash Command')
+                        .should('have.value', '/');
                 });
+
+                // * Verify the autocomplete prompt is open
+                cy.get('#suggestionList').should('exist');
             });
 
             // current regression in BPE
@@ -808,8 +809,8 @@ describe('playbooks > edit', () => {
 
                     cy.get('#status-updates').within(() => {
                         cy.findByText('no channels').click();
-                        cy.findByText(/off-topic/i).click();
                     });
+                    cy.findByText(/off-topic/i).click();
 
                     cy.reload();
 
@@ -826,7 +827,10 @@ describe('playbooks > edit', () => {
                     // # status updates toggle
                     cy.get('#status-updates').within(() => {
                         cy.findByText('no channels').click();
-                        cy.findByText(/off-topic/i).click();
+                    });
+                    cy.findByText(/off-topic/i).click();
+
+                    cy.get('#status-updates').within(() => {
                         cy.get('input[type=checkbox]').click({force: true});
                     });
 

diff --git a/webapp/src/components/backstage/playbook_editor/controls.tsx b/webapp/src/components/backstage/playbook_editor/controls.tsx
@@ -316,7 +316,7 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
             <DotMenu
                 dotMenuButton={TitleButton}
                 className={className}
-                placement='bottom-end'
+                placement='bottom-start'
                 icon={
                     <>
                         {children}

diff --git a/...p/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx b/...p/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx
@@ -1,5 +1,5 @@
-import React, {useState, useEffect, ReactNode} from 'react';
-import styled, {css} from 'styled-components';
+import React, {ReactNode} from 'react';
+import styled from 'styled-components';
 
 import ReactSelect, {StylesConfig, ValueType} from 'react-select';
 import {useSelector} from 'react-redux';
@@ -11,7 +11,6 @@ import {GlobalState} from 'mattermost-redux/types/store';
 
 import {useIntl} from 'react-intl';
 
-import {useClientRect} from 'src/hooks';
 import Dropdown from 'src/components/dropdown';
 
 export interface Props {
@@ -66,23 +65,8 @@ const BroadcastChannels = (props: Props) => {
     const {formatMessage} = useIntl();
     const selectableChannels = sortChannels(useSelector(getMyPublicAndPrivateChannels), props.channelIds);
 
-    const [isOpen, setOpen] = useState(false);
-    const toggleOpen = () => {
-        setOpen(!isOpen);
-    };
-
-    const [rect, ref] = useClientRect();
-    const [moveUp, setMoveUp] = useState(0);
-
-    useEffect(() => {
-        moveRect(rect, selectableChannels.length, setMoveUp);
-    }, [rect, selectableChannels.length]);
-
     const target = (
-        <div
-            ref={ref}
-            onClick={toggleOpen}
-        >
+        <div >
             {props.children}
         </div>
     );
@@ -115,13 +99,7 @@ const BroadcastChannels = (props: Props) => {
     };
 
     return (
-        <Dropdown
-            isOpen={isOpen}
-            onClose={toggleOpen}
-            target={target}
-            showOnRight={false}
-            moveUp={moveUp}
-        >
+        <Dropdown target={target}>
             <StyledReactSelect
                 autoFocus={true}
                 closeMenuOnSelect={false}
@@ -153,22 +131,6 @@ const BroadcastChannels = (props: Props) => {
     );
 };
 
-export const moveRect = (rect: DOMRect, length: number, moveUp: React.Dispatch<React.SetStateAction<number>>) => {
-    if (!rect) {
-        moveUp(0);
-        return;
-    }
-
-    const innerHeight = window.innerHeight;
-    const numProfilesShown = Math.min(6, length);
-    const spacePerProfile = 48;
-    const dropdownYShift = 27;
-    const dropdownReqSpace = 80;
-    const extraSpace = 10;
-    const dropdownBottom = rect.top + dropdownYShift + dropdownReqSpace + (numProfilesShown * spacePerProfile) + extraSpace;
-    moveUp(Math.max(0, dropdownBottom - innerHeight));
-};
-
 // styles for the select component
 const selectStyles: StylesConfig<Channel, boolean> = {
     control: (provided) => ({...provided, minWidth: 240, margin: 8}),

diff --git a/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx b/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx
@@ -1,16 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useState, ReactNode} from 'react';
+import React, {useState, ReactNode} from 'react';
 import {useIntl} from 'react-intl';
 import styled, {css} from 'styled-components';
 
-import {useClientRect} from 'src/hooks';
 import Dropdown from 'src/components/dropdown';
 import {CancelSaveButtons} from 'src/components/checklist_item/inputs';
 
-import {moveRect} from './broadcast_channels_selector';
-
 type Props = {
     urls: string[];
     onChange: (urls: string[]) => Promise<any>;
@@ -38,17 +35,8 @@ export const WebhooksInput = (props: Props) => {
         setURLs(newURLs.split('\n'));
     };
 
-    // Decide where to open the datetime selector
-    const [rect, ref] = useClientRect();
-    const [moveUp, setMoveUp] = useState(0);
-
-    useEffect(() => {
-        moveRect(rect, props.urls.length, setMoveUp);
-    }, [rect, props.urls.length]);
-
     const target = (
         <div
-            ref={ref}
             onClick={toggleOpen}
         >
             {props.children}
@@ -80,10 +68,9 @@ export const WebhooksInput = (props: Props) => {
     return (
         <Dropdown
             isOpen={isOpen}
-            onClose={toggleOpen}
+            onOpenChange={setOpen}
             target={target}
-            showOnRight={false}
-            moveUp={moveUp}
+            initialFocus={props.webhooksDisabled ? -1 : undefined}
         >
             <SelectorWrapper>
                 <TextArea
@@ -191,7 +178,7 @@ const TextArea = styled.textarea<TextAreaProps>`
             }
         }
     `}
-    ${(props) => props.webhooksDisabled && `
+    ${(props) => props.webhooksDisabled && css`
         :not(:focus):not(:placeholder-shown) {
             text-decoration: line-through;
             color: rgba(var(--center-channel-color-rgb), 0.48);

diff --git a/webapp/src/components/backstage/runs_list/playbook_selector.tsx b/webapp/src/components/backstage/runs_list/playbook_selector.tsx
@@ -5,7 +5,6 @@ import React, {useEffect, useState} from 'react';
 import ReactSelect, {ActionTypes, ControlProps, StylesConfig} from 'react-select';
 import styled from 'styled-components';
 
-import {useClientRect} from 'src/hooks';
 import {PlaybookRunFilterButton} from '../../backstage/styles';
 import {Playbook} from '../../../types/playbook';
 import {SelectedButton} from 'src/components/team/team_selector';
@@ -102,26 +101,6 @@ export default function PlaybookSelector(props: Props) {
         }
     };
 
-    // Decide where to open the profile selector
-    const [rect, ref] = useClientRect();
-    const [moveUp, setMoveUp] = useState(0);
-
-    useEffect(() => {
-        if (!rect) {
-            setMoveUp(0);
-            return;
-        }
-
-        const innerHeight = window.innerHeight;
-        const numPlaybooksShown = Math.min(6, playbookOptions.length);
-        const spacePerPlaybook = 48;
-        const dropdownYShift = 27;
-        const dropdownReqSpace = 80;
-        const extraSpace = 10;
-        const dropdownBottom = rect.top + dropdownYShift + dropdownReqSpace + (numPlaybooksShown * spacePerPlaybook) + extraSpace;
-        setMoveUp(Math.max(0, dropdownBottom - innerHeight));
-    }, [rect, playbookOptions.length]);
-
     let target;
     if (props.selectedPlaybookId) {
         const playbookOption = playbookOptions.find((option) => option.playbookId === props.selectedPlaybookId);
@@ -152,7 +131,6 @@ export default function PlaybookSelector(props: Props) {
     const targetWrapped = (
         <div
             data-testid={props.testId}
-            ref={ref}
             className={props.className}
         >
             {target}
@@ -168,10 +146,8 @@ export default function PlaybookSelector(props: Props) {
     return (
         <Dropdown
             isOpen={isOpen}
-            onClose={toggleOpen}
+            onOpenChange={setOpen}
             target={targetWrapped}
-            showOnRight={props.showOnRight}
-            moveUp={moveUp}
         >
             <ReactSelect
                 autoFocus={true}

diff --git a/webapp/src/components/checklist_item/assign_to.tsx b/webapp/src/components/checklist_item/assign_to.tsx
@@ -4,6 +4,8 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import {ControlProps, components} from 'react-select';
 import {UserProfile} from 'mattermost-redux/types/users';
 
+import {Placement} from '@floating-ui/react-dom-interactions';
+
 import ProfileSelector, {Option} from 'src/components/profile/profile_selector';
 import {useProfilesInCurrentChannel, useProfilesInTeam} from 'src/hooks';
 import {ChecklistHoverMenuButton} from 'src/components/rhs/rhs_shared';
@@ -13,8 +15,11 @@ interface AssignedToProps {
     editable: boolean;
     withoutName?: boolean;
     inHoverMenu?: boolean;
+    placement?: Placement;
+    channelId?: string; // If not provided, the ID of the current channel will be used
 
     onSelectedChange: (userType?: string, user?: UserProfile) => void;
+    onOpenChange?: (isOpen: boolean) => void;
 }
 
 const AssignTo = (props: AssignedToProps) => {
@@ -54,7 +59,8 @@ const AssignTo = (props: AssignedToProps) => {
                     onCustomReset: resetAssignee,
                 }}
                 controlledOpenToggle={profileSelectorToggle}
-                showOnRight={true}
+                placement={props.placement}
+                onOpenChange={props.onOpenChange}
             />
         );
     }
@@ -97,6 +103,8 @@ const AssignTo = (props: AssignedToProps) => {
                 }}
                 selectWithoutName={props.withoutName}
                 customDropdownArrow={dropdownArrow}
+                placement={props.placement}
+                onOpenChange={props.onOpenChange}
             />
         </AssignToContainer>
     );