From 1a6374fae98cb620500ed3df22dfac489dc4a70a Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Sat, 14 Mar 2020 08:06:55 +1100
Subject: [PATCH] Fix error when viewing scenes related to objects with illegal
 characters in name (#395)

* Fix gitattributes for v2.5
---
 .gitattributes                                 |  2 +-
 .../components/Scenes/SceneDetails/Scene.tsx   |  4 +---
 .../SceneDetails/SceneOperationsPanel.tsx      |  9 +++++++--
 ui/v2.5/src/core/StashService.ts               | 18 +++++++++---------
 .../models/list-filter/criteria/criterion.ts   |  4 ++++
 .../models/list-filter/criteria/performers.ts  |  8 +++++++-
 .../src/models/list-filter/criteria/studios.ts |  8 +++++++-
 .../src/models/list-filter/criteria/tags.ts    |  8 +++++++-
 ui/v2.5/src/models/list-filter/filter.ts       |  6 +++++-
 ui/v2.5/src/models/list-filter/types.ts        |  4 ++++
 .../models/list-filter/criteria/criterion.ts   |  4 ++++
 .../src/models/list-filter/criteria/movies.ts  |  6 +++++-
 .../models/list-filter/criteria/performers.ts  |  6 +++++-
 .../src/models/list-filter/criteria/studios.ts |  6 +++++-
 ui/v2/src/models/list-filter/criteria/tags.ts  |  6 +++++-
 ui/v2/src/models/list-filter/filter.ts         |  7 ++++++-
 ui/v2/src/models/list-filter/types.ts          |  6 ++++++
 17 files changed, 88 insertions(+), 24 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index 201b307f0..795235ffb 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,3 @@
 go.mod text eol=lf
 go.sum text eol=lf
-ui/v2.5/** -text
+ui/v2.5/**/*.ts* text eol=lf
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 80ce28e69..29b316364 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -146,9 +146,7 @@ export const Scene: React.FC = () => {
             />
           </Tab>
           <Tab eventKey="scene-operations-panel" title="Operations">
-            <SceneOperationsPanel 
-              scene={scene} 
-            />
+            <SceneOperationsPanel scene={scene} />
           </Tab>
         </Tabs>
       </div>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneOperationsPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneOperationsPanel.tsx
index 730531b80..167602d53 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneOperationsPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneOperationsPanel.tsx
@@ -9,7 +9,9 @@ interface IOperationsPanelProps {
   scene: GQL.SceneDataFragment;
 }
 
-export const SceneOperationsPanel: FunctionComponent<IOperationsPanelProps> = (props: IOperationsPanelProps) => {
+export const SceneOperationsPanel: FunctionComponent<IOperationsPanelProps> = (
+  props: IOperationsPanelProps
+) => {
   const Toast = useToast();
   const [generateScreenshot] = StashService.useSceneGenerateScreenshot();
 
@@ -25,7 +27,10 @@ export const SceneOperationsPanel: FunctionComponent<IOperationsPanelProps> = (p
 
   return (
     <>
-      <Button className="edit-button" onClick={() => onGenerateScreenshot(JWUtils.getPlayer().getPosition())}>
+      <Button
+        className="edit-button"
+        onClick={() => onGenerateScreenshot(JWUtils.getPlayer().getPosition())}
+      >
         Generate thumbnail from current
       </Button>
       <Button className="edit-button" onClick={() => onGenerateScreenshot()}>
diff --git a/ui/v2.5/src/core/StashService.ts b/ui/v2.5/src/core/StashService.ts
index b76d253c2..e83e5a378 100644
--- a/ui/v2.5/src/core/StashService.ts
+++ b/ui/v2.5/src/core/StashService.ts
@@ -408,8 +408,8 @@ export class StashService {
   }
 
   public static useSceneGenerateScreenshot() {
-    return GQL.useSceneGenerateScreenshotMutation({ 
-      update: () => StashService.invalidateQueries(["findScenes"]),
+    return GQL.useSceneGenerateScreenshotMutation({
+      update: () => StashService.invalidateQueries(["findScenes"])
     });
   }
 
@@ -514,7 +514,7 @@ export class StashService {
 
   public static mutateStopJob() {
     return StashService.client.mutate<GQL.StopJobMutation>({
-      mutation: GQL.StopJobDocument,
+      mutation: GQL.StopJobDocument
     });
   }
 
@@ -574,39 +574,39 @@ export class StashService {
   public static mutateMetadataScan(input: GQL.ScanMetadataInput) {
     return StashService.client.mutate<GQL.MetadataScanMutation>({
       mutation: GQL.MetadataScanDocument,
-      variables: { input },
+      variables: { input }
     });
   }
 
   public static mutateMetadataAutoTag(input: GQL.AutoTagMetadataInput) {
     return StashService.client.mutate<GQL.MetadataAutoTagMutation>({
       mutation: GQL.MetadataAutoTagDocument,
-      variables: { input },
+      variables: { input }
     });
   }
 
   public static mutateMetadataGenerate(input: GQL.GenerateMetadataInput) {
     return StashService.client.mutate<GQL.MetadataGenerateMutation>({
       mutation: GQL.MetadataGenerateDocument,
-      variables: { input },
+      variables: { input }
     });
   }
 
   public static mutateMetadataClean() {
     return StashService.client.mutate<GQL.MetadataCleanMutation>({
-      mutation: GQL.MetadataCleanDocument,
+      mutation: GQL.MetadataCleanDocument
     });
   }
 
   public static mutateMetadataExport() {
     return StashService.client.mutate<GQL.MetadataExportMutation>({
-      mutation: GQL.MetadataExportDocument,
+      mutation: GQL.MetadataExportDocument
     });
   }
 
   public static mutateMetadataImport() {
     return StashService.client.mutate<GQL.MetadataImportMutation>({
-      mutation: GQL.MetadataImportDocument,
+      mutation: GQL.MetadataImportDocument
     });
   }
 
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 ab4e2af54..161659858 100644
--- a/ui/v2.5/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -186,6 +186,10 @@ export abstract class Criterion {
     }
   }
   */
+
+  public encodeValue(): CriterionValue {
+    return this.value;
+  }
 }
 
 export interface ICriterionOption {
diff --git a/ui/v2.5/src/models/list-filter/criteria/performers.ts b/ui/v2.5/src/models/list-filter/criteria/performers.ts
index 356cc6217..2c9032706 100644
--- a/ui/v2.5/src/models/list-filter/criteria/performers.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/performers.ts
@@ -1,5 +1,5 @@
 import { CriterionModifier } from "src/core/generated-graphql";
-import { ILabeledId, IOptionType } from "../types";
+import { ILabeledId, IOptionType, encodeILabeledId } from "../types";
 import { Criterion, CriterionType, ICriterionOption } from "./criterion";
 
 export class PerformersCriterion extends Criterion {
@@ -13,6 +13,12 @@ export class PerformersCriterion extends Criterion {
   ];
   public options: IOptionType[] = [];
   public value: ILabeledId[] = [];
+
+  public encodeValue() {
+    return this.value.map(o => {
+      return encodeILabeledId(o);
+    });
+  }
 }
 
 export class PerformersCriterionOption implements ICriterionOption {
diff --git a/ui/v2.5/src/models/list-filter/criteria/studios.ts b/ui/v2.5/src/models/list-filter/criteria/studios.ts
index e9a53dc1f..e48616f34 100644
--- a/ui/v2.5/src/models/list-filter/criteria/studios.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/studios.ts
@@ -1,5 +1,5 @@
 import { CriterionModifier } from "src/core/generated-graphql";
-import { ILabeledId, IOptionType } from "../types";
+import { ILabeledId, IOptionType, encodeILabeledId } from "../types";
 import { Criterion, CriterionType, ICriterionOption } from "./criterion";
 
 export class StudiosCriterion extends Criterion {
@@ -12,6 +12,12 @@ export class StudiosCriterion extends Criterion {
   ];
   public options: IOptionType[] = [];
   public value: ILabeledId[] = [];
+
+  public encodeValue() {
+    return this.value.map(o => {
+      return encodeILabeledId(o);
+    });
+  }
 }
 
 export class StudiosCriterionOption implements ICriterionOption {
diff --git a/ui/v2.5/src/models/list-filter/criteria/tags.ts b/ui/v2.5/src/models/list-filter/criteria/tags.ts
index 128b1871d..6d359d4b6 100644
--- a/ui/v2.5/src/models/list-filter/criteria/tags.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/tags.ts
@@ -1,5 +1,5 @@
 import * as GQL from "src/core/generated-graphql";
-import { ILabeledId, IOptionType } from "../types";
+import { ILabeledId, IOptionType, encodeILabeledId } from "../types";
 import { Criterion, CriterionType, ICriterionOption } from "./criterion";
 
 export class TagsCriterion extends Criterion {
@@ -22,6 +22,12 @@ export class TagsCriterion extends Criterion {
       this.parameterName = "scene_tags";
     }
   }
+
+  public encodeValue() {
+    return this.value.map(o => {
+      return encodeILabeledId(o);
+    });
+  }
 }
 
 export class TagsCriterionOption implements ICriterionOption {
diff --git a/ui/v2.5/src/models/list-filter/filter.ts b/ui/v2.5/src/models/list-filter/filter.ts
index c2c00f251..23b3bf49d 100644
--- a/ui/v2.5/src/models/list-filter/filter.ts
+++ b/ui/v2.5/src/models/list-filter/filter.ts
@@ -270,7 +270,11 @@ export class ListFilterModel {
     this.criteria.forEach(criterion => {
       const encodedCriterion: Partial<Criterion> = {
         type: criterion.type,
-        value: criterion.value,
+        // #394 - the presence of a # symbol results in the query URL being
+        // malformed. We could set encode: true in the queryString.stringify
+        // call below, but this results in a URL that gets pretty long and ugly.
+        // Instead, we'll encode the criteria values.
+        value: criterion.encodeValue(),
         modifier: criterion.modifier
       };
       const jsonCriterion = JSON.stringify(encodedCriterion);
diff --git a/ui/v2.5/src/models/list-filter/types.ts b/ui/v2.5/src/models/list-filter/types.ts
index 3d7e39506..7f614001c 100644
--- a/ui/v2.5/src/models/list-filter/types.ts
+++ b/ui/v2.5/src/models/list-filter/types.ts
@@ -22,6 +22,10 @@ export interface ILabeledValue {
   value: string;
 }
 
+export function encodeILabeledId(o: ILabeledId) {
+  return { ...o, label: encodeURIComponent(o.label) };
+}
+
 export interface IOptionType {
   id: string;
   name?: string;
diff --git a/ui/v2/src/models/list-filter/criteria/criterion.ts b/ui/v2/src/models/list-filter/criteria/criterion.ts
index ebbb69ab1..a660371bb 100644
--- a/ui/v2/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2/src/models/list-filter/criteria/criterion.ts
@@ -136,6 +136,10 @@ export abstract class Criterion<Option = any, Value = any> {
       this.value = value;
     }
   }
+
+  public encodeValue(): Value {
+    return this.value;
+  }
 }
 
 export interface ICriterionOption {
diff --git a/ui/v2/src/models/list-filter/criteria/movies.ts b/ui/v2/src/models/list-filter/criteria/movies.ts
index 2bfa8d801..894cd8a31 100644
--- a/ui/v2/src/models/list-filter/criteria/movies.ts
+++ b/ui/v2/src/models/list-filter/criteria/movies.ts
@@ -1,5 +1,5 @@
 import { CriterionModifier } from "../../../core/generated-graphql";
-import { ILabeledId } from "../types";
+import { ILabeledId, encodeILabeledId } from "../types";
 import {
   Criterion,
   CriterionType,
@@ -22,6 +22,10 @@ export class MoviesCriterion extends Criterion<IOptionType, ILabeledId[]> {
   ];
   public options: IOptionType[] = [];
   public value: ILabeledId[] = [];
+
+  public encodeValue() {
+    return this.value.map((o) => { return encodeILabeledId(o); });
+  }
 }
 
 export class MoviesCriterionOption implements ICriterionOption {
diff --git a/ui/v2/src/models/list-filter/criteria/performers.ts b/ui/v2/src/models/list-filter/criteria/performers.ts
index 1741d942f..28cb71f9c 100644
--- a/ui/v2/src/models/list-filter/criteria/performers.ts
+++ b/ui/v2/src/models/list-filter/criteria/performers.ts
@@ -1,5 +1,5 @@
 import { CriterionModifier } from "../../../core/generated-graphql";
-import { ILabeledId } from "../types";
+import { ILabeledId, encodeILabeledId } from "../types";
 import {
   Criterion,
   CriterionType,
@@ -23,6 +23,10 @@ export class PerformersCriterion extends Criterion<IOptionType, ILabeledId[]> {
   ];
   public options: IOptionType[] = [];
   public value: ILabeledId[] = [];
+
+  public encodeValue() {
+    return this.value.map((o) => { return encodeILabeledId(o); });
+  }
 }
 
 export class PerformersCriterionOption implements ICriterionOption {
diff --git a/ui/v2/src/models/list-filter/criteria/studios.ts b/ui/v2/src/models/list-filter/criteria/studios.ts
index 8a1b82eba..fb5146fd1 100644
--- a/ui/v2/src/models/list-filter/criteria/studios.ts
+++ b/ui/v2/src/models/list-filter/criteria/studios.ts
@@ -1,5 +1,5 @@
 import { CriterionModifier } from "../../../core/generated-graphql";
-import { ILabeledId } from "../types";
+import { ILabeledId, encodeILabeledId } from "../types";
 import {
   Criterion,
   CriterionType,
@@ -22,6 +22,10 @@ export class StudiosCriterion extends Criterion<IOptionType, ILabeledId[]> {
   ];
   public options: IOptionType[] = [];
   public value: ILabeledId[] = [];
+
+  public encodeValue() {
+    return this.value.map((o) => { return encodeILabeledId(o); });
+  }
 }
 
 export class StudiosCriterionOption implements ICriterionOption {
diff --git a/ui/v2/src/models/list-filter/criteria/tags.ts b/ui/v2/src/models/list-filter/criteria/tags.ts
index e942cfdb1..2b109f6c1 100644
--- a/ui/v2/src/models/list-filter/criteria/tags.ts
+++ b/ui/v2/src/models/list-filter/criteria/tags.ts
@@ -1,6 +1,6 @@
 import * as GQL from "../../../core/generated-graphql";
 import { CriterionModifier } from "../../../core/generated-graphql";
-import { ILabeledId } from "../types";
+import { ILabeledId, encodeILabeledId } from "../types";
 import {
   Criterion,
   CriterionType,
@@ -27,6 +27,10 @@ export class TagsCriterion extends Criterion<GQL.AllTagsForFilterAllTags, ILabel
       this.parameterName = "scene_tags";
     }
   }
+
+  public encodeValue() {
+    return this.value.map((o) => { return encodeILabeledId(o); });
+  }
 }
 
 export class TagsCriterionOption implements ICriterionOption {
diff --git a/ui/v2/src/models/list-filter/filter.ts b/ui/v2/src/models/list-filter/filter.ts
index 822ab5875..2716499a4 100644
--- a/ui/v2/src/models/list-filter/filter.ts
+++ b/ui/v2/src/models/list-filter/filter.ts
@@ -271,7 +271,12 @@ export class ListFilterModel {
     this.criteria.forEach((criterion) => {
       const encodedCriterion: any = {};
       encodedCriterion.type = criterion.type;
-      encodedCriterion.value = criterion.value;
+      // #394 - the presence of a # symbol results in the query URL being 
+      // malformed. We could set encode: true in the queryString.stringify
+      // call below, but this results in a URL that gets pretty long and ugly.
+      // Instead, we'll encode the criteria values.
+      encodedCriterion.value = criterion.encodeValue();
+
       encodedCriterion.modifier = criterion.modifier;
       const jsonCriterion = JSON.stringify(encodedCriterion);
       encodedCriteria.push(jsonCriterion);
diff --git a/ui/v2/src/models/list-filter/types.ts b/ui/v2/src/models/list-filter/types.ts
index 403bd9601..0a597afab 100644
--- a/ui/v2/src/models/list-filter/types.ts
+++ b/ui/v2/src/models/list-filter/types.ts
@@ -20,6 +20,12 @@ export interface ILabeledId {
   label: string;
 }
 
+export function encodeILabeledId(o: ILabeledId) {
+  let ret = Object.assign({}, o);
+  ret.label = encodeURIComponent(o.label);
+  return ret;
+}
+
 export interface ILabeledValue {
   label: string;
   value: string;