chore: add data-test attributes

ui/src/dashboards/components/DashboardHeader.tsx

@@ -168,6 +168,7 @@ class DashboardHeader extends Component<Props, State> {
             icon={IconFont.AddCell}
             onClick={onAddCell}
             titleText="Add a Cell to Dashboard"
+            dataTest="add-cell"
           />
         </Authorized>
       )
@@ -186,13 +187,17 @@ class DashboardHeader extends Component<Props, State> {
     if (dashboard) {
       let variablesTooltip = 'Show Template Variables Controls'
       let annotationsTooltip = 'Show Annotations Controls'
+      let variablesDataTest = 'show-variables--button'
+      let annotationsDataTest = 'show-annotations--button'
 
       if (showTempVarControls) {
         variablesTooltip = 'Hide Template Variables Controls'
+        variablesDataTest = 'hide-variables--button'
       }
 
       if (showAnnotationControls) {
         annotationsTooltip = 'Hide Annotations Controls'
+        annotationsDataTest = 'hide-annotations--button'
       }
 
       return (
@@ -203,6 +208,7 @@ class DashboardHeader extends Component<Props, State> {
             onClick={onToggleShowTempVarControls}
             active={showTempVarControls}
             titleText={variablesTooltip}
+            dataTest={variablesDataTest}
           />
           <Button
             text="Annotations"
@@ -210,6 +216,7 @@ class DashboardHeader extends Component<Props, State> {
             onClick={onToggleShowAnnotationControls}
             active={showAnnotationControls}
             titleText={annotationsTooltip}
+            dataTest={annotationsDataTest}
           />
         </>
       )

ui/src/dashboards/components/DashboardsPageContents.tsx

@@ -83,6 +83,7 @@ class DashboardsPageContents extends Component<Props, State> {
             <SearchBar
               placeholder="Filter by Name..."
               onSearch={this.filterDashboards}
+              dataTest="dashboard-filter--input"
             />
             <Authorized requiredRole={EDITOR_ROLE}>
               <>
@@ -90,12 +91,14 @@ class DashboardsPageContents extends Component<Props, State> {
                   text="Import Dashboard"
                   icon={IconFont.Import}
                   onClick={this.handleToggleOverlay}
+                  dataTest="import-dashboard--button"
                 />
                 <Button
                   text="Create Dashboard"
                   icon={IconFont.Plus}
                   onClick={onCreateDashboard}
                   color={ComponentColor.Primary}
+                  dataTest="create-dashboard-button"
                 />
               </>
             </Authorized>

ui/src/dashboards/components/DashboardsTable.tsx

@@ -60,7 +60,10 @@ class DashboardsTable extends PureComponent<Props> {
           {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard => (
             <tr key={dashboard.id}>
               <td>
-                <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
+                <Link
+                  to={`${dashboardLink}/dashboards/${dashboard.id}`}
+                  data-test={`${dashboard.name}`}
+                >
                   {dashboard.name}
                 </Link>
               </td>

ui/src/hosts/components/SearchBar.tsx

@@ -9,6 +9,7 @@ interface Props {
   width?: number
   placeholder: string
   onSearch: (searchTerm: string) => void
+  dataTest?: string
 }
 
 interface State {
@@ -35,7 +36,7 @@ class SearchBar extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {placeholder, width} = this.props
+    const {placeholder, width, dataTest} = this.props
     return (
       <div className="search-widget" style={{width: `${width}px`}}>
         <input
@@ -43,6 +44,7 @@ class SearchBar extends PureComponent<Props, State> {
           className="form-control input-sm"
           placeholder={placeholder}
           onChange={this.handleChange}
+          data-test={dataTest}
         />
         <span className="icon search" />
       </div>

ui/src/reusable_ui/components/Button/index.tsx

@@ -25,6 +25,7 @@ interface Props {
   active?: boolean
   tabIndex?: number
   customClass?: string
+  dataTest?: string
 }
 
 @ErrorHandling
@@ -38,7 +39,7 @@ class Button extends Component<Props> {
   }
 
   public render() {
-    const {onClick, text, titleText, tabIndex} = this.props
+    const {onClick, text, titleText, tabIndex, dataTest} = this.props
 
     return (
       <button
@@ -47,6 +48,7 @@ class Button extends Component<Props> {
         onClick={onClick}
         title={titleText || text}
         tabIndex={tabIndex ? tabIndex : 0}
+        data-test={dataTest}
       >
         {this.icon}
         {this.text}

ui/src/shared/components/AddAnnotationToggle.tsx

@@ -37,12 +37,14 @@ const AddAnnotationToggle: FunctionComponent<Props> = props => {
   let buttonContent = 'Annotate'
   let buttonColor = ComponentColor.Primary
   let buttonIcon = IconFont.AnnotatePlus
+  let buttonDataTest = 'add-annotation--button'
 
   if (isAddingAnnotation) {
     onToggle = onDismissAddingAnnotation
     buttonContent = 'Cancel Annotate'
     buttonColor = ComponentColor.Default
     buttonIcon = IconFont.Remove
+    buttonDataTest = 'cancel-annotation--button'
   } else {
     onToggle = onAddingAnnotation
   }
@@ -53,6 +55,7 @@ const AddAnnotationToggle: FunctionComponent<Props> = props => {
       color={buttonColor}
       text={buttonContent}
       onClick={onToggle}
+      dataTest={buttonDataTest}
     />
   )
 }

ui/src/shared/components/AnnotationControlBar.tsx

@@ -70,6 +70,7 @@ class AnnotationControlBar extends PureComponent<Props> {
                 color={ComponentColor.Primary}
                 text={'Filter'}
                 titleText={'Add New Annotation Tag Filter'}
+                dataTest={'add-annotation-filter--button'}
               />
             </>
           )}

ui/src/side_nav/containers/SideNav.tsx

@@ -71,7 +71,7 @@ class SideNav extends PureComponent<Props> {
     const hostPageIsEnabled = !env.hostPageDisabled
 
     return isHidden ? null : (
-      <nav className="sidebar">
+      <nav className="sidebar" data-test="sidebar">
         <div
           className={isDefaultPage ? 'sidebar--item active' : 'sidebar--item'}
         >

ui/src/sources/components/DashboardStep.tsx

@@ -134,6 +134,7 @@ class DashboardStep extends Component<Props, State> {
             <SearchBar
               placeholder="Filter by name..."
               onSearch={this.setSearchTerm}
+              dataTest="filter-dashboards--input"
             />
           </div>
           {this.suggestedDashboardCards}