Make gridRow and gridColumn optional
This commit is contained in:
@@ -48,17 +48,17 @@ export const DataGridRow = styled.div<{ $focused?: boolean }>`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledDataGridCell = styled.div<{
|
const StyledDataGridCell = styled.div<{
|
||||||
$gridRow: string | number;
|
$gridRow?: string | number;
|
||||||
$gridColumn: string | number;
|
$gridColumn?: string | number;
|
||||||
}>`
|
}>`
|
||||||
grid-row: ${(props) => props.$gridRow};
|
${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")}
|
||||||
grid-column: ${(props) => props.$gridColumn};
|
${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")}
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface DataGridCellProps {
|
interface DataGridCellProps {
|
||||||
gridRow: string | number;
|
gridRow?: string | number;
|
||||||
gridColumn: string | number;
|
gridColumn?: string | number;
|
||||||
className?: string;
|
className?: string;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,14 +9,12 @@ const HiddenMethodsText = styled(DataGridCell)`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
gridRow: number;
|
|
||||||
numHiddenMethods: number;
|
numHiddenMethods: number;
|
||||||
someMethodsAreVisible: boolean;
|
someMethodsAreVisible: boolean;
|
||||||
viewState: ModelEditorViewState;
|
viewState: ModelEditorViewState;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function HiddenMethodsRow({
|
export function HiddenMethodsRow({
|
||||||
gridRow,
|
|
||||||
numHiddenMethods,
|
numHiddenMethods,
|
||||||
someMethodsAreVisible,
|
someMethodsAreVisible,
|
||||||
viewState,
|
viewState,
|
||||||
@@ -29,7 +27,7 @@ export function HiddenMethodsRow({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<DataGridRow>
|
<DataGridRow>
|
||||||
<HiddenMethodsText gridRow={gridRow} gridColumn={gridColumn}>
|
<HiddenMethodsText gridColumn={gridColumn}>
|
||||||
{someMethodsAreVisible && "And "}
|
{someMethodsAreVisible && "And "}
|
||||||
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
|
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
|
||||||
CodeQL packs
|
CodeQL packs
|
||||||
|
|||||||
@@ -63,7 +63,6 @@ const CodiconRow = styled(VSCodeButton)`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export type MethodRowProps = {
|
export type MethodRowProps = {
|
||||||
gridRow: number;
|
|
||||||
method: Method;
|
method: Method;
|
||||||
methodCanBeModeled: boolean;
|
methodCanBeModeled: boolean;
|
||||||
modeledMethods: ModeledMethod[];
|
modeledMethods: ModeledMethod[];
|
||||||
@@ -98,7 +97,6 @@ export const MethodRow = (props: MethodRowProps) => {
|
|||||||
const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
||||||
(props, ref) => {
|
(props, ref) => {
|
||||||
const {
|
const {
|
||||||
gridRow,
|
|
||||||
method,
|
method,
|
||||||
modeledMethods: modeledMethodsProp,
|
modeledMethods: modeledMethodsProp,
|
||||||
methodIsUnsaved,
|
methodIsUnsaved,
|
||||||
@@ -164,7 +162,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
$focused={revealedMethodSignature === method.signature}
|
$focused={revealedMethodSignature === method.signature}
|
||||||
>
|
>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={1}>
|
<DataGridCell>
|
||||||
<ApiOrMethodRow>
|
<ApiOrMethodRow>
|
||||||
<ModelingStatusIndicator status={modelingStatus} />
|
<ModelingStatusIndicator status={modelingStatus} />
|
||||||
<MethodClassifications method={method} />
|
<MethodClassifications method={method} />
|
||||||
@@ -180,20 +178,20 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
{props.modelingInProgress && (
|
{props.modelingInProgress && (
|
||||||
<>
|
<>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={2}>
|
<DataGridCell>
|
||||||
<InProgressDropdown />
|
<InProgressDropdown />
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={3}>
|
<DataGridCell>
|
||||||
<InProgressDropdown />
|
<InProgressDropdown />
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={4}>
|
<DataGridCell>
|
||||||
<InProgressDropdown />
|
<InProgressDropdown />
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={5}>
|
<DataGridCell>
|
||||||
<InProgressDropdown />
|
<InProgressDropdown />
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
{viewState.showMultipleModels && (
|
{viewState.showMultipleModels && (
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={6}>
|
<DataGridCell>
|
||||||
<CodiconRow appearance="icon" disabled={true}>
|
<CodiconRow appearance="icon" disabled={true}>
|
||||||
<Codicon name="add" label="Add new model" />
|
<Codicon name="add" label="Add new model" />
|
||||||
</CodiconRow>
|
</CodiconRow>
|
||||||
@@ -203,7 +201,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
)}
|
)}
|
||||||
{!props.modelingInProgress && (
|
{!props.modelingInProgress && (
|
||||||
<>
|
<>
|
||||||
<MultiModelColumn gridRow={gridRow} gridColumn={2}>
|
<MultiModelColumn>
|
||||||
{modeledMethods.map((modeledMethod, index) => (
|
{modeledMethods.map((modeledMethod, index) => (
|
||||||
<ModelTypeDropdown
|
<ModelTypeDropdown
|
||||||
key={index}
|
key={index}
|
||||||
@@ -213,7 +211,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</MultiModelColumn>
|
</MultiModelColumn>
|
||||||
<MultiModelColumn gridRow={gridRow} gridColumn={3}>
|
<MultiModelColumn>
|
||||||
{modeledMethods.map((modeledMethod, index) => (
|
{modeledMethods.map((modeledMethod, index) => (
|
||||||
<ModelInputDropdown
|
<ModelInputDropdown
|
||||||
key={index}
|
key={index}
|
||||||
@@ -223,7 +221,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</MultiModelColumn>
|
</MultiModelColumn>
|
||||||
<MultiModelColumn gridRow={gridRow} gridColumn={4}>
|
<MultiModelColumn>
|
||||||
{modeledMethods.map((modeledMethod, index) => (
|
{modeledMethods.map((modeledMethod, index) => (
|
||||||
<ModelOutputDropdown
|
<ModelOutputDropdown
|
||||||
key={index}
|
key={index}
|
||||||
@@ -233,7 +231,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</MultiModelColumn>
|
</MultiModelColumn>
|
||||||
<MultiModelColumn gridRow={gridRow} gridColumn={5}>
|
<MultiModelColumn>
|
||||||
{modeledMethods.map((modeledMethod, index) => (
|
{modeledMethods.map((modeledMethod, index) => (
|
||||||
<ModelKindDropdown
|
<ModelKindDropdown
|
||||||
key={index}
|
key={index}
|
||||||
@@ -244,7 +242,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
|
|||||||
))}
|
))}
|
||||||
</MultiModelColumn>
|
</MultiModelColumn>
|
||||||
{viewState.showMultipleModels && (
|
{viewState.showMultipleModels && (
|
||||||
<MultiModelColumn gridRow={gridRow} gridColumn={6}>
|
<MultiModelColumn>
|
||||||
{modeledMethods.map((_, index) =>
|
{modeledMethods.map((_, index) =>
|
||||||
index === modeledMethods.length - 1 ? (
|
index === modeledMethods.length - 1 ? (
|
||||||
<CodiconRow
|
<CodiconRow
|
||||||
@@ -281,7 +279,7 @@ const UnmodelableMethodRow = forwardRef<
|
|||||||
HTMLElement | undefined,
|
HTMLElement | undefined,
|
||||||
MethodRowProps
|
MethodRowProps
|
||||||
>((props, ref) => {
|
>((props, ref) => {
|
||||||
const { gridRow, method, viewState, revealedMethodSignature } = props;
|
const { method, viewState, revealedMethodSignature } = props;
|
||||||
|
|
||||||
const jumpToMethod = useCallback(
|
const jumpToMethod = useCallback(
|
||||||
() => sendJumpToMethodMessage(method),
|
() => sendJumpToMethodMessage(method),
|
||||||
@@ -294,7 +292,7 @@ const UnmodelableMethodRow = forwardRef<
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
$focused={revealedMethodSignature === method.signature}
|
$focused={revealedMethodSignature === method.signature}
|
||||||
>
|
>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn={1}>
|
<DataGridCell>
|
||||||
<ApiOrMethodRow>
|
<ApiOrMethodRow>
|
||||||
<ModelingStatusIndicator status="saved" />
|
<ModelingStatusIndicator status="saved" />
|
||||||
<MethodName {...props.method} />
|
<MethodName {...props.method} />
|
||||||
@@ -307,9 +305,7 @@ const UnmodelableMethodRow = forwardRef<
|
|||||||
<MethodClassifications method={method} />
|
<MethodClassifications method={method} />
|
||||||
</ApiOrMethodRow>
|
</ApiOrMethodRow>
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
<DataGridCell gridRow={gridRow} gridColumn="span 4">
|
<DataGridCell gridColumn="span 4">Method already modeled</DataGridCell>
|
||||||
Method already modeled
|
|
||||||
</DataGridCell>
|
|
||||||
</DataGridRow>
|
</DataGridRow>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -71,23 +71,13 @@ export const ModeledMethodDataGrid = ({
|
|||||||
<DataGrid gridTemplateColumns={gridTemplateColumns}>
|
<DataGrid gridTemplateColumns={gridTemplateColumns}>
|
||||||
{someMethodsAreVisible && (
|
{someMethodsAreVisible && (
|
||||||
<>
|
<>
|
||||||
<DataGridCell gridRow={1} gridColumn={1}>
|
<DataGridCell>API or method</DataGridCell>
|
||||||
API or method
|
<DataGridCell>Model type</DataGridCell>
|
||||||
</DataGridCell>
|
<DataGridCell>Input</DataGridCell>
|
||||||
<DataGridCell gridRow={1} gridColumn={2}>
|
<DataGridCell>Output</DataGridCell>
|
||||||
Model type
|
<DataGridCell>Kind</DataGridCell>
|
||||||
</DataGridCell>
|
|
||||||
<DataGridCell gridRow={1} gridColumn={3}>
|
|
||||||
Input
|
|
||||||
</DataGridCell>
|
|
||||||
<DataGridCell gridRow={1} gridColumn={4}>
|
|
||||||
Output
|
|
||||||
</DataGridCell>
|
|
||||||
<DataGridCell gridRow={1} gridColumn={5}>
|
|
||||||
Kind
|
|
||||||
</DataGridCell>
|
|
||||||
{viewState.showMultipleModels && (
|
{viewState.showMultipleModels && (
|
||||||
<DataGridCell gridRow={1} gridColumn={6}>
|
<DataGridCell>
|
||||||
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
|
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
|
||||||
</DataGridCell>
|
</DataGridCell>
|
||||||
)}
|
)}
|
||||||
@@ -97,7 +87,6 @@ export const ModeledMethodDataGrid = ({
|
|||||||
return (
|
return (
|
||||||
<MethodRow
|
<MethodRow
|
||||||
key={method.signature}
|
key={method.signature}
|
||||||
gridRow={index + 2}
|
|
||||||
method={method}
|
method={method}
|
||||||
methodCanBeModeled={methodCanBeModeled}
|
methodCanBeModeled={methodCanBeModeled}
|
||||||
modeledMethods={modeledMethods}
|
modeledMethods={modeledMethods}
|
||||||
@@ -113,7 +102,6 @@ export const ModeledMethodDataGrid = ({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={methodsWithModelability.length + 2}
|
|
||||||
numHiddenMethods={numHiddenMethods}
|
numHiddenMethods={numHiddenMethods}
|
||||||
someMethodsAreVisible={someMethodsAreVisible}
|
someMethodsAreVisible={someMethodsAreVisible}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ describe(HiddenMethodsRow.name, () => {
|
|||||||
it("does not render with 0 hidden methods", () => {
|
it("does not render with 0 hidden methods", () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={1}
|
|
||||||
numHiddenMethods={0}
|
numHiddenMethods={0}
|
||||||
someMethodsAreVisible={true}
|
someMethodsAreVisible={true}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
@@ -31,7 +30,6 @@ describe(HiddenMethodsRow.name, () => {
|
|||||||
it("renders with 1 hidden methods and no visible methods", () => {
|
it("renders with 1 hidden methods and no visible methods", () => {
|
||||||
render(
|
render(
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={1}
|
|
||||||
numHiddenMethods={1}
|
numHiddenMethods={1}
|
||||||
someMethodsAreVisible={false}
|
someMethodsAreVisible={false}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
@@ -46,7 +44,6 @@ describe(HiddenMethodsRow.name, () => {
|
|||||||
it("renders with 1 hidden methods and visible methods", () => {
|
it("renders with 1 hidden methods and visible methods", () => {
|
||||||
render(
|
render(
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={1}
|
|
||||||
numHiddenMethods={1}
|
numHiddenMethods={1}
|
||||||
someMethodsAreVisible={true}
|
someMethodsAreVisible={true}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
@@ -61,7 +58,6 @@ describe(HiddenMethodsRow.name, () => {
|
|||||||
it("renders with 3 hidden methods and no visible methods", () => {
|
it("renders with 3 hidden methods and no visible methods", () => {
|
||||||
render(
|
render(
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={1}
|
|
||||||
numHiddenMethods={3}
|
numHiddenMethods={3}
|
||||||
someMethodsAreVisible={false}
|
someMethodsAreVisible={false}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
@@ -76,7 +72,6 @@ describe(HiddenMethodsRow.name, () => {
|
|||||||
it("renders with 3 hidden methods and visible methods", () => {
|
it("renders with 3 hidden methods and visible methods", () => {
|
||||||
render(
|
render(
|
||||||
<HiddenMethodsRow
|
<HiddenMethodsRow
|
||||||
gridRow={1}
|
|
||||||
numHiddenMethods={3}
|
numHiddenMethods={3}
|
||||||
someMethodsAreVisible={true}
|
someMethodsAreVisible={true}
|
||||||
viewState={viewState}
|
viewState={viewState}
|
||||||
|
|||||||
@@ -45,7 +45,6 @@ describe(MethodRow.name, () => {
|
|||||||
const render = (props: Partial<MethodRowProps> = {}) =>
|
const render = (props: Partial<MethodRowProps> = {}) =>
|
||||||
reactRender(
|
reactRender(
|
||||||
<MethodRow
|
<MethodRow
|
||||||
gridRow={1}
|
|
||||||
method={method}
|
method={method}
|
||||||
methodCanBeModeled={true}
|
methodCanBeModeled={true}
|
||||||
modeledMethods={[modeledMethod]}
|
modeledMethods={[modeledMethod]}
|
||||||
|
|||||||
Reference in New Issue
Block a user