Merge pull request #849 from acelaya-forks/long-url-query

Allow long URL to be preset via query param in short URL creation

Author: acelaya

CHANGELOG.md

@@ -4,10 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.17.0] - 2025-11-12
 ### Added
 * [#839](https://github.com/shlinkio/shlink-web-component/issues/839) Allow filtering short URLs by excluded tags when using Shlink >=4.6.0
 * [#838](https://github.com/shlinkio/shlink-web-component/issues/838) Allow filtering tag, orphan and non-orphan visits by domain, when using Shlink >=4.6.0
+* [#784](https://github.com/shlinkio/shlink-web-component/issues/784) Add optional `long-url` query parameter to short URL creation to prefill the long URL programmatically.
 
 ### Changed
 * [#519](https://github.com/shlinkio/shlink-web-component/issues/519) Redesign short URLs filtering bar for more clarity and consistency

src/short-urls/CreateShortUrl.tsx

@@ -1,9 +1,9 @@
+import { useParsedQuery } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import type { ShlinkCreateShortUrlData } from '../api-contract';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
-import type { ShortUrlCreationSettings } from '../settings';
 import { useSetting } from '../settings';
 import { CreateShortUrlResult } from './helpers/CreateShortUrlResult';
 import type { ShortUrlCreation } from './reducers/shortUrlCreation';
@@ -23,20 +23,6 @@ type CreateShortUrlDeps = {
   ShortUrlForm: FC<ShortUrlFormProps<ShlinkCreateShortUrlData>>;
 };
 
-const getInitialState = (settings?: ShortUrlCreationSettings): ShlinkCreateShortUrlData => ({
-  longUrl: '',
-  tags: [],
-  customSlug: '',
-  title: undefined,
-  shortCodeLength: undefined,
-  domain: '',
-  validSince: undefined,
-  validUntil: undefined,
-  maxVisits: undefined,
-  findIfExists: false,
-  forwardQuery: settings?.forwardQuery ?? true,
-});
-
 const CreateShortUrl: FCWithDeps<CreateShortUrlConnectProps, CreateShortUrlDeps> = ({
   createShortUrl,
   shortUrlCreation,
@@ -45,7 +31,23 @@ const CreateShortUrl: FCWithDeps<CreateShortUrlConnectProps, CreateShortUrlDeps>
 }: CreateShortUrlConnectProps) => {
   const { ShortUrlForm } = useDependencies(CreateShortUrl);
   const shortUrlCreationSettings = useSetting('shortUrlCreation');
-  const initialState = useMemo(() => getInitialState(shortUrlCreationSettings), [shortUrlCreationSettings]);
+  const { 'long-url': longUrlFromQuery = '' } = useParsedQuery<{ 'long-url'?: string }>();
+  const initialState = useMemo(
+    (): ShlinkCreateShortUrlData => ({
+      longUrl: longUrlFromQuery,
+      tags: [],
+      customSlug: '',
+      title: undefined,
+      shortCodeLength: undefined,
+      domain: '',
+      validSince: undefined,
+      validUntil: undefined,
+      maxVisits: undefined,
+      findIfExists: false,
+      forwardQuery: shortUrlCreationSettings?.forwardQuery ?? true,
+    }),
+    [longUrlFromQuery, shortUrlCreationSettings?.forwardQuery],
+  );
 
   return (
     <>

test/short-urls/CreateShortUrl.test.tsx

@@ -1,29 +1,44 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router';
+import type { ShlinkCreateShortUrlData } from '../../src/api-contract';
 import { SettingsProvider } from '../../src/settings';
 import { CreateShortUrlFactory } from '../../src/short-urls/CreateShortUrl';
 import type { ShortUrlCreation } from '../../src/short-urls/reducers/shortUrlCreation';
+import type { ShortUrlFormProps } from '../../src/short-urls/ShortUrlForm';
 import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<CreateShortUrl />', () => {
-  const ShortUrlForm = () => <span>ShortUrlForm</span>;
+  const ShortUrlForm = ({ initialState }: ShortUrlFormProps<ShlinkCreateShortUrlData>) => (
+    <span>ShortUrlForm ({initialState.longUrl})</span>
+  );
   const shortUrlCreationResult = fromPartial<ShortUrlCreation>({});
   const createShortUrl = vi.fn(async () => Promise.resolve());
   const CreateShortUrl = CreateShortUrlFactory(fromPartial({ ShortUrlForm }));
-  const setUp = () => render(
-    <SettingsProvider value={{}}>
-      <CreateShortUrl
-        shortUrlCreation={shortUrlCreationResult}
-        createShortUrl={createShortUrl}
-        resetCreateShortUrl={() => {}}
-      />
-    </SettingsProvider>,
-  );
+  const setUp = (longUrlQuery?: string) => {
+    const history = createMemoryHistory();
+    if (longUrlQuery) {
+      history.push({ search: `?long-url=${longUrlQuery}` });
+    }
+
+    return render(
+      <Router location={history.location} navigator={history}>
+        <SettingsProvider value={{}}>
+          <CreateShortUrl
+            shortUrlCreation={shortUrlCreationResult}
+            createShortUrl={createShortUrl}
+            resetCreateShortUrl={() => {}}
+          />
+        </SettingsProvider>
+      </Router>,
+    );
+  };
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
-  it('renders computed initial state', () => {
-    setUp();
-    expect(screen.getByText('ShortUrlForm')).toBeInTheDocument();
+  it.each([undefined, 'https://example.com'])('renders initial long URL', (longUrl) => {
+    setUp(longUrl);
+    expect(screen.getByText(`ShortUrlForm (${longUrl ?? ''})`)).toBeInTheDocument();
   });
 });