Bundle fonts (#10963)

* remove Google Fonts usage

* local Lato in resources/frontend_client/app/fonts

* create assets/fonts aliases, update publicPath, use absolute paths in css

* add svg to extensions

* update flow config to account for frontend_client assets

* add explicit .svg extension to no_results usage

* remove google fonts references from CSP headers

.flowconfig

@@ -31,6 +31,7 @@ esproposal.class_instance_fields=enable
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
 module.name_mapper='.*\(\.css\)' -> 'CSSModule'
 module.name_mapper='^ace/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/ace-builds/src-min-noconflict/\1'
+module.name_mapper='^assets\/\(.*\)$' -> '<PROJECT_ROOT>/resources/frontend_client/app/assets/\1'
 module.system=haste
 strip_root=true
 module.file_ext=.js

frontend/src/metabase/containers/ErrorPages.jsx

@@ -9,6 +9,8 @@ import Icon from "metabase/components/Icon";
 import EmptyState from "metabase/components/EmptyState";
 import ErrorDetails from "metabase/components/ErrorDetails";
 
+import NoResults from "assets/img/no_results.svg";
+
 const ErrorPageWrapper = fitViewport(({ fitClassNames, children }) => (
   <Flex
     align="center"
@@ -40,7 +42,7 @@ export const GenericError = ({
 export const NotFound = () => (
   <ErrorPageWrapper>
     <EmptyState
-      illustrationElement={<img src="app/assets/img/no_results.svg" />}
+      illustrationElement={<img src={NoResults} />}
       title={t`We're a little lost...`}
       message={t`The page you asked for couldn't be found.`}
       link={Urls.question()}

frontend/src/metabase/css/core/base.css

+/* lato-regular - latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src: url("~fonts/lato-v16-latin/lato-v16-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Lato Regular"), local("Lato-Regular"),
+    url("~fonts/lato-v16-latin/lato-v16-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("~fonts/lato-v16-latin/lato-v16-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("~fonts/lato-v16-latin/lato-v16-latin-regular.woff") format("woff"),
+    /* Modern Browsers */
+      url("~fonts/lato-v16-latin/lato-v16-latin-regular.ttf") format("truetype"),
+    /* Safari, Android, iOS */
+      url("~fonts/lato-v16-latin/lato-v16-latin-regular.svg#Lato") format("svg"); /* Legacy iOS */
+}
+
+/* lato-700 - latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  src: url("~fonts/lato-v16-latin/lato-v16-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Lato Bold"), local("Lato-Bold"),
+    url("~fonts/lato-v16-latin/lato-v16-latin-700.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("~fonts/lato-v16-latin/lato-v16-latin-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("~fonts/lato-v16-latin/lato-v16-latin-700.woff") format("woff"),
+    /* Modern Browsers */ url("~fonts/lato-v16-latin/lato-v16-latin-700.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("~fonts/lato-v16-latin/lato-v16-latin-700.svg#Lato") format("svg"); /* Legacy iOS */
+}
+/* lato-900 - latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 900;
+  src: url("~fonts/lato-v16-latin/lato-v16-latin-900.eot"); /* IE9 Compat Modes */
+  src: local("Lato Black"), local("Lato-Black"),
+    url("~fonts/lato-v16-latin/lato-v16-latin-900.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("~fonts/lato-v16-latin/lato-v16-latin-900.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("~fonts/lato-v16-latin/lato-v16-latin-900.woff") format("woff"),
+    /* Modern Browsers */ url("~fonts/lato-v16-latin/lato-v16-latin-900.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("~fonts/lato-v16-latin/lato-v16-latin-900.svg#Lato") format("svg"); /* Legacy iOS */
+}
+
 :root {
   --default-font-family: "Lato";
   --default-font-size: 0.875em;

frontend/src/metabase/css/query_builder.css

@@ -256,29 +256,25 @@
 .QueryError-image--noRows {
   width: 120px;
   height: 120px;
-  /* NOTE: this path works in normal builds but not "build-hot". Sorry. */
-  background-image: url("../assets/img/no_results.svg");
+  background-image: url("~assets/img/no_results.svg");
 }
 
 .QueryError-image--queryError {
   width: 120px;
   height: 120px;
-  /* NOTE: this path works in normal builds but not "build-hot". Sorry. */
-  background-image: url("../assets/img/no_understand.svg");
+  background-image: url("~assets/img/no_understand.svg");
 }
 
 .QueryError-image--serverError {
   width: 120px;
   height: 148px;
-  /* NOTE: this path works in normal builds but not "build-hot". Sorry. */
-  background-image: url("../assets/img/blown_up.svg");
+  background-image: url("~assets/img/blown_up.svg");
 }
 
 .QueryError-image--timeout {
   width: 120px;
   height: 120px;
-  /* NOTE: this path works in normal builds but not "build-hot". Sorry. */
-  background-image: url("../assets/img/stopwatch.svg");
+  background-image: url("~assets/img/stopwatch.svg");
 }
 
 .QueryError-message {

frontend/src/metabase/home/containers/SearchApp.jsx

@@ -17,6 +17,7 @@ import { FILTERS } from "metabase/components/ItemTypeFilterBar";
 
 import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
+import NoResults from "assets/img/no_results.svg";
 
 const PAGE_PADDING = [1, 2, 4];
 
@@ -39,9 +40,7 @@ export default class SearchApp extends React.Component {
                     <EmptyState
                       title={t`No results`}
                       message={t`Metabase couldn't find any results for your search.`}
-                      illustrationElement={
-                        <img src="app/assets/img/no_results.svg" />
-                      }
+                      illustrationElement={<img src={NoResults} />}
                     />
                   </Card>
                 );

frontend/src/metabase/visualizations/components/ColumnSettings.jsx

@@ -13,6 +13,7 @@ import {
 } from "metabase/visualizations/lib/settings";
 
 import ChartSettingsWidget from "metabase/visualizations/components/ChartSettingsWidget";
+import NoResults from "assets/img/no_results.svg";
 
 type SettingId = string;
 type Settings = { [id: SettingId]: any };
@@ -87,7 +88,7 @@ const ColumnSettings = ({
       ) : (
         <EmptyState
           message={t`No formatting settings`}
-          illustrationElement={<img src="app/assets/img/no_results.svg" />}
+          illustrationElement={<img src={NoResults} />}
         />
       )}
     </div>

frontend/src/metabase/visualizations/components/Visualization.jsx

@@ -29,6 +29,8 @@ import {
   ChartSettingsError,
 } from "metabase/visualizations/lib/errors";
 
+import NoResults from "assets/img/no_results.svg";
+
 import { assoc, setIn } from "icepick";
 import _ from "underscore";
 import cx from "classnames";
@@ -512,7 +514,7 @@ export default class Visualization extends React.PureComponent {
             }
           >
             <Tooltip tooltip={t`No results!`} isEnabled={small}>
-              <img src="app/assets/img/no_results.svg" />
+              <img src={NoResults} />
             </Tooltip>
             {!small && <span className="h4 text-bold">No results!</span>}
           </div>