Refactor rule-part availability separate from description definitions

Previously, we allowed the description methods to return undefined, and
anything undefined was hidden in the list. This is not a great way to
encode that information. Similarly, the selection pickers themselves
included logic to check for version support for individual rule parts.

Now, there's a single method for both matchers and handlers that defines
this explicitly in one place, so we can manually enable/disable them
with our own rules directly.

Author: pimterry

src/components/mock/handler-selection.tsx

@@ -10,7 +10,7 @@ import {
     HandlerClass,
     Handler,
     HandlerClassKey,
-    HandlerKeys,
+    HandlerClassKeyLookup,
     HandlerLookup,
     isPaidHandlerClass
 } from '../../model/rules/rules';
@@ -29,27 +29,19 @@ import {
 } from '../../model/rules/definitions/http-rule-definitions';
 
 import { Select } from '../common/inputs';
-import {
-    serverVersion,
-    versionSatisfies,
-    FROM_FILE_HANDLER_SERVER_RANGE,
-    PASSTHROUGH_TRANSFORMS_RANGE
-} from '../../services/service-versions';
 
 const getHandlerKey = (h: HandlerClass | Handler) =>
-    HandlerKeys.get(h as any) || HandlerKeys.get(h.constructor as any);
+    HandlerClassKeyLookup.get(h as any) || HandlerClassKeyLookup.get(h.constructor as any);
 const getHandlerClassByKey = (k: HandlerClassKey) => HandlerLookup[k];
 
 const HandlerOptions = (p: { handlers: Array<HandlerClass> }) => <>{
     p.handlers.map((handler): JSX.Element | null => {
-        const key = getHandlerKey(handler);
-        const description = summarizeHandlerClass(handler);
+        const key = getHandlerKey(handler)!;
+        const description = summarizeHandlerClass(key);
 
-        return description
-            ? <option key={key} value={key}>
-                { description }
-            </option>
-            : null;
+        return <option key={key} value={key}>
+            { description }
+        </option>;
     })
 }</>;
 
@@ -85,41 +77,23 @@ const instantiateHandler = (
     }
 }
 
-const supportsFileHandlers = () =>
-    _.isString(serverVersion.value) &&
-    versionSatisfies(serverVersion.value, FROM_FILE_HANDLER_SERVER_RANGE);
-
-const supportsTransforms = () =>
-    _.isString(serverVersion.value) &&
-    versionSatisfies(serverVersion.value, PASSTHROUGH_TRANSFORMS_RANGE);
-
 export const HandlerSelector = inject('rulesStore', 'accountStore')(observer((p: {
     rulesStore?: RulesStore,
     accountStore?: AccountStore,
+    availableHandlers: Array<HandlerClass>,
     value: Handler,
     onChange: (handler: Handler) => void
 }) => {
-    const allHandlers = [
-        StaticResponseHandler,
-        supportsFileHandlers() && FromFileResponseHandler,
-        PassThroughHandler,
-        ForwardToHostHandler,
-        supportsTransforms() && TransformingHandler,
-        RequestBreakpointHandler,
-        ResponseBreakpointHandler,
-        RequestAndResponseBreakpointHandler,
-        TimeoutHandler,
-        CloseConnectionHandler
-    ].filter(Boolean);
-
-    // Do some type tricks to make TS understand that we've filtered 'false' out of the handlers.
-    type DefinedHandler = Exclude<typeof allHandlers[number], false>;
-
-    const [ availableHandlers, needProHandlers ] = _.partition<DefinedHandler>(
-        allHandlers as DefinedHandler[],
+    let [ allowedHandlers, needProHandlers ] = _.partition(
+        p.availableHandlers,
         (handlerClass) => p.accountStore!.isPaidUser || !isPaidHandlerClass(handlerClass)
     );
 
+    // Pull the breakpoint handlers to the top, since they're kind of separate
+    allowedHandlers = _.sortBy(allowedHandlers, h =>
+        getHandlerKey(h)!.includes('breakpoint') ? 0 : 1
+    );
+
     return <HandlerSelect
         value={getHandlerKey(p.value)}
         onChange={(event) => {
@@ -129,7 +103,7 @@ export const HandlerSelector = inject('rulesStore', 'accountStore')(observer((p:
             p.onChange(handler);
         }}
     >
-        <HandlerOptions handlers={availableHandlers} />
+        <HandlerOptions handlers={allowedHandlers} />
         { needProHandlers.length &&
             <optgroup label='With HTTP Toolkit Pro:'>
                 <HandlerOptions handlers={needProHandlers} />

src/components/mock/matcher-config.tsx

@@ -42,6 +42,9 @@ export function MatcherConfiguration(props:
         ? MatcherLookup[props.matcher.type as MatcherClassKey]
         : props.matcherClass!;
 
+    // No matcher class selected yet - no config to show:
+    if (!matcherClass) return null;
+
     const configProps = {
         matcher: matcher as any,
         matcherIndex: props.matcherIndex,
@@ -71,7 +74,7 @@ export function MatcherConfiguration(props:
         case matchers.JsonBodyFlexibleMatcher:
             return <JsonBodyIncludingMatcherConfig {...configProps} />;
         default:
-            return null;
+            throw new Error(`Cannot render config component for ${matcherClass.name}`);
     }
 }
 

src/components/mock/matcher-selection.tsx

@@ -3,22 +3,14 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { action, observable } from 'mobx';
 
-import { matchers } from 'mockttp';
-
 import { styled } from '../../styles';
 import { Icon } from '../../icons';
-import {
-    serverVersion as serverVersionObservable,
-    versionSatisfies,
-    HOST_MATCHER_SERVER_RANGE,
-    BODY_MATCHING_RANGE
-} from '../../services/service-versions';
 import { Button, Select } from '../common/inputs';
 
 import {
     Matcher,
     MatcherClass,
-    MatcherKeys,
+    MatcherClassKeyLookup,
     MatcherLookup,
     MatcherClassKey,
     InitialMatcher,
@@ -31,12 +23,9 @@ import {
 
 import { MatcherConfiguration } from './matcher-config';
 
-const getMatcherKey = (m: MatcherClass | Matcher | undefined) => {
-    if (m === undefined) return '';
+const getMatcherKey = (m: MatcherClass | Matcher | undefined) =>
+    MatcherClassKeyLookup.get(m as any) || MatcherClassKeyLookup.get(m?.constructor as any);
 
-    return MatcherKeys.get(m as any) ||
-        MatcherKeys.get(m.constructor as any);
-};
 const getMatcherClassByKey = (k: MatcherClassKey) => MatcherLookup[k];
 
 const MatcherRow = styled.li`
@@ -129,14 +118,12 @@ export class ExistingMatcherRow extends React.Component<ExistingMatcherRowProps>
 
 const MatcherOptions = (p: { matchers: Array<MatcherClass> }) => <>{
     p.matchers.map((matcher): JSX.Element | null => {
-        const key = getMatcherKey(matcher);
-        const description = summarizeMatcherClass(matcher);
-
-        return description
-            ? <option key={key} value={key}>
-                { description }
-            </option>
-            : null;
+        const key = getMatcherKey(matcher)!;
+        const description = summarizeMatcherClass(key);
+
+        return <option key={key} value={key}>
+            { description }
+        </option>;
     })
 }</>
 
@@ -153,6 +140,7 @@ const LowlightedOption = styled.option`
 @observer
 export class NewMatcherRow extends React.Component<{
     onAdd: (matcher: Matcher) => void,
+    availableMatchers: MatcherClass[],
     existingMatchers: Matcher[]
 }> {
 
@@ -204,6 +192,8 @@ export class NewMatcherRow extends React.Component<{
     }
 
     render() {
+        const { availableMatchers } = this.props;
+
         const {
             matcherClass,
             draftMatchers,
@@ -213,27 +203,6 @@ export class NewMatcherRow extends React.Component<{
             saveMatcher
         } = this;
 
-        const serverVersion = serverVersionObservable.state === 'fulfilled'
-            ? serverVersionObservable.value as string
-            : undefined;
-
-        const availableMatchers = [
-            ...(versionSatisfies(serverVersion, HOST_MATCHER_SERVER_RANGE) ? [
-                matchers.HostMatcher
-            ] : []),
-            matchers.SimplePathMatcher,
-            matchers.RegexPathMatcher,
-            matchers.QueryMatcher,
-            matchers.ExactQueryMatcher,
-            matchers.HeaderMatcher,
-            ...(versionSatisfies(serverVersion, BODY_MATCHING_RANGE) ? [
-                matchers.RawBodyMatcher,
-                matchers.RawBodyIncludesMatcher,
-                matchers.JsonBodyMatcher,
-                matchers.JsonBodyFlexibleMatcher
-            ] : [])
-        ];
-
         return <MatcherRow>
             <MatcherInputsContainer>
                 <Select

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

@@ -4,19 +4,34 @@ import * as polished from 'polished';
 import { observer, inject, disposeOnUnmount, Observer } from 'mobx-react';
 import { action, observable, reaction } from 'mobx';
 import { Method, matchers } from 'mockttp';
-import { Draggable, DraggingStyle, NotDraggingStyle, DraggableStateSnapshot } from 'react-beautiful-dnd';
+import {
+    Draggable,
+    DraggingStyle,
+    NotDraggingStyle,
+    DraggableStateSnapshot
+} from 'react-beautiful-dnd';
 
 import { styled, css } from '../../styles';
 import { Icon } from '../../icons';
 
 import { getMethodColor } from '../../model/events/categorization';
-import { HtkMockRule, Matcher, Handler, isPaidHandler } from '../../model/rules/rules';
+import {
+    HtkMockRule,
+    Matcher,
+    Handler,
+    isPaidHandler,
+    getAvailableAdditionalMatchers,
+    getAvailableHandlers
+} from '../../model/rules/rules';
 import { ItemPath } from '../../model/rules/rules-structure';
 import {
     summarizeMatcher,
     summarizeHandler
 } from '../../model/rules/rule-descriptions';
 import { AccountStore } from '../../model/account/account-store';
+import {
+    serverVersion as serverVersionObservable
+} from '../../services/service-versions';
 
 import { clickOnEnter, noPropagation } from '../component-utils';
 import { GetProOverlay } from '../account/pro-placeholders';
@@ -290,8 +305,10 @@ export class RuleRow extends React.Component<{
             getPro
         } = this.props.accountStore!;
 
+        const ruleType = rule.type;
+ 
         // Hide non-HTTP rules (...for now)
-        if (rule.type !== 'http') return null;
+        if (ruleType !== 'http') return null;
 
         const initialMatcher = rule.matchers.length ? rule.matchers[0] : undefined;
 
@@ -304,6 +321,13 @@ export class RuleRow extends React.Component<{
             method = undefined;
         }
 
+        const serverVersion = serverVersionObservable.state === 'fulfilled'
+            ? serverVersionObservable.value as string
+            : undefined;
+
+        const availableMatchers = getAvailableAdditionalMatchers(ruleType, serverVersion);
+        const availableHandlers = getAvailableHandlers(ruleType, serverVersion);
+
         // Handlers are in demo mode (uneditable, behind a 'Get Pro' overlay), either if the rule
         // has a handler you can't use, or you've picked a Pro handler and its been put in demoHandler
         const isHandlerDemo = !isPaidUser && (this.demoHandler || isPaidHandler(rule.handler));
@@ -378,6 +402,7 @@ export class RuleRow extends React.Component<{
 
                                 { rule.matchers.length > 0 &&
                                     <NewMatcherRow
+                                        availableMatchers={availableMatchers}
                                         existingMatchers={rule.matchers}
                                         onAdd={this.addMatcher}
                                     />
@@ -400,20 +425,21 @@ export class RuleRow extends React.Component<{
                             <HandlerSelector
                                 value={ruleHandler}
                                 onChange={this.updateHandler}
+                                availableHandlers={availableHandlers}
                             />
 
                             { isHandlerDemo
                                 // If you select a paid handler with an unpaid account,
                                 // show a handler demo with a 'Get Pro' overlay:
                                 ? <GetProOverlay getPro={getPro} source={`rule-${ruleHandler.type}`}>
                                     <HandlerConfiguration
-                                        ruleType={rule.type}
+                                        ruleType={ruleType}
                                         handler={ruleHandler}
                                         onChange={_.noop}
                                     />
                                 </GetProOverlay>
                                 : <HandlerConfiguration
-                                    ruleType={rule.type}
+                                    ruleType={ruleType}
                                     handler={ruleHandler}
                                     onChange={this.updateHandler}
                                 />