Form redirect + redirecting on report/appeal submission.

Author: isoos

app/lib/frontend/handlers/pubapi.dart

@@ -585,7 +585,6 @@ class PubApi {
 
   @EndPoint.post('/api/report')
   Future<Message> postReport(Request request, ReportForm body) async {
-    final message = await processReportPageHandler(request, body);
-    return Message(message: message);
+    return await processReportPageHandler(request, body);
   }
 }

app/lib/frontend/handlers/report.dart

@@ -5,6 +5,7 @@
 import 'dart:async';
 
 import 'package:_pub_shared/data/account_api.dart';
+import 'package:_pub_shared/data/package_api.dart';
 import 'package:clock/clock.dart';
 import 'package:pub_dev/admin/backend.dart';
 import 'package:pub_dev/shared/configuration.dart';
@@ -35,6 +36,23 @@ Future<shelf.Response> reportPageHandler(shelf.Request request) async {
     return notFoundHandler(request);
   }
 
+  final feedback = request.requestedUri.queryParameters['feedback'];
+  if (feedback != null) {
+    switch (feedback) {
+      case 'report-submitted':
+        return htmlResponse(renderReportFeedback(
+          title: 'Report submitted',
+          message: 'The report has been submitted successfully.',
+        ));
+      case 'appeal-submitted':
+        return htmlResponse(renderReportFeedback(
+          title: 'Appeal submitted',
+          message: 'The appeal has been submitted successfully.',
+        ));
+    }
+    return notFoundHandler(request);
+  }
+
   final caseId = request.requestedUri.queryParameters['appeal'];
   final mc = await _loadAndVerifyCase(caseId);
 
@@ -51,12 +69,21 @@ Future<shelf.Response> reportPageHandler(shelf.Request request) async {
   final url = request.requestedUri.queryParameters['url'];
   _verifyUrl(url);
 
+  final kind = caseId == null ? 'report' : 'appeal';
+  final onSuccessGotoUrl = request.requestedUri.replace(
+    path: '/report',
+    queryParameters: {
+      'feedback': '$kind-submitted',
+    },
+  ).toString();
+
   return htmlResponse(
     renderReportPage(
       sessionData: requestContext.sessionData,
       subject: subject,
       url: url,
       caseId: caseId,
+      onSuccessGotoUrl: onSuccessGotoUrl,
     ),
     headers: CacheControl.explicitlyPrivate.headers,
   );
@@ -134,7 +161,7 @@ Future<void> _verifyCaseSubject(
 }
 
 /// Handles POST /api/report
-Future<String> processReportPageHandler(
+Future<Message> processReportPageHandler(
     shelf.Request request, ReportForm form) async {
   if (!requestContext.experimentalFlags.isReportPageEnabled) {
     throw NotFoundException('Experimental flag is not enabled.');
@@ -234,5 +261,5 @@ Future<String> processReportPageHandler(
     bodyText: bodyText,
   ));
 
-  return 'The $kind was submitted successfully.';
+  return Message(message: 'The $kind was submitted successfully.');
 }

app/lib/frontend/templates/report.dart

@@ -16,12 +16,29 @@ const _subjectKindLabels = {
   ModerationSubjectKind.publisher: 'publisher',
 };
 
+/// Renders the feedback page with a simple paragraph of [message].
+String renderReportFeedback({
+  required String title,
+  required String message,
+}) {
+  return renderLayoutPage(
+    PageType.standalone,
+    d.fragment([
+      d.h1(text: title),
+      d.p(text: message),
+    ]),
+    title: title,
+    noIndex: true,
+  );
+}
+
 /// Renders the create publisher page.
 String renderReportPage({
   SessionData? sessionData,
   required ModerationSubject subject,
   required String? url,
   required String? caseId,
+  required String onSuccessGotoUrl,
 }) {
   final isAppeal = caseId != null;
   final title = isAppeal ? 'Appeal a resolution' : 'Report a problem';
@@ -33,6 +50,7 @@ String renderReportPage({
         id: 'report-page-form',
         attributes: {
           'data-form-api-endpoint': '/api/report',
+          'data-form-success-goto': onSuccessGotoUrl,
         },
         children: [
           d.input(type: 'hidden', name: 'subject', value: subject.fqn),

app/test/frontend/golden/report_page.html

@@ -107,7 +107,7 @@ <h3 class="foldable-button">
     <div id="banner-container"></div>
     <main class="container">
       <div class="report-main">
-        <div id="report-page-form" data-form-api-endpoint="/api/report">
+        <div id="report-page-form" data-form-api-endpoint="/api/report" data-form-success-goto="https://pub.dev/report?feedback=report-submitted">
           <input type="hidden" name="subject" value="package:oxygen"/>
           <input type="hidden" name="url" value="https://pub.dev/packages/oxygen/example"/>
           <h1>Report a problem</h1>

app/test/frontend/golden/report_page_appeal.html

@@ -107,7 +107,7 @@ <h3 class="foldable-button">
     <div id="banner-container"></div>
     <main class="container">
       <div class="report-main">
-        <div id="report-page-form" data-form-api-endpoint="/api/report">
+        <div id="report-page-form" data-form-api-endpoint="/api/report" data-form-success-goto="https://pub.dev/report?feedback=appeal-submitted">
           <input type="hidden" name="subject" value="package:oxygen"/>
           <input type="hidden" name="caseId" value="fake-case-id"/>
           <h1>Appeal a resolution</h1>

app/test/frontend/templates_test.dart

@@ -818,6 +818,7 @@ void main() {
         subject: ModerationSubject.package('oxygen'),
         url: 'https://pub.dev/packages/oxygen/example',
         caseId: null,
+        onSuccessGotoUrl: 'https://pub.dev/report?feedback=report-submitted',
       );
       expectGoldenFile(html, 'report_page.html');
     });
@@ -830,6 +831,7 @@ void main() {
         subject: ModerationSubject.package('oxygen'),
         url: null,
         caseId: 'fake-case-id',
+        onSuccessGotoUrl: 'https://pub.dev/report?feedback=appeal-submitted',
       );
       expectGoldenFile(html, 'report_page_appeal.html');
     });

pkg/pub_integration/test/report_test.dart

@@ -65,10 +65,10 @@ void main() {
           await page.waitFocusAndType('#report-email', 'reporter@pub.dev');
           await page.waitFocusAndType(
               '#report-message', 'Huston, we have a problem.');
-          await page.waitAndClick('#report-submit', waitForOneResponse: true);
-          expect(await page.content,
-              contains('The report was submitted successfully.'));
-          await page.waitAndClickOnDialogOk();
+          await page.waitAndClick('#report-submit');
+          await page.waitForNavigation();
+          expect(
+              await page.content, contains('has been submitted successfully'));
         },
       );
 
@@ -197,10 +197,9 @@ void main() {
 
         await page.waitFocusAndType(
             '#report-message', 'Huston, I have a different idea.');
-        await page.waitAndClick('#report-submit', waitForOneResponse: true);
-        expect(await page.content,
-            contains('The appeal was submitted successfully.'));
-        await page.waitAndClickOnDialogOk();
+        await page.waitAndClick('#report-submit');
+        await page.waitForNavigation();
+        expect(await page.content, contains('has been submitted successfully'));
       });
 
       final appealEmail = await supportUser.readLatestEmail();

pkg/web_app/lib/src/admin_pages.dart

@@ -31,6 +31,7 @@ void initAdminPages() {
 void _initGenericForm() {
   for (final form in document.querySelectorAll('[data-form-api-endpoint]')) {
     final endpoint = form.dataset['form-api-endpoint']!;
+    final onSuccessGotoUrl = form.dataset['form-success-goto'];
 
     for (final button in form.querySelectorAll('[data-form-api-button]')) {
       button.onClick.listen((event) async {
@@ -52,10 +53,19 @@ void _initGenericForm() {
           fn: () =>
               api_client.sendJson(verb: 'POST', path: endpoint, body: body),
           successMessage: null,
-          onSuccess: (result) async {
-            final message =
-                result == null ? null : result['message']?.toString();
-            await modalMessage('Success', text(message ?? 'OK.'));
+          onSuccess: (r) async {
+            final result = r ?? <String, dynamic>{};
+            // Goto a new location to display the feedback message.
+            if (onSuccessGotoUrl != null) {
+              window.location.href = onSuccessGotoUrl;
+              return;
+            }
+
+            // We shall display a minimal feedback the message is omitted.
+            final message = result['message']?.toString() ??
+                'Success. The page will reload.';
+            await modalMessage('Success', text(message));
+
             window.location.reload();
           },
         );