Make gridRow and gridColumn optional

This commit is contained in:
Robert
2023-10-18 13:51:34 +01:00
parent 6c2718927e
commit 298656444f
6 changed files with 27 additions and 51 deletions

View File

@@ -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;
} }

View File

@@ -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

View File

@@ -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>
); );
}); });

View File

@@ -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}

View File

@@ -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}

View File

@@ -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]}