From 079db2fdb426b486db8ea9896a67216b3d42d5a3 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 30 Mar 2020 15:38:02 -0300
Subject: [PATCH] Remove use of webpack loaders in components (#8249)

Various SVGs were being imported directly in components using Webpack
loaders. This was done to get these components to work correctly in
storybook, which uses Webpack. However we don't use Webpack for our
actual build system, so these components would fail when you attempted
to use them.

Instead the storybook script has been updated to use the `--static-dir`
flag, which allows specifying a directory of files to serve statically.
The `app` directory is served statically, so all of the relative URLs
we use in practice to reference fonts and images should just work.

The storybook build command has been updated to use the same flag.
Unfortunately this also means that the uncompiled background code is
now included in the build as well, because it's alongside our static
files. This shouldn't have any impact upon the build though.

The use of this `static-dir` option as made much of the existing
storybook Webpack configuration unnecessary, so it has been reduced to
just the essential steps.
---
 .storybook/webpack.config.js                  | 34 ++++---------------
 package.json                                  |  4 +--
 .../alert-circle-icon.component.js            |  7 ++--
 .../ui/circle-icon/circle-icon.stories.js     |  3 +-
 4 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index dfe46d540..3edeb7a23 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -4,21 +4,17 @@ module.exports = {
   module: {
     strictExportPresence: true,
     rules: [
-      {
-        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
-        loaders: [{
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: 'fonts/',
-          },
-        }],
-      },
       {
         test: /\.scss$/,
         loaders: [
           'style-loader',
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              import: false,
+              url: false,
+            },
+          },
           'resolve-url-loader',
           {
             loader: 'sass-loader',
@@ -28,22 +24,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-            },
-          }
-        ],
-      },
     ],
   },
-  resolve: {
-    alias: {
-      './fonts/Font_Awesome': path.resolve(__dirname, '../app/fonts/Font_Awesome'),
-    },
-  },
 }
diff --git a/package.json b/package.json
index adb2c12db..1e701338d 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
-    "storybook": "start-storybook -p 6006 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o .out",
+    "storybook": "start-storybook -p 6006 -c .storybook --static-dir ./app",
+    "storybook:build": "build-storybook -c .storybook -o .out --static-dir ./app",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir .out --remote storybook --branch master",
     "update-changelog": "./development/auto-changelog.sh",
     "generate:migration": "./development/generate-migration.sh"
diff --git a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js
index 78074fa4d..8569f873d 100644
--- a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js
+++ b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js
@@ -2,17 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import CircleIcon from '../circle-icon'
 
-import danger from '../../../../../app/images/icons/red-triangle-exclaim.svg'
-import warning from '../../../../../app/images/icons/yellow-bell.svg'
-
 const typeConfig = {
   danger: {
     circleClass: 'alert-circle-icon--danger',
-    iconSource: danger,
+    iconSource: 'images/icons/red-triangle-exclaim.svg',
   },
   warning: {
     circleClass: 'alert-circle-icon--warning',
-    iconSource: warning,
+    iconSource: 'images/icons/yellow-bell.svg',
   },
 }
 
diff --git a/ui/app/components/ui/circle-icon/circle-icon.stories.js b/ui/app/components/ui/circle-icon/circle-icon.stories.js
index 3d57b5f71..230a2f8a3 100644
--- a/ui/app/components/ui/circle-icon/circle-icon.stories.js
+++ b/ui/app/components/ui/circle-icon/circle-icon.stories.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import CircleIcon from './circle-icon.component'
-import img from '../../../../../app/images/eth_logo.svg'
 
 export default {
   title: 'CircleIcon',
@@ -12,6 +11,6 @@ export const basicCircleIcon = () => (
     borderColor="black"
     background="white"
     iconSize="42px"
-    iconSource={img}
+    iconSource="images/eth_logo.svg"
   />
 )