kobotoolbox / kpi / 30437065604

82%

master: 76%

push

github

refactor(dataTable): mantineify table media preview DEV-2062 (#7289)

### 📣 Summary

Migrates Table Media Preview modal and Text Modal to the Mantine modal
flow, removes the legacy BigModal path for table media preview, and adds
stable offline-safe DataTableCell stories for media behaviors.

### 💭 Notes

Changes here:
- Removed legacy code from `bigModal.js` and `constants.ts`.
- New TableMediaPreview module
  - Preview body component in `TableMediaPreview.tsx`
  - Modal title component in `TableMediaPreviewModalTitle.tsx`
  - Shared opener in `openTableMediaPreviewModal.tsx`
- Shared utility for submission position label in
`tableMediaPreview.utils.ts`
  - Module styles in `TableMediaPreview.module.scss`
  - Exports in `index.ts`
- `MediaCell.tsx` and `TextModalCell.tsx` now both use new
`TableMediaPreview`
- `DataTableCell.stories.tsx` has few new stories and now correctly
opens the modal when clicked (provider was missing)

### 👀 Preview steps

1. ℹ️ Have a project with `text`, `image`, `audio` and `video` questions
and a submission. Also a transcript, translation and qual question
response.
2. Go to Project → Data → Table.
3. Use the "northeast arrow" button in each of the cells:
  - text response
  - image response
  - video response
  - transcript
  - translation
  - qual question response
4. Open Storybook and review DataTableCell stories for PlainText,
AttachmentMissing, ImageAttachment, AudioAttachment, and
VideoAttachment; confirm the modal can be opened for the ones that have
the "northeast arrow" button

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

9550 of 12864 branches covered (74.24%)

30908 of 37708 relevant lines covered (81.97%)

5.51 hits per line