diff --git a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap b/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap index 59e9f3bbdd..893aaa0ffe 100644 --- a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap +++ b/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]} >
  • `; + +exports[`components/new_channel_modal should match snapshot when user has only join channel permissions 1`] = ` + +`; diff --git a/webapp/channels/src/components/sidebar/add_channels_cta_button.test.tsx b/webapp/channels/src/components/sidebar/add_channels_cta_button.test.tsx index 6066f4dcd3..68ab7ed614 100644 --- a/webapp/channels/src/components/sidebar/add_channels_cta_button.test.tsx +++ b/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( + , + ), + ).toMatchSnapshot(); + }); + test('should find the add channels button when user has permissions', () => { const wrapper = mountWithIntl( , @@ -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( + , + ); + + // 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( + , + ); + + expect(wrapper.find('.AddChannelsCtaDropdown').exists()).toBeTruthy(); + }); }); diff --git a/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx b/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx index 964bc81c4b..d3f1244edd 100644 --- a/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx +++ b/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx @@ -106,8 +106,28 @@ const AddChannelsCtaButton = (): JSX.Element | null => { ); }; - const trackOpen = (opened: boolean) => { - openAddChannelsCtaOpen(opened); + const addChannelsButton = (btnCallback?: () => void) => { + const handleClick = () => btnCallback?.(); + return ( + + ); + }; + + 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 ( - + {addChannelsButton()} { }; const store = mockStore(state); const wrapper = mountWithIntl(); - console.log(wrapper.debug()); expect(wrapper.find('.open-learn-more-trial-modal').exists()).toEqual(true); }); diff --git a/webapp/channels/src/sass/base/_structure.scss b/webapp/channels/src/sass/base/_structure.scss index 0ec379a86d..7171f80757 100644 --- a/webapp/channels/src/sass/base/_structure.scss +++ b/webapp/channels/src/sass/base/_structure.scss @@ -160,7 +160,6 @@ body.app__body #root { } #SidebarContainer.move--right { position: relative; - left: 65px; } } } diff --git a/webapp/channels/src/sass/layout/_sidebar-left.scss b/webapp/channels/src/sass/layout/_sidebar-left.scss index c670182893..9193927337 100644 --- a/webapp/channels/src/sass/layout/_sidebar-left.scss +++ b/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 */