Show rule-type-appropriate text in config for Close & Timeout rules

Author: pimterry

src/components/mock/handler-config.tsx

@@ -11,7 +11,8 @@ import { uploadFile } from '../../util/ui';
 import { asError } from '../../util/error';
 
 import {
-    Handler
+    Handler,
+    RuleType
 } from '../../model/rules/rules';
 import {
     StaticResponseHandler,
@@ -47,6 +48,7 @@ import { FormatButton } from '../common/format-button';
 import { byteLength, asBuffer, isProbablyUtf8 } from '../../util';
 
 type HandlerConfigProps<H extends Handler> = {
+    ruleType: RuleType;
     handler: H;
     onChange: (handler: H) => void;
     onInvalidState: () => void;
@@ -70,13 +72,15 @@ const ConfigExplanation = styled.p`
 `;
 
 export function HandlerConfiguration(props: {
+    ruleType: RuleType,
     handler: Handler,
     onChange: (handler: Handler) => void,
     onInvalidState?: () => void // Currently unused - intended to improve invalid entry UX later on
 }) {
     const { handler, onChange, onInvalidState } = props;
 
     const configProps = {
+        ruleType: props.ruleType,
         handler: handler as any,
         onChange,
         onInvalidState: onInvalidState || _.noop
@@ -1154,9 +1158,14 @@ class TimeoutHandlerConfig extends HandlerConfig<TimeoutHandler> {
     render() {
         return <ConfigContainer>
             <ConfigExplanation>
-                When a matching request is received, the server will keep the connection
-                open but do nothing. With no data or response, most clients will time out
-                and abort the request after sufficient time has passed.
+                When a matching {
+                    this.props.ruleType === 'http'
+                        ? 'HTTP'
+                    // ruleType === 'websocket'
+                        : 'WebSocket'
+                } is received, the server will keep the connection open but do nothing.
+                With no data or response, most clients will time out and abort the
+                request after sufficient time has passed.
             </ConfigExplanation>
         </ConfigContainer>;
     }
@@ -1167,8 +1176,12 @@ class CloseConnectionHandlerConfig extends HandlerConfig<CloseConnectionHandler>
     render() {
         return <ConfigContainer>
             <ConfigExplanation>
-                As soon as a matching request is received, the connection will
-                be closed, with no response.
+                As soon as a matching {
+                    this.props.ruleType === 'http'
+                        ? 'HTTP'
+                    // ruleType === 'websocket'
+                        : 'WebSocket'
+                } is received, the connection will be closed, with no response.
             </ConfigExplanation>
         </ConfigContainer>;
     }

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

@@ -407,11 +407,13 @@ export class RuleRow extends React.Component<{
                                 // show a handler demo with a 'Get Pro' overlay:
                                 ? <GetProOverlay getPro={getPro} source={`rule-${ruleHandler.type}`}>
                                     <HandlerConfiguration
+                                        ruleType={rule.type}
                                         handler={ruleHandler}
                                         onChange={_.noop}
                                     />
                                 </GetProOverlay>
                                 : <HandlerConfiguration
+                                    ruleType={rule.type}
                                     handler={ruleHandler}
                                     onChange={this.updateHandler}
                                 />

src/model/rules/rules.ts

@@ -104,7 +104,9 @@ export type HtkMockRule =
     | WebSocketMockRule
     | HttpMockRule;
 
-const matchRuleType = <T extends HtkMockRule['type']>(
+export type RuleType = HtkMockRule['type'];
+
+const matchRuleType = <T extends RuleType>(
     type: T
 ) => (rule: HtkMockRule): rule is HtkMockRule & { type: T } =>
     rule.type === type;