Allowed to customize initial state for forward query

src/settings/ShortUrlCreation.tsx

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

src/settings/reducers/settings.ts

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

src/short-urls/CreateShortUrl.tsx

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

test/settings/ShortUrlCreation.test.tsx

@@ -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' ],
+    [{ forwardQuery: true }, true ],
-    [{ validateUrls: false }, 'checkbox will be unchecked' ],
+    [{ forwardQuery: false }, false ],
-    [ undefined, 'checkbox will be unchecked' ],
+    [{}, 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();