Make bars clickable

BrunoQuaresma · BrunoQuaresma · commit d48624b5e575 · 2024-09-19T18:41:23.000Z
diff --git a/site/src/components/GanttChart/Bar.tsx b/site/src/components/GanttChart/Bar.tsx
@@ -28,7 +28,14 @@ export const Bar = forwardRef<HTMLDivElement, BarProps>(
 				css={[styles.root, { transform: `translateX(${x}px)` }]}
 				{...htmlProps}
 			>
-				<div css={[styles.bar, colorStyles[color], { width }]}>{children}</div>
+				<button
+					type="button"
+					css={[styles.bar, colorStyles[color], { width }]}
+					disabled={htmlProps.disabled}
+					aria-labelledby={htmlProps["aria-labelledby"]}
+				>
+					{children}
+				</button>
 				{afterLabel}
 			</div>
 		);
@@ -47,6 +54,18 @@ const styles = {
 		border: "1px solid transparent",
 		borderRadius: 8,
 		height: 32,
+		display: "flex",
+		padding: 0,
+
+		"&:not(:disabled)": {
+			cursor: "pointer",
+
+			"&:focus, &:hover, &:active": {
+				outline: "none",
+				background: "#082F49",
+				borderColor: "#38BDF8",
+			},
+		},
 	},
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/modules/workspaces/WorkspaceTimingChart/WorkspaceTimingChart.tsx b/site/src/modules/workspaces/WorkspaceTimingChart/WorkspaceTimingChart.tsx
@@ -102,6 +102,7 @@ export const WorkspaceTimingChart: FC<WorkspaceTimingChartProps> = ({
 								}
 								aria-labelledby={`${s.name}-label`}
 								ref={applyBarHeightToLabel}
+								disabled={timings.length <= 1}
 							>
 								{timings.length > 1 && (
 									<TimingBlocks

Original file line number	Diff line number	Diff line change
`@@ -102,6 +102,7 @@ export const WorkspaceTimingChart: FC<WorkspaceTimingChartProps> = ({`
`102`	`102`	`}`
`103`	`103`	aria-labelledby={`${s.name}-label`}
`104`	`104`	`ref={applyBarHeightToLabel}`
	`105`	`+ disabled={timings.length <= 1}`
`105`	`106`	`>`
`106`	`107`	`{timings.length > 1 && (`
`107`	`108`	`<TimingBlocks`