feat: refine UI for uploading wire cells assets - WPB-17604 #3428
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # WireCells/Tests/WireCellsUITests/Components/Previews/WireCellsImageAttachmentPreviewTests.swift # WireCells/Tests/WireCellsUITests/Components/UploadPreviews/UploadDocumentPreviewTests.swift # WireDebug/Sources/WireViewsDebugUI/WireCellsUIDebugView.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/CircularIconButtonStyle.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/DeleteItemButtonViewModifier.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/LocalImagePreview.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/UploadPreviews/UploadDocumentPreview.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/UploadPreviews/UploadImagePreview.swift # WireMessaging/Sources/WireMessagingUI/WireCells/Components/UploadPreviews/UploadVideoPreview.swift # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testColorSchemeVariantsEmptyState.dark.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testColorSchemeVariantsEmptyState.light.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.accessibility1.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.accessibility2.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.accessibility3.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.accessibility4.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.accessibility5.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.large.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.medium.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.small.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.xLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.xSmall.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.xxLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadDocumentPreviewTests/testDynamicTypeVariantsEmptyState.xxxLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testColorSchemeVariantsEmptyState.dark.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testColorSchemeVariantsEmptyState.light.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.accessibility1.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.accessibility2.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.accessibility3.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.accessibility4.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.accessibility5.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.large.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.medium.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.small.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.xLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.xSmall.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.xxLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadImagePreviewTests/testDynamicTypeVariantsEmptyState.xxxLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testColorSchemeVariantsEmptyState.dark.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testColorSchemeVariantsEmptyState.light.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDurationFormatVariantsEmptyState.long-duration.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDurationFormatVariantsEmptyState.short-duration.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.accessibility1.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.accessibility2.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.accessibility3.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.accessibility4.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.accessibility5.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.large.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.medium.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.small.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.xLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.xSmall.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.xxLarge.png # WireMessaging/Tests/WireMessagingTests/Resources/ReferenceImages/UploadVideoPreviewTests/testDynamicTypeVariantsEmptyState.xxxLarge.png # WireMessaging/Tests/WireMessagingTests/WireCells/UITests/Components/UploadPreviews/UploadDocumentPreviewTests.swift # WireMessaging/Tests/WireMessagingTests/WireCells/UITests/Components/UploadPreviews/UploadImagePreviewTests.swift # WireMessaging/Tests/WireMessagingTests/WireCells/UITests/Components/UploadPreviews/UploadVideoPreviewTests.swift
Currently they are not in a target and not running
There was a problem hiding this comment.
Pull Request Overview
This PR refines the UI for uploading wire cells assets by replacing placeholder boxes with actual preview components for different file types. The changes improve the user experience by providing meaningful visual previews instead of generic placeholders.
- Replaces generic placeholder preview components with specific attachment preview components for images, videos, and documents
- Updates the attachments container height to accommodate the refined UI components
- Adds comprehensive test coverage with snapshot tests for various configuration states
Reviewed Changes
Copilot reviewed 118 out of 157 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| InputBar.swift | Increases attachment container height from 74 to 82 pixels |
| ConversationInputBarViewController.swift | Adds WireFoundation import and environment configuration |
| ColorTheme.swift | Makes secondary button color properties public for component access |
| Multiple test files | Removes old placeholder test files and adds new component-specific tests |
| Preview components | Replaces upload preview components with wire cells attachment preview components |
| AttachmentsCarousel.swift | Updates carousel to use new preview components with proper styling |
| FileIcon.swift | Adds file type icon mapping functionality |
| Resource files | Adds file icon assets and reference images for snapshot tests |
| } else if value.conforms(to: .audio) { | ||
| self = .audio(samples: []) | ||
| self = .video(thumbnail: nil) // FIXME: [WPB-19267] Set video thumbnail data | ||
| } else if value.conforms(to: .audio, ) { |
There was a problem hiding this comment.
There is an extra comma after .audio which will cause a compilation error. Remove the trailing comma.
Suggested change
| } else if value.conforms(to: .audio, ) { | |
| } else if value.conforms(to: .audio) { |
Copilot uses AI. Check for mistakes.
Test Results2 116 tests 2 088 ✅ 3m 8s ⏱️ Results for commit adcd6d7. |
samwyndham
requested review from
jullianm,
a team and
caldrian
and removed request for
a team
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
This PR refines the UI previews that are shown when uploading assets. Previously only placeholder boxes were shown.
ScreenRecording_08-05-2025.17-00-40_1.mov
Specifically it:
UploadDocumentPreviewhas been replaced withWireCellsImageAttachmentPreview. The naming convention has changed because this same type will likely also be used elsewhere, not just for uploads. See the snapshots prefixedWireCells*to understand how these previews look.AttachmentsCarousel.swiftto have correct styling and to make use of the above previews.UTTypeand a files extension.Additionally this PR moves
channel historyrelated tests to a correct location.They had accidentally been left in a dead folder and were not part of any test target.My apologies for the size of this PR.
Testing
Play around with the swift UI previews in
AttachmentsCarousel.swiftChecklist
[WPB-XXX].