From 91c395830de32cd16779b096a0b3bd488c30eec4 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 16 May 2020 16:21:00 +0200
Subject: [PATCH] packages/cli: disallow importing all of @material-ui/icons

---
 packages/cli/config/eslint.js                 | 13 ++++++++
 .../core/src/api/app/LoginPage/LoginPage.tsx  |  2 +-
 packages/core/src/components/Table/Table.tsx  | 32 +++++++++----------
 .../ComponentContextMenu.tsx                  |  4 ++-
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/packages/cli/config/eslint.js b/packages/cli/config/eslint.js
index 6de2cf75d5..0c6bfbe8e7 100644
--- a/packages/cli/config/eslint.js
+++ b/packages/cli/config/eslint.js
@@ -57,6 +57,19 @@ module.exports = {
       'warn',
       { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
     ],
+
+    // Importing the entire MUI icons packages kills build performance as the list of icons is huge.
+    'no-restricted-imports': [
+      2,
+      {
+        paths: [
+          {
+            name: '@material-ui/icons',
+            message: "Please import '@material-ui/icons/<Icon>' instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {
diff --git a/packages/core/src/api/app/LoginPage/LoginPage.tsx b/packages/core/src/api/app/LoginPage/LoginPage.tsx
index 07160e750c..cdf0b55fd4 100644
--- a/packages/core/src/api/app/LoginPage/LoginPage.tsx
+++ b/packages/core/src/api/app/LoginPage/LoginPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { FC, useState } from 'react';
-import { GitHub as GitHubIcon } from '@material-ui/icons';
+import GitHubIcon from '@material-ui/icons/GitHub';
 import Page from '../../../layout/Page';
 import Header from '../../../layout/Header';
 import Content from '../../../layout/Content/Content';
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 3f3f879657..550353920c 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -27,23 +27,21 @@ import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core';
 
 // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51
-import {
-  AddBox,
-  ArrowUpward,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  Clear,
-  DeleteOutline,
-  Edit,
-  FilterList,
-  FirstPage,
-  LastPage,
-  Remove,
-  SaveAlt,
-  Search,
-  ViewColumn,
-} from '@material-ui/icons';
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import SaveAlt from '@material-ui/icons/SaveAlt';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
 
 const tableIcons = {
   Add: forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
diff --git a/plugins/catalog/src/components/ComponentContextMenu/ComponentContextMenu.tsx b/plugins/catalog/src/components/ComponentContextMenu/ComponentContextMenu.tsx
index 2895ebd0b0..674d979f83 100644
--- a/plugins/catalog/src/components/ComponentContextMenu/ComponentContextMenu.tsx
+++ b/plugins/catalog/src/components/ComponentContextMenu/ComponentContextMenu.tsx
@@ -21,7 +21,9 @@ import {
   MenuItem,
   Typography,
 } from '@material-ui/core';
-import { Cancel, MoreVert, SwapHoriz } from '@material-ui/icons';
+import Cancel from '@material-ui/icons/Cancel';
+import MoreVert from '@material-ui/icons/MoreVert';
+import SwapHoriz from '@material-ui/icons/SwapHoriz';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({