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

MM-62045 Enable eslint-plugin-jsx-a11y and fix occurrences of jsx-a11y/anchor-has-content (#29453)

Просмотр исходного кода 
* Enable eslint-plugin-jsx-a11y and add standard rules as warnings or errors

* Fix jsx-a11y/anchor-has-content in BooleanSetting and add SettingSet

The invisible anchor was presumably supposed to let people jump from one
setting's help text to another setting. That didn't work for boolean
settings because there's no element with the ID of the setting. Instead
of an empty anchor, we needed to give something else that ID.

To improve the semantics of those settings, I also put those settings
into a fieldset with a legend containing the setting's label text
instead of using an actual label element as per how it's done on the
MDN. We'll probably end up using the SettingSet for other settings as
well.

Finally, I also fixed the link used by admin.service.useLetsEncryptDescription.disabled
to point to the right place and made it so that the link would open in
the current tab. Ideally, I'd also remove the Markdown from that help
text, but there's a lot here already.

* Fix jsx-a11y/anchor-has-content in CheckboxSetting

* Use SettingSet in PasswordSettings to improve semantics and layout

The main reason for doing this is to use a proper legend and fieldset
for these settings, but it also has the benefit of removing the extra
spacing from in between these settings.

* Change CopyText to use a button and require an aria-label for it

This fixes two ESLint warnings:
- This was failing jsx-a11y/anchor-has-content because it was an empty
  anchor element. I fixed that by giving it an aria-label matching the
tooltip of the CopyText, but that required that the label was a string,
so I had to change how CopyText is used. I also made the label required
so that people give an accessible explanation of what is being copied.
- This was also failing jsx-a11y/anchor-is-valid because it should be a
  button instead of a link. I applied the btn-link class and made it so
that that doesn't override the link's height which hopefully doesn't
cause problems anywhere else.

This is to fix jsx-a11y/anchor-has-content and jsx-a11y/anchor-is-valid
in the component. The ESLint plugin is complaining that this component
is using an anchor instead of a button element, so I changed that

* Turn jsx-a11y/anchor-has-content to be an error

* Update snapshots

* Remove lingering reference to nested prop which has been removed

* Changing system console password settings to a list and update padding for alerts in it

* Fix typo in SettingSet

* Update E2E tests to enable Elasticsearch by ID and remove duplicate enableElasticSearch helper

* Update E2E test to look for a legend instead of a label

* Fix typo in snapshot
Этот коммит содержится в:
Harrison Healey
2024-12-13 17:04:36 -05:00
коммит произвёл GitHub
родитель 521abfb2e8
Коммит a21d470bee
32 изменённых файлов: 347 добавлений и 267 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

38
e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts
Просмотреть файл

@@ -36,43 +36,6 @@ function createSearchData(prefix: string) {
});
}
function enableElasticSearch() {
// # Enable elastic search via the API
cy.apiUpdateConfig({
ElasticsearchSettings: {
EnableIndexing: true,
EnableSearching: true,
},
} as Cypress.AdminConfig);
// # Navigate to the elastic search setting page
cy.visit('/admin_console/environment/elasticsearch');
cy.get('[data-testid="enableIndexing"] > .col-sm-8 > :nth-child(2)').click();
// * Test the connection and verify that we are successful
cy.contains('button', 'Test Connection').click();
cy.get('.alert-success').should('have.text', 'Test successful. Configuration saved.');
// # Index so we are up to date
cy.contains('button', 'Index Now').click();
// # Small wait to ensure new row is added
cy.wait(TIMEOUTS.ONE_SEC).get('.job-table__table').find('tbody > tr').eq(0).as('firstRow');
// * Newest row should eventually result in Success
const checkFirstRow = () => {
return cy.get('@firstRow').then((el) => {
return el.find('.status-icon-success').length > 0;
});
};
const options = {
timeout: TIMEOUTS.TWO_MIN,
interval: TIMEOUTS.TWO_SEC,
errorMsg: 'Reindex did not succeed in time',
};
cy.waitUntil(checkFirstRow, options);
}
function getTestUsers(prefix = ''): Record<string, SimpleUser> {
if (Cypress.env('searchTestUsers')) {
return JSON.parse(Cypress.env('searchTestUsers'));
@@ -281,7 +244,6 @@ export {
createPrivateChannel,
createPublicChannel,
createSearchData,
enableElasticSearch,
getTestUsers,
getPostTextboxInput,
getQuickChannelSwitcherInput,

2
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/helpers.ts
Просмотреть файл

@@ -82,7 +82,7 @@ export function enableElasticSearch() {
// # Navigate to the elastic search setting page
cy.visit('/admin_console/environment/elasticsearch');
cy.get('[data-testid="enableIndexing"] > .col-sm-8 > :nth-child(2)').click();
cy.get('#enableIndexingtrue').click();
// * Test the connection and verify that we are successful
cy.contains('button', 'Test Connection').click();

2
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/system_console_spec.ts
Просмотреть файл

@@ -29,7 +29,7 @@ describe('Elasticsearch system console', () => {
// # Visit the Elasticsearch settings page
cy.visit('/admin_console/environment/elasticsearch');
cy.get('[data-testid="enableIndexing"] > .col-sm-8 > :nth-child(2)').click();
cy.get('#enableIndexingtrue').click();
// # Enable Auto complete
cy.get('#enableAutocompletetrue').check().should('be.checked');

3
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts
Просмотреть файл

@@ -12,7 +12,8 @@
import {getRandomLetter} from '../../../../utils';
import {doTestQuickChannelSwitcher} from '../../autocomplete/common_test';
import {createSearchData, enableElasticSearch, SimpleUser} from '../../autocomplete/helpers';
import {createSearchData, SimpleUser} from '../../autocomplete/helpers';
import {enableElasticSearch} from './helpers';
describe('Autocomplete with Elasticsearch - Users', () => {
const prefix = getRandomLetter(3);

3
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_message_input_box_spec.ts
Просмотреть файл

@@ -12,7 +12,8 @@
import {getRandomLetter} from '../../../../utils';
import {doTestPostextbox} from '../../autocomplete/common_test';
import {createSearchData, enableElasticSearch, SimpleUser} from '../../autocomplete/helpers';
import {createSearchData, SimpleUser} from '../../autocomplete/helpers';
import {enableElasticSearch} from './helpers';
describe('Autocomplete with Elasticsearch - Users', () => {
const prefix = getRandomLetter(3);

3
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_spec.ts
Просмотреть файл

@@ -13,7 +13,8 @@
import {Team} from '@mattermost/types/teams';
import {getRandomLetter} from '../../../../utils';
import {doTestDMChannelSidebar, doTestUserChannelSection} from '../../autocomplete/common_test';
import {createSearchData, enableElasticSearch, SimpleUser} from '../../autocomplete/helpers';
import {createSearchData, SimpleUser} from '../../autocomplete/helpers';
import {enableElasticSearch} from './helpers';
describe('Autocomplete with Elasticsearch - Users', () => {
const prefix = getRandomLetter(3);

2
e2e-tests/cypress/tests/integration/channels/enterprise/integrations/incoming_webhook_spec.ts
Просмотреть файл

@@ -11,7 +11,7 @@
// Group: @channels @enterprise @elasticsearch @incoming_webhook @not_cloud
import * as TIMEOUTS from '../../../../fixtures/timeouts';
import {enableElasticSearch} from '../../autocomplete/helpers';
import {enableElasticSearch} from '../elasticsearch_autocomplete/helpers';
describe('Incoming webhook', () => {
let testTeam;

2
e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js
Просмотреть файл

@@ -138,7 +138,7 @@ describe('Customization', () => {
cy.findByTestId('TeamSettings.EnableCustomBrand').should('be.visible').within(() => {
// * Verify that setting is visible and matches text content
cy.get('label:first').should('be.visible').and('have.text', 'Enable Custom Branding: ');
cy.get('legend:contains("Enable Custom Branding: ")').should('be.visible');
// * Verify that help setting is visible and matches text content
const content = 'Enable custom branding to show an image of your choice, uploaded below, and some help text, written below, on the login page.';

32
webapp/channels/src/components/admin_console/__snapshots__/checkbox_setting.test.tsx.snap
Просмотреть файл

@@ -2,32 +2,18 @@
exports[`components/admin_console/CheckboxSetting should match snapshot 1`] = `
<div>
<div
class="form-group"
data-testid="string.id"
>
<div
class="col-sm-12"
<div>
<label
class="checkbox-inline"
>
<a
<input
data-testid="string.id"
id="string.id"
name="string.id"
type="checkbox"
/>
<label
class="checkbox-inline"
>
<input
data-testid="string.id"
id="string.id"
name="string.id"
type="checkbox"
/>
some label
</label>
<div
class="help-text"
data-testid="string.idhelp-text"
/>
</div>
some label
</label>
</div>
</div>
`;

30
webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
Просмотреть файл

@@ -2,22 +2,19 @@
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when disabled 1`] = `
<div>
<div
<fieldset
class="form-group"
data-testid="MySetting"
id="MySetting"
>
<label
class="control-label col-sm-4"
for="MySetting"
<legend
class="control-label form-legend col-sm-4"
>
Enable Guest Access:
</label>
</legend>
<div
class="col-sm-8"
>
<a
id="MySetting"
/>
<label
class="Label-eIDBis glIJuw"
>
@@ -56,28 +53,25 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
for which roles can invite guests.
</div>
</div>
</div>
</fieldset>
</div>
`;
exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when enabled 1`] = `
<div>
<div
<fieldset
class="form-group"
data-testid="MySetting"
id="MySetting"
>
<label
class="control-label col-sm-4"
for="MySetting"
<legend
class="control-label form-legend col-sm-4"
>
Enable Guest Access:
</label>
</legend>
<div
class="col-sm-8"
>
<a
id="MySetting"
/>
<label
class="Label-eIDBis glIJuw"
>
@@ -116,6 +110,6 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
for which roles can invite guests.
</div>
</div>
</div>
</fieldset>
</div>
`;

2
webapp/channels/src/components/admin_console/admin_definition.tsx
Просмотреть файл

@@ -761,7 +761,7 @@ const AdminDefinition: AdminDefinitionType = {
key: 'ServiceSettings.UseLetsEncrypt',
label: defineMessage({id: 'admin.service.useLetsEncrypt', defaultMessage: 'Use Let\'s Encrypt:'}),
help_text: defineMessage({id: 'admin.service.useLetsEncryptDescription', defaultMessage: 'Enable the automatic retrieval of certificates from Let\'s Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains.'}),
disabled_help_text: defineMessage({id: 'admin.service.useLetsEncryptDescription.disabled', defaultMessage: "Enable the automatic retrieval of certificates from Let's Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains. This setting cannot be enabled unless the [Forward port 80 to 443](#SystemSettings.Forward80To443) setting is set to true."}),
disabled_help_text: defineMessage({id: 'admin.service.useLetsEncryptDescription.disabled', defaultMessage: "Enable the automatic retrieval of certificates from Let's Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains. This setting cannot be enabled unless the [Forward port 80 to 443](#ServiceSettings.Forward80To443) setting is set to true."}),
disabled_help_text_markdown: true,
isDisabled: it.any(
it.not(it.userHasWritePermissionOnResource(RESOURCE_KEYS.ENVIRONMENT.WEB_SERVER)),

9
webapp/channels/src/components/admin_console/boolean_setting.tsx
Просмотреть файл

@@ -7,7 +7,7 @@ import styled from 'styled-components';
import * as Utils from 'utils/utils';
import Setting from './setting';
import SettingSet from './setting_set';
const Label = styled.label<{isDisabled: boolean}>`
display: inline-flex;
@@ -121,13 +121,12 @@ const BooleanSetting = ({
}, [id, onChange]);
return (
<Setting
<SettingSet
helpText={helptext}
inputId={id}
label={label}
helpText={helptext}
setByEnv={setByEnv}
>
<a id={id}/>
<Label isDisabled={disabled || setByEnv}>
<input
data-testid={id + 'true'}
@@ -154,7 +153,7 @@ const BooleanSetting = ({
/>
{falseText}
</Label>
</Setting>
</SettingSet>
);
};

30
webapp/channels/src/components/admin_console/checkbox_setting.tsx
Просмотреть файл

@@ -3,7 +3,7 @@
import React from 'react';
import Setting from './setting';
import SetByEnv from './set_by_env';
type Props = {
id: string;
@@ -12,8 +12,6 @@ type Props = {
onChange: (id: string, foo: boolean) => void;
disabled: boolean;
setByEnv: boolean;
disabledText?: React.ReactNode;
helpText?: React.ReactNode;
}
export default class CheckboxSetting extends React.PureComponent<Props> {
@@ -26,29 +24,8 @@ export default class CheckboxSetting extends React.PureComponent<Props> {
};
public render() {
let helpText;
if (this.props.disabled && this.props.disabledText) {
helpText = (
<div>
<span className='admin-console__disabled-text'>
{this.props.disabledText}
</span>
{this.props.helpText}
</div>
);
} else {
helpText = this.props.helpText;
}
return (
<Setting
inputId={this.props.id}
label={this.props.label}
helpText={helpText}
setByEnv={this.props.setByEnv}
nested={true}
>
<a id={this.props.id}/>
<div>
<label className='checkbox-inline'>
<input
data-testid={this.props.id}
@@ -61,7 +38,8 @@ export default class CheckboxSetting extends React.PureComponent<Props> {
/>
{this.props.label}
</label>
</Setting>
{this.props.setByEnv ? <SetByEnv/> : null}
</div>
);
}
}

104
webapp/channels/src/components/admin_console/password_settings.tsx
Просмотреть файл

@@ -16,7 +16,7 @@ import BooleanSetting from './boolean_setting';
import CheckboxSetting from './checkbox_setting';
import type {BaseProps, BaseState} from './old_admin_settings';
import OLDAdminSettings from './old_admin_settings';
import Setting from './setting';
import SettingSet from './setting_set';
import SettingsGroup from './settings_group';
import TextSetting from './text_setting';
@@ -199,57 +199,59 @@ export default class PasswordSettings extends OLDAdminSettings<Props, State> {
setByEnv={this.isSetByEnv('PasswordSettings.MinimumLength')}
disabled={this.props.isDisabled}
/>
<Setting
<SettingSet
label={<FormattedMessage {...messages.passwordRequirements}/>}
>
<div>
<CheckboxSetting
id='admin.password.lowercase'
label={
<FormattedMessage {...messages.lowercase}/>
}
defaultChecked={this.state.passwordLowercase}
onChange={this.handleBooleanChange('passwordLowercase')}
setByEnv={this.isSetByEnv('PasswordSettings.Lowercase')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.uppercase'
label={
<FormattedMessage {...messages.uppercase}/>
}
defaultChecked={this.state.passwordUppercase}
onChange={this.handleBooleanChange('passwordUppercase')}
setByEnv={this.isSetByEnv('PasswordSettings.Uppercase')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.number'
label={
<FormattedMessage {...messages.number}/>
}
defaultChecked={this.state.passwordNumber}
onChange={this.handleBooleanChange('passwordNumber')}
setByEnv={this.isSetByEnv('PasswordSettings.Number')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.symbol'
label={
<FormattedMessage {...messages.symbol}/>
}
defaultChecked={this.state.passwordSymbol}
onChange={this.handleBooleanChange('passwordSymbol')}
setByEnv={this.isSetByEnv('PasswordSettings.Symbol')}
disabled={this.props.isDisabled}
/>
</div>
<ul className='admin-console__checkbox-list'>
<div>
<CheckboxSetting
id='admin.password.lowercase'
label={
<FormattedMessage {...messages.lowercase}/>
}
defaultChecked={this.state.passwordLowercase}
onChange={this.handleBooleanChange('passwordLowercase')}
setByEnv={this.isSetByEnv('PasswordSettings.Lowercase')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.uppercase'
label={
<FormattedMessage {...messages.uppercase}/>
}
defaultChecked={this.state.passwordUppercase}
onChange={this.handleBooleanChange('passwordUppercase')}
setByEnv={this.isSetByEnv('PasswordSettings.Uppercase')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.number'
label={
<FormattedMessage {...messages.number}/>
}
defaultChecked={this.state.passwordNumber}
onChange={this.handleBooleanChange('passwordNumber')}
setByEnv={this.isSetByEnv('PasswordSettings.Number')}
disabled={this.props.isDisabled}
/>
</div>
<div>
<CheckboxSetting
id='admin.password.symbol'
label={
<FormattedMessage {...messages.symbol}/>
}
defaultChecked={this.state.passwordSymbol}
onChange={this.handleBooleanChange('passwordSymbol')}
setByEnv={this.isSetByEnv('PasswordSettings.Symbol')}
disabled={this.props.isDisabled}
/>
</div>
</ul>
<div>
<br/>
<label>
@@ -258,7 +260,7 @@ export default class PasswordSettings extends OLDAdminSettings<Props, State> {
<br/>
{this.getSampleErrorMsg()}
</div>
</Setting>
</SettingSet>
</div>
{!this.props.config.ExperimentalSettings?.RestrictSystemAdmin &&
(

23
webapp/channels/src/components/admin_console/setting.tsx
Просмотреть файл

@@ -1,7 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import classNames from 'classnames';
import React from 'react';
import SetByEnv from './set_by_env';
@@ -12,28 +11,22 @@ export type Props = {
children?: React.ReactNode;
helpText?: React.ReactNode;
setByEnv?: boolean;
nested?: boolean;
}
const Settings = ({children, setByEnv, helpText, inputId, label, nested = false}: Props) => {
const Settings = ({children, setByEnv, helpText, inputId, label}: Props) => {
return (
<div
data-testid={inputId}
className='form-group'
>
{!nested && (
<label
className='control-label col-sm-4'
htmlFor={inputId}
>
{label}
</label>
)}
<label
className='control-label col-sm-4'
htmlFor={inputId}
>
{label}
</label>
<div
className={classNames({
'col-sm-8': nested === false,
'col-sm-12': nested === true,
})}
className='col-sm-8'
>
{children}
<div

39
webapp/channels/src/components/admin_console/setting_set.tsx Обычный файл
Просмотреть файл

@@ -0,0 +1,39 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import SetByEnv from './set_by_env';
import type {Props} from './setting';
export default function SettingSet({
children,
helpText,
inputId,
label,
setByEnv,
}: Props) {
return (
<fieldset
data-testid={inputId}
id={inputId}
className='form-group'
>
<legend className='control-label form-legend col-sm-4'>
{label}
</legend>
<div className='col-sm-8'>
{children}
{helpText ? (
<div
data-testid={inputId + 'help-text'}
className='help-text'
>
{helpText}
</div>
) : null}
{setByEnv ? <SetByEnv/> : null}
</div>
</fieldset>
);
}

27
webapp/channels/src/components/copy_text.tsx
Просмотреть файл

@@ -1,24 +1,26 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import type {ReactNode} from 'react';
import React, {useCallback} from 'react';
import {FormattedMessage} from 'react-intl';
import type {MessageDescriptor} from 'react-intl';
import {useIntl} from 'react-intl';
import WithTooltip from 'components/with_tooltip';
import {copyToClipboard} from 'utils/utils';
type Props = {
label: MessageDescriptor;
value: string;
tooltip?: ReactNode;
};
const CopyText = ({
label,
value,
tooltip,
}: Props) => {
const copyText = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
const intl = useIntl();
const copyText = useCallback((e: React.MouseEvent) => {
e.preventDefault();
copyToClipboard(value);
}, [value]);
@@ -31,19 +33,12 @@ const CopyText = ({
<WithTooltip
id='copyTextTooltip'
placement='top'
title={
tooltip || (
<FormattedMessage
id='copyTextTooltip.copy'
defaultMessage='Copy'
/>
)
}
title={label}
>
<a
href='#'
<button
data-testid='copyText'
className='fa fa-copy ml-2'
className='btn btn-link fa fa-copy ml-2'
aria-label={intl.formatMessage(label)}
onClick={copyText}
/>
</WithTooltip>

24
webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap
Просмотреть файл

@@ -80,6 +80,12 @@ exports[`components/integrations/InstalledCommand should call onDelete function
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="testToken"
/>
</span>
@@ -186,6 +192,12 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="testToken"
/>
</span>
@@ -262,6 +274,12 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = `
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="testToken"
/>
</span>
@@ -336,6 +354,12 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="testToken"
/>
</span>

6
webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap
Просмотреть файл

@@ -64,6 +64,12 @@ exports[`components/integrations/InstalledIncomingWebhook should match snapshot
/>
<span>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy URL",
"id": "integrations.copy_url",
}
}
value="http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r"
/>
</span>

6
webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap
Просмотреть файл

@@ -133,6 +133,12 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="xoxz1z7c3tgi9xhrfudn638q9r"
/>
</span>

38
webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap
Просмотреть файл

@@ -57,6 +57,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, comma
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="jb6oyqh95irpbx8fo9zmndkp1r"
/>
</p>
@@ -134,6 +140,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic"
/>
</p>
@@ -213,11 +225,11 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
}
/>
<Memo(CopyText)
tooltip={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy Client Id"
id="integrations.copy_client_id"
/>
label={
Object {
"defaultMessage": "Copy Client Id",
"id": "integrations.copy_client_id",
}
}
value="r5tpgt4iepf45jt768jz84djic"
/>
@@ -233,11 +245,11 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
}
/>
<Memo(CopyText)
tooltip={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy Client Secret"
id="integrations.copy_client_secret"
/>
label={
Object {
"defaultMessage": "Copy Client Secret",
"id": "integrations.copy_client_secret",
}
}
value="<==secret==>"
/>
@@ -340,6 +352,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
}
/>
<Memo(CopyText)
label={
Object {
"defaultMessage": "Copy Token",
"id": "integrations.copy_token",
}
}
value="jb6oyqh95irpbx8fo9zmndkp1r"
/>
</p>

62
webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
Просмотреть файл

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React, {useEffect} from 'react';
import {FormattedMessage} from 'react-intl';
import {defineMessages, FormattedMessage} from 'react-intl';
import {Link, useHistory} from 'react-router-dom';
import type {Bot} from '@mattermost/types/bots';
@@ -96,7 +96,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
b: (chunks: string) => <b>{chunks}</b>,
}}
/>
<CopyText value={commandToken}/>
<CopyText
label={messages.copyToken}
value={commandToken}
/>
</p>
);
} else if (type === Constants.Integrations.INCOMING_WEBHOOK && incomingHook) {
@@ -136,7 +139,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
b: (chunks: string) => <b>{chunks}</b>,
}}
/>
<CopyText value={incomingHookToken}/>
<CopyText
label={messages.copyToken}
value={incomingHookToken}
/>
</p>
);
} else if (type === Constants.Integrations.OUTGOING_WEBHOOK && outgoingHook) {
@@ -176,7 +182,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
b: (chunks: string) => <b>{chunks}</b>,
}}
/>
<CopyText value={outgoingHookToken}/>
<CopyText
label={messages.copyToken}
value={outgoingHookToken}
/>
</p>
);
} else if (type === Constants.Integrations.OAUTH_APP && oauthApp) {
@@ -220,12 +229,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
}}
/>
<CopyText
tooltip={
<FormattedMessage
id='integrations.copy_client_id'
defaultMessage='Copy Client Id'
/>
}
label={messages.copyClientId}
value={oauthAppToken}
/>
<br/>
@@ -238,12 +242,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
}}
/>
<CopyText
tooltip={
<FormattedMessage
id='integrations.copy_client_secret'
defaultMessage='Copy Client Secret'
/>
}
label={messages.copyClientSecret}
value={oauthAppSecret}
/>
</p>,
@@ -336,12 +335,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
}}
/>
<CopyText
tooltip={
<FormattedMessage
id='integrations.copy_username'
defaultMessage='Copy Username'
/>
}
label={messages.copyUsername}
value={username || ''}
/>
<br/>
@@ -420,7 +414,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
b: (chunks: string) => <b>{chunks}</b>,
}}
/>
<CopyText value={botToken}/>
<CopyText
label={messages.copyToken}
value={botToken}
/>
<br/>
<br/>
<FormattedMessage
@@ -485,4 +482,23 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
);
};
const messages = defineMessages({
copyClientId: {
id: 'integrations.copy_client_id',
defaultMessage: 'Copy Client Id',
},
copyClientSecret: {
id: 'integrations.copy_client_secret',
defaultMessage: 'Copy Client Secret',
},
copyToken: {
id: 'integrations.copy_token',
defaultMessage: 'Copy Token',
},
copyUsername: {
id: 'integrations.copy_username',
defaultMessage: 'Copy Username',
},
});
export default ConfirmIntegration;

6
webapp/channels/src/components/integrations/installed_command.tsx
Просмотреть файл

@@ -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 {Link} from 'react-router-dom';
import type {Command} from '@mattermost/types/integrations';
@@ -170,6 +170,10 @@ export default class InstalledCommand extends React.PureComponent<Props> {
}}
/>
<CopyText
label={defineMessage({
id: 'integrations.copy_token',
defaultMessage: 'Copy Token',
})}
value={commandToken}
/>
</span>

6
webapp/channels/src/components/integrations/installed_incoming_webhook.tsx
Просмотреть файл

@@ -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 {Link} from 'react-router-dom';
import type {Channel} from '@mattermost/types/channels';
@@ -160,6 +160,10 @@ export default class InstalledIncomingWebhook extends React.PureComponent<Props>
/>
<span>
<CopyText
label={defineMessage({
id: 'integrations.copy_url',
defaultMessage: 'Copy URL',
})}
value={incomingWebhookId}
/>
</span>

30
webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap
Просмотреть файл

@@ -111,11 +111,11 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
facxd9wpzpbpfp8pad78xj75pr
</strong>
<Memo(CopyText)
tooltip={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy Client Id"
id="integrations.copy_client_id"
/>
label={
Object {
"defaultMessage": "Copy Client Id",
"id": "integrations.copy_client_id",
}
}
value="facxd9wpzpbpfp8pad78xj75pr"
/>
@@ -339,11 +339,11 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
facxd9wpzpbpfp8pad78xj75pr
</strong>
<Memo(CopyText)
tooltip={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy Client Id"
id="integrations.copy_client_id"
/>
label={
Object {
"defaultMessage": "Copy Client Id",
"id": "integrations.copy_client_id",
}
}
value="facxd9wpzpbpfp8pad78xj75pr"
/>
@@ -515,11 +515,11 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
facxd9wpzpbpfp8pad78xj75pr
</strong>
<Memo(CopyText)
tooltip={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy Client Id"
id="integrations.copy_client_id"
/>
label={
Object {
"defaultMessage": "Copy Client Id",
"id": "integrations.copy_client_id",
}
}
value="facxd9wpzpbpfp8pad78xj75pr"
/>

27
webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
Просмотреть файл

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {defineMessages, FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
import type {OAuthApp} from '@mattermost/types/integrations';
@@ -217,12 +217,7 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
/>
<strong>{this.state.clientSecret}</strong>
<CopyText
tooltip={
<FormattedMessage
id='integrations.copy_client_secret'
defaultMessage='Copy Client Secret'
/>
}
label={messages.copyClientSecret}
value={this.state.clientSecret}
/>
</span>
@@ -312,12 +307,7 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
/>
<strong>{oauthApp.id}</strong>
<CopyText
tooltip={
<FormattedMessage
id='integrations.copy_client_id'
defaultMessage='Copy Client Id'
/>
}
label={messages.copyClientId}
value={oauthApp.id}
/>
</span>
@@ -360,3 +350,14 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
);
}
}
const messages = defineMessages({
copyClientId: {
id: 'integrations.copy_client_id',
defaultMessage: 'Copy Client Id',
},
copyClientSecret: {
id: 'integrations.copy_client_secret',
defaultMessage: 'Copy Client Secret',
},
});

6
webapp/channels/src/components/integrations/installed_outgoing_webhook.tsx
Просмотреть файл

@@ -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 {Link} from 'react-router-dom';
import type {Channel} from '@mattermost/types/channels';
@@ -234,6 +234,10 @@ export default class InstalledOutgoingWebhook extends React.PureComponent<Props>
}}
/>
<CopyText
label={defineMessage({
id: 'integrations.copy_token',
defaultMessage: 'Copy Token',
})}
value={outgoingWebhook.token}
/>
</span>

5
webapp/channels/src/i18n/en.json
Просмотреть файл

@@ -2401,7 +2401,7 @@
"admin.service.tlsKeyFileDescription": "The private key file to use.",
"admin.service.useLetsEncrypt": "Use Let's Encrypt:",
"admin.service.useLetsEncryptDescription": "Enable the automatic retrieval of certificates from Let's Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains.",
"admin.service.useLetsEncryptDescription.disabled": "Enable the automatic retrieval of certificates from Let's Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains.\n \nThis setting cannot be enabled unless the [Forward port 80 to 443](#SystemSettings.Forward80To443) setting is set to true.",
"admin.service.useLetsEncryptDescription.disabled": "Enable the automatic retrieval of certificates from Let's Encrypt. The certificate will be retrieved when a client attempts to connect from a new domain. This will work with multiple domains.\n \nThis setting cannot be enabled unless the [Forward port 80 to 443](#ServiceSettings.Forward80To443) setting is set to true.",
"admin.service.userAccessTokensDescription": "When true, users can create <link>user access tokens</link> for integrations in <strong>Profile > Security</strong>. They can be used to authenticate against the API and give full access to the account.\n\n To manage who can create personal access tokens or to search users by token ID, go to <strong>System Console > User Management > Users</strong>.",
"admin.service.userAccessTokensTitle": "Enable Personal Access Tokens: ",
"admin.service.webhooksDescription": "When true, incoming webhooks will be allowed. To help combat phishing attacks, all posts from webhooks will be labelled by a BOT tag. See <link>documentation</link> to learn more.",
@@ -3469,7 +3469,6 @@
"copy_text.copy": "Copy",
"copy.code.message": "Copy code",
"copy.text.message": "Copy text",
"copyTextTooltip.copy": "Copy",
"create_category_modal.create": "Create",
"create_category_modal.createCategory": "Create New Category",
"create_comment.addComment": "Reply to this thread...",
@@ -4073,6 +4072,8 @@
"integrations.command.title": "Slash Commands",
"integrations.copy_client_id": "Copy Client Id",
"integrations.copy_client_secret": "Copy Client Secret",
"integrations.copy_token": "Copy Token",
"integrations.copy_url": "Copy URL",
"integrations.copy_username": "Copy Username",
"integrations.delete.confirm.button": "Yes, delete it",
"integrations.delete.confirm.title": "Delete Integration",

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

@@ -190,6 +190,7 @@ button {
}
&.btn-link {
height: initial;
padding: 0;
border: none;
background: transparent;

11
webapp/channels/src/sass/routes/_admin-console.scss
Просмотреть файл

@@ -64,6 +64,17 @@
max-width: 920px;
}
.admin-console__checkbox-list {
padding: 0;
margin: 0;
list-style: none;
li > .alert {
margin-top: 4px;
margin-bottom: 10px;
}
}
mark {
border-radius: 5%;
background-color: variables.$highlight-color;

2
webapp/channels/src/utils/url.tsx
Просмотреть файл

@@ -241,7 +241,7 @@ export function mightTriggerExternalRequest(url: string, siteURL?: string): bool
}
export function isInternalURL(url: string, siteURL?: string): boolean {
return url.startsWith(siteURL || '') || url.startsWith('/');
return url.startsWith(siteURL || '') || url.startsWith('/') || url.startsWith('#');
}
export function shouldOpenInNewTab(url: string, siteURL?: string, managedResourcePaths?: string[]): boolean {

33
webapp/platform/eslint-plugin/configs/.eslintrc-react.json
Просмотреть файл

@@ -4,6 +4,7 @@
"plugin:react-hooks/recommended"
],
"plugins": [
"jsx-a11y",
"react"
],
"settings": {
@@ -13,6 +14,38 @@
}
},
"rules": {
"jsx-a11y/alt-text": "warn",
"jsx-a11y/anchor-has-content": "error",
"jsx-a11y/anchor-is-valid": "warn",
"jsx-a11y/aria-activedescendant-has-tabindex": "error",
"jsx-a11y/aria-props": "error",
"jsx-a11y/aria-proptypes": "error",
"jsx-a11y/aria-role": "error",
"jsx-a11y/aria-unsupported-elements": "error",
"jsx-a11y/autocomplete-valid": "error",
"jsx-a11y/click-events-have-key-events": "warn",
"jsx-a11y/heading-has-content": "error",
"jsx-a11y/html-has-lang": "error",
"jsx-a11y/iframe-has-title": "warn",
"jsx-a11y/img-redundant-alt": "warn",
"jsx-a11y/interactive-supports-focus": "warn",
"jsx-a11y/label-has-associated-control": "warn",
"jsx-a11y/media-has-caption": "warn",
"jsx-a11y/mouse-events-have-key-events": "warn",
"jsx-a11y/no-access-key": "error",
"jsx-a11y/no-aria-hidden-on-focusable": "error",
"jsx-a11y/no-autofocus": "warn",
"jsx-a11y/no-distracting-elements": "error",
"jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
"jsx-a11y/no-noninteractive-element-interactions": "warn",
"jsx-a11y/no-noninteractive-element-to-interactive-role": "warn",
"jsx-a11y/no-noninteractive-tabindex": "warn",
"jsx-a11y/no-redundant-roles": "warn",
"jsx-a11y/no-static-element-interactions": "warn",
"jsx-a11y/role-has-required-aria-props": "warn",
"jsx-a11y/role-supports-aria-props": "warn",
"jsx-a11y/scope": "error",
"jsx-a11y/tabindex-no-positive": "warn",
"react/display-name": [
0,
{