chore(ui): add data-test attributes

ui/package.json

@@ -69,6 +69,7 @@
     "babel-jest": "^23.6.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^4.1.0",
+    "cypress-wait-until": "^1.7.2",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.3.4",

ui/src/admin/components/chronograf/AllUsersTableHeader.tsx

@@ -56,6 +56,7 @@ class AllUsersTableHeader extends Component<Props> {
             className="btn btn-primary btn-sm"
             onClick={onClickCreateUser}
             disabled={isCreatingUser || !onClickCreateUser}
+            data-test="add-user--button"
           >
             <span className="icon plus" />
             Add User

ui/src/admin/components/chronograf/AllUsersTableRow.tsx

@@ -65,7 +65,10 @@ export default class AllUsersTableRow extends Component<Props> {
     const {user, onRemoveFromOrganization, onAddToOrganization} = this.props
 
     return (
-      <tr className={'chronograf-admin-table--user'}>
+      <tr
+        className={'chronograf-admin-table--user'}
+        data-test={`${user.name}--table-row`}
+      >
         {this.userNameTableCell}
         <td style={{width: colOrganizations}}>
           <Tags
@@ -86,6 +89,7 @@ export default class AllUsersTableRow extends Component<Props> {
             color={ComponentColor.Success}
             disabled={this.userIsMe}
             tooltipText={this.toggleTooltipText}
+            
           />
         </td>
         <td style={{textAlign: 'right', width: colActions}}>

ui/src/admin/components/chronograf/AllUsersTableRowNew.js

@@ -108,7 +108,10 @@ class AllUsersTableRowNew extends Component {
     const preventCreate = !name || !provider
 
     return (
-      <tr className="chronograf-admin-table--new-user">
+      <tr
+        className="chronograf-admin-table--new-user"
+        data-test="new-user--table-row"
+      >
         <td>
           <input
             className="form-control input-xs"
@@ -118,6 +121,7 @@ class AllUsersTableRowNew extends Component {
             value={name}
             onChange={this.handleInputChange('name')}
             onKeyDown={this.handleKeyDown}
+            data-test="username--input"
           />
         </td>
         <td style={{width: colOrganizations}}>
@@ -138,6 +142,7 @@ class AllUsersTableRowNew extends Component {
             value={provider}
             onChange={this.handleInputChange('provider')}
             onKeyDown={this.handleKeyDown}
+            data-test="oauth-provider--input"
           />
         </td>
         <td style={{width: colScheme}}>

ui/src/admin/components/chronograf/UsersTableHeader.js

@@ -26,6 +26,7 @@ class UsersTableHeader extends Component {
           className="btn btn-primary btn-sm"
           onClick={onClickCreateUser}
           disabled={isCreatingUser || !onClickCreateUser}
+          data-test="add-user--button"
         >
           <span className="icon plus" />
           Add User

ui/src/admin/components/chronograf/UsersTableRow.tsx

@@ -33,7 +33,10 @@ class UsersTableRow extends PureComponent<Props> {
     const {colRole, colProvider, colScheme} = USERS_TABLE
 
     return (
-      <tr className={'chronograf-admin-table--user'}>
+      <tr
+        className={'chronograf-admin-table--user'}
+        data-test={`${user.name}--table-row`}
+      >
         <td>
           {this.isMe ? (
             <strong className="chronograf-user--me">
@@ -66,6 +69,7 @@ class UsersTableRow extends PureComponent<Props> {
             type="btn-danger"
             text="Remove"
             customClass="table--show-on-row-hover"
+            testId="remove-user--button"
           />
         </td>
       </tr>

ui/src/admin/components/chronograf/UsersTableRowNew.js

@@ -81,7 +81,10 @@ class UsersTableRowNew extends Component {
     const preventCreate = !name || !provider
 
     return (
-      <tr className="chronograf-admin-table--new-user">
+      <tr
+        className="chronograf-admin-table--new-user"
+        data-test="new-user--table-row"
+      >
         <td>
           <input
             className="form-control input-xs"
@@ -91,6 +94,7 @@ class UsersTableRowNew extends Component {
             value={name}
             onChange={this.handleInputChange('name')}
             onKeyDown={this.handleKeyDown}
+            data-test="username--input"
           />
         </td>
         <td style={{width: colRole}}>
@@ -111,6 +115,7 @@ class UsersTableRowNew extends Component {
             value={provider}
             onChange={this.handleInputChange('provider')}
             onKeyDown={this.handleKeyDown}
+            data-test="oauth-provider--input"
           />
         </td>
         <td style={{width: colScheme}}>
@@ -120,16 +125,22 @@ class UsersTableRowNew extends Component {
             disabled={true}
             placeholder="OAuth Scheme..."
             value={scheme}
+            data-test="oauth-schema--input"
           />
         </td>
         <td className="text-right" style={{width: colActions}}>
-          <button className="btn btn-xs btn-square btn-info" onClick={onBlur}>
+          <button
+            className="btn btn-xs btn-square btn-info"
+            onClick={onBlur}
+            data-test="cancel-new-user--button"
+          >
             <span className="icon remove" />
           </button>
           <button
             className="btn btn-xs btn-square btn-success"
             disabled={preventCreate}
             onClick={this.handleConfirmCreateUser}
+            data-test="confirm-new-user--button"
           >
             <span className="icon checkmark" />
           </button>

ui/src/shared/components/DropdownHead.tsx

@@ -28,7 +28,7 @@ const DropdownHead: FunctionComponent<Props> = ({
     style={toggleStyle}
   >
     {iconName && <span className={classnames('icon', {[iconName]: true})} />}
-    <span className="dropdown-selected">{selected}</span>
+    <span className="dropdown-selected" data-test={`dropdown-selected--${selected}`}>{selected}</span>
     <span className="caret" />
   </div>
 )

ui/src/shared/components/DropdownMenuItem.tsx

@@ -52,7 +52,7 @@ const DropdownMenuItem: FunctionComponent<ItemProps> = ({
         highlight: index === highlightedItemIndex,
         active: item.text === selected,
       })}
-      data-test="dropdown-item"
+      data-test={`${item.text}-dropdown-item`}
     >
       <a href="#" onClick={onSelection(item)} onMouseOver={onHighlight(index)}>
         {item.text}

yarn.lock

@@ -4137,6 +4137,11 @@ cypress-plugin-tab@^1.0.5:
   dependencies:
     ally.js "^1.4.1"
 
+cypress-wait-until@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/cypress-wait-until/-/cypress-wait-until-1.7.2.tgz#7f534dd5a11c89b65359e7a0210f20d3dfc22107"
+  integrity sha512-uZ+M8/MqRcpf+FII/UZrU7g1qYZ4aVlHcgyVopnladyoBrpoaMJ4PKZDrdOJ05H5RHbr7s9Tid635X3E+ZLU/Q==
+
 cypress@^8.4.1:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.7.0.tgz#2ee371f383d8f233d3425b6cc26ddeec2668b6da"