From 923575b38bc898537ec670c7aad41426c32e8d17 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 1 Sep 2021 10:53:45 +0200
Subject: [PATCH] Fixed tags including special chars being broken when used in
 URLs

---
 CHANGELOG.md                     |  2 +-
 src/short-urls/ShortUrlsList.tsx |  2 +-
 src/tags/TagCard.tsx             |  2 +-
 test/tags/TagCard.test.tsx       | 24 +++++++++++++++---------
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bbede9e..22943cda 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx
index 1cac40b5..414bc913 100644
--- a/src/short-urls/ShortUrlsList.tsx
+++ b/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 });
 
diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx
index e8036b04..6bad3281 100644
--- a/src/tags/TagCard.tsx
+++ b/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)) {
diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx
index 38d1abbe..db1dce18 100644
--- a/test/tags/TagCard.test.tsx
+++ b/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 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', () => {