add link to debugging sql syntax article (#22944)

* add link to debugging sql syntax article

* extract styling

* use External link, tweak style

frontend/src/metabase/query_builder/components/VisualizationError.jsx

@@ -14,6 +14,7 @@ import {
   QueryError,
   QueryErrorIcon,
   QueryErrorMessage,
+  QueryLink,
 } from "./VisualizationError.styled";
 
 const EmailAdmin = () => {
@@ -148,6 +149,7 @@ class VisualizationError extends Component {
             <Icon name="warning" size="40" />
           </QueryErrorIcon>
           <QueryErrorMessage>{processedError}</QueryErrorMessage>
+          <QueryLink href="https://www.metabase.com/learn/debugging-sql/sql-syntax.html">{t`Learn how to debug SQL errors`}</QueryLink>
         </QueryError>
       );
     } else {

frontend/src/metabase/query_builder/components/VisualizationError.styled.jsx

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
+import ExternalLink from "metabase/core/components/ExternalLink";
 
 export const QueryError = styled.div`
   display: flex;
@@ -20,3 +21,10 @@ export const QueryErrorMessage = styled.div`
   max-width: 31.25rem;
   min-height: 0;
 `;
+
+export const QueryLink = styled(ExternalLink)`
+  display: block;
+  margin-top: ${space(1)};
+  text-decoration: underline;
+  color: ${color("text-medium")};
+`;