Add ui-test accessibility

app/src/components/ChartPanel/Chart.tsx

@@ -52,7 +52,11 @@ function Chart(props: Props) {
   }, [props.parameters])
 
   return (
-    <Paper style={{ padding: '8px' }}>
+    <Paper
+      style={{ padding: '8px' }}
+      data-test-type="ChartPaper"
+      data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+    >
       <div style={{ display: 'flex' }}>
         <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
           <ChartTitle parameters={parameters} />

app/src/components/ChartPanel/ChartActions.tsx

@@ -19,7 +19,7 @@ export function ChartActions(props: {
       </CustomIconButton>
       <SettingsButton parameters={props.parameters} />
       <CustomIconButton tooltip="Remove chart" onClick={props.onRemove}>
-        <Clear />
+        <Clear data-test-type="RemoveChart" data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`} />
       </CustomIconButton>
     </div>
   )

app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx

@@ -19,7 +19,11 @@ export function SettingsButton(props: { parameters: ChartParameters }) {
     <span>
       <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
       <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
-        <MoreVertIcon ref={settingsRef as any} />
+        <MoreVertIcon
+          ref={settingsRef as any}
+          data-test-type="ChartSettings"
+          data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+        />
       </CustomIconButton>
     </span>
   )

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -47,11 +47,19 @@ function ChartPreview(props: Props) {
         onMouseEnter={mouseOver}
         onMouseLeave={mouseOut}
         onClick={onClick}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
       />
     </Tooltip>
   ) : (
     <Tooltip title="Add to chart panel, not enough data for preview">
-      <ShowChart onClick={onClick} className={props.classes.icon} style={{ color: '#aaa' }} />
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
     </Tooltip>
   )