[WAGYU-38] System check page refactor (stake-house#67)

* update storybook config & mock certain modules

* split up and refactor system check page

* use new system check page

* add devtools

* fix minor styling issues

* fix rocketpool loading flash issue

* refactor installation status and remove render function

.storybook/decorators/withGlobalStyles.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Slate1 } from '../../src/react/colors';
 
 const Container = styled.main`
   font-family: 'PT Mono', monospace;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: ${Slate1};
 `;
 
 export const withGlobalStyles = (storyFn: any) => {

.storybook/decorators/withProviders.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { HashRouter } from 'react-router-dom';
+
+export const withProviders = (storyFn: any) => {
+  return <HashRouter>{storyFn()}</HashRouter>;
+};

.storybook/preview.ts

@@ -1,7 +1,9 @@
 import { addDecorator } from '@storybook/react';
 import { withGlobalStyles } from './decorators/withGlobalStyles';
+import { withProviders } from './decorators/withProviders';
 
 addDecorator(withGlobalStyles);
+addDecorator(withProviders);
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

.storybook/webpack.config.ts

@@ -0,0 +1,25 @@
+const path = require('path');
+
+/**
+ * The doc doesn't really mention using webpack.config.js, but .storybook/main.js instead.
+ *
+ * Nevertheless, configuring the webpack.config.js seems to work fine.
+ *
+ * @param config
+ * @param mode
+ * @return {Promise<*>}
+ * @see https://storybook.js.org/docs/react/configure/webpack
+ * @see https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config
+ */
+module.exports = async ({ config, mode }) => {
+  /**
+   * Fixes npm packages that depend on `fs` module, etc.
+   *
+   * E.g: "winston" would fail to load without this, because it relies on fs, which isn't available during browser build.
+   *
+   * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-495370896
+   */
+  config.node = { fs: 'empty', child_process: 'empty' };
+
+  return config;
+};

package.json

@@ -18,6 +18,7 @@
     "@types/styled-components": "^5.1.7",
     "babel-loader": "^8.2.2",
     "electron": "^12.0.0",
+    "electron-devtools-installer": "^3.2.0",
     "ts-loader": "^8.0.17",
     "typescript": "^4.2.2",
     "webpack": "^5.24.2",

src/electron/index.ts

@@ -1,6 +1,13 @@
 import { BrowserWindow, app, globalShortcut } from 'electron';
+import installExtension, {
+  REACT_DEVELOPER_TOOLS,
+} from 'electron-devtools-installer';
 
 app.on('ready', () => {
+  installExtension(REACT_DEVELOPER_TOOLS)
+    .then((name) => console.log(`Added Extension:  ${name}`))
+    .catch((err) => console.log('An error occurred: ', err));
+
   // once electron has started up, create a window.
   const window = new BrowserWindow({
     width: 900,

src/react/App.tsx

@@ -7,7 +7,7 @@ import { Home } from './components/Home';
 import { InstallFailed } from './components/InstallFailed';
 import { Installing } from './components/Installing';
 import { StatusPage as Status } from './components/Status';
-import { SystemCheck } from './components/SystemCheck';
+import { SystemCheck } from './components/SystemCheck/SystemCheck';
 
 const Container = styled.main`
   font-family: 'PT Mono', monospace;

src/react/components/Home.tsx

@@ -79,7 +79,7 @@ export const Home = withRouter(({ history }: { history: History }) => {
         <br />
         <br />
         <br />A one-click staking installer for the
-        <Testnet>pyrmont testnet</Testnet>.
+        <Testnet>{' pyrmont testnet'}</Testnet>.
         <br />
         <br />
         <br />
@@ -93,7 +93,7 @@ export const Home = withRouter(({ history }: { history: History }) => {
         <br />
         *Note: we use the Rocket Pool install infrastructure which runs
         everything in docker, more info
-        <StyledLink onClick={sendToRocketpool}>here</StyledLink>
+        <StyledLink onClick={sendToRocketpool}>{' here'}</StyledLink>
       </Content>
       <StartButton to="/systemcheck">Enter</StartButton>
     </Container>

src/react/components/SystemCheck/ResultsTable.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { rem } from 'polished';
+
+type Props = {
+  isRocketPoolInstalled: boolean;
+};
+
+const ResultsTableStyled = styled.table`
+  border: ${rem(2)} solid gray;
+  width: 75%;
+  padding: ${rem(15)};
+  text-align: left;
+  color: white;
+`;
+
+export const ResultsTable = ({ isRocketPoolInstalled }: Props) => {
+  return (
+    <ResultsTableStyled>
+      <thead>
+        <tr>
+          <th>Test</th>
+          <th>Result</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            Rocket Pool <i>not</i> installed
+          </td>
+          <td>{!isRocketPoolInstalled ? 'Pass' : 'Fail'}</td>
+        </tr>
+      </tbody>
+    </ResultsTableStyled>
+  );
+};

src/react/components/SystemCheck/SystemCheck.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { SystemCheck } from './SystemCheck';
+
+export default {
+  title: 'Example/SystemCheckNew',
+  component: SystemCheck,
+} as ComponentMeta<typeof SystemCheck>;
+
+const Template: ComponentStory<typeof SystemCheck> = () => {
+  return <SystemCheck />;
+};
+
+export const LoggedIn = Template.bind({});