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/Scenes/SceneDetails/SceneMovieTable.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import * as GQL from "src/core/generated-graphql";
+import { StashService } from "src/core/StashService";
+import { Form } from "react-bootstrap";
+
+type ValidTypes = GQL.SlimMovieDataFragment;
+
+export type MovieSceneIndexMap = Map<string, string | undefined>;
+
+export interface IProps {
+  movieSceneIndexes: MovieSceneIndexMap;
+  onUpdate: (value: MovieSceneIndexMap) => void;
+}
+
+export const SceneMovieTable: React.FunctionComponent<IProps> = (
+  props: IProps
+) => {
+  const { data } = StashService.useAllMoviesForFilter();
+
+  const items = !!data && !!data.allMovies ? data.allMovies : [];
+  let itemsFilter: ValidTypes[] = [];
+
+  if (!!props.movieSceneIndexes && !!items) {
+    props.movieSceneIndexes.forEach((index, movieId) => {
+      itemsFilter = itemsFilter.concat(items.filter(x => x.id === movieId));
+    });
+  }
+
+  const storeIdx = itemsFilter.map(movie => {
+    return props.movieSceneIndexes.get(movie.id);
+  });
+
+  const updateFieldChanged = (movieId: string, value: string) => {
+    const newMap = new Map(props.movieSceneIndexes);
+    newMap.set(movieId, value);
+    props.onUpdate(newMap);
+  };
+
+  function renderTableData() {
+    return (
+      <tbody>
+        {itemsFilter!.map((item, index: number) => (
+          <tr key={item.toString()}>
+            <td>{item.name} </td>
+            <td />
+            <td>Scene number:</td>
+            <td>
+              <Form.Control
+                as="select"
+                className="input-control"
+                value={storeIdx[index] ?? ""}
+                onChange={(e: React.FormEvent<HTMLInputElement>) =>
+                  updateFieldChanged(item.id, e.currentTarget.value)
+                }
+              >
+                {["", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"].map(
+                  opt => (
+                    <option value={opt} key={opt}>
+                      {opt}
+                    </option>
+                  )
+                )}
+              </Form.Control>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    );
+  }
+
+  return (
+    <div>
+      <table className="movie-table">{renderTableData()}</table>
+    </div>
+  );
+};