Wrap MethodRow in a VSCodeDataGrid during story

Author: robertbrignull

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

@@ -4,14 +4,18 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { MethodRow as MethodRowComponent } from "../../view/model-editor/MethodRow";
 import { CallClassification } from "../../model-editor/external-api-usage";
+import { VSCodeDataGrid } from "@vscode/webview-ui-toolkit/react";
+import { GRID_TEMPLATE_COLUMNS } from "../../view/model-editor/ModeledMethodDataGrid";
 
 export default {
   title: "CodeQL Model Editor/Method Row",
   component: MethodRowComponent,
 } as Meta<typeof MethodRowComponent>;
 
 const Template: StoryFn<typeof MethodRowComponent> = (args) => (
-  <MethodRowComponent {...args} />
+  <VSCodeDataGrid gridTemplateColumns={GRID_TEMPLATE_COLUMNS}>
+    <MethodRowComponent {...args} />
+  </VSCodeDataGrid>
 );
 
 export const MethodRow = Template.bind({});

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

@@ -12,6 +12,8 @@ import { Mode } from "../../model-editor/shared/mode";
 import { sortMethods } from "../../model-editor/shared/sorting";
 import { InProgressMethods } from "../../model-editor/shared/in-progress-methods";
 
+export const GRID_TEMPLATE_COLUMNS = "0.5fr 0.125fr 0.125fr 0.125fr 0.125fr";
+
 type Props = {
   packageName: string;
   externalApiUsages: ExternalApiUsage[];
@@ -42,7 +44,7 @@ export const ModeledMethodDataGrid = ({
   );
 
   return (
-    <VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr">
+    <VSCodeDataGrid gridTemplateColumns={GRID_TEMPLATE_COLUMNS}>
       <VSCodeDataGridRow rowType="header">
         <VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
           API or method