feat(ui): show queue item origin in queue list

invokeai/frontend/web/public/locales/en.json

@@ -326,6 +326,10 @@
         "canceled": "Canceled",
         "completedIn": "Completed in",
         "batch": "Batch",
+        "origin": "Origin",
+        "originCanvas": "Canvas",
+        "originWorkflows": "Workflows",
+        "originOther": "Other",
         "batchFieldValues": "Batch Field Values",
         "item": "Item",
         "session": "Session",
@@ -1563,7 +1567,7 @@
         "copyToClipboard": "Copy to Clipboard",
         "cursorPosition": "Cursor Position",
         "darkenOutsideSelection": "Darken Outside Selection",
-        "discardAll": "Discard All",
+        "discardAll": "Discard All & Cancel Pending Generations",
         "discardCurrent": "Discard Current",
         "downloadAsImage": "Download As Image",
         "enableMask": "Enable Mask",

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx

@@ -1,6 +1,7 @@
 import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library';
 import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
+import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
 import type { MouseEvent } from 'react';
@@ -50,6 +51,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
   }, [item]);
 
   const isCanceled = useMemo(() => ['canceled', 'completed', 'failed'].includes(item.status), [item.status]);
+  const originText = useOriginText(item.origin);
 
   const icon = useMemo(() => <PiXBold />, []);
   return (
@@ -69,6 +71,11 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
         <Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center" flexShrink={0}>
           <QueueStatusBadge status={item.status} />
         </Flex>
+        <Flex w={COLUMN_WIDTHS.origin} flexShrink={0}>
+          <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" alignItems="center">
+            {originText}
+          </Text>
+        </Flex>
         <Flex w={COLUMN_WIDTHS.time} alignItems="center" flexShrink={0}>
           {executionTime || '-'}
         </Flex>

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonGroup, Flex, Heading, Spinner, Text } from '@invoke-ai/ui-library';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
+import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
@@ -16,7 +17,7 @@ type Props = {
 };
 
 const QueueItemComponent = ({ queueItemDTO }: Props) => {
-  const { session_id, batch_id, item_id } = queueItemDTO;
+  const { session_id, batch_id, item_id, origin } = queueItemDTO;
   const { t } = useTranslation();
   const { cancelBatch, isLoading: isLoadingCancelBatch, isCanceled } = useCancelBatch(batch_id);
 
@@ -24,6 +25,8 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
 
   const { data: queueItem } = useGetQueueItemQuery(item_id);
 
+  const originText = useOriginText(origin);
+
   const statusAndTiming = useMemo(() => {
     if (!queueItem) {
       return t('common.loading');
@@ -50,6 +53,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
         h={20}
       >
         <QueueItemData label={t('queue.status')} data={statusAndTiming} />
+        <QueueItemData label={t('queue.origin')} data={originText} />
         <QueueItemData label={t('queue.item')} data={item_id} />
         <QueueItemData label={t('queue.batch')} data={batch_id} />
         <QueueItemData label={t('queue.session')} data={session_id} />

invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx

@@ -22,6 +22,9 @@ const QueueListHeader = () => {
       <Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
         <Text variant="subtext">{t('queue.status')}</Text>
       </Flex>
+      <Flex ps={0.5} w={COLUMN_WIDTHS.origin} alignItems="center">
+        <Text variant="subtext">{t('queue.origin')}</Text>
+      </Flex>
       <Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
         <Text variant="subtext">{t('queue.time')}</Text>
       </Flex>

invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts

@@ -3,6 +3,7 @@ export const COLUMN_WIDTHS = {
   statusBadge: '5.7rem',
   statusDot: 2,
   time: '4rem',
+  origin: '5rem',
   batchId: '5rem',
   fieldValues: 'auto',
   actions: 'auto',

invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts

@@ -0,0 +1,16 @@
+import { useTranslation } from 'react-i18next';
+import type { SessionQueueItemDTO } from 'services/api/types';
+
+export const useOriginText = (origin: SessionQueueItemDTO['origin']) => {
+  const { t } = useTranslation();
+
+  if (origin === 'canvas') {
+    return t('queue.originCanvas');
+  }
+
+  if (origin === 'workflows') {
+    return t('queue.originWorkflows');
+  }
+
+  return t('queue.originOther');
+};