chore(feature-runs): add saga to create feature runs

src/app/components/Card/Card.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { style } from "typestyle";
+import { Color, Spacing } from "../../constants";
+import { Avatar } from "../Avatar/Avatar";
+
+interface IProps {
+  description: string;
+  featureId: string;
+  hypothesis: string;
+}
+const styles = {
+  body: style({
+    flexGrow: 1,
+    padding: Spacing.L
+  }),
+  container: style({
+    border: `1px solid ${Color.GREY}`,
+    display: "flex",
+    flexDirection: "column",
+    height: 250,
+    padding: Spacing.NONE,
+    width: 250
+  }),
+  featureId: style({
+    marginLeft: Spacing.S
+  }),
+  footer: style({
+    alignItems: "center",
+    borderTop: `1px solid ${Color.GREY}`,
+    display: "flex",
+    paddingBottom: Spacing.M,
+    paddingLeft: Spacing.L,
+    paddingTop: Spacing.M
+  })
+};
+export const Card: React.FC<IProps> = (props): JSX.Element => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.body}>
+        {props.description}
+        <hr/>
+        {props.hypothesis}
+      </div>
+      <div className={styles.footer}>
+        <Avatar label={props.featureId.split("")[0]}/>
+        <span className={styles.featureId}>{props.featureId}</span>
+      </div>
+    </div>
+  );
+};

src/app/containers/App.test.tsx

@@ -2,7 +2,6 @@ import { shallow } from "enzyme";
 import * as React from "react";
 import { State as IRouteState } from "router5";
 import { HomePage } from "../pages/HomePage";
-import { ISettingsState } from "../redux/modules/settingsModule";
 import { getRoutes } from "../routes/routes";
 import { classNames, mapStateToProps, UnconnectedApp } from "./App";
 
@@ -19,22 +18,13 @@ describe("<App />", () => {
     params: {},
     path: "/"
   };
-  const settings: ISettingsState = {
-    error: "",
-    language: "en",
-    loaded: true,
-    pending: false,
-    translations: { "Not found": "Not Found" }
-  };
   const translations = { notFound: "Not Found" };
 
   it("maps state to props correctly", () => {
     const props = mapStateToProps({
-      router: { route, previousRoute: route, transitionRoute: null, transitionError: null },
-      settings
+      router: { route, previousRoute: route, transitionRoute: null, transitionError: null }
     });
     expect(props.route).toEqual(route);
-    expect(props.translations).toEqual({ notFound: "Not Found" });
   });
 
   it("renders with correct style", () => {

src/app/containers/App.tsx

@@ -2,28 +2,23 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import { connect } from "react-redux";
 import { createRouteNodeSelector, RouterState } from "redux-router5";
-import { createSelector } from "reselect";
 import { State as IRouteState } from "router5";
 import { stylesheet } from "typestyle";
 import { config as appConfig } from "../../../config";
 import { setupCss } from "../helpers/setupCss";
-import { Translator } from "../models/Translator";
-import { ITranslator } from "../models/TranslatorInterfaces";
-import { AboutPage } from "../pages/AboutPage";
-import { CounterPage } from "../pages/CounterPage";
 import { HomePage } from "../pages/HomePage";
-import { StarsPage } from "../pages/StarsPage";
+import { RunsPage } from "../pages/RunsPage";
 import { IStore } from "../redux/IStore";
 import { RoutePageMap } from "../routes/routes";
-import { translationsSelector } from "../selectors/translationsSelector";
 import { Header } from "./Header";
 
 setupCss();
 
 const classNames = stylesheet({
   container: {
-    margin: 0,
-    padding: 0
+    margin: "0 auto",
+    padding: 0,
+    width: 1024
   }
 });
 
@@ -36,10 +31,8 @@ interface IStateToProps {
 
 class App extends React.Component<IStateToProps> {
   private components: RoutePageMap = {
-    aboutPage: AboutPage,
-    counterPage: CounterPage,
     homePage: HomePage,
-    starsPage: StarsPage
+    runsPage: RunsPage
   };
   public render(): JSX.Element {
     const { route, translations: { notFound } } = this.props;
@@ -54,19 +47,11 @@ class App extends React.Component<IStateToProps> {
   }
 }
 
-const componentTranslationsSelector = createSelector(
-  translationsSelector,
-  (translations) => {
-    const translator: ITranslator = new Translator(translations);
-    return {
-      notFound: translator.translate("Not found")
-    };
-  }
-);
-
-const mapStateToProps = (state: Pick<IStore, "router" | "settings">): IStateToProps & Partial<RouterState> => ({
+const mapStateToProps = (state: Pick<IStore, "router">): IStateToProps & Partial<RouterState> => ({
   ...createRouteNodeSelector("")(state),
-  translations: componentTranslationsSelector(state)
+  translations: {
+    notFound: "Not found"
+  }
 });
 
 const connected = connect(mapStateToProps)(App);

src/app/containers/EmptyState.tsx

@@ -8,11 +8,9 @@ const styles = {
   container: style({
     display: "flex",
     flexDirection: "column",
-    margin: "0 auto",
     marginTop: Spacing.XXXL,
     padding: Spacing.L,
-    paddingLeft: Spacing.XXXL,
-    width: 960
+    paddingLeft: Spacing.XXXL
   }),
   iconContainer: style({
     width: 200
@@ -23,6 +21,7 @@ const styles = {
 };
 
 interface IProps {
+  buttonLabel: string;
   onActionClick: () => void;
 }
 
@@ -33,9 +32,9 @@ export const EmptyState: React.FC<IProps> = (props) => {
         <FeatureIcon/>
       </div>
       <h1 className={styles.pullDown}>No items yet</h1>
-      <p>There are no features created yet, why don't we start by creating one?</p>
+      <p>{props.children}</p>
       <div>
-        <Button onClick={props.onActionClick} type={"primary"}>Create a Feature</Button>
+        <Button onClick={props.onActionClick} type={"primary"}>{props.buttonLabel}</Button>
       </div>
     </div>
   );

src/app/containers/Header.tsx

@@ -1,13 +1,7 @@
 import * as React from "react";
-import { connect } from "react-redux";
 import { ConnectedLink } from "react-router5";
-import { createSelector } from "reselect";
 import { stylesheet } from "typestyle";
-import { Translator } from "../models/Translator";
-import { ITranslator } from "../models/TranslatorInterfaces";
-import { IStore } from "../redux/IStore";
 import { getRoutes } from "../routes/routes";
-import { translationsSelector } from "../selectors/translationsSelector";
 
 const classNames = stylesheet({
   activeLink: {
@@ -29,66 +23,19 @@ const classNames = stylesheet({
   }
 });
 
-interface IStateToProps {
-  translations: {
-    aboutUs: string;
-    counter: string;
-    home: string;
-    stars: string;
-  };
-}
-
-class Header extends React.Component<IStateToProps> {
+export class Header extends React.Component {
   public render(): JSX.Element {
-    const { translations } = this.props;
     const routes = getRoutes();
     return (
       <nav className={classNames.nav}>
         <ul>
           <li>
             <ConnectedLink activeClassName={classNames.activeLink} routeName={routes.homePage.name}>
-              {translations.home}
-            </ConnectedLink>
-          </li>
-          <li>
-            <ConnectedLink activeClassName={classNames.activeLink} routeName={routes.aboutPage.name}>
-              {translations.aboutUs}
-            </ConnectedLink>
-          </li>
-          <li>
-            <ConnectedLink activeClassName={classNames.activeLink} routeName={routes.counterPage.name}>
-              {translations.counter}
-            </ConnectedLink>
-          </li>
-          <li>
-            <ConnectedLink activeClassName={classNames.activeLink} routeName={routes.starsPage.name}>
-              {translations.stars}
+              Home
             </ConnectedLink>
           </li>
         </ul>
       </nav>
     );
   }
 }
-
-const componentTranslationsSelector = createSelector(
-  translationsSelector,
-  (translations) => {
-    const translator: ITranslator = new Translator(translations);
-    return {
-      aboutUs: translator.translate("About us"),
-      counter: translator.translate("Counter"),
-      home: translator.translate("Home"),
-      stars: translator.translate("Stars")
-    };
-  }
-);
-
-function mapStateToProps(state: Pick<IStore, "settings">): IStateToProps {
-  return {
-    translations: componentTranslationsSelector(state)
-  };
-}
-
-const connected = connect(mapStateToProps)(Header);
-export { connected as Header, Header as UnconnectedHeader, mapStateToProps };