Skip to content

Commit daa12c9

Browse files
jeclrsgjeclrsg
committed
HPCC-33472 ECL Watch v9 fix Query test page flickering
fixes an issue where at some window sizes the Query test page contents had a rapid flickering caused by appearing and disappearing scrollbars Signed-off-by: Jeremy Clements <[email protected]>
1 parent dc5048e commit daa12c9

File tree

1 file changed

+39
-41
lines changed

1 file changed

+39
-41
lines changed

‎esp/src/src-react/components/QueryTests.tsx

+39-41
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import * as React from "react";
22
import { Pivot, PivotItem } from "@fluentui/react";
33
import { join, scopedLogger } from "@hpcc-js/util";
4-
import { SizeMe } from "react-sizeme";
54
import nlsHPCC from "src/nlsHPCC";
65
import * as ESPQuery from "src/ESPQuery";
76
import * as WsTopology from "src/WsTopology";
87
import { useWorkunitResults } from "../hooks/workunit";
9-
import { pivotItemStyle } from "../layouts/pivot";
108
import { IFrame } from "./IFrame";
119
import { pushUrl } from "../util/history";
1210
import { XMLSourceEditor } from "./SourceEditor";
@@ -19,6 +17,8 @@ const buildFrameUrl = (url, suffix) => {
1917
return urlParts[0] + "&src=" + encodeURIComponent(join(src, suffix));
2018
};
2119

20+
const frameStyle = { position: "absolute", zIndex: 0, padding: 4, overflow: "none", inset: "44px 0 4px 0" } as React.CSSProperties;
21+
2222
interface QueryTestsProps {
2323
querySet: string;
2424
queryId: string;
@@ -99,43 +99,41 @@ export const QueryTests: React.FunctionComponent<QueryTestsProps> = ({
9999
setResultNames(names);
100100
}, [wuResults]);
101101

102-
return <SizeMe monitorHeight>{({ size }) =>
103-
<Pivot
104-
overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab}
105-
onLinkClick={evt => {
106-
pushUrl(`/queries/${querySet}/${queryId}/testPages/${evt.props.itemKey}`);
107-
}}
108-
>
109-
<PivotItem headerText={nlsHPCC.Form} itemKey="form" style={pivotItemStyle(size, 0)}>
110-
<IFrame src={formUrl} height="99%" />
111-
</PivotItem>
112-
<PivotItem headerText={nlsHPCC.SOAP} itemKey="soap" style={pivotItemStyle(size)} >
113-
<IFrame src={soapUrl} height="99%" />
114-
</PivotItem>
115-
<PivotItem headerText={nlsHPCC.JSON} itemKey="json" style={pivotItemStyle(size, 0)}>
116-
<IFrame src={jsonUrl} height="99%" />
117-
</PivotItem>
118-
<PivotItem headerText={nlsHPCC.WSDL} itemKey="wsdl" style={pivotItemStyle(size, 0)}>
119-
<IFrame src={wsdlUrl} height="99%" />
120-
</PivotItem>
121-
<PivotItem headerText={nlsHPCC.RequestSchema} itemKey="requestSchema" style={pivotItemStyle(size, 0)}>
122-
<IFrame src={requestSchemaUrl} height="99%" />
123-
</PivotItem>
124-
<PivotItem headerText={nlsHPCC.ResponseSchema} itemKey="responseSchema" style={pivotItemStyle(size, 0)}>
125-
{responseSchemas.map((schema, idx) => <XMLSourceEditor key={`responseSchema_${idx}`} text={schema} readonly={true} />)}
126-
</PivotItem>
127-
<PivotItem headerText={nlsHPCC.SampleRequest} itemKey="sampleRequest" style={pivotItemStyle(size, 0)}>
128-
<IFrame src={exampleRequestUrl} height="99%" />
129-
</PivotItem>
130-
<PivotItem headerText={nlsHPCC.SampleResponse} itemKey="sampleResponse" style={pivotItemStyle(size, 0)}>
131-
<IFrame src={exampleResponseUrl} height="99%" />
132-
</PivotItem>
133-
<PivotItem headerText={nlsHPCC.ParameterXML} itemKey="parameterXml" style={pivotItemStyle(size, 0)}>
134-
<IFrame src={parameterXmlUrl} height="99%" />
135-
</PivotItem>
136-
<PivotItem headerText={nlsHPCC.Links} itemKey="links" style={pivotItemStyle(size, 0)}>
137-
<IFrame src={linksUrl} height="99%" />
138-
</PivotItem>
139-
</Pivot>
140-
}</SizeMe>;
102+
return <Pivot
103+
overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab}
104+
onLinkClick={evt => {
105+
pushUrl(`/queries/${querySet}/${queryId}/testPages/${evt.props.itemKey}`);
106+
}}
107+
>
108+
<PivotItem headerText={nlsHPCC.Form} itemKey="form" style={frameStyle}>
109+
<IFrame src={formUrl} />
110+
</PivotItem>
111+
<PivotItem headerText={nlsHPCC.SOAP} itemKey="soap" style={frameStyle} >
112+
<IFrame src={soapUrl} />
113+
</PivotItem>
114+
<PivotItem headerText={nlsHPCC.JSON} itemKey="json" style={frameStyle}>
115+
<IFrame src={jsonUrl} />
116+
</PivotItem>
117+
<PivotItem headerText={nlsHPCC.WSDL} itemKey="wsdl" style={frameStyle}>
118+
<IFrame src={wsdlUrl} />
119+
</PivotItem>
120+
<PivotItem headerText={nlsHPCC.RequestSchema} itemKey="requestSchema" style={frameStyle}>
121+
<IFrame src={requestSchemaUrl} />
122+
</PivotItem>
123+
<PivotItem headerText={nlsHPCC.ResponseSchema} itemKey="responseSchema" style={frameStyle}>
124+
{responseSchemas.map((schema, idx) => <XMLSourceEditor key={`responseSchema_${idx}`} text={schema} readonly={true} />)}
125+
</PivotItem>
126+
<PivotItem headerText={nlsHPCC.SampleRequest} itemKey="sampleRequest" style={frameStyle}>
127+
<IFrame src={exampleRequestUrl} />
128+
</PivotItem>
129+
<PivotItem headerText={nlsHPCC.SampleResponse} itemKey="sampleResponse" style={frameStyle}>
130+
<IFrame src={exampleResponseUrl} />
131+
</PivotItem>
132+
<PivotItem headerText={nlsHPCC.ParameterXML} itemKey="parameterXml" style={frameStyle}>
133+
<IFrame src={parameterXmlUrl} />
134+
</PivotItem>
135+
<PivotItem headerText={nlsHPCC.Links} itemKey="links" style={frameStyle}>
136+
<IFrame src={linksUrl} />
137+
</PivotItem>
138+
</Pivot>;
141139
};

0 commit comments

Comments
 (0)