Make timeline visible when its even it selected (#21577)

frontend/src/metabase/timelines/questions/components/TimelineCard/TimelineCard.tsx

@@ -55,13 +55,24 @@ const TimelineCard = ({
     event.stopPropagation();
   }, []);
 
-  const handleCheckboxChange = useCallback(
+  const handleToggleTimeline = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       onToggleTimeline?.(timeline, event.target.checked);
     },
     [timeline, onToggleTimeline],
   );
 
+  const handleToggleEvent = useCallback(
+    (event: TimelineEvent, isSelected: boolean) => {
+      onToggleEvent?.(event, isSelected);
+
+      if (isSelected && !isVisible) {
+        onToggleTimeline?.(timeline, true);
+      }
+    },
+    [timeline, isVisible, onToggleTimeline, onToggleEvent],
+  );
+
   useEffect(() => {
     if (isEventSelected) {
       setIsExpanded(isEventSelected);
@@ -74,7 +85,7 @@ const TimelineCard = ({
         <CardCheckbox
           checked={isVisible}
           onClick={handleCheckboxClick}
-          onChange={handleCheckboxChange}
+          onChange={handleToggleTimeline}
         />
         <CardLabel>
           <Ellipsified tooltipMaxWidth="100%">
@@ -94,7 +105,7 @@ const TimelineCard = ({
               onEdit={onEditEvent}
               onMove={onMoveEvent}
               onArchive={onArchiveEvent}
-              onToggle={onToggleEvent}
+              onToggle={handleToggleEvent}
             />
           ))}
         </CardContent>

frontend/src/metabase/timelines/questions/components/TimelineCard/TimelineCard.unit.spec.tsx

@@ -39,6 +39,22 @@ describe("TimelineCard", () => {
 
     expect(props.onToggleTimeline).toHaveBeenCalled();
   });
+
+  it("should make a timeline visible when its even is selected", () => {
+    const props = getProps({
+      timeline: createMockTimeline({
+        name: "Releases",
+        events: [createMockTimelineEvent({ name: "RC" })],
+      }),
+      isVisible: false,
+    });
+
+    render(<TimelineCard {...props} />);
+    userEvent.click(screen.getByText("Releases"));
+    userEvent.click(screen.getByText("RC"));
+
+    expect(props.onToggleTimeline).toHaveBeenCalledWith(props.timeline, true);
+  });
 });
 
 const getProps = (opts?: Partial<TimelineCardProps>): TimelineCardProps => ({