refactor the code after git repo integration

src/ensembl/src/content/app/browser/Browser.scss

+@import 'src/styles/common';
+
+.browser {
+  width: 100%;
+}
+
+.browserInnerWrapper {
+  @include flex;
+}
+
+.browserImageWrapper {
+  &.semiExpanded {
+    width: calc(100vw - 356px);
+  }
+
+  &.expanded {
+    width: calc(100vw - 36px);
+  }
+
+  &.collapsed {
+    width: 41px;
+
+    .browserImage {
+      display: none;
+    }
+  }
+}

src/ensembl/src/content/app/browser/Browser.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import { Browser } from './Browser';
+import { BrowserOpenState } from './browserState';
+
+describe('<Browser />', () => {
+  let closeDrawerFn: () => void;
+  let toggleBrowserNavFn: () => void;
+  let wrapper: any;
+
+  beforeEach(() => {
+    closeDrawerFn = jest.fn();
+    toggleBrowserNavFn = jest.fn();
+    wrapper = shallow(
+      <Browser
+        browserNavOpened={true}
+        browserOpenState={BrowserOpenState.SEMI_EXPANDED}
+        closeDrawer={closeDrawerFn}
+        drawerOpened={false}
+        toggleBrowserNav={toggleBrowserNavFn}
+      />
+    );
+  });
+
+  test('renders correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/ensembl/src/scripts/components/apps/browser/Browser.tsx → src/ensembl/src/content/app/browser/Browser.tsx

@@ -2,23 +2,24 @@ import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
-import BrowserHeaderBar from './BrowserHeaderBar';
-import BrowserImage from './BrowserImage';
-import BrowserInfoBar from './BrowserInfoBar';
-import BrowserNavBar from './BrowserNavBar';
-import TrackPanel from '../../layout/track-panel/TrackPanel';
-import Track from '../../tracks/Track';
+import BrowserBar from './browser-bar/BrowserBar';
+import BrowserImage from './browser-image/BrowserImage';
+import BrowserNavBar from './browser-nav/BrowserNavBar';
+import TrackPanel from './track-panel/TrackPanel';
+import Drawer from './drawer/Drawer';
 
-import { RootState } from '../../../reducers';
-import { BrowserOpenState } from '../../../reducers/browserReducer';
-import { closeDrawer, toggleBrowserNav } from '../../../actions/browserActions';
+import { RootState } from 'src/rootReducer';
+import { BrowserOpenState } from './browserState';
+import { closeDrawer, toggleBrowserNav } from './browserActions';
 import {
   getBrowserOpenState,
   getDrawerOpened,
   getBrowserNavOpened
-} from '../../../selectors/browserSelectors';
+} from './browserSelectors';
 
-import 'assets/browser/browser';
+import 'static/browser/browser';
+
+import styles from './Browser.scss';
 
 type BrowserProps = {
   browserNavOpened: boolean;
@@ -45,23 +46,24 @@ export class Browser extends Component<BrowserProps> {
 
   public render() {
     return (
-      <section className="browser">
-        <BrowserHeaderBar />
-        <div className="browser-inner-wrapper">
+      <section className={styles.browser}>
+        <BrowserBar
+          browserNavOpened={this.props.browserNavOpened}
+          expanded={true}
+          toggleBrowserNav={this.props.toggleBrowserNav}
+        />
+        <div className={styles.browserInnerWrapper}>
           <div
-            className={`browser-image-wrapper ${this.props.browserOpenState}`}
+            className={`${styles.browserImageWrapper} ${
+              styles[this.props.browserOpenState]
+            }`}
             onClick={this.closeTrack}
           >
-            <BrowserInfoBar
-              browserNavOpened={this.props.browserNavOpened}
-              expanded={true}
-              toggleBrowserNav={this.props.toggleBrowserNav}
-            />
             {this.props.browserNavOpened && <BrowserNavBar />}
             <BrowserImage />
           </div>
           <TrackPanel />
-          {this.props.drawerOpened && <Track />}
+          {this.props.drawerOpened && <Drawer />}
         </div>
       </section>
     );

src/ensembl/src/content/app/browser/__snapshots__/Browser.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Browser /> renders correctly 1`] = `
+<section
+  className="browser"
+>
+  <React.Memo
+    browserNavOpened={true}
+    expanded={true}
+    toggleBrowserNav={[MockFunction]}
+  />
+  <div
+    className="browserInnerWrapper"
+  >
+    <div
+      className="browserImageWrapper semiExpanded"
+      onClick={[Function]}
+    >
+      <BrowserNavBar />
+      <BrowserImage />
+    </div>
+    <Connect(TrackPanel) />
+  </div>
+</section>
+`;

src/ensembl/src/scripts/actions/__snapshots__/browserActions.test.ts.snap → src/ensembl/src/content/app/browser/__snapshots__/browserActions.test.ts.snap

@@ -22,6 +22,11 @@ Array [
     "payload": undefined,
     "type": "browser/close-drawer",
   },
+  Object {
+    "meta": undefined,
+    "payload": undefined,
+    "type": "browser/toggle-browser-navigation",
+  },
   Object {
     "meta": undefined,
     "payload": "track-1",

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss

+@import 'src/styles/common';
+
+.browserBar {
+  @include flex;
+  background: $ens-light-grey;
+  box-shadow: 0 2px 3px $ens-grey;
+  padding: 7px 0 3px 0;
+  position: relative;
+
+  dd {
+    display: inline-block;
+    margin: 0 18px;
+  }
+
+  button {
+    &.selected {
+      background: $ens-white;
+    }
+  }
+}
+
+.browserInfo {
+  @include flex;
+  flex-wrap: nowrap;
+  font-size: 12px;
+  margin: 0;
+  width: calc(100vw - 356px);
+
+  label {
+    color: #555;
+    font-weight: $light;
+  }
+
+  .value {
+    color: $ens-black;
+    margin: 0 3px;
+  }
+
+  dd {
+    margin-right: 10px;
+    white-space: nowrap;
+  }
+
+  dl {
+    overflow: hidden;
+
+    &.browserInfoLeft {
+      flex: 1 1 auto;
+    }
+
+    &.browserInfoRight {
+      flex: 0 1 auto;
+      text-align: right;
+    }
+
+    .geneSymbol {
+      margin-left: 14px;
+
+      .value {
+        font-size: 13px;
+        font-weight: $bold;
+      }
+    }
+  }
+
+  .resetButton {
+    position: relative;
+    top: -2px;
+
+    img {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  .navigator {
+    margin: 0 10px 0 0;
+    position: relative;
+    top: -2px;
+
+    img {
+      height: 22px;
+      width: 22px;
+    }
+  }
+}
+
+.browserTabs {
+  @include flex;
+  font-size: 13px;
+  justify-content: flex-end;
+  padding-right: 5px;
+  width: 356px;
+
+  button {
+    color: $ens-blue;
+
+    &.active {
+      color: inherit;
+      position: relative;
+
+      &::after {
+        border: 6px solid $ens-grey;
+        border-color: transparent transparent $ens-light-grey $ens-light-grey;
+        box-shadow: -2px 2px 2px 0 $ens-grey;
+        box-sizing: border-box;
+        content: '';
+        height: 0;
+        position: absolute;
+        right: calc(60% - 6px);
+        transform-origin: 0 0;
+        transform: rotate(-45deg);
+        top: 21px;
+        width: 0;
+      }
+    }
+  }
+}

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import BrowserBar from './BrowserBar';
+
+describe('<BrowserBar />', () => {
+  let toggleBrowserNavFn: () => void;
+  let wrapper: any;
+
+  beforeEach(() => {
+    toggleBrowserNavFn = jest.fn();
+    wrapper = shallow(
+      <BrowserBar
+        browserNavOpened={true}
+        expanded={true}
+        toggleBrowserNav={toggleBrowserNavFn}
+      />
+    );
+  });
+
+  test('has a left bar', () => {
+    expect(wrapper.find('.browserInfoLeft')).toHaveLength(1);
+  });
+
+  test('has a right bar', () => {
+    expect(wrapper.find('.browserInfoRight')).toHaveLength(1);
+  });
+
+  test('renders correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx

+import React, { FunctionComponent, memo } from 'react';
+import ContentEditable from 'react-contenteditable';
+
+import { browserInfoConfig } from '../browserConfig';
+
+import styles from './BrowserBar.scss';
+
+type BrowserBarProps = {
+  browserNavOpened: boolean;
+  expanded: boolean;
+  toggleBrowserNav: () => void;
+};
+
+const BrowserBar: FunctionComponent<BrowserBarProps> = memo(
+  (props: BrowserBarProps) => {
+    const { navigator, reset } = browserInfoConfig;
+
+    return (
+      <div className={styles.browserBar}>
+        <div className={styles.browserInfo}>
+          <dl className={styles.browserInfoLeft}>
+            <dd className={styles.resetButton}>
+              <button>
+                <img src={reset.icon.default} alt={reset.description} />
+              </button>
+            </dd>
+            <dd className={styles.geneSymbol}>
+              <label>Gene</label>
+              <span className={styles.value}>BRAC2</span>
+            </dd>
+            <dd>
+              <label>Stable ID</label>
+              <span className={styles.value}>ENSG00000139618</span>
+            </dd>
+            <dd>
+              <label>Spliced mRNA length</label>
+              <span className={styles.value}>84,793</span>
+              <label>bp</label>
+            </dd>
+            <dd>protein coding</dd>
+            <dd>forward strand</dd>
+          </dl>
+          <dl className={styles.browserInfoRight}>
+            <dd>
+              <label>Chromosome</label>
+              <ContentEditable html={'13'} className="content-editable-box" />
+              <ContentEditable html={'32,315,474 - 32,400,266'} />
+            </dd>
+            <dd className={styles.navigator}>
+              <button
+                title={navigator.description}
+                onClick={props.toggleBrowserNav}
+              >
+                <img
+                  src={
+                    props.browserNavOpened
+                      ? navigator.icon.selected
+                      : navigator.icon.default
+                  }
+                  alt={navigator.description}
+                />
+              </button>
+            </dd>
+          </dl>
+        </div>
+        <dl className={styles.browserTabs}>
+          <dd>
+            <button className={styles.active}>Key Data</button>
+          </dd>
+          <dd>
+            <button>Variation</button>
+          </dd>
+          <dd>
+            <button>Expression</button>
+          </dd>
+        </dl>
+      </div>
+    );
+  }
+);
+
+export default BrowserBar;

src/ensembl/src/content/app/browser/browser-bar/__snapshots__/BrowserBar.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BrowserBar /> renders correctly 1`] = `undefined`;

src/ensembl/src/content/app/browser/browser-image/BrowserImage.test.tsx

+import React from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import BrowserImage from './BrowserImage';
+
+describe('<BrowserImage />', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = mount(<BrowserImage />);
+  });
+
+  test('renders correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/ensembl/src/content/app/browser/browser-image/__snapshots__/BrowserImage.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BrowserImage /> renders correctly 1`] = `
+<BrowserImage>
+  <div
+    className="browser-stage"
+  />
+</BrowserImage>
+`;

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.scss

+@import 'src/styles/common';
+
+.browserNavBar {
+  @include flex;
+  justify-content: flex-end;
+  padding: 10px;
+  width: calc(100vw - 356px);
+}

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import BrowserNavBar from './BrowserNavBar';
+
+describe('<BrowserNavBar />', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = shallow(<BrowserNavBar />);
+  });
+
+  test('renders correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/ensembl/src/scripts/components/apps/browser/BrowserNavBar.tsx → src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.tsx

 import React, { Component } from 'react';
 
-import {
-  browserNavConfig,
-  BrowserNavItem
-} from '../../../configs/browserConfig';
+import { browserNavConfig, BrowserNavItem } from '../browserConfig';
 
 import BrowserNavIcon from './BrowserNavIcon';
 
+import styles from './BrowserNavBar.scss';
+
 type BrowserNavBarProps = {};
 
 class BrowserNavBar extends Component<BrowserNavBarProps> {
   public render() {
     return (
-      <div className="browser-nav-bar">
+      <div className={styles.browserNavBar}>
         <dl>
           {browserNavConfig.map((item: BrowserNavItem) => (
             <BrowserNavIcon key={item.name} browserNavItem={item} />

src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.scss

+.browserNavIcon {
+  display: inline-block;
+  margin-left: 10px;
+
+  button {
+    & > img {
+      height: 25px;
+      width: 25px;
+    }
+  }
+}

src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import BrowserNavIcon from './BrowserNavIcon';
+
+import { browserNavConfig } from '../browserConfig';
+
+describe('<BrowserNavIcon />', () => {
+  const browserNavItem = browserNavConfig[0];
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = shallow(<BrowserNavIcon browserNavItem={browserNavItem} />);
+  });
+
+  test('renders correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/ensembl/src/scripts/components/apps/browser/BrowserNavIcon.tsx → src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.tsx

 import React, { PureComponent } from 'react';
 
-import { BrowserNavItem } from '../../../configs/browserConfig';
+import { BrowserNavItem } from '../browserConfig';
+
+import styles from './BrowserNavIcon.scss';
 
 type BrowserNavIconProps = {
   browserNavItem: BrowserNavItem;
@@ -17,14 +19,14 @@ class BrowserNavIcon extends PureComponent<BrowserNavIconProps> {
     const { browserNavItem } = this.props;
 
     return (
-      <dt>
+      <dd className={styles.browserNavIcon}>
         <button
           title={browserNavItem.description}
           onClick={this.navigateBrowser}
         >
           <img src={browserNavItem.icon.on} alt={browserNavItem.description} />
         </button>
-      </dt>
+      </dd>
     );
   }
 

src/ensembl/src/content/app/browser/browser-nav/__snapshots__/BrowserNavBar.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BrowserNavBar /> renders correctly 1`] = `
+<div
+  className="browserNavBar"
+>
+  <dl>
+    <BrowserNavIcon
+      browserNavItem={
+        Object {
+          "description": "navigate up",
+          "detail": Object {
+            "move_up_px": 50,
+          },
+          "icon": Object {
+            "off": Object {},
+            "on": Object {},
+          },
+          "name": "navigate-up",
+        }
+      }
+      key="navigate-up"
+    />
+    <BrowserNavIcon
+      browserNavItem={