feat: add message when linter failed to run

pinterest · Feb 10, 2023 · 4f94930 · 4f94930
1 parent c3ddec1
commit 4f94930
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -604,7 +604,7 @@ export const QueryEditor: React.FC<
         /* ---- end of <ReactCodeMirror /> properties ---- */
 
         const renderLintButtons = () => {
-            if (value.length === 0) {
+            if (value.length === 0 || getLintErrors == null) {
                 return null;
             }
 
@@ -648,7 +648,14 @@ export const QueryEditor: React.FC<
                         )}
                     </div>
                 );
-            } else if (getLintErrors) {
+            } else if (lintSummary.failedToLint) {
+                return (
+                    <span className="flex-row mr8 lint-num-warnings">
+                        <Icon name="AlertTriangle" className="mr4" size={16} />
+                        Linter is having issues
+                    </span>
+                );
+            } else {
                 return (
                     <span className="flex-row mr8 lint-passed">
                         <Icon name="CheckCircle" className="mr4" size={16} />

diff --git a/querybook/webapp/hooks/queryEditor/useLint.ts b/querybook/webapp/hooks/queryEditor/useLint.ts
@@ -74,6 +74,7 @@ function useQueryLintAnnotations(
     editorRef: React.MutableRefObject<CodeMirror.Editor>
 ) {
     const [isLintingQuery, setIsLinting] = useState(false);
+    const [failedToLint, setFailedToLint] = useState(false);
     const [queryAnnotations, setQueryAnnotations] = useState<ILinterWarning[]>(
         []
     );
@@ -94,15 +95,22 @@ function useQueryLintAnnotations(
     useEffect(() => {
         setIsLinting(true);
         getQueryLintAnnotations(query)
-            .then(setQueryAnnotations)
+            .then((annotations) => {
+                setQueryAnnotations(annotations);
+                setFailedToLint(false);
+            })
+            .catch(() => {
+                setFailedToLint(true);
+                setQueryAnnotations([]);
+            })
             .finally(() => {
                 setIsLinting(false);
             });
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [debouncedQuery, getQueryLintAnnotations]);
 
-    return { isLintingQuery, queryAnnotations };
+    return { isLintingQuery, queryAnnotations, failedToLint };
 }
 
 function useTableLintAnnotations(
@@ -159,11 +167,8 @@ export function useLint({
         getTableByName,
         !!getLintErrors
     );
-    const { isLintingQuery, queryAnnotations } = useQueryLintAnnotations(
-        query,
-        getLintErrors,
-        editorRef
-    );
+    const { isLintingQuery, queryAnnotations, failedToLint } =
+        useQueryLintAnnotations(query, getLintErrors, editorRef);
     const lintAnnotationsRef = useRef<ILinterWarning[]>([]);
     const lintAnnotations = useMemo(
         () => tableAnnotations.concat(queryAnnotations),
@@ -188,8 +193,9 @@ export function useLint({
         return {
             numErrors,
             numWarnings,
+            failedToLint,
         };
-    }, [lintAnnotations]);
+    }, [lintAnnotations, failedToLint]);
 
     useEffect(() => {
         onLintCompletion?.(lintSummary.numErrors > 0);