Attach Screenshot in Bug Report Screen (#578)

* 127 Attach Screenshot in Bug Report Screen * #127 code improvement * #127 Code improvements, and changed the loading... label to sending... * using a statically defined identifier for the new defined ui element * added the RowLabelStyle and improved the design of the view * code improvement * code improvement * making alignment private * synthesised init
2026-11-04 10:33:45 +00:00 · 2023-02-15 17:46:53 +01:00
parent 872c911cb5
commit e91e0513b6
35 changed files with 186 additions and 102 deletions
@@ -52,7 +52,7 @@ final class BugReportCoordinator: CoordinatorProtocol {
            case .cancel:
                self.completion?(.cancel)
            case let .submitStarted(progressTracker):
-                self.startLoading(progressPublisher: progressTracker)
+                self.startLoading(label: ElementL10n.bugReportScreenSending, progressPublisher: progressTracker)
            case .submitFinished:
                self.stopLoading()
                self.completion?(.finish)
@@ -39,4 +39,5 @@ enum BugReportViewAction {
    case cancel
    case submit
    case removeScreenshot
+    case attachScreenshot(UIImage)
 }
@@ -43,6 +43,8 @@ class BugReportViewModel: BugReportViewModelType, BugReportViewModelProtocol {
            await submitBugReport()
        case .removeScreenshot:
            state.screenshot = nil
+        case let .attachScreenshot(image):
+            state.screenshot = image
        }
    }
    
@@ -52,11 +54,18 @@ class BugReportViewModel: BugReportViewModelType, BugReportViewModelProtocol {
        let progressTracker = ProgressTracker()
        callback?(.submitStarted(progressTracker: progressTracker))
        do {
+            var files: [URL] = []
+            if let screenshot = context.viewState.screenshot {
+                let imageURL = URL.temporaryDirectory.appendingPathComponent("Screenshot.png")
+                let pngData = screenshot.pngData()
+                try pngData?.write(to: imageURL)
+                files.append(imageURL)
+            }
            let bugReport = BugReport(text: context.reportText,
                                      includeLogs: context.sendingLogsEnabled,
                                      includeCrashLog: true,
                                      githubLabels: [],
-                                      files: [])
+                                      files: files)
            let result = try await bugReportService.submitBugReport(bugReport,
                                                                    progressListener: progressTracker)
            MXLog.info("SubmitBugReport succeeded, result: \(result.reportUrl)")
@@ -14,6 +14,7 @@
 // limitations under the License.
 //

+import PhotosUI
 import SwiftUI

 struct BugReportScreen: View {
@@ -22,6 +23,8 @@ struct BugReportScreen: View {
    private var horizontalPadding: CGFloat {
        horizontalSizeClass == .regular ? 50 : 16
    }
+
+    @State private var selectedScreenshot: PhotosPickerItem?
    
    @ObservedObject var context: BugReportViewModel.Context
    
@@ -37,14 +40,24 @@ struct BugReportScreen: View {
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { toolbar }
        .interactiveDismissDisabled()
+        .onChange(of: selectedScreenshot) { newItem in
+            Task {
+                guard let data = try? await newItem?.loadTransferable(type: Data.self),
+                      let image = UIImage(data: data)
+                else {
+                    return
+                }
+                context.send(viewAction: .attachScreenshot(image))
+            }
+        }
    }

    /// The main content of the view to be shown in a scroll view.
    var mainContent: some View {
        VStack(alignment: .leading, spacing: 24) {
            descriptionTextEditor
+            attachScreenshot
            sendLogsToggle
-            screenshot
        }
    }
    
@@ -75,7 +88,7 @@ struct BugReportScreen: View {
                .stroke(Color.element.quaternaryContent)
        }
        .frame(maxWidth: .infinity)
-        .frame(height: 300)
+        .frame(height: 220)
        .font(.body)
    }
    
@@ -95,24 +108,40 @@ struct BugReportScreen: View {
                .padding(.horizontal, -8)
        }
    }
-    
+
    @ViewBuilder
-    private var screenshot: some View {
-        if let screenshot = context.viewState.screenshot {
-            ZStack(alignment: .topTrailing) {
-                Image(uiImage: screenshot)
-                    .resizable()
-                    .scaledToFit()
-                    .frame(width: 100)
-                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
-                Button { context.send(viewAction: .removeScreenshot) } label: {
-                    Image(uiImage: Asset.Images.closeCircle.image)
+    private var attachScreenshot: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            PhotosPicker(selection: $selectedScreenshot,
+                         matching: .screenshots,
+                         photoLibrary: .shared()) {
+                HStack(spacing: 16) {
+                    Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
+                        .labelStyle(SettingsRowLabelStyle())
+                    Spacer()
                }
-                .offset(x: 10, y: -10)
-                .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
            }
-            .padding(.vertical, 16)
            .padding(.horizontal, 16)
+            .padding(.vertical, 11)
+            .background(RoundedRectangle(cornerRadius: 14).fill(Color.element.formRowBackground))
+            .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
+            if let screenshot = context.viewState.screenshot {
+                ZStack(alignment: .topTrailing) {
+                    Image(uiImage: screenshot)
+                        .resizable()
+                        .scaledToFit()
+                        .frame(width: 100)
+                        .cornerRadius(4)
+                        .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
+                    Button { context.send(viewAction: .removeScreenshot) } label: {
+                        Image(Asset.Images.closeCircle.name)
+                    }
+                    .offset(x: 10, y: -10)
+                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
+                }
+                .padding(.vertical, 16)
+                .padding(.horizontal, 16)
+            }
        }
    }
    
@@ -140,10 +169,19 @@ struct BugReportScreen: View {

 struct BugReport_Previews: PreviewProvider {
    static let viewModel = BugReportViewModel(bugReportService: MockBugReportService(),
-                                              screenshot: Asset.Images.appLogo.image,
+                                              screenshot: nil,
                                              isModallyPresented: false)
    
    static var previews: some View {
-        BugReportScreen(context: viewModel.context)
+        Group {
+            BugReportScreen(context: BugReportViewModel(bugReportService: MockBugReportService(),
+                                                        screenshot: nil,
+                                                        isModallyPresented: false).context)
+                .previewDisplayName("Without Screenshot")
+            BugReportScreen(context: BugReportViewModel(bugReportService: MockBugReportService(),
+                                                        screenshot: Asset.Images.appLogo.image,
+                                                        isModallyPresented: false).context)
+                .previewDisplayName("With Screenshot")
+        }
    }
 }