Clean up `NotebookCell` component, forward refs (#32035)

* Convert `NotebookCell` to TS, add `forwardRef`

* Move styled components to a styled file

frontend/src/metabase/query_builder/components/notebook/NotebookCell.jsx → frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.styled.tsx

-/* eslint-disable react/prop-types */
-import { isValidElement } from "react";
-
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-
-import { Icon } from "metabase/core/components/Icon";
-
 import { alpha } from "metabase/lib/colors";
 
-const CONTAINER_PADDING = "10px";
+export type BorderSide = "top" | "right" | "bottom" | "left";
 
-const _NotebookCell = styled.div`
+export const CONTAINER_PADDING = "10px";
+
+export const NotebookCell = styled.div<{ color: string; padding?: string }>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -20,12 +16,10 @@ const _NotebookCell = styled.div`
   color: ${props => props.color};
 `;
 
-export const NotebookCell = Object.assign(_NotebookCell, {
-  displayName: "NotebookCell",
-  CONTAINER_PADDING,
-});
-
-const NotebookCellItemContainer = styled.div`
+export const NotebookCellItemContainer = styled.div<{
+  color: string;
+  inactive?: boolean;
+}>`
   display: flex;
   align-items: center;
   font-weight: bold;
@@ -48,7 +42,12 @@ const NotebookCellItemContainer = styled.div`
   }
 `;
 
-const NotebookCellItemContentContainer = styled.div`
+export const NotebookCellItemContentContainer = styled.div<{
+  color: string;
+  inactive?: boolean;
+  border?: BorderSide;
+  roundedCorners: BorderSide[];
+}>`
   display: flex;
   align-items: center;
   padding: ${CONTAINER_PADDING};
@@ -80,60 +79,3 @@ const NotebookCellItemContentContainer = styled.div`
 
   transition: background 300ms linear;
 `;
-
-export function NotebookCellItem(props) {
-  const {
-    inactive,
-    color,
-    containerStyle,
-    right,
-    rightContainerStyle,
-    children,
-    readOnly,
-    ...restProps
-  } = props;
-
-  const hasRightSide = isValidElement(right) && !readOnly;
-  const mainContentRoundedCorners = ["left"];
-  if (!hasRightSide) {
-    mainContentRoundedCorners.push("right");
-  }
-  return (
-    <NotebookCellItemContainer
-      inactive={inactive}
-      color={color}
-      {...restProps}
-      data-testid={props["data-testid"] ?? "notebook-cell-item"}
-    >
-      <NotebookCellItemContentContainer
-        inactive={inactive}
-        color={color}
-        roundedCorners={mainContentRoundedCorners}
-        style={containerStyle}
-      >
-        {children}
-      </NotebookCellItemContentContainer>
-      {hasRightSide && (
-        <NotebookCellItemContentContainer
-          inactive={inactive}
-          color={color}
-          border="left"
-          roundedCorners={["right"]}
-          style={rightContainerStyle}
-        >
-          {right}
-        </NotebookCellItemContentContainer>
-      )}
-    </NotebookCellItemContainer>
-  );
-}
-
-NotebookCellItem.displayName = "NotebookCellItem";
-
-export const NotebookCellAdd = ({ initialAddText, ...props }) => (
-  <NotebookCellItem {...props} inactive={!!initialAddText}>
-    {initialAddText || <Icon name="add" className="text-white" />}
-  </NotebookCellItem>
-);
-
-NotebookCellAdd.displayName = "NotebookCellAdd";

frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.tsx

+import { forwardRef, isValidElement } from "react";
+import { Icon } from "metabase/core/components/Icon";
+import {
+  NotebookCell as _NotebookCell,
+  NotebookCellItemContainer,
+  NotebookCellItemContentContainer,
+  CONTAINER_PADDING,
+  BorderSide,
+} from "./NotebookCell.styled";
+
+export const NotebookCell = Object.assign(_NotebookCell, {
+  displayName: "NotebookCell",
+  CONTAINER_PADDING,
+});
+
+interface NotebookCellItemProps {
+  color: string;
+  inactive?: boolean;
+  readOnly?: boolean;
+  right?: React.ReactNode;
+  containerStyle?: React.CSSProperties;
+  rightContainerStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler;
+  "data-testid"?: string;
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+export const NotebookCellItem = forwardRef<
+  HTMLDivElement,
+  NotebookCellItemProps
+>(function NotebookCellItem(
+  {
+    inactive,
+    color,
+    containerStyle,
+    right,
+    rightContainerStyle,
+    children,
+    readOnly,
+    ...restProps
+  },
+  ref,
+) {
+  const hasRightSide = isValidElement(right) && !readOnly;
+  const mainContentRoundedCorners: BorderSide[] = ["left"];
+  if (!hasRightSide) {
+    mainContentRoundedCorners.push("right");
+  }
+  return (
+    <NotebookCellItemContainer
+      inactive={inactive}
+      color={color}
+      {...restProps}
+      data-testid={restProps["data-testid"] ?? "notebook-cell-item"}
+      ref={ref}
+    >
+      <NotebookCellItemContentContainer
+        inactive={inactive}
+        color={color}
+        roundedCorners={mainContentRoundedCorners}
+        style={containerStyle}
+      >
+        {children}
+      </NotebookCellItemContentContainer>
+      {hasRightSide && (
+        <NotebookCellItemContentContainer
+          inactive={inactive}
+          color={color}
+          border="left"
+          roundedCorners={["right"]}
+          style={rightContainerStyle}
+        >
+          {right}
+        </NotebookCellItemContentContainer>
+      )}
+    </NotebookCellItemContainer>
+  );
+});
+
+interface NotebookCellAddProps extends NotebookCellItemProps {
+  initialAddText?: React.ReactNode;
+}
+
+export const NotebookCellAdd = forwardRef<HTMLDivElement, NotebookCellAddProps>(
+  function NotebookCellAdd({ initialAddText, ...props }, ref) {
+    return (
+      <NotebookCellItem {...props} inactive={!!initialAddText} ref={ref}>
+        {initialAddText || <Icon name="add" className="text-white" />}
+      </NotebookCellItem>
+    );
+  },
+);

frontend/src/metabase/query_builder/components/notebook/NotebookCell/index.ts

+export * from "./NotebookCell";