fix: use path parameter for old ft view (#450)

* fix: use path parameter for old ft view

* fix: update snapshots

* fix: change text

* fix: add permission button to initial strategies view

* fix: remove unused imports

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx

@@ -1,7 +1,7 @@
 import { useHistory, useParams } from 'react-router-dom';
 import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
 import { useStyles } from './FeatureStrategiesEnvironments.styles';
-import { Tabs, Tab, Button, useMediaQuery } from '@material-ui/core';
+import { Tabs, Tab, useMediaQuery } from '@material-ui/core';
 import TabPanel from '../../../../common/TabNav/TabPanel';
 import useTabs from '../../../../../hooks/useTabs';
 import FeatureStrategiesEnvironmentList from './FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList';
@@ -22,6 +22,7 @@ import { Add } from '@material-ui/icons';
 import AccessContext from '../../../../../contexts/AccessContext';
 import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
 import useQueryParams from '../../../../../hooks/useQueryParams';
+import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
 
 const FeatureStrategiesEnvironments = () => {
     const smallScreen = useMediaQuery('(max-width:700px)');
@@ -316,8 +317,12 @@ const FeatureStrategiesEnvironments = () => {
                                                     UPDATE_FEATURE
                                                 )}
                                                 show={
-                                                    <Button
+                                                    <PermissionButton
                                                         variant="contained"
+                                                        permission={
+                                                            UPDATE_FEATURE
+                                                        }
+                                                        projectId={projectId}
                                                         color="primary"
                                                         onClick={() => {
                                                             setExpandedSidebar(
@@ -326,7 +331,7 @@ const FeatureStrategiesEnvironments = () => {
                                                         }}
                                                     >
                                                         Add your first strategy
-                                                    </Button>
+                                                    </PermissionButton>
                                                 }
                                             />
                                         </NoItems>

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx

@@ -5,18 +5,20 @@ import { useStyles } from './FeatureStrategiesList.styles';
 import { useContext } from 'react';
 import FeatureStrategiesUIContext from '../../../../../contexts/FeatureStrategiesUIContext';
 import classnames from 'classnames';
-import { Button, IconButton, Tooltip, useMediaQuery } from '@material-ui/core';
+import { Button, useMediaQuery } from '@material-ui/core';
 import { DoubleArrow } from '@material-ui/icons';
 import ConditionallyRender from '../../../../common/ConditionallyRender';
 import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
-import AccessContext from '../../../../../contexts/AccessContext';
+import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
+import { useParams } from 'react-router';
+import { IFeatureViewParams } from '../../../../../interfaces/params';
 
 const FeatureStrategiesList = () => {
     const smallScreen = useMediaQuery('(max-width:700px)');
     const { expandedSidebar, setExpandedSidebar } = useContext(
         FeatureStrategiesUIContext
     );
-    const { hasAccess } = useContext(AccessContext);
+    const { projectId } = useParams<IFeatureViewParams>();
 
     const styles = useStyles();
 
@@ -64,24 +66,18 @@ const FeatureStrategiesList = () => {
                     </div>
                 }
             />
-            <Tooltip
+
-                title={
+            <span className={styles.iconButtonWrapper}>
-                    hasAccess(UPDATE_FEATURE)
+                <PermissionIconButton
-                        ? 'Click to open.'
+                    className={styles.iconButton}
-                        : "You don't have access to perform this operation"
+                    onClick={toggleSidebar}
-                }
+                    permission={UPDATE_FEATURE}
-                arrow
+                    projectId={projectId}
-            >
+                >
-                <span className={styles.iconButtonWrapper}>
+                    <DoubleArrow className={iconClasses} />
-                    <IconButton
+                </PermissionIconButton>
-                        className={styles.iconButton}
+            </span>
-                        onClick={toggleSidebar}
+
-                        disabled={!hasAccess(UPDATE_FEATURE)}
-                    >
-                        <DoubleArrow className={iconClasses} />
-                    </IconButton>
-                </span>
-            </Tooltip>
             {renderStrategies()}
         </section>
     );

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx

@@ -67,7 +67,7 @@ const FeatureStrategyExecution = ({
                                 {constraints.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}
-                                are included.
+                                is included.
                             </p>
 
                             <PercentageCircle
@@ -154,7 +154,7 @@ const FeatureStrategyExecution = ({
                                 {constraints?.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}
-                                are included.
+                                is included.
                             </p>
 
                             <PercentageCircle

frontend/src/component/feature/create/CreateFeature/CreateFeature.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useParams } from 'react-router';
 import PropTypes from 'prop-types';
 import { CardActions, Switch, TextField } from '@material-ui/core';
 import FeatureTypeSelect from '../../feature-type-select-container';
@@ -19,7 +20,6 @@ import {
 import { CREATE_FEATURE } from '../../../providers/AccessProvider/permissions';
 import { projectFilterGenerator } from '../../../../utils/project-filter-generator';
 import { useHistory } from 'react-router-dom';
-import useQueryParams from '../../../../hooks/useQueryParams';
 
 const CreateFeature = ({
     input,
@@ -29,13 +29,13 @@ const CreateFeature = ({
     onSubmit,
     user,
 }) => {
-    const params = useQueryParams();
+    const { projectId } = useParams();
-    const project = params.get('project');
+
     const history = useHistory();
 
     useEffect(() => {
-        if (project) {
+        if (projectId) {
-            setValue('project', project);
+            setValue('project', projectId);
         }
         /* eslint-disable-next-line */
     }, []);
@@ -88,7 +88,7 @@ const CreateFeature = ({
                 <section className={styles.formContainer}>
                     <ProjectSelect
                         value={input.project}
-                        defaultValue={project}
+                        defaultValue={projectId}
                         onChange={v => setValue('project', v.target.value)}
                         filter={projectFilterGenerator(user, CREATE_FEATURE)}
                     />

frontend/src/component/feature/strategy/strategies-list-component.jsx

@@ -15,6 +15,8 @@ import CreateStrategy from './AddStrategy/AddStrategy';
 import Dialogue from '../../common/Dialogue/Dialogue';
 import ResponsiveButton from '../../common/ResponsiveButton/ResponsiveButton';
 import { Add } from '@material-ui/icons';
+import { CREATE_FEATURE } from '../../providers/AccessProvider/permissions';
+import { useParams } from 'react-router';
 
 const cleanStrategy = strategy => ({
     name: strategy.name,
@@ -23,6 +25,7 @@ const cleanStrategy = strategy => ({
 });
 
 const StrategiesList = props => {
+    const { projectId } = useParams();
     const [showDelDialog, setShowDelDialog] = useState(false);
     const [delStrategy, setDelStrategy] = useState(null);
     const [showCreateStrategy, setShowCreateStrategy] = useState(false);
@@ -172,6 +175,8 @@ const StrategiesList = props => {
                                     maxWidth="700px"
                                     tooltip="Add strategy"
                                     Icon={Add}
+                                    permission={CREATE_FEATURE}
+                                    projectId={projectId}
                                 >
                                     Add strategy
                                 </ResponsiveButton>

frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap

@@ -71,7 +71,7 @@ Array [
     "layout": "main",
     "menu": Object {},
     "parent": "/projects",
-    "path": "/projects/:id/create-toggle",
+    "path": "/projects/:projectId/create-toggle",
     "title": "Create",
     "type": "protected",
   },

frontend/src/component/menu/routes.js

@@ -109,7 +109,7 @@ export const routes = [
         menu: {},
     },
     {
-        path: '/projects/:id/create-toggle',
+        path: '/projects/:projectId/create-toggle',
         parent: '/projects',
         title: 'Create',
         component: CreateFeatureToggle,