mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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)
Этот коммит содержится в:
Pablo Andrés Vélez Vidal
2023-04-03 19:29:24 +02:00
коммит произвёл GitHub
родитель 8f9cde83b0
Коммит 1762dfce22
8 изменённых файлов: 147 добавлений и 28 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

21
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>
`;

73
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();
});
});

52
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 (
<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
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>
{addChannelsButton()}
<Menu
id='AddChannelCtaDropdown'
ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_cta_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channels Dropdown'})}

1
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",
}
}

2
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;

1
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);
});

1
webapp/channels/src/sass/base/_structure.scss
Просмотреть файл

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

24
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 */