Reactify users roles (#20739)

* partial progress on reactifying users

* progress on EUIfication of users screen

* removing Angular stuff

* adding data-test-subj="passwordConfirmationInput"

* removing data-test-subj="userFormEmailInput" refs from tests

* fixing selector for role assignment

* some functional test fixes

* fixing some functional tests

* fixing last functional test

* removing stray console log

* fixing warnings

* attempting to fix flaky test

* trying again to fix flaky test

* PR feedback

* PR feedback

* fixing issue where form tried to submit

* adding sleep to allow user to load

* Design edits

Mainly adding wrapper EUI page elements, but also shifted around form elements.

* Fixed console error and added responsive prop to table

* addressing PR feedback

* A few more PR feedback

- Fixed alignment of table
- Removed the tooltip from the lock icon and placed the description inline.
- Changed delete button to an empty button

* addressing more PR feedback

* adding email field back in

* adding back username validation

* restoring original error message

* fixing dumb null error

test/functional/services/dashboard/add_panel.js

@@ -164,6 +164,8 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
     async addVisualization(vizName) {
       log.debug(`DashboardAddPanel.addVisualization(${vizName})`);
       await this.ensureAddPanelIsShowing();
+      // workaround for timing issue with slideout animation
+      await PageObjects.common.sleep(500);
       await this.filterEmbeddableNames(`"${vizName.replace('-', ' ')}"`);
       await testSubjects.click(`addPanel${vizName.split(' ').join('-')}`);
       await this.closeAddPanel();

test/functional/services/test_subjects.js

@@ -101,9 +101,7 @@ export function TestSubjectsProvider({ getService }) {
 
     async setValue(selector, text) {
       return await retry.try(async () => {
-        const element = await this.find(selector);
-        await element.click();
-
+        await this.click(selector);
         // in case the input element is actually a child of the testSubject, we
         // call clearValue() and type() on the element that is focused after
         // clicking on the testSubject

x-pack/plugins/security/public/components/management/users/confirm_delete.js

@@ -0,0 +1,58 @@
+/*
+ * 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 React, { Component, Fragment } from 'react';
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+import { toastNotifications } from 'ui/notify';
+export class ConfirmDelete extends Component {
+  deleteUsers = () => {
+    const { usersToDelete, apiClient, callback } = this.props;
+    const errors = [];
+    usersToDelete.forEach(async username => {
+      try {
+        await apiClient.deleteUser(username);
+        toastNotifications.addSuccess(`Deleted user ${username}`);
+      } catch (e) {
+        errors.push(username);
+        toastNotifications.addDanger(`Error deleting user ${username}`);
+      }
+      if (callback) {
+        callback(usersToDelete, errors);
+      }
+    });
+  };
+  render() {
+    const { usersToDelete, onCancel } = this.props;
+    const moreThanOne = usersToDelete.length > 1;
+    const title = moreThanOne
+      ? `Delete ${usersToDelete.length} users`
+      : `Delete user '${usersToDelete[0]}'`;
+    return (
+      <EuiOverlayMask>
+        <EuiConfirmModal
+          title={title}
+          onCancel={onCancel}
+          onConfirm={this.deleteUsers}
+          cancelButtonText="Cancel"
+          confirmButtonText="Delete"
+          buttonColor="danger"
+        >
+          <div>
+            {moreThanOne ? (
+              <Fragment>
+                <p>
+                  You are about to delete these users:
+                </p>
+                <ul>{usersToDelete.map(username => <li key={username}>{username}</li>)}</ul>
+              </Fragment>
+            ) : null}
+            <p>This operation cannot be undone.</p>
+          </div>
+        </EuiConfirmModal>
+      </EuiOverlayMask>
+    );
+  }
+}