Merge branch 'master' into dev/fix-drildowns-welcome-in-ie

x-pack/plugins/uptime/README.md

@@ -75,3 +75,19 @@ We can run these tests like described above, but with some special config.
 `node scripts/functional_tests_server.js --config=test/functional_with_es_ssl/config.ts`
 
 `node scripts/functional_test_runner.js --config=test/functional_with_es_ssl/config.ts`
+
+#### Running accessibility tests
+
+We maintain a suite of Accessibility tests (you may see them referred to elsewhere as `a11y` tests).
+
+These tests render each of our pages and ensure that the inputs and other elements contain the
+attributes necessary to ensure all users are able to make use of Kibana (for example, users relying
+on screen readers).
+
+The commands for running these tests are very similar to the other functional tests described above.
+
+From the `~/x-pack` directory:
+
+Start the server: `node scripts/functional_tests_server --config test/accessibility/config.ts`
+
+Run the uptime `a11y` tests: `node scripts/functional_test_runner.js --config test/accessibility/config.ts --grep=uptime`

x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx

@@ -41,7 +41,7 @@ interface Props {
 }
 
 export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
-  const certificates = useSelector(certificatesSelector);
+  const { data: certificates, loading } = useSelector(certificatesSelector);
 
   const onTableChange = (newVal: Partial<Props>) => {
     onChange(newVal.page as Page, newVal.sort as CertSort);
@@ -98,6 +98,7 @@ export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
 
   return (
     <EuiBasicTable
+      loading={loading}
       columns={columns}
       items={certificates?.certs ?? []}
       pagination={pagination}

x-pack/plugins/uptime/public/components/certificates/fingerprint_col.tsx

@@ -32,7 +32,14 @@ export const FingerprintCol: React.FC<Props> = ({ cert }) => {
           <EmptyButton>{text} </EmptyButton>
         </EuiToolTip>
         <EuiCopy textToCopy={val ?? ''}>
-          {copy => <EuiButtonIcon onClick={copy} iconType="copy" title={COPY_FINGERPRINT} />}
+          {copy => (
+            <EuiButtonIcon
+              aria-label={COPY_FINGERPRINT}
+              onClick={copy}
+              iconType="copy"
+              title={COPY_FINGERPRINT}
+            />
+          )}
         </EuiCopy>
       </Span>
     );

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx

@@ -171,6 +171,7 @@ export const MonitorListComponent: React.FC<Props> = ({
         return (
           <EuiButtonIcon
             aria-label={labels.getExpandDrawerLabel(id)}
+            data-test-subj={`xpack.uptime.monitorList.${id}.expandMonitorDetail`}
             iconType={drawerIds.includes(id) ? 'arrowUp' : 'arrowDown'}
             onClick={() => {
               if (drawerIds.includes(id)) {
@@ -192,10 +193,7 @@ export const MonitorListComponent: React.FC<Props> = ({
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
         error={error?.message}
-        // Only set loading to true when there are no items present to prevent the bug outlined in
-        // in https://github.com/elastic/eui/issues/2393 . Once that is fixed we can simply set the value here to
-        // loading={loading}
-        loading={loading && (!items || items.length < 1)}
+        loading={loading}
         isExpandable={true}
         hasActions={true}
         itemId="monitor_id"

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/actions_popover/actions_popover.tsx

@@ -41,6 +41,7 @@ export const ActionsPopoverComponent = ({
               values: { monitorUrl },
             }
           )}
+          data-test-subj={`xpack.uptime.monitorList.actionsPopover.${summary.monitor_id}`}
           onClick={() => togglePopoverIsVisible({ id: popoverId, open: true })}
           iconType="arrowDown"
           iconSide="right"

x-pack/plugins/uptime/public/components/settings/certificate_form.tsx

@@ -20,6 +20,7 @@ import {
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../common/constants';
 import { DynamicSettings } from '../../../common/runtime_types';
 import { SettingsFormProps } from '../../pages/settings';
+import { certificateFormTranslations } from './translations';
 
 export type OnFieldChangeType = (changedValues: Partial<DynamicSettings>) => void;
 
@@ -80,6 +81,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              aria-label={certificateFormTranslations.expirationInputAriaLabel}
               data-test-subj={`expiration-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}
@@ -126,6 +128,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              aria-label={certificateFormTranslations.ageInputAriaLabel}
               data-test-subj={`age-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}

x-pack/plugins/uptime/public/components/settings/translations.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const certificateFormTranslations = {
+  ageInputAriaLabel: i18n.translate(
+    'xpack.uptime.sourceConfiguration.ageLimitThresholdInput.ariaLabel',
+    {
+      defaultMessage:
+        'An input that controls the maximum number of days for which a TLS certificate may be valid before Kibana will show a warning.',
+    }
+  ),
+  expirationInputAriaLabel: i18n.translate(
+    'xpack.uptime.sourceConfiguration.certificateExpirationThresholdInput.ariaLabel',
+    {
+      defaultMessage:
+        'An input that controls the minimum number of days remaining for TLS certificate expiration before Kibana will show a warning.',
+    }
+  ),
+};

x-pack/plugins/uptime/public/pages/certificates.tsx

@@ -72,7 +72,7 @@ export const CertificatesPage: React.FC = () => {
     );
   }, [dispatch, page, search, sort.direction, sort.field, lastRefresh]);
 
-  const certificates = useSelector(certificatesSelector);
+  const { data: certificates } = useSelector(certificatesSelector);
 
   return (
     <>

x-pack/plugins/uptime/public/state/certificates/certificates.ts

@@ -40,4 +40,4 @@ export function* fetchCertificatesEffect() {
   );
 }
 
-export const certificatesSelector = ({ certificates }: AppState) => certificates.certs.data;
+export const certificatesSelector = ({ certificates }: AppState) => certificates.certs;

x-pack/test/accessibility/apps/uptime.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment';
+import { FtrProviderContext } from '../ftr_provider_context';
+import { makeChecks } from '../../api_integration/apis/uptime/rest/helper/make_checks';
+
+const A11Y_TEST_MONITOR_ID = 'a11yTestMonitor';
+
+export default function({ getService, getPageObjects }: FtrProviderContext) {
+  const { uptime } = getPageObjects(['common', 'uptime']);
+  const a11y = getService('a11y');
+  const uptimeService = getService('uptime');
+  const esArchiver = getService('esArchiver');
+  const es = getService('es');
+
+  describe('uptime', () => {
+    before(async () => {
+      await esArchiver.load('uptime/blank');
+      await makeChecks(es, A11Y_TEST_MONITOR_ID, 150, 1, 1000, {
+        tls: {
+          certificate_not_valid_after: moment()
+            .add(30, 'days')
+            .toISOString(),
+          certificate_not_valid_before: moment()
+            .subtract(90, 'days')
+            .toISOString(),
+          server: {
+            x509: {
+              subject: {
+                common_name: 'a11y_common_name',
+              },
+              issuer: {
+                common_name: 'a11y_issuer_name',
+              },
+            },
+          },
+        },
+      });
+    });
+
+    beforeEach(async () => {
+      await uptime.goToRoot();
+    });
+
+    after(async () => {
+      await esArchiver.unload('uptime/blank');
+    });
+
+    it('overview page', async () => {
+      await a11y.testAppSnapshot();
+    });
+
+    it('overview page with expanded monitor detail', async () => {
+      await uptimeService.overview.expandMonitorDetail(A11Y_TEST_MONITOR_ID);
+      await uptimeService.overview.openIntegrationsPopoverForMonitor(A11Y_TEST_MONITOR_ID);
+      await a11y.testAppSnapshot();
+    });
+
+    it('overview alert popover controls', async () => {
+      await uptimeService.overview.openAlertsPopover();
+      await a11y.testAppSnapshot();
+      await uptimeService.overview.navigateToNestedPopover();
+      await a11y.testAppSnapshot();
+    });
+
+    it('detail page', async () => {
+      await uptimeService.navigation.goToMonitor(A11Y_TEST_MONITOR_ID);
+      await uptimeService.monitor.locationMapIsRendered();
+      await a11y.testAppSnapshot();
+    });
+
+    it('settings page', async () => {
+      await uptimeService.navigation.goToSettings();
+      await a11y.testAppSnapshot();
+    });
+
+    it('certificates page', async () => {
+      await uptimeService.navigation.goToCertificates();
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -19,6 +19,7 @@ export default async function({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/home'),
       require.resolve('./apps/grok_debugger'),
       require.resolve('./apps/search_profiler'),
+      require.resolve('./apps/uptime'),
     ],
     pageObjects,
     services,

x-pack/test/functional/services/uptime/overview.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+
+  return {
+    async expandMonitorDetail(id: string): Promise<void> {
+      return testSubjects.click(`xpack.uptime.monitorList.${id}.expandMonitorDetail`);
+    },
+    async openIntegrationsPopoverForMonitor(id: string): Promise<void> {
+      return testSubjects.click(`xpack.uptime.monitorList.actionsPopover.${id}`);
+    },
+    async openAlertsPopover(): Promise<void> {
+      return testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
+    },
+    /**
+     * If the popover is already open, click the nested button.
+     * Otherwise, open the popover, then click the nested button.
+     */
+    async navigateToNestedPopover(): Promise<void> {
+      if (testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
+        return testSubjects.click('xpack.uptime.openAlertContextPanel');
+      }
+      await testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
+      return testSubjects.click('xpack.uptime.openAlertContextPanel');
+    },
+  };
+}

x-pack/test/functional/services/uptime/uptime.ts

@@ -13,6 +13,7 @@ import { UptimeNavigationProvider } from './navigation';
 import { UptimeAlertsProvider } from './alerts';
 import { UptimeMLAnomalyProvider } from './ml_anomaly';
 import { UptimeCertProvider } from './certificates';
+import { UptimeOverviewProvider } from './overview';
 
 export function UptimeProvider(context: FtrProviderContext) {
   const common = UptimeCommonProvider(context);
@@ -22,6 +23,7 @@ export function UptimeProvider(context: FtrProviderContext) {
   const alerts = UptimeAlertsProvider(context);
   const ml = UptimeMLAnomalyProvider(context);
   const cert = UptimeCertProvider(context);
+  const overview = UptimeOverviewProvider(context);
 
   return {
     common,
@@ -31,5 +33,6 @@ export function UptimeProvider(context: FtrProviderContext) {
     alerts,
     ml,
     cert,
+    overview,
   };
 }