Port Movies UI to v2.5 (#397)

* Ignore generated-graphql.tsx in 2.5
* Make movie name mandatory
* Port #395 fix to v2.5
* Differentiate front/back image browse buttons
* Move URL, Synopsis to separate rows
* Fix unknown query params crashing UI

ui/v2.5/src/components/Shared/Select.tsx

@@ -14,7 +14,7 @@ type ValidTypes =
 type Option = { value: string; label: string };
 
 interface ITypeProps {
-  type?: "performers" | "studios" | "tags";
+  type?: "performers" | "studios" | "tags" | "movies";
 }
 interface IFilterProps {
   ids?: string[];
@@ -172,6 +172,8 @@ export const FilterSelect: React.FC<IFilterProps & ITypeProps> = props =>
     <PerformerSelect {...(props as IFilterProps)} />
   ) : props.type === "studios" ? (
     <StudioSelect {...(props as IFilterProps)} />
+  ) : props.type === "movies" ? (
+    <MovieSelect {...(props as IFilterProps)} />
   ) : (
     <TagSelect {...(props as IFilterProps)} />
   );
@@ -247,6 +249,44 @@ export const StudioSelect: React.FC<IFilterProps> = props => {
   );
 };
 
+export const MovieSelect: React.FC<IFilterProps> = props => {
+  const { data, loading } = StashService.useAllMoviesForFilter();
+
+  const normalizedData = data?.allMovies ?? [];
+
+  const items = (normalizedData.length > 0
+    ? [{ name: "None", id: "0" }, ...normalizedData]
+    : []
+  ).map(item => ({
+    value: item.id,
+    label: item.name
+  }));
+
+  const placeholder = props.noSelectionString ?? "Select movie...";
+  const selectedOptions: Option[] = props.ids
+    ? items.filter(item => props.ids?.indexOf(item.value) !== -1)
+    : [];
+
+  const onChange = (selectedItems: ValueType<Option>) => {
+    const selectedIds = getSelectedValues(selectedItems);
+    props.onSelect?.(
+      normalizedData.filter(item => selectedIds.indexOf(item.id) !== -1)
+    );
+  };
+
+  return (
+    <SelectComponent
+      {...props}
+      onChange={onChange}
+      type="studios"
+      isLoading={loading}
+      items={items}
+      placeholder={placeholder}
+      selectedOptions={selectedOptions}
+    />
+  );
+};
+
 export const TagSelect: React.FC<IFilterProps> = props => {
   const [loading, setLoading] = useState(false);
   const [selectedIds, setSelectedIds] = useState<string[]>(props.ids ?? []);