fix/breadcrumb (#533)

* fix: remove features2 from breadcrumb

* fix: strategy names

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>

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

@@ -22,7 +22,8 @@ const BreadcrumbNav = () => {
                 item !== 'metrics' &&
                 item !== 'copy' &&
                 item !== 'strategies' &&
-                item !== 'features'
+                item !== 'features' &&
+                item !== 'features2'
         );
 
     return (

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx

@@ -5,7 +5,7 @@ import { IFeatureViewParams } from '../../../../../../../../interfaces/params';
 import { IFeatureStrategy } from '../../../../../../../../interfaces/strategy';
 import {
     getFeatureStrategyIcon,
-    getHumanReadbleStrategyName,
+    getHumanReadableStrategyName,
 } from '../../../../../../../../utils/strategy-names';
 import PermissionIconButton from '../../../../../../../common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from '../../../../../../../providers/AccessProvider/permissions';
@@ -33,7 +33,7 @@ const FeatureOverviewEnvironmentStrategy = ({
         <div className={styles.container}>
             <div className={styles.header}>
                 <Icon className={styles.icon} />
-                {getHumanReadbleStrategyName(strategy.name)}
+                {getHumanReadableStrategyName(strategy.name)}
                 <div className={styles.editStrategy}>
                     <PermissionIconButton
                         permission={UPDATE_FEATURE}

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

@@ -12,7 +12,7 @@ import { ADD_NEW_STRATEGY_CARD_BUTTON_ID } from '../../../../../../testIds';
 import { getStrategyObject } from '../../../../../../utils/get-strategy-object';
 import {
     getFeatureStrategyIcon,
-    getHumanReadbleStrategyName,
+    getHumanReadableStrategyName,
 } from '../../../../../../utils/strategy-names';
 import { UPDATE_FEATURE } from '../../../../../providers/AccessProvider/permissions';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
@@ -63,7 +63,7 @@ const FeatureStrategyCard = ({
         }),
     });
 
-    const readableName = getHumanReadbleStrategyName(name);
+    const readableName = getHumanReadableStrategyName(name);
     const Icon = getFeatureStrategyIcon(name);
 
     const classes = classNames(styles.featureStrategyCard);

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

@@ -13,7 +13,7 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import {
     getFeatureStrategyIcon,
-    getHumanReadbleStrategyName,
+    getHumanReadableStrategyName,
 } from '../../../../../utils/strategy-names';
 import { useStyles } from './FeatureStrategyAccordion.styles';
 import ConditionallyRender from '../../../../common/ConditionallyRender';
@@ -44,7 +44,7 @@ const FeatureStrategyAccordion: React.FC<IFeatureStrategyAccordionProps> = ({
 }) => {
     const smallScreen = useMediaQuery('(max-width:500px)');
     const styles = useStyles();
-    const strategyName = getHumanReadbleStrategyName(strategy.name);
+    const strategyName = getHumanReadableStrategyName(strategy.name);
     const Icon = getFeatureStrategyIcon(strategy.name);
 
     const updateParameters = (field: string, value: any) => {

frontend/src/component/feature/strategy/EditStrategyModal/EditStrategyModal.jsx

@@ -7,7 +7,7 @@ import UserWithIdStrategy from './user-with-id-strategy';
 import GeneralStrategy from './general-strategy';
 import StrategyConstraints from '../StrategyConstraint/StrategyConstraintInput';
 
-import { getHumanReadbleStrategyName } from '../../../../utils/strategy-names';
+import { getHumanReadableStrategyName } from '../../../../utils/strategy-names';
 import Dialogue from '../../../common/Dialogue';
 
 const EditStrategyModal = ({
@@ -91,7 +91,7 @@ const EditStrategyModal = ({
             fullWidth
             onClose={onCancel}
             onClick={save}
-            title={`Configure ${getHumanReadbleStrategyName(
+            title={`Configure ${getHumanReadableStrategyName(
                 strategy.name
             )} strategy`}
             primaryButtonText="Save"

frontend/src/component/feature/strategy/StrategyCard/StrategyCard.jsx

@@ -6,7 +6,7 @@ import { Card, CardContent } from '@material-ui/core';
 import { useStyles } from './StrategyCard.styles';
 import StrategyCardContent from './StrategyCardContent/StrategyCardContent';
 import StrategyCardHeader from './StrategyCardHeader/StrategyCardHeader';
-import { getHumanReadbleStrategyName } from '../../../../utils/strategy-names';
+import { getHumanReadableStrategyName } from '../../../../utils/strategy-names';
 
 const StrategyCard = ({
     strategy,
@@ -25,7 +25,7 @@ const StrategyCard = ({
             <span style={{ alignItems: 'stretch' }}>
                 <Card className={styles.strategyCard}>
                     <StrategyCardHeader
-                        name={getHumanReadbleStrategyName(strategy.name)}
+                        name={getHumanReadableStrategyName(strategy.name)}
                         connectDragSource={connectDragSource}
                         removeStrategy={removeStrategy}
                         editStrategy={editStrategy}

frontend/src/component/strategies/StrategiesList/StrategiesList.jsx

@@ -4,10 +4,27 @@ import classnames from 'classnames';
 import { Link, useHistory } from 'react-router-dom';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import { IconButton, List, ListItem, ListItemAvatar, ListItemText, Tooltip } from '@material-ui/core';
-import { Add, Delete, Extension, Visibility, VisibilityOff } from '@material-ui/icons';
+import {
+    IconButton,
+    List,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    Tooltip,
+} from '@material-ui/core';
+import {
+    Add,
+    Delete,
+    Extension,
+    Visibility,
+    VisibilityOff,
+} from '@material-ui/icons';
 
-import { CREATE_STRATEGY, DELETE_STRATEGY, UPDATE_STRATEGY } from '../../providers/AccessProvider/permissions';
+import {
+    CREATE_STRATEGY,
+    DELETE_STRATEGY,
+    UPDATE_STRATEGY,
+} from '../../providers/AccessProvider/permissions';
 
 import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
 import PageContent from '../../common/PageContent/PageContent';
@@ -19,6 +36,7 @@ import Dialogue from '../../common/Dialogue';
 import { ADD_NEW_STRATEGY_ID } from '../../../testIds';
 import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
 import PermissionButton from '../../common/PermissionButton/PermissionButton';
+import { getHumanReadableStrategyName } from '../../../utils/strategy-names';
 
 const StrategiesList = ({
     strategies,
@@ -45,17 +63,14 @@ const StrategiesList = ({
                 <ConditionallyRender
                     condition={smallScreen}
                     show={
-                            <PermissionIconButton
-                                data-test={ADD_NEW_STRATEGY_ID}
-                                onClick={() =>
-                                    history.push('/strategies/create')
-                                }
-                                permission={CREATE_STRATEGY}
-                                tooltip={'Add new strategy'}
-                            >
-                                <Add />
-                            </PermissionIconButton>
-
+                        <PermissionIconButton
+                            data-test={ADD_NEW_STRATEGY_ID}
+                            onClick={() => history.push('/strategies/create')}
+                            permission={CREATE_STRATEGY}
+                            tooltip={'Add new strategy'}
+                        >
+                            <Add />
+                        </PermissionIconButton>
                     }
                     elseShow={
                         <PermissionButton
@@ -76,7 +91,7 @@ const StrategiesList = ({
 
     const strategyLink = ({ name, deprecated }) => (
         <Link to={`/strategies/view/${name}`}>
-            <strong>{name}</strong>
+            <strong>{getHumanReadableStrategyName(name)}</strong>
             <ConditionallyRender
                 condition={deprecated}
                 show={<small> (Deprecated)</small>}
@@ -96,7 +111,9 @@ const StrategiesList = ({
                 }
                 permission={UPDATE_STRATEGY}
                 tooltip={'Reactivate activation strategy'}
-            ><VisibilityOff /></PermissionIconButton>
+            >
+                <VisibilityOff />
+            </PermissionIconButton>
         </Tooltip>
     );
 
@@ -119,8 +136,7 @@ const StrategiesList = ({
                             setDialogueMetaData({
                                 show: true,
                                 title: 'Really deprecate strategy?',
-                                onConfirm: () =>
-                                    deprecateStrategy(strategy),
+                                onConfirm: () => deprecateStrategy(strategy),
                             })
                         }
                         permission={UPDATE_STRATEGY}
@@ -137,19 +153,19 @@ const StrategiesList = ({
         <ConditionallyRender
             condition={strategy.editable}
             show={
-                    <PermissionIconButton
-                        onClick={() =>
-                            setDialogueMetaData({
-                                show: true,
-                                title: 'Really delete strategy?',
-                                onConfirm: () => removeStrategy(strategy),
-                            })
-                        }
-                        permission={DELETE_STRATEGY}
-                        tooltip={'Delete strategy'}
-                    >
-                        <Delete />
-                    </PermissionIconButton>
+                <PermissionIconButton
+                    onClick={() =>
+                        setDialogueMetaData({
+                            show: true,
+                            title: 'Really delete strategy?',
+                            onConfirm: () => removeStrategy(strategy),
+                        })
+                    }
+                    permission={DELETE_STRATEGY}
+                    tooltip={'Delete strategy'}
+                >
+                    <Delete />
+                </PermissionIconButton>
             }
             elseShow={
                 <Tooltip title="You cannot delete a built-in strategy">

frontend/src/utils/strategy-names.js

@@ -47,7 +47,7 @@ const nameMapping = {
 export const getHumanReadbleStrategy = strategyName =>
     nameMapping[strategyName];
 
-export const getHumanReadbleStrategyName = strategyName => {
+export const getHumanReadableStrategyName = strategyName => {
     const humanReadableStrategy = nameMapping[strategyName];
 
     if (humanReadableStrategy) {