refactor: added flow and css in JS in NotFound (#1098)

src/webui/components/NotFound/404.scss

@@ -1,11 +0,0 @@
-@import '../../styles/variables';
-
-.notFound {
-  width: 100%;
-  font-size: $font-size-md;
-  line-height: $line-height-xl;
-  border: none;
-  outline: none;
-  flex-direction: column;
-  align-items: center;
-}

src/webui/components/NotFound/index.js

@@ -1,23 +1,18 @@
+/**
+ * @prettier
+ * @flow
+ */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Wrapper } from './styles';
+import { IProps } from './types';
 
-import classes from './404.scss';
-
-const NotFound = (props) => {
-    return (
-      <div className={`container content ${classes.notFound}`}>
-        <h1>Error 404 - {props.pkg}</h1>
-        <hr/>
-        <p>
-          Oops, The package you are trying to access does not exist.
-        </p>
-      </div>
-    );
-};
-
-NotFound.propTypes = {
-  pkg: PropTypes.string.isRequired
-};
+const NotFound = ({ pkg }: IProps) => (
+  <Wrapper>
+    <h1>Error 404 - {pkg}</h1>
+    <hr />
+    <p>Oops, The package you are trying to access does not exist.</p>
+  </Wrapper>
+);
 
 export default NotFound;

src/webui/components/NotFound/styles.js

@@ -0,0 +1,19 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+
+import { fontSize, lineHeight } from '../../utils/styles/sizes';
+
+export const Wrapper = styled.div`
+  && {
+    font-size: ${fontSize.md};
+    line-height: ${lineHeight.xl};
+    border: none;
+    outline: none;
+    flex-direction: column;
+    align-items: center;
+  }
+`;

src/webui/components/NotFound/types.js

@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  pkg: string;
+}

src/webui/pages/detail/index.jsx

@@ -68,7 +68,9 @@ export default class Detail extends Component {
 
     if (notFound) {
       return (
-        <NotFound pkg={this.packageName} />
+        <div className='container content'>
+          <NotFound pkg={this.packageName} />
+        </div>
       );
     } else if (isEmpty(readMe)) {
       return <Spinner centered />;

test/unit/webui/components/__snapshots__/notfound.spec.js.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"container content notFound\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;
+exports[`<NotFound /> component should load the component in default state 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - test</h1><hr><p>Oops, The package you are trying to access does not exist.</p></div>"`;
+
+exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;

test/unit/webui/components/notfound.spec.js

@@ -3,15 +3,15 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import NotFound from '../../../../src/webui/components/NotFound/index';
 
 console.error = jest.fn();
 
 describe('<NotFound /> component', () => {
-  it('should give error for the required fields', () => {
-    shallow(<NotFound />);
-    expect(console.error).toBeCalled();
+  it('should load the component in default state', () => {
+    const wrapper = mount(<NotFound pkg='test' />);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should set html from props', () => {