fix: content-min-height

* fix: add min height calculation based on footer and header height

* fix: set flex-shrink to 0

* fix: lint

* feat: add support for navigating to feature from reporting dash

* fix: tests

frontend/src/app.css

@@ -1,3 +1,8 @@
+
+
+html { height: 100%; overflow:auto; }
+body { height: 100%; }
+
 :root {
     /* FONT SIZE */
     --h1-size: 1.25rem;

frontend/src/component/common/util.js

@@ -15,6 +15,10 @@ const dateOptions = {
     year: 'numeric',
 };
 
+export const scrollToTop = () => {
+    window.scrollTo(0, 0);
+};
+
 export const formatFullDateTimeWithLocale = (v, locale, tz) => {
     if (tz) {
         dateTimeOptions.timeZone = tz;

frontend/src/component/feature/view/view-component.jsx

@@ -17,6 +17,8 @@ import FeatureTagComponent from '../feature-tag-component';
 import StatusUpdateComponent from './status-update-component';
 import AddTagDialog from '../add-tag-dialog-container';
 
+import { scrollToTop } from '../../common/util';
+
 const TABS = {
     strategies: 0,
     view: 1,
@@ -31,6 +33,10 @@ export default class ViewFeatureToggleComponent extends React.Component {
         this.isFeatureView = !!props.fetchFeatureToggles;
     }
 
+    componentDidMount() {
+        scrollToTop();
+    }
+
     static propTypes = {
         activeTab: PropTypes.string.isRequired,
         featureToggleName: PropTypes.string.isRequired,

frontend/src/component/layout/main.jsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Layout, Content, Footer, Grid, Cell } from 'react-mdl';
 
 import styles from '../styles.module.scss';
@@ -17,8 +18,8 @@ export default class App extends PureComponent {
         return (
             <Layout fixedHeader>
                 <Header location={this.props.location} />
-                <Content className="mdl-color--grey-50">
-                    <Grid noSpacing className={styles.content} style={{ flex: 1 }}>
+                <Content className={classnames('mdl-color--grey-50', styles.contentWrapper)}>
+                    <Grid noSpacing className={styles.content}>
                         <Cell col={12}>
                             {this.props.children}
                             <ErrorContainer />

frontend/src/component/reporting/__tests__/reporting-test.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { HashRouter } from 'react-router-dom';
+
 import { createStore } from 'redux';
 import { mount } from 'enzyme/build';
 
@@ -22,9 +24,11 @@ jest.mock('react-mdl', () => ({
 
 test('changing projects renders only toggles from that project', () => {
     const wrapper = mount(
-        <Provider store={createStore(mockReducer, mockStore)}>
-            <Reporting projects={testProjects} features={testFeatures} fetchFeatureToggles={() => {}} />
-        </Provider>
+        <HashRouter>
+            <Provider store={createStore(mockReducer, mockStore)}>
+                <Reporting projects={testProjects} features={testFeatures} fetchFeatureToggles={() => {}} />
+            </Provider>
+        </HashRouter>
     );
 
     const select = wrapper.find('.mdl-textfield__input').first();

frontend/src/component/reporting/report-toggle-list-item.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 
 import { Checkbox } from 'react-mdl';
 import CheckIcon from '@material-ui/icons/Check';
@@ -14,6 +15,7 @@ import styles from './reporting.module.scss';
 
 const ReportToggleListItem = ({ name, stale, lastSeenAt, createdAt, type, checked, bulkActionsOn, setFeatures }) => {
     const nameMatches = feature => feature.name === name;
+    const history = useHistory();
 
     const handleChange = () => {
         setFeatures(prevState => {
@@ -91,12 +93,16 @@ const ReportToggleListItem = ({ name, stale, lastSeenAt, createdAt, type, checke
         return renderStatus(<CheckIcon className={styles.reportIcon} />, 'Active');
     };
 
+    const navigateToFeature = () => {
+        history.push(`/features/strategies/${name}`);
+    };
+
     const statusClasses = classnames(styles.active, {
         [styles.stale]: stale,
     });
 
     return (
-        <tr>
+        <tr role="button" tabIndex={0} onClick={navigateToFeature} className={styles.tableRow}>
             <ConditionallyRender
                 condition={bulkActionsOn}
                 show={

frontend/src/component/reporting/reporting.module.scss

@@ -169,3 +169,7 @@
     font-size: 1.5rem;
     margin-right: 5px;
 }
+
+.tableRow {
+    cursor: pointer;
+}

frontend/src/component/styles.module.scss

@@ -9,12 +9,18 @@
     }
 }
 
+.contentWrapper {
+    display: flex;
+    flex-direction: column;
+}
+
 .content {
     width: 1100px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 16px;
     margin-bottom: 16px;
+    flex: 1 0 0%;
 }
 
 @media (max-width: 1260px) {

frontend/src/page/archive/show.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ViewFeatureToggle from './../../component/archive/view-container';
-
 export default class Features extends PureComponent {
     static propTypes = {
         match: PropTypes.object.isRequired,