Merge branch 'master' into fix/scroll-to-top

2025-10-27 11:02:16 +01:00 · 2021-10-12 09:55:19 +01:00 · 2021-10-12 09:55:19 +01:00 · e0250b6795
commit e0250b6795
parent aff77e1531 a21322e3d3
21 changed files with 496 additions and 409 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -50,4 +50,5 @@ build
 .DS_Store

 cypress/videos/*
-cypress/screenshots/*
+cypress/screenshots/*
+.env.local
--- a/frontend/package.json
+++ b/frontend/package.json
@ -55,7 +55,7 @@
    "classnames": "2.3.1",
    "craco": "0.0.3",
    "css-loader": "6.4.0",
-    "cypress": "8.5.0",
+    "cypress": "8.6.0",
    "date-fns": "2.25.0",
    "debounce": "1.2.1",
    "enzyme": "3.11.0",
--- a/frontend/src/component/common/common.module.scss
+++ b/frontend/src/component/common/common.module.scss
@ -40,6 +40,13 @@
    }
 }

+@media (max-width: 600px) {
+    .hideLt600 {
+        display: none;
+    }
+}
+
+
 .dataTableHeader {
    display: flex;
    justify-content: space-between;
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@ -17,6 +17,7 @@ import { styles as commonStyles } from '../../../common';
 import { useStyles } from './styles';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
+import FeatureType from '../../FeatureView2/FeatureType/FeatureType';



@ -48,6 +49,9 @@ const FeatureToggleListItem = ({
            <span className={styles.listItemMetric}>
                <FeatureStatus lastSeenAt={lastSeenAt} />
            </span>
+            <span className={classnames(styles.listItemType, commonStyles.hideLt600)}>
+                <FeatureType type={type} />
+            </span>
            <span className={classnames(styles.listItemLink)}>
                <Link
                    to={featureUrl}
@ -59,6 +63,8 @@ const FeatureToggleListItem = ({
                    <span className={commonStyles.toggleName}>
                        {name}&nbsp;
                    </span>
+                    <span className={styles.listItemToggle}>
+                    </span>
                    <small>
                        <TimeAgo date={createdAt} live={false} />
                    </small>
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
@ -10,6 +10,10 @@ export const useStyles = makeStyles(theme => ({
        marginRight: '0.25rem',
        flexShrink: '0',
    },
+    listItemType: {
+        width: '40px',
+        textAlign: 'center',
+    },
    listItemSvg: {
        fill: theme.palette.icons.lightGrey,
    },
--- a/frontend/src/component/feature/FeatureToggleList/tests/snapshots/feature-list-item-component-test.jsx.snap
+++ b/frontend/src/component/feature/FeatureToggleList/tests/snapshots/feature-list-item-component-test.jsx.snap
@ -10,7 +10,7 @@ exports[`renders correctly with one feature 1`] = `
  >
    <div
      aria-describedby={null}
-      className="makeStyles-container-6"
+      className="makeStyles-container-7"
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseLeave={[Function]}
@ -37,7 +37,30 @@ exports[`renders correctly with one feature 1`] = `
    </div>
  </span>
  <span
-    className="makeStyles-listItemLink-4"
+    className="makeStyles-listItemType-3 hideLt600"
+  >
+    <svg
+      aria-describedby={null}
+      aria-hidden={true}
+      className="MuiSvgIcon-root makeStyles-icon-8"
+      data-loading={true}
+      focusable="false"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseLeave={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      title={null}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+      />
+    </svg>
+  </span>
+  <span
+    className="makeStyles-listItemLink-5"
  >
    <a
      className="listLink truncate"
@ -50,6 +73,7 @@ exports[`renders correctly with one feature 1`] = `
        Another
         
      </span>
+      <span />
      <small>
        <time
          dateTime="2018-02-04T20:27:52.127Z"
@ -70,7 +94,7 @@ exports[`renders correctly with one feature 1`] = `
    </a>
  </span>
  <span
-    className="makeStyles-listItemStrategies-5 hideLt920"
+    className="makeStyles-listItemStrategies-6 hideLt920"
  />
 </li>
 `;
@ -85,7 +109,7 @@ exports[`renders correctly with one feature without permission 1`] = `
  >
    <div
      aria-describedby={null}
-      className="makeStyles-container-6"
+      className="makeStyles-container-7"
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseLeave={[Function]}
@ -112,7 +136,30 @@ exports[`renders correctly with one feature without permission 1`] = `
    </div>
  </span>
  <span
-    className="makeStyles-listItemLink-4"
+    className="makeStyles-listItemType-3 hideLt600"
+  >
+    <svg
+      aria-describedby={null}
+      aria-hidden={true}
+      className="MuiSvgIcon-root makeStyles-icon-8"
+      data-loading={true}
+      focusable="false"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseLeave={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      title={null}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+      />
+    </svg>
+  </span>
+  <span
+    className="makeStyles-listItemLink-5"
  >
    <a
      className="listLink truncate"
@ -125,6 +172,7 @@ exports[`renders correctly with one feature without permission 1`] = `
        Another
         
      </span>
+      <span />
      <small>
        <time
          dateTime="2018-02-04T20:27:52.127Z"
@ -145,7 +193,7 @@ exports[`renders correctly with one feature without permission 1`] = `
    </a>
  </span>
  <span
-    className="makeStyles-listItemStrategies-5 hideLt920"
+    className="makeStyles-listItemStrategies-6 hideLt920"
  />
 </li>
 `;
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
@ -14,29 +14,23 @@ export const useStyles = makeStyles(theme => ({
        color: theme.palette.grey[600],
        borderBottom: '1px solid ' + theme.palette.grey[200],
    },
-    typeHeader: {
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
    tableCellStatus: {
        width: '50px',
    },
    tableCellName: {
-        width: '250px',
-        display: 'flex',
+        paddingLeft: '10px',
    },
    tableCellEnv: {
        width: '20px',
-    },
-    tableCellType: {
-        width: '32px',
-        alignItems: 'center',
        [theme.breakpoints.down('sm')]: {
            display: 'none',
        },
    },
-    icon: {
-        color: theme.palette.grey[600],
+    tableCellType: {
+        width: '32px',
+        alignItems: 'center',
+        [theme.breakpoints.down(600)]: {
+            display: 'none',
+        },
    },
 }));
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
@ -92,8 +92,8 @@ const FeatureToggleListNew = ({
                        <TableCell
                            className={classnames(
                                styles.tableCell,
-                                styles.tableCellHeader,
-                                styles.typeHeader
+                                styles.tableCellType,
+                                styles.tableCellHeader
                            )}
                            align="center"
                        >
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@ -3,21 +3,19 @@ import {
    Switch,
    TableCell,
    TableRow,
-    Tooltip,
-    useMediaQuery,
-    useTheme,
 } from '@material-ui/core';
 import { useHistory } from 'react-router';
-import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
+
 import { useStyles } from '../FeatureToggleListNew.styles';
 import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
 import { IEnvironments } from '../../../../interfaces/featureToggle';
-import ConditionallyRender from '../../../common/ConditionallyRender';
 import useToast from '../../../../hooks/useToast';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import { SyntheticEvent } from 'react-router/node_modules/@types/react';
 import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
+import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
+import classNames from 'classnames';

 interface IFeatureToggleListNewItemProps {
    name: string;
@ -34,9 +32,7 @@ const FeatureToggleListNewItem = ({
    environments,
    projectId,
 }: IFeatureToggleListNewItemProps) => {
-    const theme = useTheme();
    const { toast, setToastData } = useToast();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const { toggleFeatureByEnvironment } = useToggleFeatureByEnv(
        projectId,
        name,
@ -72,28 +68,23 @@ const FeatureToggleListNewItem = ({
            });
    };

-    const IconComponent = getFeatureTypeIcons(type);
+    

    return (
        <>
            <TableRow className={styles.tableRow}>
-                <TableCell className={styles.tableCell} align="left" onClick={onClick}>
+                <TableCell className={classNames(
+                                styles.tableCell,
+                                styles.tableCellStatus)} align="left" onClick={onClick}>
                    <FeatureStatus lastSeenAt={lastSeenAt} />
                </TableCell>
-                <ConditionallyRender
-                    condition={!smallScreen}
-                    show={
-                        <TableCell className={styles.tableCell} align="center" onClick={onClick}>
-                            <Tooltip arrow placement="right" title={type}>
-                                <IconComponent
-                                    data-loading
-                                    className={styles.icon}
-                                />
-                            </Tooltip>
-                        </TableCell>
-                    }
-                />
-                <TableCell className={styles.tableCell} align="left" onClick={onClick}>
+                <TableCell className={classNames(
+                                styles.tableCell,
+                                styles.tableCellType)} align="center" onClick={onClick}>
+                    <FeatureType type={type} />
+                </TableCell>
+                <TableCell className={classNames(
+                                styles.tableCell, styles.tableCellName)} align="left" onClick={onClick}>
                    <span data-loading>{name}</span>
                </TableCell>
                
@ -101,7 +92,9 @@ const FeatureToggleListNewItem = ({
                {environments.map((env: IEnvironments) => {
                    return (
                        <TableCell
-                            className={styles.tableCell}
+                            className={classNames(
+                                styles.tableCell,
+                                styles.tableCellEnv)}
                            align="center"
                            key={env.name}
                        >
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
@ -105,7 +105,7 @@ const FeatureStrategiesEnvironments = () => {
        return featureCache?.environments?.map((env, index) => {
            return (
                <Tab
-                    disabled={configureNewStrategy}
+                    disabled={!!configureNewStrategy}
                    key={`${env.name}_${index}`}
                    label={env.name}
                    {...a11yProps(index)}
@ -178,8 +178,8 @@ const FeatureStrategiesEnvironments = () => {

                // Check groupId

-                const cacheParamKeys = Object.keys(cachedStrategy?.parameters);
-                const strategyParamKeys = Object.keys(strategy?.parameters);
+                const cacheParamKeys = Object.keys(cachedStrategy?.parameters || {});
+                const strategyParamKeys = Object.keys(strategy?.parameters || {});
                // Check length of parameters
                if (cacheParamKeys.length !== strategyParamKeys.length) {
                    equal = false;
--- a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    icon: {
+        color: theme.palette.grey[600],
+    },
+}));
--- a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
@ -0,0 +1,24 @@
+import { useStyles } from './FeatureType.styles';
+import { Tooltip } from '@material-ui/core';
+import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
+
+
+interface FeatureTypeProps {
+    type: string;
+}
+
+const FeatureStatus = ({ type }: FeatureTypeProps) => {
+    const styles = useStyles();
+    const IconComponent = getFeatureTypeIcons(type);
+
+    return (
+        <Tooltip arrow placement="right" title={type}>
+            <IconComponent
+                data-loading
+                className={styles.icon}
+            />
+        </Tooltip>
+    );
+};
+
+export default FeatureStatus;
--- a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
@ -110,7 +110,7 @@ const FeatureView2 = () => {
                            tooltip="Copy"
                            data-loading
                            component={Link}
-                            to={`${history.location.pathname}/copy`}
+                            to={`/projects/${projectId}/features2/${featureId}/strategies/copy`}
                        >
                            <FileCopy />
                        </PermissionIconButton>
--- a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
+++ b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
@ -239,7 +239,7 @@ const AddVariant = ({
                                control={
                                    <Switch
                                        name="weightType"
-                                        value={isFixWeight}
+                                        checked={isFixWeight}
                                        onChange={setVariantWeightType}
                                    />
                                }
--- a/frontend/src/component/menu/tests/snapshots/routes-test.jsx.snap
+++ b/frontend/src/component/menu/tests/snapshots/routes-test.jsx.snap
@ -2,161 +2,6 @@

 exports[`returns all baseRoutes 1`] = `
 Array [
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/features",
-    "path": "/features/:activeTab/:name",
-    "title": ":name",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {
-      "mobile": true,
-    },
-    "path": "/features",
-    "title": "Feature Toggles",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/strategies",
-    "path": "/strategies/create",
-    "title": "Create",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/strategies",
-    "path": "/strategies/:activeTab/:strategyName",
-    "title": ":strategyName",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {
-      "advanced": true,
-      "mobile": true,
-    },
-    "path": "/strategies",
-    "title": "Strategies",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/environments",
-    "path": "/environments/create",
-    "title": "Environments",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "flag": "E",
-    "layout": "main",
-    "menu": Object {
-      "advanced": true,
-      "mobile": true,
-    },
-    "path": "/environments",
-    "title": "Environments",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/history",
-    "path": "/history/:toggleName",
-    "title": ":toggleName",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {
-      "adminSettings": true,
-    },
-    "path": "/history",
-    "title": "Event History",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/archive",
-    "path": "/projects/:id/archived/:name/:activeTab",
-    "title": ":name",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "path": "/archive",
-    "title": "Archived Toggles",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/applications",
-    "path": "/applications/:name",
-    "title": ":name",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {
-      "advanced": true,
-      "mobile": true,
-    },
-    "path": "/applications",
-    "title": "Applications",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/context",
-    "path": "/context/create",
-    "title": "Create",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "layout": "main",
-    "menu": Object {},
-    "parent": "/context",
-    "path": "/context/edit/:name",
-    "title": ":name",
-    "type": "protected",
-  },
-  Object {
-    "component": [Function],
-    "flag": "C",
-    "layout": "main",
-    "menu": Object {
-      "advanced": true,
-      "mobile": true,
-    },
-    "path": "/context",
-    "title": "Context Fields",
-    "type": "protected",
-  },
  Object {
    "component": [Function],
    "layout": "main",
@ -243,7 +88,6 @@ Array [
  },
  Object {
    "component": [Function],
-    "flag": "P",
    "layout": "main",
    "menu": Object {
      "mobile": true,
@ -252,6 +96,125 @@ Array [
    "title": "Projects",
    "type": "protected",
  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/features",
+    "path": "/features/:activeTab/:name",
+    "title": ":name",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {
+      "mobile": true,
+    },
+    "path": "/features",
+    "title": "Feature Toggles",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/applications",
+    "path": "/applications/:name",
+    "title": ":name",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {
+      "advanced": true,
+      "mobile": true,
+    },
+    "path": "/applications",
+    "title": "Applications",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/context",
+    "path": "/context/create",
+    "title": "Create",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/context",
+    "path": "/context/edit/:name",
+    "title": ":name",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "flag": "C",
+    "layout": "main",
+    "menu": Object {
+      "advanced": true,
+      "mobile": true,
+    },
+    "path": "/context",
+    "title": "Context Fields",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/strategies",
+    "path": "/strategies/create",
+    "title": "Create",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/strategies",
+    "path": "/strategies/:activeTab/:strategyName",
+    "title": ":strategyName",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {
+      "advanced": true,
+      "mobile": true,
+    },
+    "path": "/strategies",
+    "title": "Strategies",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/environments",
+    "path": "/environments/create",
+    "title": "Environments",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "flag": "E",
+    "layout": "main",
+    "menu": Object {
+      "advanced": true,
+      "mobile": true,
+    },
+    "path": "/environments",
+    "title": "Environments",
+    "type": "protected",
+  },
  Object {
    "component": [Function],
    "layout": "main",
@ -320,6 +283,42 @@ Array [
    "title": "Addons",
    "type": "protected",
  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/history",
+    "path": "/history/:toggleName",
+    "title": ":toggleName",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {
+      "adminSettings": true,
+    },
+    "path": "/history",
+    "title": "Event History",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "parent": "/archive",
+    "path": "/projects/:id/archived/:name/:activeTab",
+    "title": ":name",
+    "type": "protected",
+  },
+  Object {
+    "component": [Function],
+    "layout": "main",
+    "menu": Object {},
+    "path": "/archive",
+    "title": "Archived Toggles",
+    "type": "protected",
+  },
  Object {
    "component": [Function],
    "layout": "main",
--- a/frontend/src/component/menu/routes.js
+++ b/frontend/src/component/menu/routes.js
@ -42,157 +42,6 @@ import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironme
 import FeatureView2 from '../feature/FeatureView2/FeatureView2';

 export const routes = [
-    // Features
-    {
-        path: '/features/:activeTab/:name',
-        parent: '/features',
-        title: ':name',
-        component: RedirectFeatureViewPage,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/features',
-        title: 'Feature Toggles',
-        component: Features,
-        type: 'protected',
-        layout: 'main',
-        menu: { mobile: true },
-    },
-
-    // Strategies
-    {
-        path: '/strategies/create',
-        title: 'Create',
-        parent: '/strategies',
-        component: CreateStrategies,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/strategies/:activeTab/:strategyName',
-        title: ':strategyName',
-        parent: '/strategies',
-        component: StrategyView,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/strategies',
-        title: 'Strategies',
-        component: Strategies,
-        type: 'protected',
-        layout: 'main',
-        menu: { mobile: true, advanced: true },
-    },
-    {
-        path: '/environments/create',
-        title: 'Environments',
-        component: CreateEnvironment,
-        parent: '/environments',
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/environments',
-        title: 'Environments',
-        component: EnvironmentList,
-        type: 'protected',
-        layout: 'main',
-        flag: E,
-        menu: { mobile: true, advanced: true },
-    },
-
-    // History
-    {
-        path: '/history/:toggleName',
-        title: ':toggleName',
-        parent: '/history',
-        component: HistoryTogglePage,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/history',
-        title: 'Event History',
-        component: HistoryPage,
-        type: 'protected',
-        layout: 'main',
-        menu: { adminSettings: true },
-    },
-
-    // Archive
-    {
-        path: '/projects/:id/archived/:name/:activeTab',
-        title: ':name',
-        parent: '/archive',
-        component: ShowArchive,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/archive',
-        title: 'Archived Toggles',
-        component: Archive,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-
-    // Applications
-    {
-        path: '/applications/:name',
-        title: ':name',
-        parent: '/applications',
-        component: ApplicationView,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/applications',
-        title: 'Applications',
-        component: Applications,
-        type: 'protected',
-        layout: 'main',
-        menu: { mobile: true, advanced: true },
-    },
-
-    // Context
-    {
-        path: '/context/create',
-        parent: '/context',
-        title: 'Create',
-        component: CreateContextField,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/context/edit/:name',
-        parent: '/context',
-        title: ':name',
-        component: EditContextField,
-        type: 'protected',
-        layout: 'main',
-        menu: {},
-    },
-    {
-        path: '/context',
-        title: 'Context Fields',
-        component: ContextFields,
-        type: 'protected',
-        flag: C,
-        layout: 'main',
-        menu: { mobile: true, advanced: true },
-    },
-
    // Project
    {
        path: '/projects/create',
@ -282,12 +131,125 @@ export const routes = [
        path: '/projects',
        title: 'Projects',
        component: ProjectListNew,
-        flag: P,
        type: 'protected',
        layout: 'main',
        menu: { mobile: true },
    },

+    // Features
+    {
+        path: '/features/:activeTab/:name',
+        parent: '/features',
+        title: ':name',
+        component: RedirectFeatureViewPage,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/features',
+        title: 'Feature Toggles',
+        component: Features,
+        type: 'protected',
+        layout: 'main',
+        menu: { mobile: true },
+    },
+    
+    // Applications
+    {
+        path: '/applications/:name',
+        title: ':name',
+        parent: '/applications',
+        component: ApplicationView,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/applications',
+        title: 'Applications',
+        component: Applications,
+        type: 'protected',
+        layout: 'main',
+        menu: { mobile: true, advanced: true },
+    },
+
+    // Context
+    {
+        path: '/context/create',
+        parent: '/context',
+        title: 'Create',
+        component: CreateContextField,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/context/edit/:name',
+        parent: '/context',
+        title: ':name',
+        component: EditContextField,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/context',
+        title: 'Context Fields',
+        component: ContextFields,
+        type: 'protected',
+        flag: C,
+        layout: 'main',
+        menu: { mobile: true, advanced: true },
+    },
+
+    // Strategies
+    {
+        path: '/strategies/create',
+        title: 'Create',
+        parent: '/strategies',
+        component: CreateStrategies,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/strategies/:activeTab/:strategyName',
+        title: ':strategyName',
+        parent: '/strategies',
+        component: StrategyView,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/strategies',
+        title: 'Strategies',
+        component: Strategies,
+        type: 'protected',
+        layout: 'main',
+        menu: { mobile: true, advanced: true },
+    },
+    {
+        path: '/environments/create',
+        title: 'Environments',
+        component: CreateEnvironment,
+        parent: '/environments',
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/environments',
+        title: 'Environments',
+        component: EnvironmentList,
+        type: 'protected',
+        layout: 'main',
+        flag: E,
+        menu: { mobile: true, advanced: true },
+    },
+
+    // Tags
    {
        path: '/tag-types/create',
        parent: '/tag-types',
@ -314,7 +276,6 @@ export const routes = [
        layout: 'main',
        menu: { mobile: true, advanced: true },
    },
-
    {
        path: '/tags/create',
        parent: '/tags',
@ -334,8 +295,8 @@ export const routes = [
        menu: {},
    },

-    // Addons
-    {
+     // Addons
+     {
        path: '/addons/create/:provider',
        parent: '/addons',
        title: 'Create',
@ -362,6 +323,45 @@ export const routes = [
        layout: 'main',
        menu: { mobile: true, advanced: true },
    },
+
+    // History
+    {
+        path: '/history/:toggleName',
+        title: ':toggleName',
+        parent: '/history',
+        component: HistoryTogglePage,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/history',
+        title: 'Event History',
+        component: HistoryPage,
+        type: 'protected',
+        layout: 'main',
+        menu: { adminSettings: true },
+    },
+
+    // Archive
+    {
+        path: '/projects/:id/archived/:name/:activeTab',
+        title: ':name',
+        parent: '/archive',
+        component: ShowArchive,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+    {
+        path: '/archive',
+        title: 'Archived Toggles',
+        component: Archive,
+        type: 'protected',
+        layout: 'main',
+        menu: {},
+    },
+
    // Admin
    {
        path: '/admin/api',
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@ -33,42 +33,6 @@ const Project = () => {
    const { a11yProps, activeTabIdx, setActiveTab } = useTabs(0);

    const basePath = `/projects/${id}`;
-
-    useEffect(() => {
-        const created = params.get('created');
-        const edited = params.get('edited');
-
-        if (created || edited) {
-            const text = created ? 'Project created' : 'Project updated';
-            setToastData({
-                show: true,
-                type: 'success',
-                text,
-            });
-        }
-        /* eslint-disable-next-line */
-    }, []);
-
-    useEffect(() => {
-        const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
-        if(tabIdx > 0) {
-            setActiveTab(tabIdx);
-        } else {
-            setActiveTab(0);
-        }
-        
-        /* eslint-disable-next-line */
-    }, []);
-
-    const goToTabWithName = (name: string) => {
-        const index = tabData.findIndex(t => t.name === name);
-        if(index >= 0) {
-            const tab = tabData[index];
-            history.push(tab.path);
-            setActiveTab(index);
-        }
-    }
-
    const tabData = [
        {
            title: 'Overview',
@ -102,13 +66,54 @@ const Project = () => {
            path: `${basePath}/settings`,
            name: 'settings',
        },
-    ].filter(tab => !tab.disabled);
+    ]
+
+    useEffect(() => {
+        const created = params.get('created');
+        const edited = params.get('edited');
+
+        if (created || edited) {
+            const text = created ? 'Project created' : 'Project updated';
+            setToastData({
+                show: true,
+                type: 'success',
+                text,
+            });
+        }
+
+        tabData.filter(tab => !tab.disabled);
+
+        /* eslint-disable-next-line */
+    }, []);
+
+    useEffect(() => {
+        const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
+        if(tabIdx > 0) {
+            setActiveTab(tabIdx);
+        } else {
+            setActiveTab(0);
+        }
+        
+        /* eslint-disable-next-line */
+    }, []);
+
+    const goToTabWithName = (name: string) => {
+        const index = tabData.findIndex(t => t.name === name);
+        if(index >= 0) {
+            const tab = tabData[index];
+            history.push(tab.path);
+            setActiveTab(index);
+        }
+    }
+
+    


    const renderTabs = () => {
        return tabData.map((tab, index) => {
            return (
                <Tab
+                    data-loading    
                    key={tab.title}
                    label={tab.title}
                    {...a11yProps(index)}
@ -143,7 +148,7 @@ const Project = () => {
                            <Edit />
                        </IconButton>
                    </h2>
-                    <p>{project?.description}</p>
+                    <p data-loading>{project?.description}</p>
                </div>
                <ConditionallyRender
                    condition={error}
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
@ -11,6 +11,7 @@ export const useStyles = makeStyles(theme => ({
        [theme.breakpoints.down('sm')]: {
            marginLeft: '0',
            paddingBottom: '4rem',
+            width: 'inherit',
        },
    },
    bodyClass: { padding: '0.5rem 2rem' },
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
@ -45,8 +45,6 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
    const { removeEnvironmentFromProject, addEnvironmentToProject } =
        useProjectApi();

-    console.log(project);
-
    // local state
    const [selectedEnv, setSelectedEnv] = useState<ProjectEnvironment>();
    const [confirmName, setConfirmName] = useState('');
--- a/frontend/src/themes/main-theme.js
+++ b/frontend/src/themes/main-theme.js
@ -1,6 +1,6 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';

-const theme = createMuiTheme({
+const theme = createTheme({
    typography: {
        fontFamily: ['Sen', 'Roboto, sans-serif'],
        fontWeightBold: '700',
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -4561,10 +4561,10 @@ cyclist@^1.0.1:
  resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=

-cypress@8.5.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd"
-  integrity sha512-MMkXIS+Ro2KETn4gAlG3tIc/7FiljuuCZP0zpd9QsRG6MZSyZW/l1J3D4iQM6WHsVxuX4rFChn5jPFlC2tNSvQ==
+cypress@8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
+  integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
  dependencies:
    "@cypress/request" "^2.88.6"
    "@cypress/xvfb" "^1.2.4"