refactor(attachments): match FE to the updated response for submission attachments TASK-1778 (#5671)

### 💭 Notes

Update to match #5642 

Updated via changing the `SubmissionAttachment` type in
`dataInterface.ts`. Compiler blows up and I cleaned up the mess.

I updated the mock responses by copying the `xform_id_string` then
changed the last character. Seems more reasonable and better solution
than turning the old mocked `id` to a stringified version of the
integer.

`npm run test` and `npx jest --config ./jsapp/jest/unit.config.ts`
passes.

### 👀 Preview steps
<!-- Delete this section if behavior can't change. -->
<!-- If behavior changes or merely may change, add a preview of a
minimal happy path. -->

🟢 Make sure everywhere that needed this update "works as it should" 🤷 

AFAIK it seems to be these areas:
- Attachment dropdown (I believe this is broken in the single submission
modal as of this edit)
- Attachment dropdown stories
- Media cells
- Single submission modal
- Single submission view sidebar
- Form gallery

Author: duvld

jsapp/js/attachments/AttachmentActionsDropdown.mocks.ts

@@ -309,9 +309,7 @@ export const assetWithImageSubmission: SubmissionResponse = {
       mimetype: 'image/jpeg',
       filename:
         'zefir/attachments/1c0496e69e624ab6a265316eed7127c1/d861c7c7-9c49-42cb-8652-cbe3b6c148ad/the-origin-of-the-world-12_21_57.jpg',
-      instance: 67,
-      xform: 21,
-      id: 22,
+      uid: 'aALUCUEKcgKk28owQo3LrA',
       question_xpath: 'Add_a_picture',
     },
   ],

jsapp/js/attachments/AttachmentActionsDropdown.stories.tsx

@@ -6,7 +6,7 @@ import { assetWithImage, assetWithImageSubmission } from './AttachmentActionsDro
 const mockQueryClient = new QueryClient()
 const mockAsset = assetWithImage
 const mockSubmission = assetWithImageSubmission
-const mockAttachmentId = assetWithImageSubmission._attachments[0].id
+const mockAttachmentUid = assetWithImageSubmission._attachments[0].uid
 
 const meta: Meta<typeof AttachmentActionsDropdown> = {
   title: 'Components/AttachmentActionsDropdown',
@@ -18,7 +18,7 @@ const meta: Meta<typeof AttachmentActionsDropdown> = {
       description:
         'To see what happens when attachment is deleted, please add `is_deleted=true` flag to the attachment object in the data.',
     },
-    attachmentId: { control: 'number' },
+    attachmentUid: { control: 'text' },
     onDeleted: { action: 'onDeleted' },
   },
   args: {},
@@ -37,7 +37,7 @@ export default meta
 export const Default: StoryObj<typeof AttachmentActionsDropdown> = {
   args: {
     asset: mockAsset,
-    attachmentId: mockAttachmentId,
+    attachmentUid: mockAttachmentUid,
     submissionData: mockSubmission,
     onDeleted: () => console.log('Attachment deleted'),
   },

jsapp/js/attachments/AttachmentActionsDropdown.tsx

@@ -14,7 +14,7 @@ import { useRemoveAttachment } from './attachmentsQuery'
 interface AttachmentActionsDropdownProps {
   asset: AssetResponse
   submissionData: SubmissionResponse
-  attachmentId: number
+  attachmentUid: string
   /**
    * Being called after attachment was deleted succesfully. Is meant to be used
    * by parent component to reflect this change in the data it holds, and
@@ -33,7 +33,7 @@ export default function AttachmentActionsDropdown(props: AttachmentActionsDropdo
   const removeAttachmentMutation = useRemoveAttachment(props.asset.uid, props.submissionData['meta/rootUuid'])
   const isFeatureEnabled = useFeatureFlag(FeatureFlag.removingAttachmentsEnabled)
 
-  const attachment = props.submissionData._attachments.find((item) => item.id === props.attachmentId)
+  const attachment = props.submissionData._attachments.find((item) => item.uid === props.attachmentUid)
   if (!attachment) {
     return null
   }
@@ -47,7 +47,7 @@ export default function AttachmentActionsDropdown(props: AttachmentActionsDropdo
     setIsDeletePending(true)
 
     try {
-      await removeAttachmentMutation.mutateAsync(String(attachment.id))
+      await removeAttachmentMutation.mutateAsync(String(attachment.uid))
       setIsDeleteModalOpen(false)
       notify(t('##Attachment_type## deleted').replace('##Attachment_type##', attachmentTypeName))
       props.onDeleted()

jsapp/js/components/formGallery/formGallery.component.tsx

@@ -121,11 +121,11 @@ export default function FormGallery(props: FormGalleryProps) {
         <bem.GalleryGrid>
           {attachments.map((attachment) =>
             attachment.is_deleted ? (
-              <Center key={attachment.id} title={attachment.filename} className='gallery-grid-deleted-attachment'>
+              <Center key={attachment.uid} title={attachment.filename} className='gallery-grid-deleted-attachment'>
                 <DeletedAttachment />
               </Center>
             ) : (
-              <a key={attachment.id} href={attachment.download_url} target='_blank'>
+              <a key={attachment.uid} href={attachment.download_url} target='_blank'>
                 <img src={attachment.download_url} alt={attachment.filename} width='150' loading='lazy' />
               </a>
             ),

jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.tsx

@@ -54,7 +54,7 @@ export default function SidebarSubmissionMedia(props: SidebarSubmissionMediaProp
                 <AttachmentActionsDropdown
                   asset={props.asset}
                   submissionData={store.data.submissionData}
-                  attachmentId={attachment.id}
+                  attachmentUid={attachment.uid}
                   onDeleted={() => {
                     // TODO: this might be done with a bit more elegant UX, as calling the function causes a whole page
                     // spinner to appear. I feel like redoing `singleProcessingStore` in a `react-query` way would

jsapp/js/components/submissions/mediaCell.tsx

@@ -125,7 +125,7 @@ class MediaCell extends React.Component<MediaCellProps, {}> {
           <AttachmentActionsDropdown
             asset={asset}
             submissionData={submissionData}
-            attachmentId={attachment.id}
+            attachmentUid={attachment.uid}
             onDeleted={() => {
               // Trigger refresh on the Data Table and close the modal
               actions.resources.refreshTableSubmissions()

jsapp/js/components/submissions/submissionDataTable.tsx

@@ -36,7 +36,7 @@ interface SubmissionDataTableProps {
   submissionData: SubmissionResponse
   translationIndex: number
   showXMLNames?: boolean
-  onAttachmentDeleted: (attachmentId: number) => void
+  onAttachmentDeleted: (attachmentUid: string) => void
 }
 
 /**
@@ -270,9 +270,9 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
         <AttachmentActionsDropdown
           asset={this.props.asset}
           submissionData={this.props.submissionData}
-          attachmentId={attachment.id}
+          attachmentUid={attachment.uid}
           onDeleted={() => {
-            this.props.onAttachmentDeleted(attachment.id)
+            this.props.onAttachmentDeleted(attachment.uid)
           }}
         />
       )

jsapp/js/components/submissions/submissionModal.tsx

@@ -435,12 +435,12 @@ export default class SubmissionModal extends React.Component<SubmissionModalProp
     return undefined
   }
 
-  handleDeletedAttachment(attachmentId: number) {
+  handleDeletedAttachment(attachmentUid: string) {
     if (this.state.submission) {
       // Override the attachment object in memory to mark it as deleted (without
       // making an API call for fresh submission data)
       this.setState({
-        submission: markAttachmentAsDeleted(this.state.submission, attachmentId),
+        submission: markAttachmentAsDeleted(this.state.submission, attachmentUid),
       })
 
       // Prompt table to refresh submission list

jsapp/js/components/submissions/submissionUtils.mocks.ts

@@ -1760,11 +1760,9 @@ export const everythingSurveySubmission = {
         'http://kc.kobo.local/media/original?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2FIMG_3619-13_33_22.MOV',
       filename:
         'kobo/attachments/712e5fb8d7364482a57c60df876c57fb/fdd252ee-860a-426c-be90-cbbf61787cb9/IMG_3619-13_33_22.MOV',
-      instance: 25,
+      uid: 'aXPSbtQcYDm8mcJuVZTUhI',
       download_medium_url:
         'http://kc.kobo.local/media/medium?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2FIMG_3619-13_33_22.MOV',
-      id: 6,
-      xform: 18,
       question_xpath: 'A_video',
     },
     {
@@ -1777,11 +1775,9 @@ export const everythingSurveySubmission = {
         'http://kc.kobo.local/media/original?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2F07.+Crazy+Love-13_32_31.mp3',
       filename:
         'kobo/attachments/712e5fb8d7364482a57c60df876c57fb/fdd252ee-860a-426c-be90-cbbf61787cb9/07. Crazy Love-13_32_31.mp3',
-      instance: 25,
       download_medium_url:
         'http://kc.kobo.local/media/medium?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2F07.+Crazy+Love-13_32_31.mp3',
-      id: 5,
-      xform: 18,
+      uid: 'aXPSbtQcYDm8mcJuVZTUhQ',
       question_xpath: 'Voice_password',
     },
     {
@@ -1794,11 +1790,9 @@ export const everythingSurveySubmission = {
         'http://kc.kobo.local/media/original?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2Fzamki-13_35_5.txt',
       filename:
         'kobo/attachments/712e5fb8d7364482a57c60df876c57fb/fdd252ee-860a-426c-be90-cbbf61787cb9/zamki-13_35_5.txt',
-      instance: 25,
       download_medium_url:
         'http://kc.kobo.local/media/medium?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2Fzamki-13_35_5.txt',
-      id: 4,
-      xform: 18,
+      uid: 'aXPSbtQcYDm8mcJuVZTUhE',
       question_xpath: 'We_need_your_CV',
     },
     {
@@ -1811,11 +1805,9 @@ export const everythingSurveySubmission = {
         'http://kc.kobo.local/media/original?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2F784397e28b5041d59bef15d5d0b2d0bf--cutaway-dio-13_31_48.jpg',
       filename:
         'kobo/attachments/712e5fb8d7364482a57c60df876c57fb/fdd252ee-860a-426c-be90-cbbf61787cb9/784397e28b5041d59bef15d5d0b2d0bf--cutaway-dio-13_31_48.jpg',
-      instance: 25,
       download_medium_url:
         'http://kc.kobo.local/media/medium?media_file=kobo%2Fattachments%2F712e5fb8d7364482a57c60df876c57fb%2Ffdd252ee-860a-426c-be90-cbbf61787cb9%2F784397e28b5041d59bef15d5d0b2d0bf--cutaway-dio-13_31_48.jpg',
-      id: 3,
-      xform: 18,
+      uid: 'aXPSbtQcYDm8mcJuVZTUhR',
       question_xpath: 'Selfportrait',
     },
   ],
@@ -2359,9 +2351,7 @@ export const submissionWithAttachmentsWithUnicode = {
       mimetype: 'image/jpeg',
       filename:
         'kobo/attachments/45748fd461814880bd9545c8c8827d78/4cfa16e8-f29b-41a9-984c-2bf7fe05064b/Un_ete_au_Quebec_Canada-19_41_32.jpg',
-      instance: 18,
-      xform: 4,
-      id: 13,
+      uid: 'azCy24QgjprZGrdvbHQXrA',
       question_xpath: 'A_picture',
     },
   ],
@@ -3147,9 +3137,7 @@ export const submissionWithSupplementalDetails = {
       download_small_url: 'http://kf.kobo.local/api/v2/assets/aDDywpeYGnvuDLTeiveyxZ/data/3/attachments/3/',
       mimetype: 'audio/mpeg',
       filename: 'kobo/attachments/c71e63f6a...b9a05/8BP076-09-rushjet1-unknown_sector-12_42_20.mp3',
-      instance: 3,
-      xform: 1,
-      id: 3,
+      uid: 'aDDywpeYGnvuDLTeiveyxV',
       question_xpath: 'Secret_password_as_an_audio_file',
     },
   ],
@@ -3277,9 +3265,7 @@ export const submissionWithNestedSupplementalDetails = {
       mimetype: 'audio/x-m4a',
       filename:
         'zefir/attachments/54445e08ab6d4011ae648adc6ae8c9bc/64c7fe7c-4542-472d-8eab-6e42f68c7a0b/test-spoken-16_49_36.m4a',
-      instance: 77,
-      xform: 27,
-      id: 70,
+      uid: 'aw6mhS4KnoG5E8EbQp9KgP',
       question_xpath: 'level_a/level_b/level_c/sounds',
     },
   ],

jsapp/js/components/submissions/submissionUtils.tsx

@@ -757,14 +757,14 @@ function appendTextToPathAtLevel(path: string, level: string, stringToAdd: strin
  */
 export function markAttachmentAsDeleted(
   submissionData: SubmissionResponse,
-  targetAttachmentId: number,
+  targetAttachmentUid: string,
 ): SubmissionResponse {
   const data = clonedeep(submissionData)
-  const targetAttachment = data._attachments.find((item) => item.id === targetAttachmentId)
+  const targetAttachment = data._attachments.find((item) => item.uid === targetAttachmentUid)
 
   data._attachments.forEach((attachment) => {
     if (
-      attachment.id === targetAttachment?.id &&
+      attachment.uid === targetAttachment?.uid &&
       attachment.question_xpath === targetAttachment?.question_xpath &&
       attachment.filename === targetAttachment?.filename
     ) {