mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
[MM-61683]: Ensure radio button groups are properly formed (#30013)
* MM-61683: Ensure radio button groups are properly formed * MM-61683: Fix the failing i18 CI * MM-61683: Fix desktop notification translation IDs * MM-61683: Fix lint-style * MM-61683: Update name attribute inside channel notification modal Add aria-label inside RadioSettingItem Update snapshot * MM-61683: Revert creating a constant for default messages and id * MM-61683: Add legend tag inside radio setting item component * MM-61683: Update snapshot --------- Co-authored-by: Saurabh Sharma <saurabh.sharma@brightscout.com> Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
ayush-chauhan233
GitHub
parent
d3dcc74e5a
commit
9aaa52136c
@ -201,6 +201,11 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
@ -208,7 +213,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="desktopNotification-all"
|
||||
id="desktopNotification-all"
|
||||
name="desktopNotification-all"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -221,7 +226,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-mention"
|
||||
id="desktopNotification-mention"
|
||||
name="desktopNotification-mention"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -233,7 +238,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-none"
|
||||
id="desktopNotification-none"
|
||||
name="desktopNotification-none"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
@ -637,6 +642,11 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
@ -644,7 +654,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="desktopNotification-all"
|
||||
id="desktopNotification-all"
|
||||
name="desktopNotification-all"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -657,7 +667,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-mention"
|
||||
id="desktopNotification-mention"
|
||||
name="desktopNotification-mention"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -669,7 +679,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-none"
|
||||
id="desktopNotification-none"
|
||||
name="desktopNotification-none"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
@ -836,13 +846,18 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
<input
|
||||
data-testid="MobileNotification-all"
|
||||
id="MobileNotification-all"
|
||||
name="MobileNotification-all"
|
||||
name="push"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -855,7 +870,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="MobileNotification-mention"
|
||||
id="MobileNotification-mention"
|
||||
name="MobileNotification-mention"
|
||||
name="push"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -868,7 +883,7 @@ Object {
|
||||
<input
|
||||
data-testid="MobileNotification-none"
|
||||
id="MobileNotification-none"
|
||||
name="MobileNotification-none"
|
||||
name="push"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
@ -1530,6 +1545,11 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
@ -1537,7 +1557,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="desktopNotification-all"
|
||||
id="desktopNotification-all"
|
||||
name="desktopNotification-all"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -1550,7 +1570,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-mention"
|
||||
id="desktopNotification-mention"
|
||||
name="desktopNotification-mention"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -1562,7 +1582,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-none"
|
||||
id="desktopNotification-none"
|
||||
name="desktopNotification-none"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
@ -2047,6 +2067,11 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
@ -2054,7 +2079,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="desktopNotification-all"
|
||||
id="desktopNotification-all"
|
||||
name="desktopNotification-all"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -2067,7 +2092,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-mention"
|
||||
id="desktopNotification-mention"
|
||||
name="desktopNotification-mention"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -2079,7 +2104,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-none"
|
||||
id="desktopNotification-none"
|
||||
name="desktopNotification-none"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
@ -2564,6 +2589,11 @@ Object {
|
||||
<fieldset
|
||||
class="mm-modal-generic-section-item__fieldset-radio"
|
||||
>
|
||||
<legend
|
||||
class="hidden-label"
|
||||
>
|
||||
Notify me about…
|
||||
</legend>
|
||||
<label
|
||||
class="mm-modal-generic-section-item__label-radio"
|
||||
>
|
||||
@ -2571,7 +2601,7 @@ Object {
|
||||
checked=""
|
||||
data-testid="desktopNotification-all"
|
||||
id="desktopNotification-all"
|
||||
name="desktopNotification-all"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="all"
|
||||
/>
|
||||
@ -2584,7 +2614,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-mention"
|
||||
id="desktopNotification-mention"
|
||||
name="desktopNotification-mention"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="mention"
|
||||
/>
|
||||
@ -2596,7 +2626,7 @@ Object {
|
||||
<input
|
||||
data-testid="desktopNotification-none"
|
||||
id="desktopNotification-none"
|
||||
name="desktopNotification-none"
|
||||
name="desktop"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
|
||||
@ -240,22 +240,22 @@ export default function ChannelNotificationsModal(props: Props) {
|
||||
handleChange={(e) => handleChange({push: e.target.value})}
|
||||
/>
|
||||
{props.collapsedReplyThreads && settings.push === 'mention' &&
|
||||
<CheckboxSettingItem
|
||||
dataTestId='mobile-reply-threads-checkbox-section'
|
||||
title={formatMessage({
|
||||
id: 'channel_notifications.ThreadsReplyTitle',
|
||||
defaultMessage: 'Thread reply notifications',
|
||||
})}
|
||||
inputFieldTitle={
|
||||
<FormattedMessage
|
||||
id='channel_notifications.checkbox.threadsReplyTitle'
|
||||
defaultMessage="Notify me about replies to threads I\'m following"
|
||||
/>
|
||||
}
|
||||
inputFieldValue={settings.push_threads === 'all'}
|
||||
inputFieldData={utils.MobileReplyThreadsInputFieldData}
|
||||
handleChange={(e) => handleChange({push_threads: e ? 'all' : 'mention'})}
|
||||
/>}
|
||||
<CheckboxSettingItem
|
||||
dataTestId='mobile-reply-threads-checkbox-section'
|
||||
title={formatMessage({
|
||||
id: 'channel_notifications.ThreadsReplyTitle',
|
||||
defaultMessage: 'Thread reply notifications',
|
||||
})}
|
||||
inputFieldTitle={
|
||||
<FormattedMessage
|
||||
id='channel_notifications.checkbox.threadsReplyTitle'
|
||||
defaultMessage="Notify me about replies to threads I\'m following"
|
||||
/>
|
||||
}
|
||||
inputFieldValue={settings.push_threads === 'all'}
|
||||
inputFieldData={utils.MobileReplyThreadsInputFieldData}
|
||||
handleChange={(e) => handleChange({push_threads: e ? 'all' : 'mention'})}
|
||||
/>}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import {defineMessage, FormattedMessage} from 'react-intl';
|
||||
|
||||
import type {FieldsetCheckbox} from 'components/widgets/modals/components/checkbox_setting_item';
|
||||
import type {FieldsetRadio} from 'components/widgets/modals/components/radio_setting_item';
|
||||
@ -41,69 +41,70 @@ export const AutoFollowThreadsInputFieldData: FieldsetCheckbox = {
|
||||
dataTestId: 'autoFollowThreads',
|
||||
};
|
||||
|
||||
export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.ALL}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.allMessages'
|
||||
defaultMessage='All new messages {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.ALL ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `desktopNotification-${NotificationLevels.ALL}`,
|
||||
key: `desktopNotification-${NotificationLevels.ALL}`,
|
||||
value: NotificationLevels.ALL,
|
||||
},
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.MENTION}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.mention'
|
||||
defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.MENTION ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `desktopNotification-${NotificationLevels.MENTION}`,
|
||||
key: `desktopNotification-${NotificationLevels.MENTION}`,
|
||||
value: NotificationLevels.MENTION,
|
||||
},
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.NONE}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.nothing'
|
||||
defaultMessage='Nothing {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.NONE ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `desktopNotification-${NotificationLevels.NONE}`,
|
||||
key: `desktopNotification-${NotificationLevels.NONE}`,
|
||||
value: NotificationLevels.NONE,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const defaultMessage = defineMessage({
|
||||
id: 'channel_notifications.default',
|
||||
defaultMessage: '(default)',
|
||||
});
|
||||
|
||||
export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
|
||||
options: [
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.ALL}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.allMessages'
|
||||
defaultMessage='All new messages {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.ALL ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'desktop',
|
||||
key: `desktopNotification-${NotificationLevels.ALL}`,
|
||||
value: NotificationLevels.ALL,
|
||||
},
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.MENTION}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.mention'
|
||||
defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.MENTION ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'desktop',
|
||||
key: `desktopNotification-${NotificationLevels.MENTION}`,
|
||||
value: NotificationLevels.MENTION,
|
||||
},
|
||||
{
|
||||
dataTestId: `desktopNotification-${NotificationLevels.NONE}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.desktopNotification.nothing'
|
||||
defaultMessage='Nothing {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.NONE ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'desktop',
|
||||
key: `desktopNotification-${NotificationLevels.NONE}`,
|
||||
value: NotificationLevels.NONE,
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
export const desktopNotificationSoundsCheckboxFieldData: FieldsetCheckbox = {
|
||||
name: 'desktopNotificationSoundsCheckbox',
|
||||
@ -116,69 +117,66 @@ export const desktopNotificationSoundsSelectFieldData: FieldsetReactSelect = {
|
||||
options: optionsOfMessageNotificationSoundsSelect,
|
||||
};
|
||||
|
||||
export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.ALL}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.mobileNotification.newMessages'
|
||||
defaultMessage='All new messages {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.ALL ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `MobileNotification-${NotificationLevels.ALL}`,
|
||||
key: `MobileNotification-${NotificationLevels.ALL}`,
|
||||
value: NotificationLevels.ALL,
|
||||
},
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.MENTION}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.mobileNotification.mention'
|
||||
defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.MENTION ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `MobileNotification-${NotificationLevels.MENTION}`,
|
||||
key: `MobileNotification-${NotificationLevels.MENTION}`,
|
||||
value: NotificationLevels.MENTION,
|
||||
},
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.NONE}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.mobileNotification.nothing'
|
||||
defaultMessage='Nothing {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.NONE ? (
|
||||
<FormattedMessage
|
||||
id='channel_notifications.default'
|
||||
defaultMessage='(default)'
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: `MobileNotification-${NotificationLevels.NONE}`,
|
||||
key: `MobileNotification-${NotificationLevels.NONE}`,
|
||||
value: NotificationLevels.NONE,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
|
||||
options: [
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.ALL}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.mobileNotification.newMessages'
|
||||
defaultMessage='All new messages {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.ALL ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'push',
|
||||
key: `MobileNotification-${NotificationLevels.ALL}`,
|
||||
value: NotificationLevels.ALL,
|
||||
},
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.MENTION}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
|
||||
id='channelNotifications.mobileNotification.mention'
|
||||
defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.MENTION ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'push',
|
||||
key: `MobileNotification-${NotificationLevels.MENTION}`,
|
||||
value: NotificationLevels.MENTION,
|
||||
},
|
||||
{
|
||||
dataTestId: `MobileNotification-${NotificationLevels.NONE}`,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id='channelNotifications.mobileNotification.nothing'
|
||||
defaultMessage='Nothing {optionalDefault}'
|
||||
values={{
|
||||
optionalDefault: defaultOption === NotificationLevels.NONE ? (
|
||||
<FormattedMessage
|
||||
{...defaultMessage}
|
||||
/>) : undefined,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
name: 'push',
|
||||
key: `MobileNotification-${NotificationLevels.NONE}`,
|
||||
value: NotificationLevels.NONE,
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
export default {
|
||||
desktopNotificationInputFieldData,
|
||||
|
||||
@ -54,7 +54,12 @@ function RadioSettingItem({
|
||||
});
|
||||
|
||||
const content = (
|
||||
<fieldset className='mm-modal-generic-section-item__fieldset-radio'>
|
||||
<fieldset
|
||||
className='mm-modal-generic-section-item__fieldset-radio'
|
||||
>
|
||||
<legend className='hidden-label'>
|
||||
{title}
|
||||
</legend>
|
||||
{[...fields]}
|
||||
</fieldset>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user