Don't mark webhook-matched requests as modified

Author: pimterry

src/components/view/http/http-request-card.tsx

@@ -5,6 +5,7 @@ import { HtkRequest, HttpVersion, HttpExchangeView } from '../../../types';
 
 import { getSummaryColor } from '../../../model/events/categorization';
 import { getMethodDocs } from '../../../model/http/http-docs';
+import { areStepsModifying } from '../../../model/rules/rules';
 
 import {
     CollapsibleCardHeading,
@@ -29,7 +30,7 @@ import { HttpVersionPill } from '../../common/http-version-pill';
 import { HeaderDetails, HeaderHeadingContainer } from './header-details';
 import { UrlBreakdown } from '../url-breakdown';
 import { StepClassKey } from '../../../model/rules/rules';
-import { MatchedRulePill, shouldShowRuleDetails } from './matched-rule-pill';
+import { MatchedRulePill } from './matched-rule-pill';
 
 const RawRequestDetails = (p: {
     request: HtkRequest,
@@ -114,7 +115,7 @@ export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
 
     return <CollapsibleCard {...props} direction='right'>
         <header>
-            { shouldShowRuleDetails(matchedRuleData) &&
+            { areStepsModifying(matchedRuleData?.stepTypes) &&
                 <MatchedRulePill
                     ruleData={matchedRuleData}
                     onClick={onRuleClicked}

src/components/view/http/matched-rule-pill.tsx

@@ -17,16 +17,6 @@ export interface MatchedRuleData {
     status: 'unchanged' | 'modified-types' | 'deleted';
 }
 
-export const shouldShowRuleDetails = (
-    matchedRuleData: MatchedRuleData | undefined
-): matchedRuleData is MatchedRuleData => {
-    // We never bother showing rule details for pure-passthrough rules
-    return !!matchedRuleData?.stepTypes.length &&
-        !matchedRuleData?.stepTypes.every(
-            type => type === 'passthrough' || type === 'ws-passthrough'
-        );
-}
-
 export const MatchedRulePill = styled(inject('uiStore')((p: {
     className?: string,
     uiStore?: UiStore,

src/components/view/http/transform-card.tsx

@@ -5,10 +5,11 @@ import { observer } from 'mobx-react-lite';
 import { styled } from '../../../styles';
 
 import { ContentPerspective, UiStore } from '../../../model/ui/ui-store';
+import { areStepsModifying } from '../../../model/rules/rules';
 
 import { Pill, PillSelect } from '../../common/pill';
 import { MediumCard } from '../../common/card';
-import { MatchedRuleData, MatchedRulePill, shouldShowRuleDetails } from './matched-rule-pill';
+import { MatchedRuleData, MatchedRulePill } from './matched-rule-pill';
 
 const DropdownContainer = styled.div`
     display: inline-block;
@@ -44,9 +45,9 @@ export const TransformCard = (p: {
     onRuleClicked: () => void,
     uiStore: UiStore
 }) => {
-    const rulePill = shouldShowRuleDetails(p.matchedRuleData)
+    const rulePill = areStepsModifying(p.matchedRuleData?.stepTypes)
         ? <MatchedRulePill
-            ruleData={p.matchedRuleData!}
+            ruleData={p.matchedRuleData}
             onClick={p.onRuleClicked}
         />
         // This can happen if e.g. upstream returns a response but

src/components/view/view-event-list.tsx

@@ -19,6 +19,7 @@ import {
     RawTunnel
 } from '../../types';
 import { UiStore } from '../../model/ui/ui-store';
+import { areStepsModifying } from '../../model/rules/rules';
 
 import {
     getSummaryColor,
@@ -476,9 +477,7 @@ const ExchangeRow = inject('uiStore')(observer(({
             />
             {
                 exchange.matchedRule &&
-                exchange.matchedRule.stepTypes.some(t =>
-                    t !== 'passthrough' && t !== 'ws-passthrough' && t !== 'rtc-dynamic-proxy'
-                ) &&
+                areStepsModifying(exchange.matchedRule.stepTypes) &&
                 <PhosphorIcon
                     icon='Pencil'
                     alt={`Handled by ${

src/model/rules/rules.ts

@@ -410,6 +410,16 @@ export const isPaidStepClass = (
     return !NonPaidStepClasses.includes(stepClass);
 }
 
+export function areStepsModifying(stepTypes: StepClassKey[] | undefined): stepTypes is StepClassKey[] {
+    // We don't show rule details or edit markers for no-modification rules
+    return !!stepTypes?.length &&
+        !stepTypes?.every(
+            type => type === 'passthrough' ||
+                    type === 'ws-passthrough' ||
+                    type === 'webhook'
+        );
+}
+
 /// --- Rules ---
 
 export type HtkRule = (