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-03 06:31:27 +00:00 · 2023-02-15 17:46:53 +01:00
parent 872c911cb5
commit e91e0513b6
35 changed files with 186 additions and 102 deletions
@@ -82,7 +82,9 @@
 "bug_report_screen_description" = "Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can.";
 "bug_report_screen_include_logs" = "Send logs to help";
 "bug_report_screen_logs_description" = "To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.";
-
+"bug_report_screen_attach_screenshot" = "Attach Screenshot";
+"bug_report_screen_edit_screenshot" = "Edit Screenshot";
+"bug_report_screen_sending" = "Sending...";

 // Session verification
 /*
@@ -16,12 +16,18 @@ extension ElementL10n {
  public static let actionConfirm = ElementL10n.tr("Untranslated", "action_confirm")
  /// Match
  public static let actionMatch = ElementL10n.tr("Untranslated", "action_match")
+  /// Attach Screenshot
+  public static let bugReportScreenAttachScreenshot = ElementL10n.tr("Untranslated", "bug_report_screen_attach_screenshot")
  /// Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can.
  public static let bugReportScreenDescription = ElementL10n.tr("Untranslated", "bug_report_screen_description")
+  /// Edit Screenshot
+  public static let bugReportScreenEditScreenshot = ElementL10n.tr("Untranslated", "bug_report_screen_edit_screenshot")
  /// Send logs to help
  public static let bugReportScreenIncludeLogs = ElementL10n.tr("Untranslated", "bug_report_screen_include_logs")
  /// To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.
  public static let bugReportScreenLogsDescription = ElementL10n.tr("Untranslated", "bug_report_screen_logs_description")
+  /// Sending...
+  public static let bugReportScreenSending = ElementL10n.tr("Untranslated", "bug_report_screen_sending")
  /// Report a bug
  public static let bugReportScreenTitle = ElementL10n.tr("Untranslated", "bug_report_screen_title")
  /// %@ iOS
@@ -32,6 +32,7 @@ struct A11yIdentifiers {
        let screenshot = "bug_report-screenshot"
        let removeScreenshot = "bug_report-remove_screenshot"
        let send = "bug_report-send"
+        let attachScreenshot = "bug-report-attach_screenshot"
    }
    
    struct ChangeServer {
@@ -26,7 +26,6 @@ struct SettingsDefaultRow: View {
    
    // MARK: Private
    
-    @ScaledMetric private var menuIconSize = 30.0
    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)

    // MARK: Views
@@ -34,16 +33,12 @@ struct SettingsDefaultRow: View {
    var body: some View {
        Button(action: action) {
            HStack(spacing: 16) {
-                image
-                    .foregroundColor(.element.systemGray)
-                    .padding(4)
-                    .background(Color.element.systemGray6)
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
-                    .frame(width: menuIconSize, height: menuIconSize)
-                
-                Text(title)
-                    .font(.element.body)
-                    .foregroundColor(.element.primaryContent)
+                Label(title: {
+                    Text(title)
+                }, icon: {
+                    image
+                })
+                .labelStyle(SettingsRowLabelStyle())
                
                Spacer()
                
@@ -0,0 +1,37 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct SettingsRowLabelStyle: LabelStyle {
+    @ScaledMetric private var menuIconSize = 30.0
+    
+    var alignment: VerticalAlignment = .firstTextBaseline
+
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(alignment: alignment, spacing: 16) {
+            configuration.icon
+                .foregroundColor(.element.secondaryContent)
+                .padding(4)
+                .background(Color.element.formBackground)
+                .clipShape(RoundedRectangle(cornerRadius: 8))
+                .frame(width: menuIconSize, height: menuIconSize)
+            configuration.title
+                .font(.element.body)
+                .foregroundColor(.element.primaryContent)
+        }
+    }
+}
@@ -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")
+        }
    }
 }
@@ -17,7 +17,6 @@
 import SwiftUI

 struct RoomDetailsScreen: View {
-    @ScaledMetric private var menuIconSize = 30.0
    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)

    @ObservedObject var context: RoomDetailsViewModel.Context
@@ -102,16 +101,8 @@ struct RoomDetailsScreen: View {
                context.send(viewAction: .processTapPeople)
            } label: {
                HStack {
-                    Image(systemName: "person")
-                        .foregroundColor(.element.secondaryContent)
-                        .padding(4)
-                        .background(Color.element.formBackground)
-                        .cornerRadius(8)
-                        .frame(width: menuIconSize, height: menuIconSize)
-                    
-                    Text(ElementL10n.bottomActionPeople)
-                        .foregroundColor(.element.primaryContent)
-                        .font(.body)
+                    Label(ElementL10n.bottomActionPeople, systemImage: "person")
+                        .labelStyle(SettingsRowLabelStyle())
                    
                    Spacer()
                    
@@ -138,22 +129,17 @@ struct RoomDetailsScreen: View {
    private var securitySection: some View {
        Section {
            HStack(alignment: .top) {
-                Image(systemName: "lock.shield")
-                    .foregroundColor(.element.secondaryContent)
-                    .padding(4)
-                    .background(Color.element.formBackground)
-                    .cornerRadius(8)
-                    .frame(width: menuIconSize, height: menuIconSize)
-                
-                VStack(alignment: .leading, spacing: 2) {
-                    Text(ElementL10n.encryptionEnabled)
-                        .foregroundColor(.element.primaryContent)
-                        .font(.element.body)
-                    
-                    Text(ElementL10n.encryptionEnabledTileDescription)
-                        .foregroundColor(.element.secondaryContent)
-                        .font(.element.footnote)
-                }
+                Label(title: {
+                    VStack(alignment: .leading, spacing: 2) {
+                        Text(ElementL10n.encryptionEnabled)
+                        Text(ElementL10n.encryptionEnabledTileDescription)
+                            .foregroundColor(.element.secondaryContent)
+                            .font(.element.footnote)
+                    }
+                }, icon: {
+                    Image(systemName: "lock.shield")
+                })
+                .labelStyle(SettingsRowLabelStyle(alignment: .top))
                
                Spacer()
                
@@ -20,7 +20,6 @@ struct SettingsScreen: View {
    @State private var showingLogoutConfirmation = false

    @ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
-    @ScaledMetric private var menuIconSize = 30.0
    
    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
    
@@ -189,7 +189,7 @@ class BugReportService: NSObject, BugReportServiceProtocol {
        var zippedFiles: [URL] = []

        for url in filesToCompress {
-            let zippedFileURL = URL(fileURLWithPath: NSTemporaryDirectory())
+            let zippedFileURL = URL.temporaryDirectory
                .appendingPathComponent(url.lastPathComponent)

            //  remove old zipped file if exists
@@ -33,7 +33,7 @@ class BugReportUITests: XCTestCase {
        let sendingLogsToggle = app.switches[A11yIdentifiers.bugReportScreen.sendLogs]
        XCTAssert(sendingLogsToggle.exists)
        XCTAssertFalse(sendingLogsToggle.isOn)
-        
+
        app.assertScreenshot(.bugReport, step: 1)
    }

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fd7fe8c3cbd9a73717651dc206734d7c68fa60f0c854a8a6cd53e11b2446c1e9
-size 108261
+oid sha256:840363fb8bda7290d75aad9dd2bfee3583299aca1682a18d9348c17cdff495de
+size 115274
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:da6f2865d45eff4ba6cc6b28954152184fa2b1e0b360b680789e5fc52156800d
-size 109266
+oid sha256:f542e446145a1ce909d977120e5d32cf172d6adb7bfd54ebb7f7b0428bb94f1d
+size 115114
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0a8b60268e5024ab15548a0de7585f1492d18cbbc5ff02344d82cd7cb468609c
-size 163777
+oid sha256:7a370935dd82dde19d887038b076f155273e0dfaa3af6c9fa33bcfb97b825eb6
+size 169111
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2267708bec43c594b550ee43a9871ed6efa36c185fa12b73232c6ad508274328
-size 165403
+oid sha256:dc4a8c344dd80070277035e811b84b31ae9050d4f11bb22e507e0cf402cc5e56
+size 171658
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:25f7467d86397206aa24ed89c570cd3449356a915f773f8753cc99a65080ceac
-size 115806
+oid sha256:e80577c2f9a41da888e211e5948169c7b8449f6da79403f2787f98e4f9532819
+size 122129
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e0efbca15ea0e8f2d69e421aa71623837919895b0e206e02b45944de504200b2
-size 140892
+oid sha256:52c8c00c02ba4da3ea07981704182f02e9e3981befd6f7c7ade1b51f7ce3187b
+size 151905
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c8ccf539c26dd51858cd0ae66a7e42a8e3ac2dbe41832a0df6825a2a804d04f
-size 141237
+oid sha256:a28aa63ec2b888633e8898bb7c8d91ae784da1569d3faa45f29a209d6dea5354
+size 151771
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c31dfc2666606276181af62a131e0e1199f5b75b72725817766d6cc0fc25375
-size 161533
+oid sha256:add279f6f7f8f9d15941d2b9b3c1046165bb7f5df30d964a50763a1fbbc59c05
+size 165889
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59221f632aef10a110775bd24aba1717feb900dde5168f79f72c42080b539943
-size 166287
+oid sha256:31791083395412c78e885160659df1ba7ba1a0cc2bc927fdc7e61b09f1cb6f6c
+size 169888
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:53a27c874a017b7391fdf2df70fe3c2744ce9700683dcac2851fd8de46738c0b
-size 148351
+oid sha256:219bdb41bad2e50060ffb9b9052626ac77763a4e80e3f0a7e90e0f8a881f6f71
+size 158742
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e7e6ee6f769c67df4b6e2505f6aab85241bfa38ec5a8d3704d8de83be54d169f
-size 107687
+oid sha256:e61714b5faf17d54f5e1053fb6d4062dae065caa59987fb6a35a66652dabc317
+size 114745
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7cdf78ee1d8da820ad8ab7d9055f8ab3e0811aacacc56d93eca7cbe75d038066
-size 108651
+oid sha256:e66ec0e654b0c209b675142bd4acec0220b65d088822c35c14521ab57cec0b46
+size 114579
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b8dd0c7905a101a5cd98bb2bc95a538453b8fb9532cf4eba75e48239b8d67c1d
-size 163129
+oid sha256:e2771a646e6581abab1c86c79ae463c817cc61f8eef45e23dbccf856fa69286c
+size 168402
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7ad3e77c76fea231adf9340f4ca0208eadbae56f4b4b7aa6bb1c2ab697e9525c
-size 164851
+oid sha256:11073c8e77147d476713c92ae2209dde2593bd1e52f8444790eaca040d978f07
+size 171000
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f99a41d423d6cdf87c690e5278390903bb554aa08d8d3e823279273ac50dda25
-size 115672
+oid sha256:bb1983b49b4ebd61e4717dcd8a500307839d3e4a96d24afb4e37f236c083da10
+size 121992
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4451410930f771a8943773939648db0c13a98fceeabfbe4e85803f5d4fa3e90f
-size 139842
+oid sha256:9e910c1fb0e2e449b999f08c0e38f0fc1228506e903d22d53057687a3e1c6125
+size 148744
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b74030d8442522efd6bc6ebd019b5c4260b24124e5b3c9b333a6d3bd2614a46e
-size 139825
+oid sha256:dc190d5cda1f47929fb14fec12ff81a330d66e8ce4bca7846d896bc598410918
+size 150772
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ece22c9e46b3dd2f1b2f62cfd2617face59c06d46da81caec2b0a07fbe3b286c
-size 160607
+oid sha256:b0668c40ede3181a2ff1091e4572908ed61549ca0fca4aee29b2f7ce4b5323bb
+size 164888
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1fabb5f82e3f12e01435c6f48d618d83c049ee6437a7c59580fc9c6319d3317d
-size 165314
+oid sha256:5a5ee287e5f6d416e57105c6418f8c5346153af63027a7fb9f1443b8fe944a39
+size 168860
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6a45deead94f995386a1bf034bee68f5741f9fe2d06ab8e7abbfe97254a7ca65
-size 148195
+oid sha256:8e01515371cf24c0c527c2728d1a15090ff7162faa22b7d2dacfad15818b6aee
+size 158582
@@ -37,4 +37,13 @@ class BugReportViewModelTests: XCTestCase {
        try await Task.sleep(nanoseconds: 100_000_000)
        XCTAssertNil(context.viewState.screenshot)
    }
+
+    func testAttachScreenshot() async throws {
+        let viewModel = BugReportViewModel(bugReportService: MockBugReportService(), screenshot: nil, isModallyPresented: false)
+        let context = viewModel.context
+        XCTAssertNil(context.viewState.screenshot)
+        context.send(viewAction: .attachScreenshot(UIImage.actions))
+        try await Task.sleep(nanoseconds: 100_000_000)
+        XCTAssert(context.viewState.screenshot == UIImage.actions)
+    }
 }
@@ -0,0 +1 @@
+Added the functionality to attach a screenshot in the Bug Report View.
				`@@ -0,0 +1 @@`
				`Added the functionality to attach a screenshot in the Bug Report View.`