New: Show movie titles after task name when applicable

(cherry picked from commit 6d552f2a60f44052079b5e8944f5e1bbabac56e0)

Closes #9837

frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { CommandBody } from 'Commands/Command';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import createMultiMoviesSelector from 'Store/Selectors/createMultiMoviesSelector';
+import translate from 'Utilities/String/translate';
+import styles from './QueuedTaskRowNameCell.css';
+
+export interface QueuedTaskRowNameCellProps {
+  commandName: string;
+  body: CommandBody;
+  clientUserAgent?: string;
+}
+
+export default function QueuedTaskRowNameCell(
+  props: QueuedTaskRowNameCellProps
+) {
+  const { commandName, body, clientUserAgent } = props;
+  const movieIds = [...(body.movieIds ?? [])];
+
+  if (body.movieId) {
+    movieIds.push(body.movieId);
+  }
+
+  const movies = useSelector(createMultiMoviesSelector(movieIds));
+  const sortedMovies = movies.sort((a, b) =>
+    a.sortTitle.localeCompare(b.sortTitle)
+  );
+
+  return (
+    <TableRowCell>
+      <span className={styles.commandName}>
+        {commandName}
+        {sortedMovies.length ? (
+          <span> - {sortedMovies.map((m) => m.title).join(', ')}</span>
+        ) : null}
+      </span>
+
+      {clientUserAgent ? (
+        <span
+          className={styles.userAgent}
+          title={translate('TaskUserAgentTooltip')}
+        >
+          {translate('From')}: {clientUserAgent}
+        </span>
+      ) : null}
+    </TableRowCell>
+  );
+}