From a21d470beea57792e115f4098d5f379a0cf69a92 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 13 Dec 2024 17:04:36 -0500 Subject: [PATCH] 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 --- .../channels/autocomplete/helpers.ts | 38 ------- .../elasticsearch_autocomplete/helpers.ts | 2 +- .../system_console_spec.ts | 2 +- .../users_in_channel_switcher_spec.ts | 3 +- .../users_in_message_input_box_spec.ts | 3 +- .../elasticsearch_autocomplete/users_spec.ts | 3 +- .../integrations/incoming_webhook_spec.ts | 2 +- .../ui_and_api/customization_spec.js | 2 +- .../checkbox_setting.test.tsx.snap | 32 ++---- ...sable_guest_accounts_setting.test.tsx.snap | 30 ++--- .../admin_console/admin_definition.tsx | 2 +- .../admin_console/boolean_setting.tsx | 9 +- .../admin_console/checkbox_setting.tsx | 30 +---- .../admin_console/password_settings.tsx | 104 +++++++++--------- .../src/components/admin_console/setting.tsx | 23 ++-- .../components/admin_console/setting_set.tsx | 39 +++++++ webapp/channels/src/components/copy_text.tsx | 27 ++--- .../installed_command.test.tsx.snap | 24 ++++ .../installed_incoming_webhook.test.tsx.snap | 6 + .../installed_outgoing_webhook.test.tsx.snap | 6 + .../confirm_integration.test.tsx.snap | 38 +++++-- .../confirm_integration.tsx | 62 +++++++---- .../integrations/installed_command.tsx | 6 +- .../installed_incoming_webhook.tsx | 6 +- .../installed_oauth_app.test.tsx.snap | 30 ++--- .../installed_oauth_app.tsx | 27 ++--- .../installed_outgoing_webhook.tsx | 6 +- webapp/channels/src/i18n/en.json | 5 +- .../src/sass/components/_buttons.scss | 1 + .../src/sass/routes/_admin-console.scss | 11 ++ webapp/channels/src/utils/url.tsx | 2 +- .../configs/.eslintrc-react.json | 33 ++++++ 32 files changed, 347 insertions(+), 267 deletions(-) create mode 100644 webapp/channels/src/components/admin_console/setting_set.tsx diff --git a/e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts b/e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts index 840d51320fd9..e24aa24eb631 100644 --- a/e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts +++ b/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 { if (Cypress.env('searchTestUsers')) { return JSON.parse(Cypress.env('searchTestUsers')); @@ -281,7 +244,6 @@ export { createPrivateChannel, createPublicChannel, createSearchData, - enableElasticSearch, getTestUsers, getPostTextboxInput, getQuickChannelSwitcherInput, diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/helpers.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/helpers.ts index 74edd264bb46..66a2487b54ce 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/helpers.ts +++ b/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(); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/system_console_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/system_console_spec.ts index 0919caf0188a..ff36db23fd5b 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/system_console_spec.ts +++ b/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'); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts index 10e610c3882a..c1b604bed73a 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts +++ b/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); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_message_input_box_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_message_input_box_spec.ts index 8f4f6a68c164..91ee545ce465 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_message_input_box_spec.ts +++ b/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); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_spec.ts index 0d52b747c28c..74d96d7ee91a 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_spec.ts +++ b/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); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/integrations/incoming_webhook_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/integrations/incoming_webhook_spec.ts index 30321fa0d6eb..4d079673dad1 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/integrations/incoming_webhook_spec.ts +++ b/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; diff --git a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js b/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js index f2be052311b8..75a064575287 100644 --- a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js +++ b/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.'; diff --git a/webapp/channels/src/components/admin_console/__snapshots__/checkbox_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/checkbox_setting.test.tsx.snap index f86662a37b0f..4052737e5141 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/checkbox_setting.test.tsx.snap +++ b/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`] = `
-
-
+
`; diff --git a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap index 1a64f9d67934..246042aa3716 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap +++ b/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`] = `
- -
+
`; exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when enabled 1`] = `
- -
+ `; diff --git a/webapp/channels/src/components/admin_console/admin_definition.tsx b/webapp/channels/src/components/admin_console/admin_definition.tsx index 0f8437003d9c..85cf579652f7 100644 --- a/webapp/channels/src/components/admin_console/admin_definition.tsx +++ b/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)), diff --git a/webapp/channels/src/components/admin_console/boolean_setting.tsx b/webapp/channels/src/components/admin_console/boolean_setting.tsx index 6d2165d3af78..78654cd15288 100644 --- a/webapp/channels/src/components/admin_console/boolean_setting.tsx +++ b/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 ( - - - + ); }; diff --git a/webapp/channels/src/components/admin_console/checkbox_setting.tsx b/webapp/channels/src/components/admin_console/checkbox_setting.tsx index b74d5c917af5..f5927ff71599 100644 --- a/webapp/channels/src/components/admin_console/checkbox_setting.tsx +++ b/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 { @@ -26,29 +24,8 @@ export default class CheckboxSetting extends React.PureComponent { }; public render() { - let helpText; - if (this.props.disabled && this.props.disabledText) { - helpText = ( -
- - {this.props.disabledText} - - {this.props.helpText} -
- ); - } else { - helpText = this.props.helpText; - } - return ( - - +
- + {this.props.setByEnv ? : null} +
); } } diff --git a/webapp/channels/src/components/admin_console/password_settings.tsx b/webapp/channels/src/components/admin_console/password_settings.tsx index 9be78a31cc3d..3dc5917aa7aa 100644 --- a/webapp/channels/src/components/admin_console/password_settings.tsx +++ b/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 { setByEnv={this.isSetByEnv('PasswordSettings.MinimumLength')} disabled={this.props.isDisabled} /> - } > -
- - } - defaultChecked={this.state.passwordLowercase} - onChange={this.handleBooleanChange('passwordLowercase')} - setByEnv={this.isSetByEnv('PasswordSettings.Lowercase')} - disabled={this.props.isDisabled} - /> -
-
- - } - defaultChecked={this.state.passwordUppercase} - onChange={this.handleBooleanChange('passwordUppercase')} - setByEnv={this.isSetByEnv('PasswordSettings.Uppercase')} - disabled={this.props.isDisabled} - /> -
-
- - } - defaultChecked={this.state.passwordNumber} - onChange={this.handleBooleanChange('passwordNumber')} - setByEnv={this.isSetByEnv('PasswordSettings.Number')} - disabled={this.props.isDisabled} - /> -
-
- - } - defaultChecked={this.state.passwordSymbol} - onChange={this.handleBooleanChange('passwordSymbol')} - setByEnv={this.isSetByEnv('PasswordSettings.Symbol')} - disabled={this.props.isDisabled} - /> -
+
    +
    + + } + defaultChecked={this.state.passwordLowercase} + onChange={this.handleBooleanChange('passwordLowercase')} + setByEnv={this.isSetByEnv('PasswordSettings.Lowercase')} + disabled={this.props.isDisabled} + /> +
    +
    + + } + defaultChecked={this.state.passwordUppercase} + onChange={this.handleBooleanChange('passwordUppercase')} + setByEnv={this.isSetByEnv('PasswordSettings.Uppercase')} + disabled={this.props.isDisabled} + /> +
    +
    + + } + defaultChecked={this.state.passwordNumber} + onChange={this.handleBooleanChange('passwordNumber')} + setByEnv={this.isSetByEnv('PasswordSettings.Number')} + disabled={this.props.isDisabled} + /> +
    +
    + + } + defaultChecked={this.state.passwordSymbol} + onChange={this.handleBooleanChange('passwordSymbol')} + setByEnv={this.isSetByEnv('PasswordSettings.Symbol')} + disabled={this.props.isDisabled} + /> +
    +

- + {!this.props.config.ExperimentalSettings?.RestrictSystemAdmin && ( diff --git a/webapp/channels/src/components/admin_console/setting.tsx b/webapp/channels/src/components/admin_console/setting.tsx index 0cc032518abb..e55459cb1385 100644 --- a/webapp/channels/src/components/admin_console/setting.tsx +++ b/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 (
- {!nested && ( - - )} +
{children}
+ + {label} + +
+ {children} + {helpText ? ( +
+ {helpText} +
+ ) : null} + {setByEnv ? : null} +
+ + ); +} diff --git a/webapp/channels/src/components/copy_text.tsx b/webapp/channels/src/components/copy_text.tsx index 603f93de0571..891d9abaef3a 100644 --- a/webapp/channels/src/components/copy_text.tsx +++ b/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) => { + const intl = useIntl(); + + const copyText = useCallback((e: React.MouseEvent) => { e.preventDefault(); copyToClipboard(value); }, [value]); @@ -31,19 +33,12 @@ const CopyText = ({ - ) - } + title={label} > - diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap index 18eb45ea672c..3ebc4b216798 100644 --- a/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap +++ b/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap @@ -80,6 +80,12 @@ exports[`components/integrations/InstalledCommand should call onDelete function } /> @@ -186,6 +192,12 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct } /> @@ -262,6 +274,12 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = ` } /> @@ -336,6 +354,12 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut } /> diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap index 6084434e7ec6..7454016f89eb 100644 --- a/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap +++ b/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap @@ -64,6 +64,12 @@ exports[`components/integrations/InstalledIncomingWebhook should match snapshot /> diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap index 9b4dc63ea72a..9f30271384fb 100644 --- a/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap +++ b/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap @@ -133,6 +133,12 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot } /> diff --git a/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap b/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap index 2c67ca035181..5af03bb990de 100644 --- a/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap +++ b/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 } />

@@ -134,6 +140,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom } />

@@ -213,11 +225,11 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth } /> + 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 } /> + 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 } />

diff --git a/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx b/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx index 4eaf1c9100c0..3b602a6a185f 100644 --- a/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx +++ b/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) => {chunks}, }} /> - +

); } else if (type === Constants.Integrations.INCOMING_WEBHOOK && incomingHook) { @@ -136,7 +139,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, b: (chunks: string) => {chunks}, }} /> - +

); } else if (type === Constants.Integrations.OUTGOING_WEBHOOK && outgoingHook) { @@ -176,7 +182,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, b: (chunks: string) => {chunks}, }} /> - +

); } else if (type === Constants.Integrations.OAUTH_APP && oauthApp) { @@ -220,12 +229,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, }} /> - } + label={messages.copyClientId} value={oauthAppToken} />
@@ -238,12 +242,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, }} /> - } + label={messages.copyClientSecret} value={oauthAppSecret} />

, @@ -336,12 +335,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, }} /> - } + label={messages.copyUsername} value={username || ''} />
@@ -420,7 +414,10 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks, b: (chunks: string) => {chunks}, }} /> - +

{ }} /> diff --git a/webapp/channels/src/components/integrations/installed_incoming_webhook.tsx b/webapp/channels/src/components/integrations/installed_incoming_webhook.tsx index 0180a5470cd7..257a4fa86e80 100644 --- a/webapp/channels/src/components/integrations/installed_incoming_webhook.tsx +++ b/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 /> diff --git a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap b/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap index ed1e19f03a1c..ffcf7d151909 100644 --- a/webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap +++ b/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 + 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 + 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 + label={ + Object { + "defaultMessage": "Copy Client Id", + "id": "integrations.copy_client_id", + } } value="facxd9wpzpbpfp8pad78xj75pr" /> diff --git a/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx b/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx index f74f3c26374a..8a70182d8a5e 100644 --- a/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx +++ b/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 {this.state.clientSecret} - } + label={messages.copyClientSecret} value={this.state.clientSecret} /> @@ -312,12 +307,7 @@ export default class InstalledOAuthApp extends React.PureComponent {oauthApp.id} - } + label={messages.copyClientId} value={oauthApp.id} /> @@ -360,3 +350,14 @@ export default class InstalledOAuthApp extends React.PureComponent }} /> diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index cb5d551b4672..87c537ec46a7 100644 --- a/webapp/channels/src/i18n/en.json +++ b/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 user access tokens for integrations in Profile > Security. 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 System Console > User Management > Users.", "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 documentation 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", diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss index 9847d88f1c58..c778e8c40a59 100644 --- a/webapp/channels/src/sass/components/_buttons.scss +++ b/webapp/channels/src/sass/components/_buttons.scss @@ -190,6 +190,7 @@ button { } &.btn-link { + height: initial; padding: 0; border: none; background: transparent; diff --git a/webapp/channels/src/sass/routes/_admin-console.scss b/webapp/channels/src/sass/routes/_admin-console.scss index 2440984dc160..a44c9f2f5d99 100644 --- a/webapp/channels/src/sass/routes/_admin-console.scss +++ b/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; diff --git a/webapp/channels/src/utils/url.tsx b/webapp/channels/src/utils/url.tsx index 685eb36bba82..c0be7b7617b2 100644 --- a/webapp/channels/src/utils/url.tsx +++ b/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 { diff --git a/webapp/platform/eslint-plugin/configs/.eslintrc-react.json b/webapp/platform/eslint-plugin/configs/.eslintrc-react.json index ad675f1af4ff..fc8c464c79f6 100644 --- a/webapp/platform/eslint-plugin/configs/.eslintrc-react.json +++ b/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, {