New: Show author names after task name when applicable

(cherry picked from commit 6d552f2a60f44052079b5e8944f5e1bbabac56e0)

Closes #3361

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 createMultiAuthorsSelector from 'Store/Selectors/createMultiAuthorsSelector';
+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.authorIds ?? [])];
+
+  if (body.authorId) {
+    movieIds.push(body.authorId);
+  }
+
+  const authors = useSelector(createMultiAuthorsSelector(movieIds));
+  const sortedAuthors = authors.sort((a, b) =>
+    a.sortName.localeCompare(b.sortName)
+  );
+
+  return (
+    <TableRowCell>
+      <span className={styles.commandName}>
+        {commandName}
+        {sortedAuthors.length ? (
+          <span> - {sortedAuthors.map((a) => a.authorName).join(', ')}</span>
+        ) : null}
+      </span>
+
+      {clientUserAgent ? (
+        <span
+          className={styles.userAgent}
+          title={translate('TaskUserAgentTooltip')}
+        >
+          {translate('From')}: {clientUserAgent}
+        </span>
+      ) : null}
+    </TableRowCell>
+  );
+}