Skip to content

Commit 2986564

Browse files
Make gridRow and gridColumn optional
1 parent 6c27189 commit 2986564

6 files changed

Lines changed: 27 additions & 51 deletions

File tree

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,17 +48,17 @@ export const DataGridRow = styled.div<{ $focused?: boolean }>`
4848
`;
4949

5050
const StyledDataGridCell = styled.div<{
51-
$gridRow: string | number;
52-
$gridColumn: string | number;
51+
$gridRow?: string | number;
52+
$gridColumn?: string | number;
5353
}>`
54-
grid-row: ${(props) => props.$gridRow};
55-
grid-column: ${(props) => props.$gridColumn};
54+
${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")}
55+
${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")}
5656
padding: 4px 12px;
5757
`;
5858

5959
interface DataGridCellProps {
60-
gridRow: string | number;
61-
gridColumn: string | number;
60+
gridRow?: string | number;
61+
gridColumn?: string | number;
6262
className?: string;
6363
children: React.ReactNode;
6464
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@ const HiddenMethodsText = styled(DataGridCell)`
99
`;
1010

1111
interface Props {
12-
gridRow: number;
1312
numHiddenMethods: number;
1413
someMethodsAreVisible: boolean;
1514
viewState: ModelEditorViewState;
1615
}
1716

1817
export function HiddenMethodsRow({
19-
gridRow,
2018
numHiddenMethods,
2119
someMethodsAreVisible,
2220
viewState,
@@ -29,7 +27,7 @@ export function HiddenMethodsRow({
2927

3028
return (
3129
<DataGridRow>
32-
<HiddenMethodsText gridRow={gridRow} gridColumn={gridColumn}>
30+
<HiddenMethodsText gridColumn={gridColumn}>
3331
{someMethodsAreVisible && "And "}
3432
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
3533
CodeQL packs

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ const CodiconRow = styled(VSCodeButton)`
6363
`;
6464

6565
export type MethodRowProps = {
66-
gridRow: number;
6766
method: Method;
6867
methodCanBeModeled: boolean;
6968
modeledMethods: ModeledMethod[];
@@ -98,7 +97,6 @@ export const MethodRow = (props: MethodRowProps) => {
9897
const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
9998
(props, ref) => {
10099
const {
101-
gridRow,
102100
method,
103101
modeledMethods: modeledMethodsProp,
104102
methodIsUnsaved,
@@ -164,7 +162,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
164162
ref={ref}
165163
$focused={revealedMethodSignature === method.signature}
166164
>
167-
<DataGridCell gridRow={gridRow} gridColumn={1}>
165+
<DataGridCell>
168166
<ApiOrMethodRow>
169167
<ModelingStatusIndicator status={modelingStatus} />
170168
<MethodClassifications method={method} />
@@ -180,20 +178,20 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
180178
</DataGridCell>
181179
{props.modelingInProgress && (
182180
<>
183-
<DataGridCell gridRow={gridRow} gridColumn={2}>
181+
<DataGridCell>
184182
<InProgressDropdown />
185183
</DataGridCell>
186-
<DataGridCell gridRow={gridRow} gridColumn={3}>
184+
<DataGridCell>
187185
<InProgressDropdown />
188186
</DataGridCell>
189-
<DataGridCell gridRow={gridRow} gridColumn={4}>
187+
<DataGridCell>
190188
<InProgressDropdown />
191189
</DataGridCell>
192-
<DataGridCell gridRow={gridRow} gridColumn={5}>
190+
<DataGridCell>
193191
<InProgressDropdown />
194192
</DataGridCell>
195193
{viewState.showMultipleModels && (
196-
<DataGridCell gridRow={gridRow} gridColumn={6}>
194+
<DataGridCell>
197195
<CodiconRow appearance="icon" disabled={true}>
198196
<Codicon name="add" label="Add new model" />
199197
</CodiconRow>
@@ -203,7 +201,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
203201
)}
204202
{!props.modelingInProgress && (
205203
<>
206-
<MultiModelColumn gridRow={gridRow} gridColumn={2}>
204+
<MultiModelColumn>
207205
{modeledMethods.map((modeledMethod, index) => (
208206
<ModelTypeDropdown
209207
key={index}
@@ -213,7 +211,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
213211
/>
214212
))}
215213
</MultiModelColumn>
216-
<MultiModelColumn gridRow={gridRow} gridColumn={3}>
214+
<MultiModelColumn>
217215
{modeledMethods.map((modeledMethod, index) => (
218216
<ModelInputDropdown
219217
key={index}
@@ -223,7 +221,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
223221
/>
224222
))}
225223
</MultiModelColumn>
226-
<MultiModelColumn gridRow={gridRow} gridColumn={4}>
224+
<MultiModelColumn>
227225
{modeledMethods.map((modeledMethod, index) => (
228226
<ModelOutputDropdown
229227
key={index}
@@ -233,7 +231,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
233231
/>
234232
))}
235233
</MultiModelColumn>
236-
<MultiModelColumn gridRow={gridRow} gridColumn={5}>
234+
<MultiModelColumn>
237235
{modeledMethods.map((modeledMethod, index) => (
238236
<ModelKindDropdown
239237
key={index}
@@ -244,7 +242,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
244242
))}
245243
</MultiModelColumn>
246244
{viewState.showMultipleModels && (
247-
<MultiModelColumn gridRow={gridRow} gridColumn={6}>
245+
<MultiModelColumn>
248246
{modeledMethods.map((_, index) =>
249247
index === modeledMethods.length - 1 ? (
250248
<CodiconRow
@@ -281,7 +279,7 @@ const UnmodelableMethodRow = forwardRef<
281279
HTMLElement | undefined,
282280
MethodRowProps
283281
>((props, ref) => {
284-
const { gridRow, method, viewState, revealedMethodSignature } = props;
282+
const { method, viewState, revealedMethodSignature } = props;
285283

286284
const jumpToMethod = useCallback(
287285
() => sendJumpToMethodMessage(method),
@@ -294,7 +292,7 @@ const UnmodelableMethodRow = forwardRef<
294292
ref={ref}
295293
$focused={revealedMethodSignature === method.signature}
296294
>
297-
<DataGridCell gridRow={gridRow} gridColumn={1}>
295+
<DataGridCell>
298296
<ApiOrMethodRow>
299297
<ModelingStatusIndicator status="saved" />
300298
<MethodName {...props.method} />
@@ -307,9 +305,7 @@ const UnmodelableMethodRow = forwardRef<
307305
<MethodClassifications method={method} />
308306
</ApiOrMethodRow>
309307
</DataGridCell>
310-
<DataGridCell gridRow={gridRow} gridColumn="span 4">
311-
Method already modeled
312-
</DataGridCell>
308+
<DataGridCell gridColumn="span 4">Method already modeled</DataGridCell>
313309
</DataGridRow>
314310
);
315311
});

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -71,23 +71,13 @@ export const ModeledMethodDataGrid = ({
7171
<DataGrid gridTemplateColumns={gridTemplateColumns}>
7272
{someMethodsAreVisible && (
7373
<>
74-
<DataGridCell gridRow={1} gridColumn={1}>
75-
API or method
76-
</DataGridCell>
77-
<DataGridCell gridRow={1} gridColumn={2}>
78-
Model type
79-
</DataGridCell>
80-
<DataGridCell gridRow={1} gridColumn={3}>
81-
Input
82-
</DataGridCell>
83-
<DataGridCell gridRow={1} gridColumn={4}>
84-
Output
85-
</DataGridCell>
86-
<DataGridCell gridRow={1} gridColumn={5}>
87-
Kind
88-
</DataGridCell>
74+
<DataGridCell>API or method</DataGridCell>
75+
<DataGridCell>Model type</DataGridCell>
76+
<DataGridCell>Input</DataGridCell>
77+
<DataGridCell>Output</DataGridCell>
78+
<DataGridCell>Kind</DataGridCell>
8979
{viewState.showMultipleModels && (
90-
<DataGridCell gridRow={1} gridColumn={6}>
80+
<DataGridCell>
9181
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
9282
</DataGridCell>
9383
)}
@@ -97,7 +87,6 @@ export const ModeledMethodDataGrid = ({
9787
return (
9888
<MethodRow
9989
key={method.signature}
100-
gridRow={index + 2}
10190
method={method}
10291
methodCanBeModeled={methodCanBeModeled}
10392
modeledMethods={modeledMethods}
@@ -113,7 +102,6 @@ export const ModeledMethodDataGrid = ({
113102
</>
114103
)}
115104
<HiddenMethodsRow
116-
gridRow={methodsWithModelability.length + 2}
117105
numHiddenMethods={numHiddenMethods}
118106
someMethodsAreVisible={someMethodsAreVisible}
119107
viewState={viewState}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ describe(HiddenMethodsRow.name, () => {
1818
it("does not render with 0 hidden methods", () => {
1919
const { container } = render(
2020
<HiddenMethodsRow
21-
gridRow={1}
2221
numHiddenMethods={0}
2322
someMethodsAreVisible={true}
2423
viewState={viewState}
@@ -31,7 +30,6 @@ describe(HiddenMethodsRow.name, () => {
3130
it("renders with 1 hidden methods and no visible methods", () => {
3231
render(
3332
<HiddenMethodsRow
34-
gridRow={1}
3533
numHiddenMethods={1}
3634
someMethodsAreVisible={false}
3735
viewState={viewState}
@@ -46,7 +44,6 @@ describe(HiddenMethodsRow.name, () => {
4644
it("renders with 1 hidden methods and visible methods", () => {
4745
render(
4846
<HiddenMethodsRow
49-
gridRow={1}
5047
numHiddenMethods={1}
5148
someMethodsAreVisible={true}
5249
viewState={viewState}
@@ -61,7 +58,6 @@ describe(HiddenMethodsRow.name, () => {
6158
it("renders with 3 hidden methods and no visible methods", () => {
6259
render(
6360
<HiddenMethodsRow
64-
gridRow={1}
6561
numHiddenMethods={3}
6662
someMethodsAreVisible={false}
6763
viewState={viewState}
@@ -76,7 +72,6 @@ describe(HiddenMethodsRow.name, () => {
7672
it("renders with 3 hidden methods and visible methods", () => {
7773
render(
7874
<HiddenMethodsRow
79-
gridRow={1}
8075
numHiddenMethods={3}
8176
someMethodsAreVisible={true}
8277
viewState={viewState}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ describe(MethodRow.name, () => {
4545
const render = (props: Partial<MethodRowProps> = {}) =>
4646
reactRender(
4747
<MethodRow
48-
gridRow={1}
4948
method={method}
5049
methodCanBeModeled={true}
5150
modeledMethods={[modeledMethod]}

0 commit comments

Comments
 (0)