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();
 
@@ -23,6 +25,12 @@ const BreadcrumbNav = () => {
         );
 
     return (
+        <ConditionallyRender
+            condition={
+                (location.pathname.includes('admin') && isAdmin()) ||
+                !location.pathname.includes('admin')
+            }
+            show={
                 <ConditionallyRender
                     condition={paths.length > 1}
                     show={
@@ -31,7 +39,11 @@ const BreadcrumbNav = () => {
                                 const lastItem = index === paths.length - 1;
                                 if (lastItem) {
                                     return (
-                                <p className={styles.breadcrumbNavParagraph}>
+                                        <p
+                                            className={
+                                                styles.breadcrumbNavParagraph
+                                            }
+                                        >
                                             {path}
                                         </p>
                                     );
@@ -48,6 +60,8 @@ const BreadcrumbNav = () => {
                         </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 computedRoutes = {
+    const apiAccess = routes.find(route => route.path === '/admin/api');
-        mainNavRoutes:
+    const mainNavRoutes =
         baseRoutes.filter(
             route =>
                 route.path !== '/admin' &&
                 route.path !== '/logout' &&
                 route.path !== '/history'
-            ) || [],
+        ) || [];
+
+    mainNavRoutes.push(apiAccess);
+
+    const computedRoutes = {
+        mainNavRoutes,
         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();
 
+        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;