fix: add classNames and data-test attributes to elements for SmartX

splunk · May 18, 2021 · 254a1d1 · 254a1d1
1 parent f23e98e
commit 254a1d1
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 10 deletions.
diff --git a/ui/src/main/webapp/components/DeleteModal.jsx b/ui/src/main/webapp/components/DeleteModal.jsx
@@ -90,7 +90,7 @@ class DeleteModal extends Component {
                     title={getFormattedMessage(101)}
                     onRequestClose={this.handleRequestClose}
                 />
-                <Modal.Body>
+                <Modal.Body className="deletePrompt">
                     {this.generateErrorMessage()}
                     <p>{deleteMsg}</p>
                 </Modal.Body>

diff --git a/ui/src/main/webapp/components/SingleInputComponent.jsx b/ui/src/main/webapp/components/SingleInputComponent.jsx
@@ -123,6 +123,7 @@ function SingleInputComponent(props) {
         <>
             {createSearchChoice ? (
                 <ComboBoxWrapper
+                    className="dropdownBox"
                     value={props.value === null ? '' : props.value}
                     name={field}
                     error={error}
@@ -136,6 +137,7 @@ function SingleInputComponent(props) {
             ) : (
                 <>
                     <SelectWrapper
+                        className="dropdownBox"
                         value={props.value}
                         name={field}
                         error={error}

diff --git a/ui/src/main/webapp/components/table/CustomTableRow.jsx b/ui/src/main/webapp/components/table/CustomTableRow.jsx
@@ -58,20 +58,23 @@ function CustomTableRow(props) {
                                 appearance="flat"
                                 icon={<Pencil screenReaderText={null} size={1} />}
                                 onClick={() => handleEditActionClick(selectedRow)}
+                                className="editBtn"
                             />
                         </Tooltip>
                         <Tooltip content={_('Clone')}>
                             <ActionButtonComponent
                                 appearance="flat"
                                 icon={<Clone screenReaderText={null} size={1} />}
                                 onClick={() => handleCloneActionClick(selectedRow)}
+                                className="cloneBtn"
                             />
                         </Tooltip>
                         <Tooltip content={_('Delete')}>
                             <ActionButtonComponent
                                 appearance="destructive"
                                 icon={<Trash screenReaderText={null} size={1} />}
                                 onClick={() => handleDeleteActionClick(selectedRow)}
+                                className="deleteBtn"
                             />
                         </Tooltip>
                     </ButtonGroup>
@@ -106,13 +109,13 @@ function CustomTableRow(props) {
 
                         if (header.customCell && header.customCell.src) {
                             cellHTML = (
-                                <Table.Cell key={header.field}>
+                                <Table.Cell data-column={header.field} key={header.field}>
                                     {getCustomCell(row, header)}
                                 </Table.Cell>
                             );
                         } else if (header.field === 'disabled') {
                             cellHTML = (
-                                <Table.Cell key={header.field}>
+                                <Table.Cell data-column={header.field} key={header.field}>
                                     <SwitchWrapper>
                                         <Switch
                                             key={row.name}
@@ -142,7 +145,7 @@ function CustomTableRow(props) {
                             cellHTML = rowActionsPrimaryButton(row);
                         } else {
                             cellHTML = (
-                                <Table.Cell key={header.field}>
+                                <Table.Cell data-column={header.field} key={header.field}>
                                     {headerMapping[header.field] &&
                                     Object.prototype.hasOwnProperty.call(
                                         headerMapping[header.field],

diff --git a/ui/src/main/webapp/components/table/TableHeader.jsx b/ui/src/main/webapp/components/table/TableHeader.jsx
@@ -50,6 +50,7 @@ function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
         return (
             <Select
                 value={searchType}
+                className="dropdownInput"
                 onChange={(e, { value }) => {
                     setCurrentPage(0);
                     setSearchType(value);
@@ -63,12 +64,15 @@ function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
     return (
         <TableHeaderWrapper>
             <div>
-                {totalElement}
-                {totalElement > 1 ? _(` ${itemLabel}s`) : _(` ${itemLabel}`)}
+                <span className="inputNumber">
+                    {totalElement}
+                    {totalElement > 1 ? _(` ${itemLabel}s`) : _(` ${itemLabel}`)}
+                </span>
                 {page === PAGE_INPUT ? (
                     <TableSelectBoxWrapper>
                         <Select
                             value={pageSize}
+                            className="dropdownPage"
                             onChange={(e, { value }) => {
                                 setCurrentPage(0);
                                 setPageSize(value);

diff --git a/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -94,7 +94,7 @@ function ConfigurationPage() {
                         style={
                             tab.name !== activeTabId ? { display: 'none' } : { display: 'block' }
                         }
-                        id={`${tab.name}-tab`}
+                        id={`${tab.name}Tab`}
                     >
                         <ConfigurationTable
                             key={tab.name}
@@ -108,7 +108,7 @@ function ConfigurationPage() {
                         style={
                             tab.name !== activeTabId ? { display: 'none' } : { display: 'block' }
                         }
-                        id={`${tab.name}-tab`}
+                        id={`${tab.name}Tab`}
                     >
                         <ConfigurationFormView key={tab.name} serviceName={tab.name} />
                     </div>

diff --git a/ui/src/main/webapp/pages/Input/InputPageStyle.jsx b/ui/src/main/webapp/pages/Input/InputPageStyle.jsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { variables } from '@splunk/themes';
 
 export const TitleComponent = styled.div.attrs({
-    className: "page-title"
+    className: 'pageTitle',
 })`
     &.page-title {
         font-size: ${variables.fontSizeXXLarge};
@@ -11,7 +11,7 @@ export const TitleComponent = styled.div.attrs({
 `;
 
 export const SubTitleComponent = styled.div.attrs({
-    className: "page-subtitle"
+    className: 'pageSubtitle',
 })`
     &.page-subtitle {
         font-size: ${variables.fontSize};