feat: moving the errors up a bit (#5172)

Author: drdelambre

src/dataExplorer/components/QueryTime.scss

@@ -27,10 +27,4 @@
       background: $c-rainforest;
     }
   }
-
-  pre {
-    color: $c-fire;
-    font-family: $cf-code-font;
-    margin: $cf-space-2xs;
-  }
 }

src/dataExplorer/components/QueryTime.tsx

@@ -9,7 +9,7 @@ const humanReadable = (time: number): string => {
 }
 
 const QueryTime: FC = () => {
-  const {result, status, time} = useContext(ResultsContext)
+  const {status, time} = useContext(ResultsContext)
 
   if (status === RemoteDataState.Done) {
     return (
@@ -42,7 +42,6 @@ const QueryTime: FC = () => {
       <div className="query-status">
         <div className="status error" />
         <label>Error ({humanReadable(time)})</label>
-        <pre>{result.error}</pre>
       </div>
     )
   }

src/dataExplorer/components/Results.scss

@@ -51,6 +51,30 @@ $cf-radius-lg: $cf-radius + 4px;
   position: absolute;
   width: 100%;
   height: 100%;
+
+  .monaco-editor,
+  .monaco-editor > div:first-of-type {
+    border-radius: $cf-radius-lg;
+  }
+}
+
+.data-explorer--error-gutter {
+  color: $c-fire;
+  background-color: $cf-grey-15;
+  border-radius: $cf-radius-lg;
+  width: 100%;
+  display: flex;
+
+  .cf-icon {
+    padding: $cf-space-2xs $cf-space-s;
+    font-size: $cf-text-base-2;
+  }
+
+  pre {
+    padding: $cf-space-2xs 0;
+    font-family: $cf-code-font;
+    white-space: pre-line;
+  }
 }
 
 .query-stat {

src/dataExplorer/components/ResultsPane.tsx

@@ -14,6 +14,7 @@ import {
   FlexDirection,
   JustifyContent,
   AlignItems,
+  Icon,
 } from '@influxdata/clockface'
 
 // Contexts
@@ -80,7 +81,7 @@ const rangeToParam = (timeRange: TimeRange) => {
 
 const ResultsPane: FC = () => {
   const {basic, query, cancel} = useContext(QueryContext)
-  const {status, setStatus, setResult} = useContext(ResultsContext)
+  const {status, result, setStatus, setResult} = useContext(ResultsContext)
 
   const [
     horizDragPosition,
@@ -168,6 +169,12 @@ const ResultsPane: FC = () => {
               </Suspense>
             </div>
           </div>
+          {status === RemoteDataState.Error && (
+            <div className="data-explorer--error-gutter">
+              <Icon glyph={IconFont.AlertTriangle_New} />
+              <pre>{result.error}</pre>
+            </div>
+          )}
           <div style={{width: '100%'}}>
             <FlexBox
               direction={FlexDirection.Row}