Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-01 01:18:10 +02:00
Code Issues Projects Releases Wiki Activity

refactor: fix misc test feedback (#709)

Browse Source 
* 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
This commit is contained in:
olav 2022-02-15 10:57:57 +01:00 committed by GitHub
parent 8afed18cbc
commit 878f892c50
24 changed files with 141 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
View File

@ -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 />}
elseShow={<VisibilityOff />}
show={<Visibility titleAccess="Disable addon" />}
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>

1
frontend/src/component/admin/users/EditUser/EditUser.tsx
View File

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

2
frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
View File

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

10
frontend/src/component/application/ApplicationView/ApplicationView.tsx
View File

@ -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>
);

10
frontend/src/component/archive/ArchiveListContainer.tsx
View File

@ -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()));
};

10
frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts
View File

@ -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',
},
},
}));

5
frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
View File

@ -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>
);
})}

2
frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
View File

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

2
frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
View File

@ -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}
>

2
frontend/src/component/common/index.js
View File

@ -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

6
frontend/src/component/context/ContextForm/ContextForm.tsx
View File

@ -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}

1
frontend/src/component/feature/EditFeature/EditFeature.tsx
View File

@ -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) {

35
frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
View File

@ -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 => {
e.stopPropagation();
const patch = [{ op: 'replace', path: '/stale', value: !stale }];
await patchFeatureToggle(projectId, featureId, patch);
refetch();
setOpen(false);
const onSubmit = async (event: React.SyntheticEvent) => {
event.stopPropagation();
try {
const patch = [{ op: 'replace', path: '/stale', value: !stale }];
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 = () => {

3
frontend/src/component/feature/FeatureView/FeatureView.styles.ts
View File

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

5
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -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, {

7
frontend/src/component/feature/hooks/useFeatureForm.ts
View File

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

17
frontend/src/component/menu/Header/Header.tsx
View File

@ -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}>
<UnleashLogo className={styles.logo} />{' '}
<Link
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>
}

14
frontend/src/component/project/Project/Project.styles.ts
View File

@ -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',
},
}));

6
frontend/src/component/project/Project/Project.tsx
View File

@ -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"

5
frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
View File

@ -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: {

2
frontend/src/component/project/ProjectCard/ProjectCard.tsx
View File

@ -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}

18
frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
View File

@ -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) {
setToastApiError(e.toString());
} catch (error: unknown) {
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) {
const STRATEGY_EXIST_ERROR = 'Error: Strategy with name';
if (e.toString().includes(STRATEGY_EXIST_ERROR)) {
setErrors({
name: 'A strategy with this name already exists',
});
}
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
}
};

17
frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts
View File

@ -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) {
if (e.toString().includes(NAME_EXISTS_ERROR)) {
setErrors(prev => ({
...prev,
name: NAME_EXISTS_ERROR,
}));
return false;
}
} catch (err: unknown) {
setErrors(prev => ({
...prev,
name: formatUnknownError(err)
}));
return false;
}
};

7
frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts
View File

@ -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 => ({