Merge pull request #15920 from jeclrsg/hpcc-27328-playground-default-target

HPCC-27328 Playground target default isn't really populated

Reviewed-By: Gordon Smith <gordon.smith@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/src-react/components/ECLPlayground.tsx

@@ -236,8 +236,6 @@ const ECLEditorToolbar: React.FunctionComponent<ECLEditorToolbarProps> = ({
                 label={nlsHPCC.Target}
                 className={playgroundStyles.inlineDropdown}
                 onChange={React.useCallback((evt, option) => setCluster(option.key.toString()), [setCluster])}
-                required={true}
-                selectedKey={cluster ? cluster : undefined}
             />
             <div className={playgroundStyles.outputButtons}>
                 <IconButton
@@ -274,6 +272,8 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
     const [workunit, setWorkunit] = React.useState<Workunit>();
     const [editor, setEditor] = React.useState<ECLEditor>();
     const [query, setQuery] = React.useState("");
+    const [selectedEclSample, setSelectedEclSample] = React.useState("");
+    const [eclContent, setEclContent] = React.useState("");
     const [eclSamples, setEclSamples] = React.useState<IDropdownOption[]>([]);
 
     React.useEffect(() => {
@@ -295,6 +295,7 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
             .then(response => response.json())
             .then(json => setEclSamples(
                 json.items.map(item => {
+                    if (item.selected) setSelectedEclSample(item.filename);
                     return { key: item.filename, text: item.name };
                 })
             ));
@@ -306,6 +307,24 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
         }
     }, [wuid, editor, theme]);
 
+    React.useEffect(() => {
+        fetch(`/esp/files/eclwatch/ecl/${selectedEclSample}`)
+            .then(response => {
+                if (response.status && response.status === 200 && response.body) {
+                    response.text().then(sample => {
+                        if (sample.toLowerCase().indexOf("<!doctype") < 0) {
+                            setEclContent(sample);
+                        }
+                    });
+                }
+            });
+    }, [selectedEclSample]);
+
+    React.useEffect(() => {
+        if (!editor) return;
+        editor.ecl(eclContent);
+    }, [editor, eclContent]);
+
     const handleThemeToggle = React.useCallback((evt) => {
         if (!editor) return;
         if (evt.detail && evt.detail.dark === true) {
@@ -323,16 +342,9 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
                 label="Sample"
                 className={`${playgroundStyles.inlineDropdown} ${playgroundStyles.samplesDropdown}`}
                 options={eclSamples}
+                selectedKey={selectedEclSample}
                 placeholder="Select sample ECL..."
-                onChange={(evt, item) => {
-                    fetch(`/esp/files/eclwatch/ecl/${item.key}`)
-                        .then(async response => {
-                            if (response.status && response.status === 200 && response.body) {
-                                const eclSample = await response.text();
-                                editor.ecl(eclSample);
-                            }
-                        });
-                }}
+                onChange={(evt, item) => { setSelectedEclSample(item.key.toString()); }}
             />
         </div>
         <ReflexContainer orientation="horizontal">

esp/src/src-react/components/forms/Fields.tsx

@@ -303,6 +303,7 @@ export const TargetClusterTextField: React.FunctionComponent<TargetClusterTextFi
     const [targetClusters, defaultCluster] = useLogicalClusters();
     const [options, setOptions] = React.useState<IDropdownOption[]>();
     const [defaultRow, setDefaultRow] = React.useState<IDropdownOption>();
+    const { onChange, required, selectedKey } = { ...props };
 
     React.useEffect(() => {
         const options = targetClusters?.map(row => {
@@ -314,10 +315,14 @@ export const TargetClusterTextField: React.FunctionComponent<TargetClusterTextFi
         }) || [];
         setOptions(options);
 
-        if (autoSelectDropdown(props.selectedKey, props.required)) {
-            setDefaultRow(options.filter(row => row.key === defaultCluster?.Name)[0]);
+        if (autoSelectDropdown(selectedKey, required)) {
+            const selectedItem = options.filter(row => row.key === defaultCluster?.Name)[0];
+            if (selectedItem) {
+                setDefaultRow(selectedItem);
+                onChange(undefined, selectedItem);
+            }
         }
-    }, [targetClusters, defaultCluster, props.selectedKey, props.required]);
+    }, [targetClusters, defaultCluster, onChange, required, selectedKey]);
 
     return <AsyncDropdown {...props} selectedKey={props.selectedKey || defaultRow?.key as string} options={options} />;
 };