Make key URL rules high priority to avoid conflicts

Previously this could cause confusion - the Android rule didn't apply if
other rules overrode it, and a passthrough rule could result in
'amiusing' returning false unexpectedly. This makes that work as
expected, and provides a little UI signifier to help make that clearer.

src/components/intercept/config/android-device-config.tsx

@@ -21,6 +21,7 @@ import {
     StaticResponseHandler
 } from '../../../model/rules/definitions/http-rule-definitions';
 import { RulesStore } from '../../../model/rules/rules-store';
+import { RulePriority } from '../../../model/rules/rules';
 
 const ConfigContainer = styled.div`
     user-select: text;
@@ -85,6 +86,7 @@ export function setUpAndroidCertificateRule(
         id: 'default-android-certificate',
         type: 'http',
         activated: true,
+        priority: RulePriority.OVERRIDE,
         matchers: [
             new MethodMatchers.GET(),
             new matchers.SimplePathMatcher(

src/components/mock/mock-rule-row.tsx

@@ -30,7 +30,9 @@ import {
     RuleType,
     HandlerStep,
     isFinalHandler,
-    isStepPoweredRule
+    isStepPoweredRule,
+    RulePriority,
+    isHttpBasedRule
 } from '../../model/rules/rules';
 import { ItemPath } from '../../model/rules/rules-structure';
 import {
@@ -187,6 +189,14 @@ const DetailsHeader = styled.div`
     margin-bottom: 20px;
 `;
 
+const HighPriorityMarker = styled(Icon).attrs(() => ({
+    icon: ['fas', 'exclamation'],
+    title: 'High-priority rule: this rule overrides all non-high-prority rules'
+}))`
+    margin-right: 10px;4
+    align-self: baseline;
+}
+`;
 
 const RuleMenuContainer = styled(IconMenu)`
     background-image: radial-gradient(
@@ -354,7 +364,13 @@ export class RuleRow extends React.Component<{
 
         // We show the summary by default, but if you set a custom title, we only show it when expanded:
         const shouldShowSummary = !collapsed || (!rule.title && !this.titleEditState);
+
         const isEditingTitle = !!this.titleEditState && !collapsed;
+        const shouldShowCustomTitle = rule.title && !isEditingTitle;
+
+        const priorityMarker = isHttpBasedRule(rule) && rule.priority && rule.priority > RulePriority.DEFAULT
+            ? <HighPriorityMarker />
+            : null;
 
         return <Draggable
             draggableId={rule.id}
@@ -393,8 +409,10 @@ export class RuleRow extends React.Component<{
                 />
                 <DragHandle {...provided.dragHandleProps} />
 
-                { rule.title && !isEditingTitle &&
+
+                { shouldShowCustomTitle &&
                     <RuleTitle>
+                        { priorityMarker }
                         { rule.title }
                     </RuleTitle>
                 }
@@ -415,6 +433,11 @@ export class RuleRow extends React.Component<{
                 <MatcherOrHandler>
                     { shouldShowSummary &&
                         <Summary collapsed={collapsed} title={summarizeMatcher(rule)}>
+                            { !shouldShowCustomTitle &&
+                                // Same condition as the <RuleTitle> block above, because if a
+                                // non-editable title is shown, the marker moves there instead.
+                                priorityMarker
+                            }
                             { summarizeMatcher(rule) }
                         </Summary>
                     }

src/icons.ts

@@ -34,6 +34,7 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalL
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
 import { faLightbulb } from '@fortawesome/free-solid-svg-icons/faLightbulb';
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog';
 import { faStar } from '@fortawesome/free-regular-svg-icons/faStar';
@@ -112,6 +113,7 @@ library.add(
     faPlus,
     faMinus,
     faExclamationTriangle,
+    faExclamation,
     faLightbulb,
     faCog,
     faStar,

src/model/rules/rule-creation.ts

@@ -24,8 +24,8 @@ import { getStatusMessage } from '../http/http-docs';
 import { RulesStore } from './rules-store';
 import {
     Handler,
-    HandlerStep,
     HtkMockRule,
+    RulePriority,
     InitialMatcher,
     Matcher,
     RuleType,
@@ -212,6 +212,7 @@ export const buildDefaultGroupRules = (
         id: 'default-amiusing',
         type: 'http',
         activated: true,
+        priority: RulePriority.OVERRIDE,
         matchers: [
             new HttpRule.MethodMatchers.GET(),
             new HttpRule.AmIUsingMatcher()
@@ -230,6 +231,7 @@ export const buildDefaultGroupRules = (
             id: 'default-certificate',
             type: 'http' as 'http',
             activated: true,
+            priority: RulePriority.OVERRIDE,
             matchers: [
                 new HttpRule.MethodMatchers.GET(),
                 new matchers.SimplePathMatcher("amiusing.httptoolkit.tech/certificate")

src/model/rules/rule-serialization.ts

@@ -75,6 +75,7 @@ const MockRuleSerializer = serializr.custom(
             type: data.type,
             title: data.title,
             activated: data.activated,
+            priority: 'priority' in data ? data.priority : undefined,
             matchers: data.matchers.map((m) =>
                 deserializeByType(m, MatcherLookup, context.args)
             ),

src/model/rules/rules.ts

@@ -462,4 +462,10 @@ export const isHttpBasedRule = matchRule(isHttpCompatibleType);
 export const isWebSocketRule = matchRule(matchRuleType('websocket'));
 export const isRTCRule = matchRule(matchRuleType('webrtc'));
 
-export const isStepPoweredRule = isRTCRule;
+export const isStepPoweredRule = isRTCRule;
+
+export enum RulePriority {
+    FALLBACK = 0,
+    DEFAULT = 1,
+    OVERRIDE = 2
+}

test/unit/model/rules-store.spec.ts

@@ -6,6 +6,7 @@ import {
 } from "../../../src/model/rules/rules-structure";
 
 import { expect } from "../../test-setup";
+import { HttpMockRule } from "../../../src/model/rules/definitions/http-rule-definitions";
 
 const group = (id: number, ...items: Array<HtkMockItem>) => ({
     id: id.toString(),
@@ -32,7 +33,7 @@ describe("Rules store", () => {
             serverVersion: '1.0.0',
             dnsServers: []
         };
-        store = new RulesStore({ featureFlags: [] } as any, proxyStore as any, null as any, null as any);
+        store = new RulesStore({ featureFlags: [] } as any, proxyStore as any, null as any);
         store.rules = { id: 'root', items: [] } as any as HtkMockRuleRoot;
         store.draftRules = { id: 'root', items: [] } as any as HtkMockRuleRoot;
     });
@@ -396,5 +397,17 @@ describe("Rules store", () => {
             expect(store.rules.items).to.deep.equal([a]);
             expect(store.draftRules.items).to.deep.equal([a]);
         });
+
+        it("should update the rule if it exists but missing its priority", () => {
+            store.rules.items = [defaultGroup(a)];
+            store.draftRules.items = [defaultGroup(a)];
+
+            const highPriorityRule = { ...a, priority: 10 } as HttpMockRule;
+
+            store.ensureRuleExists(highPriorityRule);
+
+            expect(store.rules.items).to.deep.equal([defaultGroup(highPriorityRule)]);
+            expect(store.draftRules.items).to.deep.equal([defaultGroup(highPriorityRule)]);
+        });
     });
 });