Use custom grid element instead of VSCodeDataGrid

Author: robertbrignull

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

@@ -5,14 +5,14 @@ import { Meta, StoryFn } from "@storybook/react";
 import { MethodRow as MethodRowComponent } from "../../view/model-editor/MethodRow";
 import { CallClassification, Method } from "../../model-editor/method";
 import { ModeledMethod } from "../../model-editor/modeled-method";
-import { VSCodeDataGrid } from "@vscode/webview-ui-toolkit/react";
 import {
   MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS,
   SINGLE_MODEL_GRID_TEMPLATE_COLUMNS,
 } from "../../view/model-editor/ModeledMethodDataGrid";
 import { ModelEditorViewState } from "../../model-editor/shared/view-state";
 import { createMockExtensionPack } from "../../../test/factories/model-editor/extension-pack";
 import { Mode } from "../../model-editor/shared/mode";
+import { DataGrid } from "../../view/common/DataGrid";
 
 export default {
   title: "CodeQL Model Editor/Method Row",
@@ -24,9 +24,9 @@ const Template: StoryFn<typeof MethodRowComponent> = (args) => {
     ? MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS
     : SINGLE_MODEL_GRID_TEMPLATE_COLUMNS;
   return (
-    <VSCodeDataGrid gridTemplateColumns={gridTemplateColumns}>
+    <DataGrid gridTemplateColumns={gridTemplateColumns}>
       <MethodRowComponent {...args} />
-    </VSCodeDataGrid>
+    </DataGrid>
   );
 };
 

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { styled } from "styled-components";
+
+/*
+ * A drop-in replacement for the VSCodeDataGrid family of components.
+ *
+ * The difference is that the `display: grid` styling is applied to `DataGrid`, whereas
+ * in the VS Code version that styling is applied to `VSCodeDataGridRow`. This gives
+ * column alignment across rows in situation with dynamic contents. It also allows
+ * for cells to span multiple rows and all the other features of data grids.
+ */
+
+const StyledDataGrid = styled.div<{ $gridTemplateColumns: string | number }>`
+  display: grid;
+  grid-template-columns: ${(props) => props.$gridTemplateColumns};
+  padding: calc((var(--design-unit) / 4) * 1px) 0;
+  box-sizing: border-box;
+  width: 100%;
+  background: transparent;
+`;
+
+interface DataGridProps {
+  gridTemplateColumns: string | number;
+  children: React.ReactNode;
+}
+
+export function DataGrid(props: DataGridProps) {
+  const { gridTemplateColumns, children } = props;
+
+  return (
+    <StyledDataGrid
+      aria-label="DataGrid"
+      $gridTemplateColumns={gridTemplateColumns}
+    >
+      {children}
+    </StyledDataGrid>
+  );
+}
+
+export const DataGridRow = styled.div<{ $focused?: boolean }>`
+  display: contents;
+
+  &:hover > * {
+    background-color: var(--list-hover-background);
+  }
+
+  & > * {
+    // Use !important to override the background color set by the hover state
+    background-color: ${(props) =>
+      props.$focused
+        ? "var(--vscode-editor-selectionBackground) !important"
+        : "inherit"};
+  }
+`;
+
+const StyledDataGridCell = styled.div<{
+  $gridRow: string | number;
+  $gridColumn: string | number;
+}>`
+  grid-row: ${(props) => props.$gridRow};
+  grid-column: ${(props) => props.$gridColumn};
+  padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
+`;
+
+interface DataGridCellProps {
+  gridRow: string | number;
+  gridColumn: string | number;
+  children: React.ReactNode;
+}
+
+export function DataGridCell(props: DataGridCellProps) {
+  const { gridRow, gridColumn, children } = props;
+
+  return (
+    <StyledDataGridCell $gridRow={gridRow} $gridColumn={gridColumn}>
+      {children}
+    </StyledDataGridCell>
+  );
+}

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

@@ -1,35 +1,41 @@
-import {
-  VSCodeDataGridCell,
-  VSCodeDataGridRow,
-} from "@vscode/webview-ui-toolkit/react";
 import * as React from "react";
 import { styled } from "styled-components";
 import { pluralize } from "../../common/word";
+import { DataGridCell, DataGridRow } from "../common/DataGrid";
+import { ModelEditorViewState } from "../../model-editor/shared/view-state";
 
-const HiddenMethodsCell = styled(VSCodeDataGridCell)`
+const HiddenMethodsText = styled.div`
   text-align: center;
 `;
 
 interface Props {
+  gridRow: number;
   numHiddenMethods: number;
   someMethodsAreVisible: boolean;
+  viewState: ModelEditorViewState;
 }
 
 export function HiddenMethodsRow({
+  gridRow,
   numHiddenMethods,
   someMethodsAreVisible,
+  viewState,
 }: Props) {
   if (numHiddenMethods === 0) {
     return null;
   }
 
+  const gridColumn = viewState.showMultipleModels ? "span 6" : "span 5";
+
   return (
-    <VSCodeDataGridRow>
-      <HiddenMethodsCell gridColumn="span 5">
-        {someMethodsAreVisible && "And "}
-        {pluralize(numHiddenMethods, "method", "methods")} modeled in other
-        CodeQL packs
-      </HiddenMethodsCell>
-    </VSCodeDataGridRow>
+    <DataGridRow>
+      <DataGridCell gridRow={gridRow} gridColumn={gridColumn}>
+        <HiddenMethodsText>
+          {someMethodsAreVisible && "And "}
+          {pluralize(numHiddenMethods, "method", "methods")} modeled in other
+          CodeQL packs
+        </HiddenMethodsText>
+      </DataGridCell>
+    </DataGridRow>
   );
 }

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

@@ -4,6 +4,7 @@ import { Method } from "../../model-editor/method";
 
 const Name = styled.span`
   font-family: var(--vscode-editor-font-family);
+  word-break: break-all;
 `;
 
 export const MethodName = (method: Method): JSX.Element => {