refactor: fix misc test feedback (#709)

* refactor: keep feature toggle name when changing project

* refactor: add missing permission button tooltip

* refactor: add success toast on toggle revival

* refactor: add success toast on stale toggle

* refactor: fix initial user role checkbox value

* refactor: remove duplicated error message

* refactor: fix change-password error parsing

* refactor: remove inaccurate edit toggle toast text

* refactor: truncate long names in project cards

* refactor: truncate long project name in title

* refactor: add ellipses to truncated strings

* refactor: swap truncateString with StringTruncator

* refactor: remove unnecessary truncation

* refactor: mark context fields as optional

* refactor: show all errors from tag type creation

* refactor: show all errors from strategy create/update

* refactor: filter out empty strategies on create/update

* refactor: add an edit button to the addons list

* refactor: add missing labels

* refactor: catch errors from toggling stale features

frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx

@@ -5,13 +5,13 @@ import {
     ListItemSecondaryAction,
     ListItemText,
 } from '@material-ui/core';
-import { Visibility, VisibilityOff, Delete } from '@material-ui/icons';
+import { Delete, Edit, Visibility, VisibilityOff } from '@material-ui/icons';
 import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
 import {
     DELETE_ADDON,
     UPDATE_ADDON,
 } from '../../../providers/AccessProvider/permissions';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import PageContent from '../../../common/PageContent/PageContent';
 import useAddons from '../../../../hooks/api/getters/useAddons/useAddons';
 import useToast from '../../../../hooks/useToast';
@@ -31,6 +31,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
     const { updateAddon, removeAddon } = useAddonsApi();
     const { setToastData, setToastApiError } = useToast();
     const { hasAccess } = useContext(AccessContext);
+    const history = useHistory();
     const [showDelete, setShowDelete] = useState(false);
     const [deletedAddon, setDeletedAddon] = useState<IAddon>({
         id: 0,
@@ -115,10 +116,19 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                 >
                     <ConditionallyRender
                         condition={addon.enabled}
-                        show={<Visibility />}
+                        show={<Visibility titleAccess="Disable addon" />}
-                        elseShow={<VisibilityOff />}
+                        elseShow={<VisibilityOff titleAccess="Enable addon" />}
                     />
                 </PermissionIconButton>
+                <PermissionIconButton
+                    permission={UPDATE_ADDON}
+                    tooltip={'Edit Addon'}
+                    onClick={() => {
+                        history.push(`/addons/edit/${addon.id}`);
+                    }}
+                >
+                    <Edit titleAccess="Edit Addon" />
+                </PermissionIconButton>
                 <PermissionIconButton
                     permission={DELETE_ADDON}
                     tooltip={'Remove Addon'}
@@ -127,7 +137,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                         setShowDelete(true);
                     }}
                 >
-                    <Delete />
+                    <Delete titleAccess="Remove Addon" />
                 </PermissionIconButton>
             </ListItemSecondaryAction>
         </ListItem>

frontend/src/component/admin/users/EditUser/EditUser.tsx

@@ -38,7 +38,6 @@ const EditUser = () => {
     } = useAddUserForm(
         user?.name,
         user?.email,
-        user?.sendEmail,
         user?.rootRole
     );
 

frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx

@@ -114,8 +114,6 @@ const ChangePassword = ({
                     password={data.password}
                     callback={setValidPassword}
                 />
-
-                <p style={{ color: 'red' }}>{error.general}</p>
                 <TextField
                     label="New password"
                     name="password"

frontend/src/component/application/ApplicationView/ApplicationView.tsx

@@ -15,7 +15,6 @@ import {
     FlagRounded,
     SvgIconComponent,
 } from '@material-ui/icons';
-import { shorten } from '../../common';
 import {
     CREATE_FEATURE,
     CREATE_STRATEGY,
@@ -87,9 +86,14 @@ export const ApplicationView = () => {
             </ListItemAvatar>
             <ListItemText
                 primary={
-                    <Link to={`${viewUrl}/${name}`}>{shorten(name, 50)}</Link>
+                    <Link
+                        to={`${viewUrl}/${name}`}
+                        style={{ wordBreak: 'break-all' }}
+                    >
+                        {name}
+                    </Link>
                 }
-                secondary={shorten(description, 60)}
+                secondary={description}
             />
         </ListItem>
     );

frontend/src/component/archive/ArchiveListContainer.tsx

@@ -7,7 +7,7 @@ import useToast from '../../hooks/useToast';
 import { useFeaturesSort } from '../../hooks/useFeaturesSort';
 
 export const ArchiveListContainer = () => {
-    const { setToastApiError } = useToast();
+    const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const { reviveFeature } = useFeatureArchiveApi();
     const { archivedFeatures, loading, refetchArchived } = useFeaturesArchive();
@@ -17,6 +17,14 @@ export const ArchiveListContainer = () => {
     const revive = (feature: string) => {
         reviveFeature(feature)
             .then(refetchArchived)
+            .then(() =>
+                setToastData({
+                    type: 'success',
+                    title: "And we're back!",
+                    text: 'The feature toggle has been revived.',
+                    confetti: true,
+                })
+            )
             .catch(e => setToastApiError(e.toString()));
     };
 

frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts

@@ -5,8 +5,16 @@ export const useStyles = makeStyles(theme => ({
         position: 'absolute',
         top: '4px',
     },
-    breadcrumbNavParagraph: { color: 'inherit' },
+    breadcrumbNavParagraph: {
+        color: 'inherit',
+        '& > *': {
+            verticalAlign: 'middle',
+        },
+    },
     breadcrumbLink: {
         textDecoration: 'none',
+        '& > *': {
+            verticalAlign: 'middle',
+        },
     },
 }));

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

@@ -4,6 +4,7 @@ import ConditionallyRender from '../ConditionallyRender';
 import { useStyles } from './BreadcrumbNav.styles';
 import AccessContext from '../../../contexts/AccessContext';
 import { useContext } from 'react';
+import StringTruncator from '../StringTruncator/StringTruncator';
 
 const BreadcrumbNav = () => {
     const { isAdmin } = useContext(AccessContext);
@@ -51,7 +52,7 @@ const BreadcrumbNav = () => {
                                                 styles.breadcrumbNavParagraph
                                             }
                                         >
-                                            {path.substring(0, 30)}
+                                            <StringTruncator text={path} maxWidth="200" />
                                         </p>
                                     );
                                 }
@@ -72,7 +73,7 @@ const BreadcrumbNav = () => {
                                         className={styles.breadcrumbLink}
                                         to={link}
                                     >
-                                        {path.substring(0, 30)}
+                                        <StringTruncator text={path} maxWidth="200" />
                                     </Link>
                                 );
                             })}

frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx

@@ -9,7 +9,7 @@ interface IPermissionIconButtonProps
     > {
     permission: string;
     Icon?: React.ElementType;
-    tooltip: string;
+    tooltip?: string;
     onClick?: (e: any) => void;
     projectId?: string;
     environmentId?: string;

frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx

@@ -38,6 +38,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
                     permission={permission}
                     projectId={projectId}
                     environmentId={environmentId}
+                    tooltip={tooltip}
                     data-loading
                     {...rest}
                 >
@@ -53,6 +54,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
                     variant="contained"
                     disabled={disabled}
                     environmentId={environmentId}
+                    tooltip={tooltip}
                     data-loading
                     {...rest}
                 >

frontend/src/component/common/index.js

@@ -19,8 +19,6 @@ import ConditionallyRender from './ConditionallyRender/ConditionallyRender';
 
 export { styles };
 
-export const shorten = (str, len = 50) =>
-    str && str.length > len ? `${str.substring(0, len)}...` : str;
 export const AppsLinkList = ({ apps }) => (
     <List>
         <ConditionallyRender

frontend/src/component/context/ContextForm/ContextForm.tsx

@@ -112,11 +112,11 @@ const ContextForm: React.FC<IContextForm> = ({
                     autoFocus
                 />
                 <p className={styles.inputDescription}>
-                    What is this context for?
+                     What is this context for?
                 </p>
                 <TextField
                     className={styles.input}
-                    label="Context description"
+                    label="Context description (optional)"
                     variant="outlined"
                     multiline
                     maxRows={4}
@@ -139,7 +139,7 @@ const ContextForm: React.FC<IContextForm> = ({
                 })}
                 <div className={styles.tagContainer}>
                     <TextField
-                        label="Value"
+                        label="Value (optional)"
                         name="value"
                         className={styles.tagInput}
                         value={value}

frontend/src/component/feature/EditFeature/EditFeature.tsx

@@ -55,7 +55,6 @@ const EditFeature = () => {
             history.push(`/projects/${project}/features/${name}`);
             setToastData({
                 title: 'Toggle updated successfully',
-                text: 'Now you can start using your toggle.',
                 type: 'success',
             });
         } catch (e: any) {

frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx

@@ -5,6 +5,9 @@ import { DialogContentText } from '@material-ui/core';
 import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
 import Dialogue from '../../../../common/Dialogue';
 import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
+import React from 'react';
+import useToast from '../../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 interface IStaleDialogProps {
     open: boolean;
@@ -13,6 +16,7 @@ interface IStaleDialogProps {
 }
 
 const StaleDialog = ({ open, setOpen, stale }: IStaleDialogProps) => {
+    const { setToastData, setToastApiError } = useToast();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { patchFeatureToggle } = useFeatureApi();
     const { refetch } = useFeature(projectId, featureId);
@@ -30,12 +34,31 @@ const StaleDialog = ({ open, setOpen, stale }: IStaleDialogProps) => {
 
     const toggleActionText = stale ? 'active' : 'stale';
 
-    const onSubmit = async e => {
+    const onSubmit = async (event: React.SyntheticEvent) => {
-        e.stopPropagation();
+        event.stopPropagation();
-        const patch = [{ op: 'replace', path: '/stale', value: !stale }];
+
-        await patchFeatureToggle(projectId, featureId, patch);
+        try {
-        refetch();
+            const patch = [{ op: 'replace', path: '/stale', value: !stale }];
-        setOpen(false);
+            await patchFeatureToggle(projectId, featureId, patch);
+            refetch();
+            setOpen(false);
+        } catch (err: unknown) {
+            setToastApiError(formatUnknownError(err));
+        }
+
+        if (stale) {
+            setToastData({
+                type: 'success',
+                title: "And we're back!",
+                text: 'The toggle is no longer marked as stale.',
+            });
+        } else {
+            setToastData({
+                type: 'success',
+                title: 'A job well done.',
+                text: 'The toggle has been marked as stale.',
+            });
+        }
     };
 
     const onCancel = () => {

frontend/src/component/feature/FeatureView/FeatureView.styles.ts

@@ -44,4 +44,7 @@ export const useStyles = makeStyles(theme => ({
             flexDirection: 'column',
         },
     },
+    featureId: {
+        wordBreak: 'break-all'
+    }
 }));

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -1,6 +1,6 @@
 import { Tab, Tabs, useMediaQuery } from '@material-ui/core';
 import { useState } from 'react';
-import { WatchLater, Archive, FileCopy, Label } from '@material-ui/icons';
+import { Archive, FileCopy, Label, WatchLater } from '@material-ui/icons';
 import { Link, Route, useHistory, useParams } from 'react-router-dom';
 import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 import useFeature from '../../../hooks/api/getters/useFeature/useFeature';
@@ -115,7 +115,8 @@ const FeatureView = () => {
         return (
             <div>
                 <p>
-                    The feature <strong>{featureId.substring(0, 30)}</strong>{' '}
+                    The feature{' '}
+                    <strong className={styles.featureId}>{featureId}</strong>{' '}
                     does not exist. Do you want to &nbsp;
                     <Link
                         to={getCreateTogglePath(projectId, uiConfig.flags.E, {

frontend/src/component/feature/hooks/useFeatureForm.ts

@@ -29,9 +29,10 @@ const useFeatureForm = (
     }, [initialType]);
 
     useEffect(() => {
-        if (!toggleQueryName) setName(initialName);
+        if (!name) {
-        else setName(toggleQueryName);
+            setName(toggleQueryName || initialName);
-    }, [initialName, toggleQueryName]);
+        }
+    }, [name, initialName, toggleQueryName]);
 
     useEffect(() => {
         if (!projectId) setProject(initialProject);

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

@@ -27,7 +27,7 @@ const Header = () => {
     const [anchorEl, setAnchorEl] = useState();
     const [anchorElAdvanced, setAnchorElAdvanced] = useState();
     const [admin, setAdmin] = useState(false);
-    const { permissions } = useAuthPermissions()
+    const { permissions } = useAuthPermissions();
     const commonStyles = useCommonStyles();
     const { uiConfig } = useUiConfig();
     const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -68,12 +68,19 @@ const Header = () => {
                                 className={styles.drawerButton}
                                 onClick={toggleDrawer}
                             >
-                                <MenuIcon />
+                                <MenuIcon titleAccess="Menu" />
                             </IconButton>
                         }
                         elseShow={
-                            <Link to="/" className={commonStyles.flexRow}>
+                            <Link
-                                <UnleashLogo className={styles.logo} />{' '}
+                                to="/"
+                                className={commonStyles.flexRow}
+                                aria-label="Home"
+                            >
+                                <UnleashLogo
+                                    className={styles.logo}
+                                    aria-label="Unleash logo"
+                                />
                             </Link>
                         }
                     />
@@ -127,6 +134,7 @@ const Header = () => {
                                         >
                                             <MenuBookIcon
                                                 className={styles.docsIcon}
+                                                titleAccess="Documentation"
                                             />
                                         </a>
                                     </Tooltip>
@@ -140,6 +148,7 @@ const Header = () => {
                                             >
                                                 <SettingsIcon
                                                     className={styles.docsIcon}
+                                                    titleAccess="Settings"
                                                 />
                                             </IconButton>
                                         }

frontend/src/component/project/Project/Project.styles.ts

@@ -32,4 +32,18 @@ export const useStyles = makeStyles(theme => ({
         width: 'auto',
         fontSize: '1rem',
     },
+    title: {
+        fontSize: theme.fontSizes.mainHeader,
+        fontWeight: 'bold',
+        marginBottom: '0.5rem',
+        display: 'grid',
+        gridTemplateColumns: '1fr auto',
+        alignItems: 'center',
+        gridGap: '1rem',
+    },
+    titleText: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
 }));

frontend/src/component/project/Project/Project.tsx

@@ -1,5 +1,4 @@
 import { useHistory, useParams } from 'react-router';
-import { useCommonStyles } from '../../../common.styles';
 import useProject from '../../../hooks/api/getters/useProject/useProject';
 import useLoading from '../../../hooks/useLoading';
 import ApiError from '../../common/ApiError/ApiError';
@@ -25,7 +24,6 @@ const Project = () => {
     const { project, error, loading, refetch } = useProject(id);
     const ref = useLoading(loading);
     const { setToastData } = useToast();
-    const commonStyles = useCommonStyles();
     const styles = useStyles();
     const history = useHistory();
 
@@ -121,10 +119,10 @@ const Project = () => {
                 <div className={styles.innerContainer}>
                     <h2
                         data-loading
-                        className={commonStyles.title}
+                        className={styles.title}
                         style={{ margin: 0 }}
                     >
-                        Project: {project?.name}{' '}
+                        <div className={styles.titleText}>{project?.name}</div>
                         <PermissionIconButton
                             permission={UPDATE_PROJECT}
                             tooltip="Edit"

frontend/src/component/project/ProjectCard/ProjectCard.styles.ts

@@ -23,6 +23,11 @@ export const useStyles = makeStyles(theme => ({
     title: {
         fontWeight: 'normal',
         fontSize: '1rem',
+        lineClamp: 2,
+        display: '-webkit-box',
+        boxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
     },
 
     projectIcon: {

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -46,7 +46,7 @@ const ProjectCard = ({
     return (
         <Card className={styles.projectCard} onMouseEnter={onHover}>
             <div className={styles.header} data-loading>
-                <h2 className={styles.title}>{name}</h2>
+                <div className={styles.title}>{name}</div>
 
                 <PermissionIconButton
                     permission={UPDATE_PROJECT}

frontend/src/component/strategies/StrategyForm/StrategyForm.tsx

@@ -11,6 +11,7 @@ import useStrategiesApi from '../../../hooks/api/actions/useStrategiesApi/useStr
 import { IStrategy } from '../../../interfaces/strategy';
 import useToast from '../../../hooks/useToast';
 import useStrategies from '../../../hooks/api/getters/useStrategies/useStrategies';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 interface ICustomStrategyParams {
     name?: string;
@@ -78,7 +79,7 @@ export const StrategyForm = ({ editMode, strategy }: IStrategyFormProps) => {
         setParams(prev => [...parameters]);
         if (editMode) {
             try {
-                await updateStrategy({ name, description, parameters: params });
+                await updateStrategy({ name, description, parameters });
                 history.push(`/strategies/view/${name}`);
                 setToastData({
                     type: 'success',
@@ -86,12 +87,12 @@ export const StrategyForm = ({ editMode, strategy }: IStrategyFormProps) => {
                     text: 'Successfully updated strategy',
                 });
                 refetchStrategies();
-            } catch (e: any) {
+            } catch (error: unknown) {
-                setToastApiError(e.toString());
+                setToastApiError(formatUnknownError(error));
             }
         } else {
             try {
-                await createStrategy({ name, description, parameters: params });
+                await createStrategy({ name, description, parameters });
                 history.push(`/strategies`);
                 setToastData({
                     type: 'success',
@@ -99,13 +100,8 @@ export const StrategyForm = ({ editMode, strategy }: IStrategyFormProps) => {
                     text: 'Successfully created new strategy',
                 });
                 refetchStrategies();
-            } catch (e: any) {
+            } catch (error: unknown) {
-                const STRATEGY_EXIST_ERROR = 'Error: Strategy with name';
+                setToastApiError(formatUnknownError(error));
-                if (e.toString().includes(STRATEGY_EXIST_ERROR)) {
-                    setErrors({
-                        name: 'A strategy with this name already exists',
-                    });
-                }
             }
         }
     };

frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import useTagTypesApi from '../../../hooks/api/actions/useTagTypesApi/useTagTypesApi';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const useTagTypeForm = (initialTagName = '', initialTagDesc = '') => {
     const [tagName, setTagName] = useState(initialTagName);
@@ -22,8 +23,6 @@ const useTagTypeForm = (initialTagName = '', initialTagDesc = '') => {
         };
     };
 
-    const NAME_EXISTS_ERROR =
-        'There already exists a tag-type with the name simple';
     const validateNameUniqueness = async () => {
         if (tagName.length === 0) {
             setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
@@ -39,14 +38,12 @@ const useTagTypeForm = (initialTagName = '', initialTagDesc = '') => {
         try {
             await validateTagName(tagName);
             return true;
-        } catch (e: any) {
+        } catch (err: unknown) {
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
+            setErrors(prev => ({
-                setErrors(prev => ({
+                ...prev,
-                    ...prev,
+                name: formatUnknownError(err)
-                    name: NAME_EXISTS_ERROR,
+            }));
-                }));
+            return false;
-                return false;
-            }
         }
     };
 

frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts

@@ -14,10 +14,11 @@ export const handleBadRequest = async (
     if (!setErrors || !requestId) return;
     if (res) {
         const data = await res.json();
+        const message = data.isJoi ? data.details[0].message : data[0].msg;
 
         setErrors(prev => ({
             ...prev,
-            [requestId]: data[0].msg,
+            [requestId]: message,
         }));
     }
 
@@ -47,10 +48,11 @@ export const handleUnauthorized = async (
     if (!setErrors || !requestId) return;
     if (res) {
         const data = await res.json();
+        const message = data.isJoi ? data.details[0].message : data[0].msg;
 
         setErrors(prev => ({
             ...prev,
-            [requestId]: data[0].msg,
+            [requestId]: message,
         }));
     }
 
@@ -65,7 +67,6 @@ export const handleForbidden = async (
     if (!setErrors || !requestId) return;
     if (res) {
         const data = await res.json();
-
         const message = data.isJoi ? data.details[0].message : data[0].msg;
 
         setErrors(prev => ({