fix: query status should not be shown when query is loading

Author: Raubzeug

src/containers/Tenant/QueryEditor/QueryEditor.js

@@ -154,7 +154,7 @@ function QueryEditor(props) {
     useEffect(() => {
         const {monacoHotKey, setMonacoHotKey} = props;
         if (monacoHotKey === null) {
-            return 
+            return;
         }
         setMonacoHotKey(null);
         switch (monacoHotKey) {
@@ -464,19 +464,12 @@ function QueryEditor(props) {
     };
 
     const getExecuteResult = () => {
-        const {
-            data = [],
-            error,
-            loading,
-            history: {queries},
-        } = props.executeQuery;
+        const {data = [], error} = props.executeQuery;
 
         if (error) {
             return error.data || error;
         } else if (data.length > 0) {
             return data;
-        } else if (!loading && queries.length) {
-            return 'The request was successful';
         } else {
             return '';
         }

src/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -252,28 +252,32 @@ function QueryExplain(props) {
     return (
         <React.Fragment>
             <div className={b('controls')}>
-                <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
-                    {!props.error && (
-                        <React.Fragment>
-                            <Divider />
-                            <RadioButton
-                                options={explainOptions}
-                                value={activeOption}
-                                onUpdate={onSelectOption}
+                {!props.loading && (
+                    <React.Fragment>
+                        <div className={b('controls-right')}>
+                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            {!props.error && (
+                                <React.Fragment>
+                                    <Divider />
+                                    <RadioButton
+                                        options={explainOptions}
+                                        value={activeOption}
+                                        onUpdate={onSelectOption}
+                                    />
+                                </React.Fragment>
+                            )}
+                        </div>
+                        <div className={b('controls-left')}>
+                            <EnableFullscreenButton disabled={Boolean(props.error)} />
+                            <PaneVisibilityToggleButtons
+                                onCollapse={props.onCollapseResults}
+                                onExpand={props.onExpandResults}
+                                isCollapsed={props.isResultsCollapsed}
+                                initialDirection="bottom"
                             />
-                        </React.Fragment>
-                    )}
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(props.error)} />
-                    <PaneVisibilityToggleButtons
-                        onCollapse={props.onCollapseResults}
-                        onExpand={props.onExpandResults}
-                        isCollapsed={props.isResultsCollapsed}
-                        initialDirection="bottom"
-                    />
-                </div>
+                        </div>
+                    </React.Fragment>
+                )}
             </div>
             <div className={b('result')}>{renderContent()}</div>
         </React.Fragment>

src/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.scss

@@ -19,6 +19,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);

src/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -28,6 +28,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);