From c21c334553490892a59b557ced64eed4cddec68b Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 22 Jul 2022 17:29:16 +1000
Subject: [PATCH] Fix % character in tag name causing UI crash (#2757)

* Fix % character in tag name causing UI crash
---
 ui/v2.5/src/components/Changelog/versions/v0161.md   |  1 +
 ui/v2.5/src/models/list-filter/criteria/criterion.ts |  3 ++-
 ui/v2.5/src/models/list-filter/types.ts              | 10 +++++++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/src/components/Changelog/versions/v0161.md b/ui/v2.5/src/components/Changelog/versions/v0161.md
index 1e291a565..125be7f3f 100644
--- a/ui/v2.5/src/components/Changelog/versions/v0161.md
+++ b/ui/v2.5/src/components/Changelog/versions/v0161.md
@@ -1,4 +1,5 @@
 ### 🐛 Bug fixes
+* Fix UI crash when % character used in tag names. ([#2757](https://github.com/stashapp/stash/pull/2757))
 * Fix keyboard shortcuts not working after selecting an object. ([#2750](https://github.com/stashapp/stash/pull/2750))
 * Fix UI crash on session timeout. ([#2755](https://github.com/stashapp/stash/pull/2755))
 * Fix incorrect scene metadata being set when video has cover art. ([#2752](https://github.com/stashapp/stash/pull/2752))
diff --git a/ui/v2.5/src/models/list-filter/criteria/criterion.ts b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
index 50b39e6b4..828b5e1c8 100644
--- a/ui/v2.5/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -12,6 +12,7 @@ import DurationUtils from "src/utils/duration";
 import {
   CriterionType,
   encodeILabeledId,
+  encodeLabel,
   IHierarchicalLabelValue,
   ILabeledId,
   ILabeledValue,
@@ -456,7 +457,7 @@ export class IHierarchicalLabeledIdCriterion extends Criterion<IHierarchicalLabe
 
   public getLabelValue(): string {
     const labels = decodeURI(
-      (this.value.items ?? []).map((v) => v.label).join(", ")
+      (this.value.items ?? []).map((v) => encodeLabel(v.label)).join(", ")
     );
 
     if (this.value.depth === 0) {
diff --git a/ui/v2.5/src/models/list-filter/types.ts b/ui/v2.5/src/models/list-filter/types.ts
index 01e4755f2..5194c04e6 100644
--- a/ui/v2.5/src/models/list-filter/types.ts
+++ b/ui/v2.5/src/models/list-filter/types.ts
@@ -47,10 +47,14 @@ export function criterionIsNumberValue(
   return typeof value === "object" && "value" in value && "value2" in value;
 }
 
-export function encodeILabeledId(o: ILabeledId) {
+export function encodeLabel(v: string) {
   // escape " and \ and by encoding to JSON so that it encodes to JSON correctly down the line
-  const adjustedLabel = JSON.stringify(o.label).slice(1, -1);
-  return { ...o, label: encodeURIComponent(adjustedLabel) };
+  const adjustedLabel = JSON.stringify(v).slice(1, -1);
+  return encodeURIComponent(adjustedLabel);
+}
+
+export function encodeILabeledId(o: ILabeledId) {
+  return { ...o, label: encodeLabel(o.label) };
 }
 
 export interface IOptionType {