MM-51804 - add channels lhs not working (#22743)

* MM-51804 - add channels lhs not working

* open browse channels directly when user has no channel creation permissions (#22770)

webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
     aria-label="Add Channels Dropdown"
     className="SidebarChannelNavigator__addChannelsCtaLhsButton SidebarChannelNavigator__addChannelsCtaLhsButton--untouched"
     id="addChannelsCta"
+    onClick={[Function]}
   >
     <li
       aria-label="Add channels"
@@ -44,3 +45,23 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
   </Menu>
 </MenuWrapper>
 `;
+
+exports[`components/new_channel_modal should match snapshot when user has only join channel permissions 1`] = `
+<button
+  aria-label="Add Channels Dropdown"
+  className="SidebarChannelNavigator__addChannelsCtaLhsButton SidebarChannelNavigator__addChannelsCtaLhsButton--untouched"
+  id="addChannelsCta"
+  onClick={[Function]}
+>
+  <li
+    aria-label="Add channels"
+  >
+    <i
+      className="icon-plus-box"
+    />
+    <span>
+      Add Channels
+    </span>
+  </li>
+</button>
+`;

webapp/channels/src/components/sidebar/add_channels_cta_button.test.tsx

@@ -80,6 +80,12 @@ describe('components/new_channel_modal', () => {
                         system_user: {
                             permissions: [Permissions.JOIN_PUBLIC_CHANNELS, Permissions.CREATE_PRIVATE_CHANNEL, Permissions.CREATE_PUBLIC_CHANNEL],
                         },
+                        system_user_join_permissions: {
+                            permissions: [Permissions.JOIN_PUBLIC_CHANNELS],
+                        },
+                        system_user_create_public_permissions: {
+                            permissions: [Permissions.JOIN_PUBLIC_CHANNELS, Permissions.CREATE_PUBLIC_CHANNEL],
+                        },
                     },
                 },
             },
@@ -99,6 +105,25 @@ describe('components/new_channel_modal', () => {
         ).toMatchSnapshot();
     });
 
+    test('should match snapshot when user has only join channel permissions', () => {
+        const userWithJoinChannelsPermission = {
+            currentUserId: 'current_user_id',
+            profiles: {
+                current_user_id: {
+                    id: 'current_user_id',
+                    roles: 'system_user_join_permissions',
+                },
+            },
+        } as unknown as UsersState;
+        mockState = {...mockState, entities: {...mockState.entities, users: userWithJoinChannelsPermission}};
+
+        expect(
+            shallow(
+                <AddChannelsCtaButton/>,
+            ),
+        ).toMatchSnapshot();
+    });
+
     test('should find the add channels button when user has permissions', () => {
         const wrapper = mountWithIntl(
             <AddChannelsCtaButton/>,
@@ -145,4 +170,52 @@ describe('components/new_channel_modal', () => {
 
         expect(trackEvent).toHaveBeenCalledWith('ui', 'add_channels_cta_button_clicked');
     });
+
+    test('should not display as a Cta Dropdown when user only has permissions to join channels ', () => {
+        const userWithJoinChannelsPermission = {
+            currentUserId: 'current_user_id',
+            profiles: {
+                current_user_id: {
+                    id: 'current_user_id',
+                    roles: 'system_user_join_permissions',
+                },
+            },
+        } as unknown as UsersState;
+        mockState = {...mockState, entities: {...mockState.entities, users: userWithJoinChannelsPermission}};
+
+        const wrapper = mountWithIntl(
+            <AddChannelsCtaButton/>,
+        );
+
+        // do not find the menu
+        expect(wrapper.find('.AddChannelsCtaDropdown').exists()).toBeFalsy();
+
+        // only find the button
+        const button = wrapper.find('button#addChannelsCta');
+        expect(button.exists()).toBeTruthy();
+
+        button.simulate('click');
+
+        // when clicked show the browse channels modal
+        expect(trackEvent).toHaveBeenCalledWith('ui', 'browse_channels_button_is_clicked');
+    });
+
+    test('should still display as a Cta Dropdown when user has permissions to create at least one form of channel', () => {
+        const userWithJoinChannelsPermission = {
+            currentUserId: 'current_user_id',
+            profiles: {
+                current_user_id: {
+                    id: 'current_user_id',
+                    roles: 'system_user_create_public_permissions',
+                },
+            },
+        } as unknown as UsersState;
+        mockState = {...mockState, entities: {...mockState.entities, users: userWithJoinChannelsPermission}};
+
+        const wrapper = mountWithIntl(
+            <AddChannelsCtaButton/>,
+        );
+
+        expect(wrapper.find('.AddChannelsCtaDropdown').exists()).toBeTruthy();
+    });
 });

webapp/channels/src/components/sidebar/add_channels_cta_button.tsx

@@ -106,8 +106,28 @@ const AddChannelsCtaButton = (): JSX.Element | null => {
         );
     };
 
-    const trackOpen = (opened: boolean) => {
+    const addChannelsButton = (btnCallback?: () => void) => {
-        openAddChannelsCtaOpen(opened);
+        const handleClick = () => btnCallback?.();
+        return (
+            <button
+                className={buttonClass}
+                id={'addChannelsCta'}
+                aria-label={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channels Dropdown'})}
+                onClick={handleClick}
+            >
+                <li
+                    aria-label={intl.formatMessage({id: 'sidebar_left.sidebar_channel_navigator.addChannelsCta', defaultMessage: 'Add channels'})}
+                >
+                    <i className='icon-plus-box'/>
+                    <span>
+                        {intl.formatMessage({id: 'sidebar_left.addChannelsCta', defaultMessage: 'Add Channels'})}
+                    </span>
+                </li>
+            </button>
+        );
+    };
+
+    const storePreferencesAndTrackEvent = () => {
         trackEvent('ui', 'add_channels_cta_button_clicked');
         if (!touchedAddChannelsCtaButton) {
             dispatch(savePreferences(
@@ -122,26 +142,26 @@ const AddChannelsCtaButton = (): JSX.Element | null => {
         }
     };
 
+    const trackOpen = (opened: boolean) => {
+        openAddChannelsCtaOpen(opened);
+        storePreferencesAndTrackEvent();
+    };
+
+    if (!canCreateChannel) {
+        const browseChannelsAction = () => {
+            showMoreChannelsModal();
+            storePreferencesAndTrackEvent();
+        };
+        return addChannelsButton(browseChannelsAction);
+    }
+
     return (
         <MenuWrapper
             className='AddChannelsCtaDropdown'
             onToggle={trackOpen}
             open={isAddChannelCtaOpen}
         >
-            <button
+            {addChannelsButton()}
-                className={buttonClass}
-                id={'addChannelsCta'}
-                aria-label={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channels Dropdown'})}
-            >
-                <li
-                    aria-label={intl.formatMessage({id: 'sidebar_left.sidebar_channel_navigator.addChannelsCta', defaultMessage: 'Add channels'})}
-                >
-                    <i className='icon-plus-box'/>
-                    <span>
-                        {intl.formatMessage({id: 'sidebar_left.addChannelsCta', defaultMessage: 'Add Channels'})}
-                    </span>
-                </li>
-            </button>
             <Menu
                 id='AddChannelCtaDropdown'
                 ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_cta_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channels Dropdown'})}

webapp/channels/src/components/sidebar/sidebar_list/__snapshots__/sidebar_list.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`SidebarList should match snapshot 1`] = `
       renderView={[Function]}
       style={
         Object {
+          "overflow": "initial",
           "position": "absolute",
         }
       }

webapp/channels/src/components/sidebar/sidebar_list/sidebar_list.tsx

@@ -69,7 +69,7 @@ export function renderThumbVertical(props: any) {
     );
 }
 
-const scrollbarStyles: CSSProperties = {position: 'absolute'};
+const scrollbarStyles: CSSProperties = {position: 'absolute', overflow: 'initial'};
 
 type Props = {
     currentTeam: Team;

webapp/channels/src/components/widgets/menu/menu_items/menu_cloud_trial.test.tsx

@@ -205,7 +205,6 @@ describe('components/widgets/menu/menu_items/menu_cloud_trial', () => {
         };
         const store = mockStore(state);
         const wrapper = mountWithIntl(<Provider store={store}><MenuCloudTrial id='menuCloudTrial'/></Provider>);
-        console.log(wrapper.debug());
         expect(wrapper.find('.open-learn-more-trial-modal').exists()).toEqual(true);
     });
 

webapp/channels/src/sass/base/_structure.scss

@@ -160,7 +160,6 @@ body.app__body #root {
             }
             #SidebarContainer.move--right {
                 position: relative;
-                left: 65px;
             }
         }
     }

webapp/channels/src/sass/layout/_sidebar-left.scss

@@ -575,6 +575,19 @@ $sidebarOpacityAnimationDuration: 0.15s;
         }
     }
 
+    @media screen and (min-width: 768px) {
+        .SidebarNavContainer {
+            .scrollbar--view {
+                overflow: initial !important;
+                max-width: 240px;
+            }
+        }
+
+        #SidebarContainer .SidebarChannelGroup .SidebarChannelGroupHeader {
+            max-width: 240px;
+        }
+    }
+
     .SidebarCategory_newLabel {
         display: flex;
         width: 32px;
@@ -741,6 +754,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
     }
 
     .AddChannelsCtaDropdown .dropdown-menu {
+        min-width: 232px !important;
         margin-left: 20px;
     }
 
@@ -748,20 +762,13 @@ $sidebarOpacityAnimationDuration: 0.15s;
     #addChannelsCta {
         display: flex;
         width: 100%;
+        margin-top: -6px;
 
         &:hover {
             background-color: var(--sidebar-text-hover-bg);
         }
     }
 
-    #AddChannelCtaDropdown {
-        position: fixed;
-
-        ul {
-            min-width: 232px !important;
-        }
-    }
-
     .SidebarChannelNavigator_inviteUsersSticky {
         position: absolute;
         z-index: 2;
@@ -1021,7 +1028,6 @@ $sidebarOpacityAnimationDuration: 0.15s;
     /* Channels */
     .SidebarChannel {
         display: flex;
-        overflow: hidden;
         height: 32px;
 
         /* height required for transition animation */