[Backport 27.0.0] Web console: Page downloader, and fix JSON error resetting (#14712)

web-console/src/components/json-input/json-input.tsx

@@ -67,7 +67,7 @@ interface InternalValue {
 interface JsonInputProps {
   value: any;
   onChange: (value: any) => void;
-  onError?: (error: Error) => void;
+  setError?: (error: Error | undefined) => void;
   placeholder?: string;
   focus?: boolean;
   width?: string;
@@ -76,7 +76,7 @@ interface JsonInputProps {
 }
 
 export const JsonInput = React.memo(function JsonInput(props: JsonInputProps) {
-  const { onChange, onError, placeholder, focus, width, height, value, issueWithValue } = props;
+  const { onChange, setError, placeholder, focus, width, height, value, issueWithValue } = props;
   const [internalValue, setInternalValue] = useState<InternalValue>(() => ({
     value,
     stringified: stringifyJson(value),
@@ -121,9 +121,8 @@ export const JsonInput = React.memo(function JsonInput(props: JsonInputProps) {
             stringified: inputJson,
           });
 
-          if (error) {
-            onError?.(error);
-          } else {
+          setError?.(error);
+          if (!error) {
             onChange(value);
           }
 

web-console/src/dialogs/compaction-config-dialog/compaction-config-dialog.tsx

@@ -87,7 +87,13 @@ export const CompactionConfigDialog = React.memo(function CompactionConfigDialog
           </p>
         </Callout>
       )}
-      <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+      <FormJsonSelector
+        tab={currentTab}
+        onChange={t => {
+          setJsonError(undefined);
+          setCurrentTab(t);
+        }}
+      />
       <div className="content">
         {currentTab === 'form' ? (
           <AutoForm
@@ -98,11 +104,8 @@ export const CompactionConfigDialog = React.memo(function CompactionConfigDialog
         ) : (
           <JsonInput
             value={currentConfig}
-            onChange={v => {
-              setCurrentConfig(v);
-              setJsonError(undefined);
-            }}
-            onError={setJsonError}
+            onChange={setCurrentConfig}
+            setError={setJsonError}
             issueWithValue={value => AutoForm.issueWithModel(value, COMPACTION_CONFIG_FIELDS)}
             height="100%"
           />

web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx

@@ -114,7 +114,13 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
             </ExternalLink>
             .
           </p>
-          <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+          <FormJsonSelector
+            tab={currentTab}
+            onChange={t => {
+              setJsonError(undefined);
+              setCurrentTab(t);
+            }}
+          />
           {currentTab === 'form' ? (
             <AutoForm
               fields={COORDINATOR_DYNAMIC_CONFIG_FIELDS}
@@ -125,11 +131,8 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
             <JsonInput
               value={dynamicConfig}
               height="50vh"
-              onChange={v => {
-                setDynamicConfig(v);
-                setJsonError(undefined);
-              }}
-              onError={setJsonError}
+              onChange={setDynamicConfig}
+              setError={setJsonError}
             />
           )}
         </>

web-console/src/dialogs/index-spec-dialog/index-spec-dialog.tsx

@@ -50,22 +50,25 @@ export const IndexSpecDialog = React.memo(function IndexSpecDialog(props: IndexS
       canOutsideClickClose={false}
       title={title ?? 'Index spec'}
     >
-      <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+      <FormJsonSelector
+        tab={currentTab}
+        onChange={t => {
+          setJsonError(undefined);
+          setCurrentTab(t);
+        }}
+      />
       <div className="content">
         {currentTab === 'form' ? (
           <AutoForm
             fields={INDEX_SPEC_FIELDS}
             model={currentIndexSpec}
-            onChange={m => setCurrentIndexSpec(m)}
+            onChange={setCurrentIndexSpec}
           />
         ) : (
           <JsonInput
             value={currentIndexSpec}
-            onChange={v => {
-              setCurrentIndexSpec(v);
-              setJsonError(undefined);
-            }}
-            onError={setJsonError}
+            onChange={setCurrentIndexSpec}
+            setError={setJsonError}
             issueWithValue={value => AutoForm.issueWithModel(value, INDEX_SPEC_FIELDS)}
             height="100%"
           />

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

@@ -121,7 +121,13 @@ export const LookupEditDialog = React.memo(function LookupEditDialog(props: Look
             }
           />
         </FormGroup>
-        <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+        <FormJsonSelector
+          tab={currentTab}
+          onChange={t => {
+            setJsonError(undefined);
+            setCurrentTab(t);
+          }}
+        />
         {currentTab === 'form' ? (
           <AutoForm
             fields={LOOKUP_FIELDS}
@@ -134,11 +140,8 @@ export const LookupEditDialog = React.memo(function LookupEditDialog(props: Look
           <JsonInput
             value={lookupSpec}
             height="80vh"
-            onChange={m => {
-              onChange('spec', m);
-              setJsonError(undefined);
-            }}
-            onError={setJsonError}
+            onChange={m => onChange('spec', m)}
+            setError={setJsonError}
             issueWithValue={spec => AutoForm.issueWithModel(spec, LOOKUP_FIELDS)}
           />
         )}

web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx

@@ -114,7 +114,13 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
             </ExternalLink>
             .
           </p>
-          <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+          <FormJsonSelector
+            tab={currentTab}
+            onChange={t => {
+              setJsonError(undefined);
+              setCurrentTab(t);
+            }}
+          />
           {currentTab === 'form' ? (
             <AutoForm
               fields={OVERLORD_DYNAMIC_CONFIG_FIELDS}
@@ -125,11 +131,8 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
             <JsonInput
               value={dynamicConfig}
               height="50vh"
-              onChange={v => {
-                setDynamicConfig(v);
-                setJsonError(undefined);
-              }}
-              onError={setJsonError}
+              onChange={setDynamicConfig}
+              setError={setJsonError}
             />
           )}
         </>

web-console/src/dialogs/retention-dialog/retention-dialog.tsx

@@ -187,7 +187,7 @@ ORDER BY 1`,
         <JsonInput
           value={currentRules}
           onChange={setCurrentRules}
-          onError={setJsonError}
+          setError={setJsonError}
           height="100%"
         />
       )}

web-console/src/druid-models/async-query/async-query.ts

@@ -28,10 +28,14 @@ export interface AsyncStatusResponse {
   schema?: { name: string; type: string; nativeType: string }[];
   result?: {
     dataSource: string;
-    sampleRecords: any[][];
+    sampleRecords?: any[][];
     numTotalRows: number;
     totalSizeInBytes: number;
-    pages: any[];
+    pages?: {
+      id: number;
+      numRows: number;
+      sizeInBytes: number;
+    }[];
   };
   errorDetails?: ErrorResponse;
 }