feat: add message when linter failed to run

pinterest · Feb 10, 2023 · f3f64b4 · f3f64b4
1 parent f3cff53
commit f3f64b4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -622,6 +622,19 @@ export const QueryEditor: React.FC<
         /* ---- end of <ReactCodeMirror /> properties ---- */
 
         const renderLintButton = () => {
+            if (value.length === 0 || getLintErrors == null) {
+                return null;
+            }
+
+            if (isLinting) {
+                return (
+                    <span className="flex-row mr8">
+                        <Icon name="Loading" className="mr4" size={16} />
+                        Linting
+                    </span>
+                );
+            }
+
             if (lintSummary.numErrors + lintSummary.numWarnings > 0) {
                 return (
                     <div
@@ -656,7 +669,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(
         () =>
@@ -193,8 +198,9 @@ export function useLint({
         return {
             numErrors,
             numWarnings,
+            failedToLint,
         };
-    }, [lintAnnotations]);
+    }, [lintAnnotations, failedToLint]);
 
     useEffect(() => {
         onLintCompletion?.(lintSummary.numErrors > 0);