mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Allowed to customize initial state for forward query

Browse source
This commit is contained in:
Alejandro Celaya 2021-10-13 23:10:22 +02:00
parent 9e6907deb4
commit 1bf3569774
4 changed files with 59 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/settings/ShortUrlCreation.tsx
View file

@ -14,8 +14,8 @@ const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): s
tagFilteringMode === 'includes' ? 'Suggest tags including input' : 'Suggest tags starting with input';
const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): ReactNode =>
tagFilteringMode === 'includes'
? <>The list of suggested tags will contain existing ones <b>including</b> provided input.</>
: <>The list of suggested tags will contain existing ones <b>starting with</b> provided input.</>;
? <>The list of suggested tags will contain those <b>including</b> provided input.</>
: <>The list of suggested tags will contain those <b>starting with</b> provided input.</>;
export const ShortUrlCreation: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false };
@ -24,19 +24,31 @@ export const ShortUrlCreation: FC<ShortUrlCreationProps> = ({ settings, setShort
);
return (
<SimpleCard title="Short URLs creation" className="h-100">
<SimpleCard title="Short URLs form" className="h-100">
<FormGroup>
<ToggleSwitch
checked={shortUrlCreation.validateUrls ?? false}
onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
>
By default, request validation on long URLs when creating new short URLs.
Request validation on long URLs when creating new short URLs.
<small className="form-text text-muted">
The initial state of the <b>Validate URL</b> checkbox will
be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.
</small>
</ToggleSwitch>
</FormGroup>
<FormGroup>
<ToggleSwitch
checked={shortUrlCreation.forwardQuery ?? true}
onChange={(forwardQuery) => setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
>
Make all new short URLs forward their query params to the long URL.
<small className="form-text text-muted">
The initial state of the <b>Forward query params on redirect</b> checkbox will
be <b>{shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}</b>.
</small>
</ToggleSwitch>
</FormGroup>
<FormGroup className="mb-0">
<label>Tag suggestions search mode:</label>
<DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>

1
src/settings/reducers/settings.ts
View file

@ -22,6 +22,7 @@ export type TagFilteringMode = 'startsWith' | 'includes';
export interface ShortUrlCreationSettings {
validateUrls: boolean;
tagFilteringMode?: TagFilteringMode;
forwardQuery?: boolean;
}
export type TagsMode = 'cards' | 'list';

2
src/short-urls/CreateShortUrl.tsx
View file

@ -30,7 +30,7 @@ const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => (
maxVisits: undefined,
findIfExists: false,
validateUrl: settings?.validateUrls ?? false,
forwardQuery: true,
forwardQuery: settings?.forwardQuery ?? true,
});
const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResult: FC<CreateShortUrlResultProps>) => ({

51
test/settings/ShortUrlCreation.test.tsx
View file

@ -29,20 +29,42 @@ describe('<ShortUrlCreation />', () => {
[ undefined, false ],
])('URL validation switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
const wrapper = createWrapper(shortUrlCreation);
const toggle = wrapper.find(ToggleSwitch);
const urlValidationToggle = wrapper.find(ToggleSwitch).first();
expect(toggle.prop('checked')).toEqual(expectedChecked);
expect(urlValidationToggle.prop('checked')).toEqual(expectedChecked);
});
it.each([
[{ validateUrls: true }, 'checkbox will be checked' ],
[{ validateUrls: false }, 'checkbox will be unchecked' ],
[ undefined, 'checkbox will be unchecked' ],
[{ forwardQuery: true }, true ],
[{ forwardQuery: false }, false ],
[{}, true ],
])('forward query switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation });
const forwardQueryToggle = wrapper.find(ToggleSwitch).last();
expect(forwardQueryToggle.prop('checked')).toEqual(expectedChecked);
});
it.each([
[{ validateUrls: true }, 'Validate URL checkbox will be checked' ],
[{ validateUrls: false }, 'Validate URL checkbox will be unchecked' ],
[ undefined, 'Validate URL checkbox will be unchecked' ],
])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => {
const wrapper = createWrapper(shortUrlCreation);
const text = wrapper.find('.form-text').first();
const validateUrlText = wrapper.find('.form-text').first();
expect(text.text()).toContain(expectedText);
expect(validateUrlText.text()).toContain(expectedText);
});
it.each([
[{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked' ],
[{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked' ],
[{}, 'Forward query params on redirect checkbox will be checked' ],
])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => {
const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation });
const forwardQueryText = wrapper.find('.form-text').at(1);
expect(forwardQueryText.text()).toContain(expectedText);
});
it.each([
@ -62,15 +84,24 @@ describe('<ShortUrlCreation />', () => {
expect(hintText.text()).toContain(expectedHint);
});
it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when toggle value changes', (validateUrls) => {
it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', (validateUrls) => {
const wrapper = createWrapper();
const toggle = wrapper.find(ToggleSwitch);
const urlValidationToggle = wrapper.find(ToggleSwitch).first();
expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
toggle.simulate('change', validateUrls);
urlValidationToggle.simulate('change', validateUrls);
expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls });
});
it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when forward query toggle value changes', (forwardQuery) => {
const wrapper = createWrapper();
const urlValidationToggle = wrapper.find(ToggleSwitch).last();
expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
urlValidationToggle.simulate('change', forwardQuery);
expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery }));
});
it('invokes setShortUrlCreationSettings when dropdown value changes', () => {
const wrapper = createWrapper();
const firstDropdownItem = wrapper.find(DropdownItem).first();