add testids in wrangler part-2

app/cdap/components/Administration/AdminConfigTabContent/SystemProfilesAccordion/index.js

@@ -28,7 +28,7 @@ import { Label, Input } from 'reactstrap';
 import { getProfiles, resetProfiles } from 'components/Cloud/Profiles/Store/ActionCreator';
 import { SYSTEM_NAMESPACE } from 'services/global-constants';
 import { Theme } from 'services/ThemeHelper';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 import If from 'components/shared/If';
 require('./SystemProfilesAccordion.scss');
 

app/cdap/components/Administration/AdminConfigTabContent/index.js

@@ -25,7 +25,7 @@ import { Link } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import { Theme } from 'services/ThemeHelper';
 import T from 'i18n-react';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('./AdminConfigTabContent.scss');
 

app/cdap/components/Administration/AdminTabSwitch/index.tsx

@@ -25,7 +25,7 @@ import isNil from 'lodash/isNil';
 import classnames from 'classnames';
 import T from 'i18n-react';
 import { Theme } from 'services/ThemeHelper';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 require('./AdminTabSwitch.scss');
 
 const PREFIX = 'features.Administration';

app/cdap/components/DataPrep/AutoComplete/index.js

@@ -26,7 +26,7 @@ import classnames from 'classnames';
 import NamespaceStore from 'services/NamespaceStore';
 import ee from 'event-emitter';
 import globalEvents from 'services/global-events';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('./AutoComplete.scss');
 

app/cdap/components/DataPrep/ColumnActionsDropdown/index.js

@@ -27,7 +27,7 @@ import isEqual from 'lodash/isEqual';
 import DataPrepStore from 'components/DataPrep/store';
 import ScrollableList from 'components/shared/ScrollableList';
 import { Theme } from 'services/ThemeHelper';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 // Directives List
 import ParseDirective from 'components/DataPrep/Directives/Parse';

app/cdap/components/DataPrep/ColumnTextSelection/index.js

@@ -22,9 +22,12 @@ import classnames from 'classnames';
 import uuidV4 from 'uuid/v4';
 import { Observable } from 'rxjs/Observable';
 import intersection from 'lodash/intersection';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('../DataPrepTable/DataPrepTable.scss');
+
 const CELLHIGHLIGHTCLASSNAME = 'cl-highlight';
+const TESTID_PREFIX = 'features.dataprep.columnTextSelection';
 
 export default class ColumnTextSelection extends Component {
   constructor(props) {
@@ -137,10 +140,14 @@ export default class ColumnTextSelection extends Component {
     let { data, headers } = DataPrepStore.getState().dataprep;
     let column = this.props.columns[0];
 
-    const renderTableCell = (row, index, head, highlightColumn) => {
+    const renderTableCell = (row, index, head, highlightColumn, colIndex) => {
       if (head !== highlightColumn) {
         return (
-          <td key={uuidV4()} className="gray-out">
+          <td
+            key={uuidV4()}
+            className="gray-out"
+            data-testid={getDataTestid(`${TESTID_PREFIX}.cell`, `${index}-${colIndex}`)}
+          >
             <div>{row[head]}</div>
           </td>
         );
@@ -151,6 +158,7 @@ export default class ColumnTextSelection extends Component {
           className={CELLHIGHLIGHTCLASSNAME}
           onMouseDown={this.mouseDownHandler}
           onMouseUp={this.mouseUpHandler.bind(this, head, index)}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.cell`, `${index}-${colIndex}`)}
         >
           <div className={CELLHIGHLIGHTCLASSNAME}>
             {index === this.state.textSelectionRange.index ? (
@@ -174,14 +182,22 @@ export default class ColumnTextSelection extends Component {
     const renderTableHeader = (head, index) => {
       if (head !== column) {
         return (
-          <th key={index} className="gray-out">
+          <th
+            key={index}
+            className="gray-out"
+            data-testid={getDataTestid(`${TESTID_PREFIX}.header`, index)}
+          >
             <div>{head}</div>
           </th>
         );
       }
 
       return (
-        <th key={index} id="highlighted-header">
+        <th
+          key={index}
+          id="highlighted-header"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.header`, index)}
+        >
           <div>{head}</div>
         </th>
       );
@@ -198,6 +214,7 @@ export default class ColumnTextSelection extends Component {
                   className={classnames({
                     'highlight-column': head === column,
                   })}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.column`, i)}
                 />
               );
             })}
@@ -215,8 +232,8 @@ export default class ColumnTextSelection extends Component {
               return (
                 <tr key={i}>
                   <td>{i}</td>
-                  {headers.map((head) => {
-                    return renderTableCell(row, i, head, column);
+                  {headers.map((head, j) => {
+                    return renderTableCell(row, i, head, column, j);
                   })}
                 </tr>
               );

app/cdap/components/DataPrep/DataPrepCLI/index.js

@@ -20,7 +20,7 @@ import DataPrepAutoComplete from 'components/DataPrep/AutoComplete';
 import { execute } from 'components/DataPrep/store/DataPrepActionCreator';
 import DataPrepStore from 'components/DataPrep/store';
 import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 require('./DataPrepCLI.scss');
 
 const TESTID_PREFIX = 'features.dataprep.workspace.cli';

app/cdap/components/DataPrep/DataPrepContentWrapper/index.js

@@ -29,7 +29,7 @@ import LoadingSVGCentered from 'components/shared/LoadingSVGCentered';
 import DataPrepSidePanel from 'components/DataPrep/DataPrepSidePanel';
 import classnames from 'classnames';
 import T from 'i18n-react';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 require('./DataPrepContentWrapper.scss');
 
 const DataPrepVisualization = Loadable({

app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import T from 'i18n-react';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab.ColumnDetail';
 const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';

app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js

@@ -21,7 +21,7 @@ import { preventPropagation } from 'services/helpers';
 import isEqual from 'lodash/isEqual';
 import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';
 

app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/index.js

@@ -26,7 +26,7 @@ import findIndex from 'lodash/findIndex';
 import T from 'i18n-react';
 import ColumnActions from 'components/DataPrep/Directives/ColumnActions';
 import IconSVG from 'components/shared/IconSVG';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab';
 const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel';

app/cdap/components/DataPrep/DataPrepSidePanel/DirectivesTab/index.js

@@ -21,7 +21,7 @@ import DirectivesTabRow from 'components/DataPrep/DataPrepSidePanel/DirectivesTa
 import fileDownload from 'js-file-download';
 import { execute } from 'components/DataPrep/store/DataPrepActionCreator';
 import T from 'i18n-react';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('./DirectivesTab.scss');
 

app/cdap/components/DataPrep/DataPrepSidePanel/index.js

@@ -23,7 +23,7 @@ import TargetTab from 'components/DataPrep/DataPrepSidePanel/TargetTab';
 import DirectivesTab from 'components/DataPrep/DataPrepSidePanel/DirectivesTab';
 import T from 'i18n-react';
 import If from 'components/shared/If';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('./DataPrepSidePanel.scss');
 const PREFIX = 'features.DataPrep.DataPrepSidePanel';

app/cdap/components/DataPrep/DataPrepTable/DataType/index.js

@@ -20,7 +20,7 @@ import T from 'i18n-react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DataPrepStore from 'components/DataPrep/store';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepTable.DataType';
 const TESTID_PREFIX = 'features.dataprep.workspace.dataTable';

app/cdap/components/DataPrep/DataPrepTable/index.js

@@ -33,7 +33,7 @@ import DataQuality from 'components/DataPrep/DataPrepTable/DataQuality';
 import DataType from 'components/DataPrep/DataPrepTable/DataType';
 import Page500 from 'components/500';
 import Page404 from 'components/404';
-import { getDataTestid } from '../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 // Lazy load polyfill in safari as InteresectionObservers are not implemented there yet.
 (async function() {

app/cdap/components/DataPrep/Directives/Calculate/index.js

@@ -33,11 +33,13 @@ import { preventPropagation } from 'services/helpers';
 import { NUMBER_TYPES, NATIVE_NUMBER_TYPES } from 'services/global-constants';
 import capitalize from 'lodash/capitalize';
 import Mousetrap from 'mousetrap';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 require('./Calculate.scss');
 
 const PREFIX = 'features.DataPrep.Directives.Calculate';
 const COPY_NEW_COLUMN_PREFIX = 'features.DataPrep.DataPrepTable.copyToNewColumn';
+const TESTID_PREFIX = 'features.dataprep.directives.calculate';
 
 export default class Calculate extends Component {
   constructor(props) {
@@ -674,6 +676,7 @@ export default class Calculate extends Component {
             active: this.state.operationPopoverOpen === option.name,
           })}
           onClick={this.popoverOptionClick.bind(this, option.name)}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.option`, option.name)}
         >
           <span>{T.translate(`${PREFIX}.OptionsLabels.${option.name}`)}</span>
           <span className="float-right">
@@ -713,7 +716,11 @@ export default class Calculate extends Component {
   renderNewColumnNameInputWithCheckbox() {
     return (
       <div>
-        <div className="create-new-column-line" onClick={this.toggleCreateNewColumn}>
+        <div
+          className="create-new-column-line"
+          onClick={this.toggleCreateNewColumn}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.submenu.copyToNewColumn`)}
+        >
           <span className="fa fa-fw">
             <IconSVG name={this.state.createNewColumn ? 'icon-check-square' : 'icon-square-o'} />
           </span>
@@ -753,6 +760,7 @@ export default class Calculate extends Component {
           onChange={this.setNewColumnInput}
           placeholder={inputPlaceholder}
           autoFocus
+          data-testid={getDataTestid(`${TESTID_PREFIX}.submenu.destinationColumnNameInput`)}
         />
         {columnNameAlreadyExists(this.state.newColumnInput) ? (
           <WarningContainer message={T.translate(`${COPY_NEW_COLUMN_PREFIX}.inputDuplicate`)} />
@@ -768,11 +776,16 @@ export default class Calculate extends Component {
           className="btn btn-primary float-left"
           disabled={this.isApplyDisabled()}
           onClick={this.getExpressionAndApply}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.submenu.applyButton`)}
         >
           {T.translate('features.DataPrep.Directives.apply')}
         </button>
 
-        <button className="btn btn-link float-right" onClick={this.setDefaultState}>
+        <button
+          className="btn btn-link float-right"
+          onClick={this.setDefaultState}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.submenu.cancelButton`)}
+        >
           {T.translate('features.DataPrep.Directives.cancel')}
         </button>
       </div>
@@ -846,6 +859,7 @@ export default class Calculate extends Component {
             step="any"
             min={inputMin}
             autoFocus
+            data-testid={getDataTestid(`${TESTID_PREFIX}.submenu.operandInput`)}
           />
         </div>
         {this.renderNewColumnNameInputWithCheckbox()}
@@ -868,6 +882,7 @@ export default class Calculate extends Component {
             active: this.props.isOpen && !this.state.isDisabled,
             disabled: this.state.isDisabled,
           })}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}
         >
           <span>{T.translate(`${PREFIX}.title`)}</span>
 

app/cdap/components/DataPrep/Directives/ChangeDataType/DecimalOptions.tsx

@@ -31,6 +31,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 import {
   ISubmenuProps,
@@ -45,6 +46,7 @@ const PREFIX = 'features.DataPrep.Directives.ChangeDataType.decimalConfig';
 const ROUNDING_PREFIX = `${PREFIX}.roundingOptions`;
 
 const ID_PREFIX = 'DataPrep-Directives-ChangeDataType-decimal';
+const TESTID_PREFIX = 'features.dataprep.directives.changeDataType.submenu.decimal';
 
 const SCALE_INPUT_ID = `${ID_PREFIX}-scaleInputId`;
 const PRECISION_INPUT_ID = `${ID_PREFIX}-precisionInputId`;
@@ -161,6 +163,7 @@ export const DecimalOptions = ({ onApply, onCancel }: ISubmenuProps): JSX.Elemen
               type="number"
               value={scale}
               onChange={handleScaleChange}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.scaleInput`)}
               endAdornment={
                 <InputAdornment position="end">
                   <Tooltip
@@ -192,6 +195,7 @@ export const DecimalOptions = ({ onApply, onCancel }: ISubmenuProps): JSX.Elemen
               type="number"
               value={precision}
               onChange={handlePrecisionChange}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.precisionInput`)}
               endAdornment={
                 <InputAdornment position="end">
                   <Tooltip
@@ -231,6 +235,7 @@ export const DecimalOptions = ({ onApply, onCancel }: ISubmenuProps): JSX.Elemen
                 value={rounding}
                 onChange={handleRoundingChange}
                 label={T.translate(`${PREFIX}.roundingLabel`)}
+                data-testid={getDataTestid(`${TESTID_PREFIX}.roundingSelector`)}
                 endAdornment={
                   <InputAdornment position="end">
                     <Tooltip
@@ -253,7 +258,11 @@ export const DecimalOptions = ({ onApply, onCancel }: ISubmenuProps): JSX.Elemen
                 }
               >
                 {ROUNDING_MODES.map((mode: IRoundingMode) => (
-                  <MenuItem value={mode.value} key={mode.value}>
+                  <MenuItem
+                    value={mode.value}
+                    key={mode.value}
+                    data-testid={getDataTestid(`${TESTID_PREFIX}.roundingOption`, mode.text)}
+                  >
                     <Tooltip
                       arrow
                       enterDelay={500}
@@ -272,10 +281,20 @@ export const DecimalOptions = ({ onApply, onCancel }: ISubmenuProps): JSX.Elemen
             </FormControl>
           </Tooltip>
           <ButtonsContainer>
-            <Button variant="contained" color="primary" disableElevation onClick={applyDirective}>
+            <Button
+              variant="contained"
+              color="primary"
+              disableElevation
+              onClick={applyDirective}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.applyButton`)}
+            >
               {T.translate(`${PREFIX}.applyButton`)}
             </Button>
-            <Button color="primary" onClick={onCancel}>
+            <Button
+              color="primary"
+              onClick={onCancel}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.cancelButton`)}
+            >
               {T.translate(`${PREFIX}.cancelButton`)}
             </Button>
           </ButtonsContainer>

app/cdap/components/DataPrep/Directives/ChangeDataType/index.js

@@ -29,8 +29,10 @@ import { preventPropagation } from 'services/helpers';
 import { UncontrolledTooltip } from 'components/UncontrolledComponents';
 import If from 'components/shared/If';
 import { DecimalOptions } from 'components/DataPrep/Directives/ChangeDataType/DecimalOptions';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.Directives.ChangeDataType';
+const TESTID_PREFIX = 'features.dataprep.directives.changeDataType';
 
 require('./ChangeDataType.scss');
 
@@ -152,6 +154,7 @@ export default class ChangeDataTypeDirective extends Component {
               className='option clearfix'
               key={i}
               onClick={this.handleOptionSelect.bind(this, option)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.option`, option)}
             >
               <span>{T.translate(`${PREFIX}.Options.${option}`)}</span>
               { !!DATATYPES_WITH_SUBMENU[option] &&
@@ -179,6 +182,7 @@ export default class ChangeDataTypeDirective extends Component {
             active: this.props.isOpen && !this.state.isDisabled,
             disabled: this.state.isDisabled,
           })}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.title`)}
         >
           <span>{T.translate(`${PREFIX}.title`)}</span>
 

app/cdap/components/DataPrep/Directives/ColumnActions/index.js

@@ -24,7 +24,7 @@ import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
 import Bulkset from 'components/DataPrep/Directives/ColumnActions/Bulkset';
 import ReplaceColumns from 'components/DataPrep/Directives/ColumnActions/ReplaceColumns';
 import T from 'i18n-react';
-import { getDataTestid } from '../../../../testids/TestidsProvider';
+import { getDataTestid } from '@cdap-ui/testids/TestidsProvider';
 require('./ColumnActions.scss');
 
 const PREFIX = 'features.DataPrep.Directives.ColumnActions';