fix review findings

scm-ui/ui-components/src/forms/Checkbox.tsx

@@ -35,6 +35,7 @@ type Props = {
   title?: string;
   disabled?: boolean;
   helpText?: string;
+  testId?: string;
 };
 
 export default class Checkbox extends React.Component<Props> {
@@ -59,7 +60,7 @@ export default class Checkbox extends React.Component<Props> {
   };
 
   render() {
-    const { label, checked, indeterminate, disabled } = this.props;
+    const { label, checked, indeterminate, disabled, testId } = this.props;
     return (
       <div className="field">
         {this.renderLabelWithHelp()}
@@ -70,7 +71,7 @@ export default class Checkbox extends React.Component<Props> {
             but bulma does.
             // @ts-ignore */}
           <label className="checkbox" disabled={disabled}>
-            <TriStateCheckbox checked={checked} indeterminate={indeterminate} disabled={disabled} />
+            <TriStateCheckbox checked={checked} indeterminate={indeterminate} disabled={disabled} testId={testId} />
             {label}
             {this.renderHelp()}
           </label>

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -24,10 +24,12 @@
 import React, { ChangeEvent, FormEvent } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
+import { createAttributesForTesting } from "../devBuild";
 
 type Props = WithTranslation & {
   filter: (p: string) => void;
   value?: string;
+  testId?: string;
 };
 
 type State = {
@@ -58,9 +60,9 @@ class FilterInput extends React.Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, testId } = this.props;
     return (
-      <form className="input-field" onSubmit={this.handleSubmit}>
+      <form className="input-field" onSubmit={this.handleSubmit} {...createAttributesForTesting(testId)}>
         <div className="control has-icons-left">
           <FixedHeightInput
             className="input"

scm-ui/ui-components/src/forms/InputField.tsx

@@ -24,6 +24,7 @@
 import React, { ChangeEvent, KeyboardEvent } from "react";
 import classNames from "classnames";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
+import { createAttributesForTesting } from "../devBuild";
 
 type Props = {
   label?: string;
@@ -39,6 +40,7 @@ type Props = {
   disabled?: boolean;
   helpText?: string;
   className?: string;
+  testId?: string;
 };
 
 class InputField extends React.Component<Props> {
@@ -80,7 +82,8 @@ class InputField extends React.Component<Props> {
       disabled,
       label,
       helpText,
-      className
+      className,
+      testId
     } = this.props;
     const errorView = validationError ? "is-danger" : "";
     const helper = validationError ? <p className="help is-danger">{errorMessage}</p> : "";
@@ -99,6 +102,7 @@ class InputField extends React.Component<Props> {
             onChange={this.handleInput}
             onKeyPress={this.handleKeyPress}
             disabled={disabled}
+            {...createAttributesForTesting(testId)}
           />
         </div>
         {helper}

scm-ui/ui-components/src/forms/Select.tsx

@@ -24,6 +24,7 @@
 import React, { ChangeEvent } from "react";
 import classNames from "classnames";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
+import {createAttributesForTesting} from "../devBuild";
 
 export type SelectItem = {
   value: string;
@@ -39,6 +40,7 @@ type Props = {
   loading?: boolean;
   helpText?: string;
   disabled?: boolean;
+  testId?: string;
 };
 
 class Select extends React.Component<Props> {
@@ -57,7 +59,7 @@ class Select extends React.Component<Props> {
   };
 
   render() {
-    const { options, value, label, helpText, loading, disabled } = this.props;
+    const { options, value, label, helpText, loading, disabled, testId } = this.props;
     const loadingClass = loading ? "is-loading" : "";
 
     return (
@@ -71,6 +73,7 @@ class Select extends React.Component<Props> {
             value={value}
             onChange={this.handleInput}
             disabled={disabled}
+            {...createAttributesForTesting(testId)}
           >
             {options.map(opt => {
               return (

scm-ui/ui-components/src/forms/TriStateCheckbox.tsx

@@ -29,9 +29,10 @@ type Props = {
   indeterminate?: boolean;
   disabled?: boolean;
   label?: string;
+  testId?: string;
 };
 
-const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label }) => {
+const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label, testId }) => {
   let icon;
   if (indeterminate) {
     icon = "minus-square";
@@ -57,8 +58,11 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label }
     color = "black";
   }
 
-  return <><Icon iconStyle={"is-outlined"} name={icon} className={className} color={color} />{" "}
-  {label}</>;
+  return (
+    <>
+      <Icon iconStyle={"is-outlined"} name={icon} className={className} color={color} testId={testId} /> {label}
+    </>
+  );
 };
 
 export default TriStateCheckbox;