Fix scroll into view not working when revealing method

This fixes a bug where the method row would not scroll into view when
revealing a method. The problem was that the `DataGridRow` component
on which the `ref` was set is a `display: contents` element, which
does not have a visual representation in the DOM. Therefore, it wasn't
possible to scroll the method row into view. This fixes it by moving
the ref to the `DataGridCell` component of the first column, which is
a normal element.

Author: koesie10

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -107,21 +107,28 @@ interface DataGridCellProps {
  * cells anywhere within the grid. You can also configure cells to span multiple rows
  * or columns. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column.
  */
-export function DataGridCell({
-  rowType = "default",
-  gridRow,
-  gridColumn,
-  className,
-  children,
-}: DataGridCellProps) {
-  return (
-    <StyledDataGridCell
-      $rowType={rowType}
-      $gridRow={gridRow}
-      $gridColumn={gridColumn}
-      className={className}
-    >
-      {children}
-    </StyledDataGridCell>
-  );
-}
+export const DataGridCell = forwardRef(
+  (
+    {
+      rowType = "default",
+      gridRow,
+      gridColumn,
+      className,
+      children,
+    }: DataGridCellProps,
+    ref?: React.Ref<HTMLElement | undefined>,
+  ) => {
+    return (
+      <StyledDataGridCell
+        $rowType={rowType}
+        $gridRow={gridRow}
+        $gridColumn={gridColumn}
+        className={className}
+        ref={ref}
+      >
+        {children}
+      </StyledDataGridCell>
+    );
+  },
+);
+DataGridCell.displayName = "DataGridCell";

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -193,11 +193,11 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
     return (
       <DataGridRow
         data-testid="modelable-method-row"
-        ref={ref}
         focused={revealedMethodSignature === method.signature}
       >
         <DataGridCell
           gridRow={`span ${modeledMethods.length + validationErrors.length}`}
+          ref={ref}
         >
           <ApiOrMethodRow>
             <ModelingStatusIndicator status={modelingStatus} />
@@ -322,10 +322,9 @@ const UnmodelableMethodRow = forwardRef<
   return (
     <DataGridRow
       data-testid="unmodelable-method-row"
-      ref={ref}
       focused={revealedMethodSignature === method.signature}
     >
-      <DataGridCell>
+      <DataGridCell ref={ref}>
         <ApiOrMethodRow>
           <ModelingStatusIndicator status="saved" />
           <MethodClassifications method={method} />