mirror of
https://github.com/Unleash/unleash.git
synced 2025-04-10 01:16:39 +02:00
feat: change request ui updates (#4574)
This commit is contained in:
parent
cc62db46fb
commit
b2aa3ea049
@ -25,7 +25,8 @@ export const ChangeItemWrapper = styled(Box)({
|
|||||||
|
|
||||||
const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
|
const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
gridTemplateColumns: 'auto 40px',
|
gridTemplateColumns: 'auto auto',
|
||||||
|
justifyContent: 'space-between',
|
||||||
gap: theme.spacing(1),
|
gap: theme.spacing(1),
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginBottom: theme.spacing(2),
|
marginBottom: theme.spacing(2),
|
||||||
|
@ -17,7 +17,7 @@ test.each(['', undefined])(
|
|||||||
).toBeNull();
|
).toBeNull();
|
||||||
|
|
||||||
// expect ins element with new strategy name
|
// expect ins element with new strategy name
|
||||||
await screen.findByText(newName, { selector: 'ins' });
|
await screen.findByText(newName, { selector: 'p' });
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -30,9 +30,7 @@ test.each(['', undefined])(
|
|||||||
);
|
);
|
||||||
|
|
||||||
// expect no ins elements
|
// expect no ins elements
|
||||||
expect(
|
expect(screen.queryByText(newName || '', { selector: 'p' })).toBeNull();
|
||||||
screen.queryByText(newName || '', { selector: 'ins' })
|
|
||||||
).toBeNull();
|
|
||||||
|
|
||||||
// expect del element with old strategy name
|
// expect del element with old strategy name
|
||||||
await screen.findByText(previousName, { selector: 'del' });
|
await screen.findByText(previousName, { selector: 'del' });
|
||||||
@ -50,25 +48,13 @@ test('Should render the old name as deleted and the new name as inserted if the
|
|||||||
await screen.findByText(previousName, { selector: 'del' });
|
await screen.findByText(previousName, { selector: 'del' });
|
||||||
|
|
||||||
// expect ins element with new strategy name
|
// expect ins element with new strategy name
|
||||||
await screen.findByText(newName, { selector: 'ins' });
|
await screen.findByText(newName, { selector: 'p' });
|
||||||
});
|
|
||||||
|
|
||||||
test('Should render the name in a span if it has not changed', async () => {
|
|
||||||
const name = 'name';
|
|
||||||
render(<NameWithChangeInfo newName={name} previousName={name} />);
|
|
||||||
|
|
||||||
// expect no del or ins elements
|
|
||||||
expect(screen.queryByText(name, { selector: 'ins' })).toBeNull();
|
|
||||||
expect(screen.queryByText(name, { selector: 'del' })).toBeNull();
|
|
||||||
|
|
||||||
// expect span element with the strategy name
|
|
||||||
await screen.findByText(name, { selector: 'span' });
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Should render nothing if there was no name and there is still no name', async () => {
|
test('Should render nothing if there was no name and there is still no name', async () => {
|
||||||
render(<NameWithChangeInfo newName={undefined} previousName={undefined} />);
|
render(<NameWithChangeInfo newName={undefined} previousName={undefined} />);
|
||||||
|
|
||||||
expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
|
expect(screen.queryByText('', { selector: 'p' })).toBeNull();
|
||||||
expect(screen.queryByText('', { selector: 'del' })).toBeNull();
|
expect(screen.queryByText('', { selector: 'del' })).toBeNull();
|
||||||
expect(screen.queryByText('', { selector: 'span' })).toBeNull();
|
expect(screen.queryByText('', { selector: 'span' })).toBeNull();
|
||||||
});
|
});
|
||||||
|
@ -14,10 +14,6 @@ export const NameWithChangeInfo: FC<{
|
|||||||
}> = ({ newName, previousName }) => {
|
}> = ({ newName, previousName }) => {
|
||||||
const titleHasChanged = Boolean(previousName && previousName !== newName);
|
const titleHasChanged = Boolean(previousName && previousName !== newName);
|
||||||
|
|
||||||
const titleHasChangedOrBeenAdded = Boolean(
|
|
||||||
titleHasChanged || (!previousName && newName)
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
@ -34,13 +30,7 @@ export const NameWithChangeInfo: FC<{
|
|||||||
condition={Boolean(newName)}
|
condition={Boolean(newName)}
|
||||||
show={
|
show={
|
||||||
<Truncated>
|
<Truncated>
|
||||||
<Typography
|
<Typography>{newName}</Typography>
|
||||||
component={
|
|
||||||
titleHasChangedOrBeenAdded ? 'ins' : 'span'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{newName}
|
|
||||||
</Typography>
|
|
||||||
</Truncated>
|
</Truncated>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user