Merge pull request #132 from ral-facilities/feature/muiv4-upgrade-#101

Feature/muiv4 upgrade #101
ral-facilities · Jan 24, 2020 · 209389a · 209389a
2 parents bc1a8d2 + 44dd5e7
commit 209389a
Show file tree

Hide file tree

Showing 35 changed files with 869 additions and 3,021 deletions.
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "proxy": "http://localhost:8000/",
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.2",
+    "@material-ui/core": "^4.8.3",
+    "@material-ui/icons": "^4.5.1",
     "axios": "^0.19.0",
     "connected-react-router": "^6.5.2",
     "custom-event-polyfill": "^1.0.7",

diff --git a/src/App.tsx b/src/App.tsx
@@ -23,6 +23,15 @@ import CookieConsent from './cookieConsent/cookieConsent.component';
 import ReduxToastr from 'react-redux-toastr';
 import Tour from './tour/tour.component';
 
+import {
+  StylesProvider,
+  createGenerateClassName,
+} from '@material-ui/core/styles';
+
+const generateClassName = createGenerateClassName({
+  productionPrefix: 'sgw',
+});
+
 const history = createBrowserHistory();
 
 const middleware = [thunk, routerMiddleware(history), ScigatewayMiddleware];
@@ -80,10 +89,12 @@ class App extends React.Component {
       <div className="App">
         <Provider store={store}>
           <ConnectedRouter history={history}>
-            <MuiThemeProvider theme={buildTheme()}>
-              {toastrConfig()}
-              {pageContent()}
-            </MuiThemeProvider>
+            <StylesProvider generateClassName={generateClassName}>
+              <MuiThemeProvider theme={buildTheme()}>
+                {toastrConfig()}
+                {pageContent()}
+              </MuiThemeProvider>
+            </StylesProvider>
           </ConnectedRouter>
         </Provider>
       </div>

diff --git a/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap
@@ -1,31 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Cookie consent component should render correctly 1`] = `
-<WithStyles(Snackbar)
+<WithStyles(ForwardRef(Snackbar))
   ContentProps={
     Object {
-      "className": "CookieConsent-root-1",
+      "className": "root-class",
     }
   }
   action={
     Array [
-      <WithStyles(Button)
-        className="CookieConsent-button-2"
-        onClick={[Function]}
+      <ForwardRef(WithStyles)
+        className="button-class"
+        onClick={[MockFunction]}
         size="small"
         variant="outlined"
       >
         manage-preferences-button
-      </WithStyles(Button)>,
-      <WithStyles(Button)
-        className="CookieConsent-button-2"
+      </ForwardRef(WithStyles)>,
+      <ForwardRef(WithStyles)
+        className="button-class"
         color="primary"
         onClick={[Function]}
         size="small"
         variant="contained"
       >
         accept-button
-      </WithStyles(Button)>,
+      </ForwardRef(WithStyles)>,
     ]
   }
   anchorOrigin={

diff --git a/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap
@@ -4,21 +4,21 @@ exports[`Cookies page component should render correctly 1`] = `
 <div
   className="CookiesPage-root-1"
 >
-  <WithStyles(Typography)
+  <WithStyles(ForwardRef(Typography))
     className="CookiesPage-titleText-3"
     variant="h3"
   >
     title
-  </WithStyles(Typography)>
+  </WithStyles(ForwardRef(Typography))>
   <div
     className="CookiesPage-container-2"
   >
-    <WithStyles(Typography)
+    <WithStyles(ForwardRef(Typography))
       variant="h4"
     >
       cookie-policy-title
-    </WithStyles(Typography)>
-    <WithStyles(Typography)
+    </WithStyles(ForwardRef(Typography))>
+    <WithStyles(ForwardRef(Typography))
       className="CookiesPage-cookiePolicy-4"
       dangerouslySetInnerHTML={
         Object {
@@ -31,29 +31,29 @@ exports[`Cookies page component should render correctly 1`] = `
   <div
     className="CookiesPage-container-2"
   >
-    <WithStyles(Typography)
+    <WithStyles(ForwardRef(Typography))
       variant="h4"
     >
       cookie-management-title
-    </WithStyles(Typography)>
-    <WithStyles(Grid)
+    </WithStyles(ForwardRef(Typography))>
+    <WithStyles(ForwardRef(Grid))
       className="CookiesPage-cookieTypes-5"
       container={true}
       direction="column"
       spacing={8}
     >
-      <WithStyles(Grid)
+      <WithStyles(ForwardRef(Grid))
         alignItems="center"
         container={true}
         item={true}
         justify="flex-start"
       >
-        <WithStyles(Grid)
+        <WithStyles(ForwardRef(Grid))
           item={true}
           sm={1}
           xs={2}
         >
-          <WithStyles(Switch)
+          <WithStyles(ForwardRef(Switch))
             checked={true}
             color="primary"
             disabled={true}
@@ -64,62 +64,62 @@ exports[`Cookies page component should render correctly 1`] = `
               }
             }
           />
-        </WithStyles(Grid)>
-        <WithStyles(Grid)
+        </WithStyles(ForwardRef(Grid))>
+        <WithStyles(ForwardRef(Grid))
           item={true}
           sm={2}
           xs={4}
         >
-          <WithStyles(Typography)
+          <WithStyles(ForwardRef(Typography))
             id="essential-cookies-title"
             variant="body1"
           >
             essential-cookies-title
-          </WithStyles(Typography)>
-        </WithStyles(Grid)>
-        <WithStyles(Grid)
+          </WithStyles(ForwardRef(Typography))>
+        </WithStyles(ForwardRef(Grid))>
+        <WithStyles(ForwardRef(Grid))
           id="essential-cookies-description"
           item={true}
           sm={9}
           xs={12}
         >
-          <WithStyles(Typography)
+          <WithStyles(ForwardRef(Typography))
             variant="body1"
           >
             essential-cookies-description
-          </WithStyles(Typography)>
+          </WithStyles(ForwardRef(Typography))>
           <ul
             className="CookiesPage-cookieList-7"
           >
-            <WithStyles(Typography)
+            <WithStyles(ForwardRef(Typography))
               className="CookiesPage-cookieListItem-8"
               component="li"
               variant="body1"
             >
               cookie-consent-description
-            </WithStyles(Typography)>
-            <WithStyles(Typography)
+            </WithStyles(ForwardRef(Typography))>
+            <WithStyles(ForwardRef(Typography))
               className="CookiesPage-cookieListItem-8"
               component="li"
               variant="body1"
             >
               scigateway-token-description
-            </WithStyles(Typography)>
+            </WithStyles(ForwardRef(Typography))>
           </ul>
-        </WithStyles(Grid)>
-      </WithStyles(Grid)>
-      <WithStyles(Grid)
+        </WithStyles(ForwardRef(Grid))>
+      </WithStyles(ForwardRef(Grid))>
+      <WithStyles(ForwardRef(Grid))
         alignItems="center"
         container={true}
         item={true}
         justify="flex-start"
       >
-        <WithStyles(Grid)
+        <WithStyles(ForwardRef(Grid))
           item={true}
           sm={1}
           xs={2}
         >
-          <WithStyles(Switch)
+          <WithStyles(ForwardRef(Switch))
             checked={false}
             color="primary"
             inputProps={
@@ -130,53 +130,53 @@ exports[`Cookies page component should render correctly 1`] = `
             }
             onChange={[Function]}
           />
-        </WithStyles(Grid)>
-        <WithStyles(Grid)
+        </WithStyles(ForwardRef(Grid))>
+        <WithStyles(ForwardRef(Grid))
           item={true}
           sm={2}
           xs={4}
         >
-          <WithStyles(Typography)
+          <WithStyles(ForwardRef(Typography))
             id="analytics-cookies-title"
             variant="body1"
           >
             analytics-cookies-title
-          </WithStyles(Typography)>
-        </WithStyles(Grid)>
-        <WithStyles(Grid)
+          </WithStyles(ForwardRef(Typography))>
+        </WithStyles(ForwardRef(Grid))>
+        <WithStyles(ForwardRef(Grid))
           id="analytics-cookies-description"
           item={true}
           sm={9}
           xs={12}
         >
-          <WithStyles(Typography)
+          <WithStyles(ForwardRef(Typography))
             variant="body1"
           >
             analytics-cookies-description
-          </WithStyles(Typography)>
+          </WithStyles(ForwardRef(Typography))>
           <ul
             className="CookiesPage-cookieList-7"
           >
-            <WithStyles(Typography)
+            <WithStyles(ForwardRef(Typography))
               className="CookiesPage-cookieListItem-8"
               component="li"
               variant="body1"
             >
               google-analytics-description
-            </WithStyles(Typography)>
+            </WithStyles(ForwardRef(Typography))>
           </ul>
-        </WithStyles(Grid)>
-      </WithStyles(Grid)>
-    </WithStyles(Grid)>
+        </WithStyles(ForwardRef(Grid))>
+      </WithStyles(ForwardRef(Grid))>
+    </WithStyles(ForwardRef(Grid))>
   </div>
-  <WithStyles(Button)
+  <WithStyles(ForwardRef(Button))
     className="CookiesPage-button-6"
     color="primary"
     onClick={[Function]}
     size="medium"
     variant="contained"
   >
     save-preferences-button
-  </WithStyles(Button)>
+  </WithStyles(ForwardRef(Button))>
 </div>
 `;