Fix/frontend projects changes (#324)

* fix: remove mouseover from navigation menu

* fix: variant tooltip

* fix: project creation navigation

frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx

@@ -1,9 +1,11 @@
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import { Link, useLocation } from 'react-router-dom';
+import usePermissions from '../../../hooks/usePermissions';
 import ConditionallyRender from '../ConditionallyRender';
 import { useStyles } from './BreadcrumbNav.styles';
 
 const BreadcrumbNav = () => {
+    const { isAdmin } = usePermissions();
     const styles = useStyles();
     const location = useLocation();
 
@@ -24,28 +26,40 @@ const BreadcrumbNav = () => {
 
     return (
         <ConditionallyRender
-            condition={paths.length > 1}
+            condition={
+                (location.pathname.includes('admin') && isAdmin()) ||
+                !location.pathname.includes('admin')
+            }
             show={
-                <Breadcrumbs className={styles.breadcrumbNav}>
+                <ConditionallyRender
-                    {paths.map((path, index) => {
+                    condition={paths.length > 1}
-                        const lastItem = index === paths.length - 1;
+                    show={
-                        if (lastItem) {
+                        <Breadcrumbs className={styles.breadcrumbNav}>
-                            return (
+                            {paths.map((path, index) => {
-                                <p className={styles.breadcrumbNavParagraph}>
+                                const lastItem = index === paths.length - 1;
-                                    {path}
+                                if (lastItem) {
-                                </p>
+                                    return (
-                            );
+                                        <p
-                        }
+                                            className={
-                        return (
+                                                styles.breadcrumbNavParagraph
-                            <Link
+                                            }
-                                className={styles.breadcrumbLink}
+                                        >
-                                to={`/${path}`}
+                                            {path}
-                            >
+                                        </p>
-                                {path}
+                                    );
-                            </Link>
+                                }
-                        );
+                                return (
-                    })}
+                                    <Link
-                </Breadcrumbs>
+                                        className={styles.breadcrumbLink}
+                                        to={`/${path}`}
+                                    >
+                                        {path}
+                                    </Link>
+                                );
+                            })}
+                        </Breadcrumbs>
+                    }
+                />
             }
         />
     );

frontend/src/component/feature/variant/AddVariant/AddVariant.jsx

@@ -8,6 +8,7 @@ import {
     TextField,
     InputAdornment,
     Button,
+    Tooltip,
 } from '@material-ui/core';
 import { Info } from '@material-ui/icons';
 import Dialog from '../../../common/Dialogue';
@@ -46,7 +47,7 @@ const AddVariant = ({
                 name: editVariant.name,
                 weight: editVariant.weight / 10,
                 weightType: editVariant.weightType || weightTypes.VARIABLE,
-                stickiness: editVariant.stickiness
+                stickiness: editVariant.stickiness,
             });
             if (editVariant.payload) {
                 setPayload(editVariant.payload);
@@ -245,7 +246,12 @@ const AddVariant = ({
                 </Grid>
                 <p style={{ marginBottom: '1rem' }}>
                     <strong>Payload </strong>
-                    <Info title="Passed to the variant object. Can be anything (json, value, csv)" />
+                    <Tooltip
+                        title="Passed to the variant object. Can be anything
+                        (json, value, csv)"
+                    >
+                        <Info style={{ width: '18.5px', height: '18.5px' }} />
+                    </Tooltip>
                 </p>
                 <Grid container>
                     <Grid item md={3}>
@@ -256,6 +262,7 @@ const AddVariant = ({
                             value={payload.type}
                             options={payloadOptions}
                             onChange={onPayload}
+                            style={{ minWidth: '100px' }}
                         />
                     </Grid>
                     <Grid item md={9}>
@@ -276,7 +283,14 @@ const AddVariant = ({
                     show={
                         <p style={{ marginBottom: '.5rem' }}>
                             <strong>Overrides </strong>
-                            <Info title="Here you can specify which users should get this variant." />
+                            <Tooltip title="Here you can specify which users should get this variant.">
+                                <Info
+                                    style={{
+                                        width: '18.5px',
+                                        height: '18.5px',
+                                    }}
+                                />
+                            </Tooltip>
                         </p>
                     }
                 />

frontend/src/component/menu/Header/Header.styles.ts

@@ -38,6 +38,7 @@ export const useStyles = makeStyles(theme => ({
         fontFamily: theme.typography.fontFamily,
         alignItems: 'center',
         color: 'inherit',
+        cursor: 'pointer',
     },
     headerTitle: {
         fontSize: '1.4rem',

frontend/src/component/menu/Header/Header.tsx

@@ -100,9 +100,6 @@ const Header = () => {
                                     onClick={e =>
                                         setAnchorElAdvanced(e.currentTarget)
                                     }
-                                    onMouseEnter={e =>
-                                        setAnchorElAdvanced(e.currentTarget)
-                                    }
                                 >
                                     Navigate
                                     <KeyboardArrowDown />
@@ -140,9 +137,6 @@ const Header = () => {
                                                 onClick={e =>
                                                     setAnchorEl(e.currentTarget)
                                                 }
-                                                onMouseEnter={e =>
-                                                    setAnchorEl(e.currentTarget)
-                                                }
                                             >
                                                 <SettingsIcon
                                                     className={styles.docsIcon}

frontend/src/component/menu/routes.js

@@ -382,14 +382,19 @@ export const baseRoutes = routes
     .filter(route => !route.parent);
 
 const computeRoutes = () => {
+    const apiAccess = routes.find(route => route.path === '/admin/api');
+    const mainNavRoutes =
+        baseRoutes.filter(
+            route =>
+                route.path !== '/admin' &&
+                route.path !== '/logout' &&
+                route.path !== '/history'
+        ) || [];
+
+    mainNavRoutes.push(apiAccess);
+
     const computedRoutes = {
-        mainNavRoutes:
+        mainNavRoutes,
-            baseRoutes.filter(
-                route =>
-                    route.path !== '/admin' &&
-                    route.path !== '/logout' &&
-                    route.path !== '/history'
-            ) || [],
         adminRoutes:
             routes.filter(
                 route =>

frontend/src/component/project/form-project-component.jsx

@@ -78,7 +78,13 @@ class ProjectFormComponent extends Component {
         const { project } = this.state;
         evt.preventDefault();
 
-        this.props.history.push(`/projects/${project.id}`);
+        const { editMode } = this.props;
+
+        if (editMode) {
+            this.props.history.push(`/projects/${project.id}`);
+            return;
+        }
+        this.props.history.goBack();
     };
 
     onSubmit = async evt => {

frontend/src/page/admin/api/index.js

@@ -2,19 +2,26 @@ import PropTypes from 'prop-types';
 import ApiKeyList from './api-key-list-container';
 
 import AdminMenu from '../admin-menu';
+import usePermissions from '../../../hooks/usePermissions';
+import ConditionallyRender from '../../../component/common/ConditionallyRender';
+
+const ApiPage = ({ history }) => {
+    const { isAdmin } = usePermissions();
 
-const render = ({ history }) => {
     return (
         <div>
-            <AdminMenu history={history} />
+            <ConditionallyRender
+                condition={isAdmin()}
+                show={<AdminMenu history={history} />}
+            />
             <ApiKeyList />
         </div>
     );
 };
 
-render.propTypes = {
+ApiPage.propTypes = {
     match: PropTypes.object.isRequired,
     history: PropTypes.object.isRequired,
 };
 
-export default render;
+export default ApiPage;