Fixed tags including special chars being broken when used in URLs

CHANGELOG.md

@@ -27,7 +27,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * *Nothing*
 
 ### Fixed
-* *Nothing*
+* [#478](https://github.com/shlinkio/shlink-web-client/pull/478) Fixed tags including special chars not being properly URL encoded before using them as query params.
 
 
 ## [3.2.0] - 2021-07-12

src/short-urls/ShortUrlsList.tsx

@@ -70,7 +70,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
 
   useEffect(() => {
     const { tag } = parseQuery<{ tag?: string }>(location.search);
-    const tags = tag ? [ tag ] : shortUrlsListParams.tags;
+    const tags = tag ? [ decodeURIComponent(tag) ] : shortUrlsListParams.tags;
 
     refreshList({ page: match.params.page, tags, itemsPerPage: undefined });
 

src/tags/TagCard.tsx

@@ -34,7 +34,7 @@ const TagCard = (
   const titleRef = useRef<HTMLElement>();
 
   const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
-  const shortUrlsLink = `/server/${serverId}/list-short-urls/1?tag=${tag}`;
+  const shortUrlsLink = `/server/${serverId}/list-short-urls/1?tag=${encodeURIComponent(tag)}`;
 
   useEffect(() => {
     if (isTruncated(titleRef.current)) {

test/tags/TagCard.test.tsx

@@ -14,30 +14,36 @@ describe('<TagCard />', () => {
   };
   const DeleteTagConfirmModal = jest.fn();
   const EditTagModal = jest.fn();
-
-  beforeEach(() => {
   const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, () => null, Mock.all<ColorGenerator>());
-
+  const createWrapper = (tag = 'ssr') => {
     wrapper = shallow(
       <TagCard
-        tag="ssr"
+        tag={tag}
         selectedServer={Mock.of<ReachableServer>({ id: '1' })}
         tagStats={tagStats}
         displayed={true}
         toggle={() => {}}
       />,
     );
-  });
+
+    return wrapper;
+  };
+
+  beforeEach(() => createWrapper());
 
   afterEach(() => wrapper.unmount());
   afterEach(jest.resetAllMocks);
 
-  it('shows a TagBullet and a link to the list filtering by the tag', () => {
+  it.each([
+    [ 'ssr', '/server/1/list-short-urls/1?tag=ssr' ],
+    [ 'ssr-&-foo', '/server/1/list-short-urls/1?tag=ssr-%26-foo' ],
+  ])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => {
+    const wrapper = createWrapper(tag);
     const links = wrapper.find(Link);
     const bullet = wrapper.find(TagBullet);
 
-    expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tag=ssr');
-    expect(bullet.prop('tag')).toEqual('ssr');
+    expect(links.at(0).prop('to')).toEqual(expectedLink);
+    expect(bullet.prop('tag')).toEqual(tag);
   });
 
   it('displays delete modal when delete btn is clicked', () => {