chore: build(deps-dev): bump css-loader from 3.5.3 to 4.2.2 in /amundsen_application/static (#647)

* build(deps-dev): bump css-loader in /amundsen_application/static

Bumps [css-loader](https://github.com/webpack-contrib/css-loader) from 3.5.3 to 4.2.2.
- [Release notes](https://github.com/webpack-contrib/css-loader/releases)
- [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack-contrib/css-loader/compare/v3.5.3...v4.2.2)
Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Updates url paths to be relative
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/css/_buttons-default.scss

@@ -129,8 +129,8 @@
     border: none;
     height: 18px;
     margin: 4px 0 0;
-    -webkit-mask-image: url('/static/images/icons/Close.svg');
-    mask-image: url('/static/images/icons/Close.svg');
+    -webkit-mask-image: url('../images/icons/Close.svg');
+    mask-image: url('../images/icons/Close.svg');
     -webkit-mask-position: center;
     mask-position: center;
     -webkit-mask-size: contain;

amundsen_application/static/css/_fonts-default.scss

@@ -8,7 +8,7 @@
   font-family: 'Space Mono';
   font-style: normal;
   font-weight: $font-weight-header-regular;
-  src: url('/static/fonts/SpaceMono-Regular.ttf') format('truetype');
+  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
 }
 
 // Roboto
@@ -16,14 +16,14 @@
   font-family: 'Roboto';
   font-style: normal;
   font-weight: $font-weight-header-regular;
-  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
+  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: $font-weight-header-bold;
-  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
 }
 
 // Open Sans
@@ -31,19 +31,19 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: $font-weight-body-regular;
-  src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
+  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: $font-weight-body-semi-bold;
-  src: url('/static/fonts/OpenSans-SemiBold.ttf') format('truetype');
+  src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: $font-weight-body-bold;
-  src: url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
+  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
 }

amundsen_application/static/css/_icons.scss

@@ -8,33 +8,33 @@ $icon-small-size: 16px;
 
 // Icons
 // Lookout! When you update one of these, please update the enums on
-// /static/js/interfaces/Enums.ts
+// ../js/interfaces/Enums.ts
 // Map of Database names and icon paths
 $data-stores: (
-  database: '/static/images/icons/Database.svg',
-  hive: '/static/images/icons/logo-hive.svg',
-  bigquery: '/static/images/icons/logo-bigquery.svg',
-  druid: '/static/images/icons/logo-druid.svg',
-  presto: '/static/images/icons/logo-presto.svg',
-  postgres: '/static/images/icons/logo-postgres.svg',
-  redshift: '/static/images/icons/logo-redshift.svg',
+  database: '../images/icons/Database.svg',
+  hive: '../images/icons/logo-hive.svg',
+  bigquery: '../images/icons/logo-bigquery.svg',
+  druid: '../images/icons/logo-druid.svg',
+  presto: '../images/icons/logo-presto.svg',
+  postgres: '../images/icons/logo-postgres.svg',
+  redshift: '../images/icons/logo-redshift.svg',
 );
 
 // Map of Dashboard names and icon paths
 $dashboards: (
-  dashboard: '/static/images/icons/dashboard.svg',
-  mode: '/static/images/icons/logo-mode.svg',
-  redash: '/static/images/icons/logo-redash.svg',
-  tableau: '/static/images/icons/logo-tableau.svg',
+  dashboard: '../images/icons/dashboard.svg',
+  mode: '../images/icons/logo-mode.svg',
+  redash: '../images/icons/logo-redash.svg',
+  tableau: '../images/icons/logo-tableau.svg',
 );
 
 // Map of User names and icon paths
 $users: (
-  users: '/static/images/icons/users.svg',
+  users: '../images/icons/users.svg',
 );
 
 $check: (
-  check: '/static/images/icons/check.svg',
+  check: '../images/icons/check.svg',
 );
 
 // Given a Map of key/value pairs, generates a new class
@@ -94,118 +94,118 @@ img.icon {
   }
 
   &.icon-alert {
-    -webkit-mask-image: url('/static/images/icons/Alert-Triangle.svg');
-    mask-image: url('/static/images/icons/Alert-Triangle.svg');
+    -webkit-mask-image: url('../images/icons/Alert-Triangle.svg');
+    mask-image: url('../images/icons/Alert-Triangle.svg');
   }
 
   &.icon-bookmark {
-    -webkit-mask-image: url('/static/images/icons/Favorite.svg');
-    mask-image: url('/static/images/icons/Favorite.svg');
+    -webkit-mask-image: url('../images/icons/Favorite.svg');
+    mask-image: url('../images/icons/Favorite.svg');
   }
 
   &.icon-bookmark-filled {
-    -webkit-mask-image: url('/static/images/icons/Favorite-Filled.svg');
-    mask-image: url('/static/images/icons/Favorite-Filled.svg');
+    -webkit-mask-image: url('../images/icons/Favorite-Filled.svg');
+    mask-image: url('../images/icons/Favorite-Filled.svg');
   }
 
   &.icon-delete {
-    -webkit-mask-image: url('/static/images/icons/Trash.svg');
-    mask-image: url('/static/images/icons/Trash.svg');
+    -webkit-mask-image: url('../images/icons/Trash.svg');
+    mask-image: url('../images/icons/Trash.svg');
   }
 
   &.icon-red-triangle-warning {
-    -webkit-mask-image: url('/static/images/icons/DataQualityWarning.svg');
-    mask-image: url('/static/images/icons/DataQualityWarning.svg');
+    -webkit-mask-image: url('../images/icons/DataQualityWarning.svg');
+    mask-image: url('../images/icons/DataQualityWarning.svg');
   }
 
   &.icon-down {
-    -webkit-mask-image: url('/static/images/icons/Down.svg');
-    mask-image: url('/static/images/icons/Down.svg');
+    -webkit-mask-image: url('../images/icons/Down.svg');
+    mask-image: url('../images/icons/Down.svg');
   }
 
   &.icon-edit {
-    -webkit-mask-image: url('/static/images/icons/Edit.svg');
-    mask-image: url('/static/images/icons/Edit.svg');
+    -webkit-mask-image: url('../images/icons/Edit.svg');
+    mask-image: url('../images/icons/Edit.svg');
   }
 
   &.icon-help {
-    -webkit-mask-image: url('/static/images/icons/Help-Circle.svg');
-    mask-image: url('/static/images/icons/Help-Circle.svg');
+    -webkit-mask-image: url('../images/icons/Help-Circle.svg');
+    mask-image: url('../images/icons/Help-Circle.svg');
   }
 
   &.icon-github {
-    -webkit-mask-image: url('/static/images/icons/github.svg');
-    mask-image: url('/static/images/icons/github.svg');
+    -webkit-mask-image: url('../images/icons/github.svg');
+    mask-image: url('../images/icons/github.svg');
   }
 
   &.icon-left {
-    -webkit-mask-image: url('/static/images/icons/Left.svg');
-    mask-image: url('/static/images/icons/Left.svg');
+    -webkit-mask-image: url('../images/icons/Left.svg');
+    mask-image: url('../images/icons/Left.svg');
   }
 
   &.icon-loading {
-    -webkit-mask-image: url('/static/images/icons/Loader.svg');
-    mask-image: url('/static/images/icons/Loader.svg');
+    -webkit-mask-image: url('../images/icons/Loader.svg');
+    mask-image: url('../images/icons/Loader.svg');
   }
 
   &.icon-mail {
-    -webkit-mask-image: url('/static/images/icons/mail.svg');
-    mask-image: url('/static/images/icons/mail.svg');
+    -webkit-mask-image: url('../images/icons/mail.svg');
+    mask-image: url('../images/icons/mail.svg');
   }
 
   &.icon-plus {
-    -webkit-mask-image: url('/static/images/icons/plus.svg');
-    mask-image: url('/static/images/icons/plus.svg');
+    -webkit-mask-image: url('../images/icons/plus.svg');
+    mask-image: url('../images/icons/plus.svg');
   }
 
   &.icon-plus-circle {
-    -webkit-mask-image: url('/static/images/icons/Plus-Circle.svg');
-    mask-image: url('/static/images/icons/Plus-Circle.svg');
+    -webkit-mask-image: url('../images/icons/Plus-Circle.svg');
+    mask-image: url('../images/icons/Plus-Circle.svg');
   }
 
   &.icon-preview {
-    -webkit-mask-image: url('/static/images/icons/Preview.svg');
-    mask-image: url('/static/images/icons/Preview.svg');
+    -webkit-mask-image: url('../images/icons/Preview.svg');
+    mask-image: url('../images/icons/Preview.svg');
   }
 
   &.icon-refresh {
-    -webkit-mask-image: url('/static/images/icons/Refresh-cw.svg');
-    mask-image: url('/static/images/icons/Refresh-cw.svg');
+    -webkit-mask-image: url('../images/icons/Refresh-cw.svg');
+    mask-image: url('../images/icons/Refresh-cw.svg');
   }
 
   &.icon-right {
-    -webkit-mask-image: url('/static/images/icons/Right.svg');
-    mask-image: url('/static/images/icons/Right.svg');
+    -webkit-mask-image: url('../images/icons/Right.svg');
+    mask-image: url('../images/icons/Right.svg');
   }
 
   &.icon-search {
-    -webkit-mask-image: url('/static/images/icons/Search.svg');
-    mask-image: url('/static/images/icons/Search.svg');
+    -webkit-mask-image: url('../images/icons/Search.svg');
+    mask-image: url('../images/icons/Search.svg');
   }
 
   &.icon-send {
-    -webkit-mask-image: url('/static/images/icons/Send.svg');
-    mask-image: url('/static/images/icons/Send.svg');
+    -webkit-mask-image: url('../images/icons/Send.svg');
+    mask-image: url('../images/icons/Send.svg');
   }
 
   &.icon-slack {
-    -webkit-mask-image: url('/static/images/icons/slack.svg');
-    mask-image: url('/static/images/icons/slack.svg');
+    -webkit-mask-image: url('../images/icons/slack.svg');
+    mask-image: url('../images/icons/slack.svg');
   }
 
   &.icon-up {
-    -webkit-mask-image: url('/static/images/icons/Up.svg');
-    mask-image: url('/static/images/icons/Up.svg');
+    -webkit-mask-image: url('../images/icons/Up.svg');
+    mask-image: url('../images/icons/Up.svg');
   }
 
   &.icon-user {
-    -webkit-mask-image: url('/static/images/icons/users.svg');
-    mask-image: url('/static/images/icons/users.svg');
+    -webkit-mask-image: url('../images/icons/users.svg');
+    mask-image: url('../images/icons/users.svg');
   }
 
   &.icon-more {
-    -webkit-mask-image: url('/static/images/icons/More.svg');
-    mask-image: url('/static/images/icons/More.svg');
+    -webkit-mask-image: url('../images/icons/More.svg');
+    mask-image: url('../images/icons/More.svg');
   }
 }
 

amundsen_application/static/js/components/common/EntityCard/EntityCardSection/styles.scss

@@ -29,8 +29,8 @@
     border: none;
     border-radius: 5px;
     height: 24px;
-    -webkit-mask-image: url('/static/images/icons/Edit.svg');
-    mask-image: url('/static/images/icons/Edit.svg');
+    -webkit-mask-image: url('../../../../../images/icons/Edit.svg');
+    mask-image: url('../../../../../images/icons/Edit.svg');
     width: 24px;
   }
 
@@ -40,7 +40,7 @@
 
   button.active-edit-button {
     background-color: $brand-color-1;
-    background-image: url('/static/images/icons/Edit_Inverted.svg');
+    background-image: url('../../../../../images/icons/Edit_Inverted.svg');
     border: none;
     border-radius: 5px;
     -moz-box-shadow: inset 1px 1px 2px $brand-color-4;

amundsen_application/static/js/components/common/InfoButton/styles.scss

@@ -8,8 +8,8 @@ button.info-button {
   border: none;
   height: 24px;
   margin: 0 0 0 8px;
-  -webkit-mask-image: url('/static/images/icons/Info.svg');
-  mask-image: url('/static/images/icons/Info.svg');
+  -webkit-mask-image: url('../../../../images/icons/Info.svg');
+  mask-image: url('../../../../images/icons/Info.svg');
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;

amundsen_application/static/package.json

@@ -79,7 +79,7 @@
     "bootstrap-sass": "^3.4.1",
     "clean-webpack-plugin": "3.0.0",
     "cross-env": "^5.2.1",
-    "css-loader": "^3.5.3",
+    "css-loader": "^4.2.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",

amundsen_application/static/webpack.common.ts

@@ -14,6 +14,7 @@ const JSX_PATTERN = /\.jsx?$/;
 const CSS_PATTERN = /\.(sa|sc|c)ss$/;
 const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
 const VENDORS_PATTERN = /[\\/]node_modules[\\/](react|react-dom)[\\/]/;
+const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
 
 const PATHS = {
   dist: path.join(__dirname, '/dist'),
@@ -99,6 +100,10 @@ const config: webpack.Configuration = {
         test: IMAGE_PATTERN,
         use: 'file-loader',
       },
+      {
+        test: FONT_PATTERN,
+        use: 'file-loader',
+      },
     ],
   },
   plugins: [