Improved Breakage Form

debugger/settings.js

@@ -12,15 +12,7 @@ const keys = Object.keys(states);
 /**
  * @type {Screen[]}
  */
-const validInitialScreens = [
-    'breakageForm',
-    'promptBreakageForm',
-    'toggleReport',
-    'choiceBreakageForm',
-    'categoryTypeSelection',
-    'categorySelection',
-    'primaryScreen',
-];
+const validInitialScreens = ['breakageForm', 'breakageFormFinalStep', 'toggleReport', 'primaryScreen'];
 const screens = Object.fromEntries(validInitialScreens.map((x) => [x, x]));
 
 const items = [

global.types.d.ts

@@ -1,17 +1,20 @@
-import { AndroidBreakageDialog } from './v2/android-breakage-dialog';
-
-declare global {
-    namespace preact.JSX {
-        interface IntrinsicElements {
-            'ddg-android-breakage-dialog': {
-                items: [string, string][];
-                title: string;
-                cancelText: string;
-                okText: string;
-                ref: import('preact').RefObject<AndroidBreakageDialog | null>;
-            };
-        }
-    }
-}
+/* Example declaration of a custom element
+ *
+ * import { AndroidBreakageDialog } from './v2/android-breakage-dialog';
+ *
+ * declare global {
+ *     namespace preact.JSX {
+ *         interface IntrinsicElements {
+ *             'ddg-android-breakage-dialog': {
+ *                 items: [string, string][];
+ *                 title: string;
+ *                 cancelText: string;
+ *                 okText: string;
+ *                 ref: import('preact').RefObject<AndroidBreakageDialog | null>;
+ *             };
+ *         }
+ *     }
+ * }
+ */
 
 export {};

guides/breakage-flows.md

@@ -4,39 +4,27 @@ title: Breakage flows
 
 # Breakage flows
 
-### Flow 1: Show Category-type selection when 'Website not working?' is clicked
+### Flow 1: Open primary breakage reporting screen (category type selection)
 
 Open the dashboard with the following query params
 
--   `breakageScreen=categoryTypeSelection`
+-   `screen=breakageForm`
 
-### Flow 2: Show Category selection when 'Website not working?' is clicked
+### Flow 2: Open secondary ategory selection directly (like from a menu)
 
 Open the dashboard with the following query params
 
--   `breakageScreen=categorySelection`
+-   `screen=breakageFormCategorySelection`
 
-### Flow 3: Open Category-type selection directly (like from a menu)
+### Flow 3: Open the final screen of the Breakage Form directly:
 
 Open the dashboard with the following query params
 
--   `screen=categoryTypeSelection`
-
-### Flow 4: Open Category selection directly (like from a menu)
-
-Open the dashboard with the following query params
-
--   `screen=categorySelection`
-
-### Flow 5: Open the new Breakage Form directly:
-
-Open the dashboard with the following query params
-
--   `screen=choiceBreakageForm`
+-   `screen=breakageFormFinalStep`
 -   `category=videos` (this can be any valid category value)
 
-### Flow 6: Open the new Breakage Form directly
+### Flow 4: Open the final screen of the Breakage Form directly:
 
 Open the dashboard with the following query params
 
--   `screen=choiceBreakageForm`
+-   `screen=breakageFormFinalStep`