Refactor 'build rule from exchange' logic up into the View page

Author: pimterry

src/components/view/http/http-details-footer.tsx

@@ -94,6 +94,7 @@ export const HttpDetailsFooter = inject('rulesStore')(
             event: CollectedEvent,
             onDelete: (event: CollectedEvent) => void,
             onScrollToEvent: (event: CollectedEvent) => void,
+            onBuildRuleFromExchange: (event: HttpExchange) => void,
             isPaidUser: boolean,
             navigate: (url: string) => void
         }) => {
@@ -117,15 +118,7 @@ export const HttpDetailsFooter = inject('rulesStore')(
                 <MockButton
                     isExchange={event.isHttp()}
                     isPaidUser={props.isPaidUser}
-                    onClick={() => {
-                        const rule = buildRuleFromExchange(
-                            event as HttpExchange
-                        );
-                        runInAction(() => {
-                            props.rulesStore!.draftRules.items.unshift(rule);
-                        });
-                        props.navigate(`/mock/${rule.id}`);
-                    }}
+                    onClick={() => props.onBuildRuleFromExchange(props.event as HttpExchange)}
                 />
             </ButtonsContainer>;
         }

src/components/view/http/http-details-pane.tsx

@@ -71,6 +71,7 @@ export class HttpDetailsPane extends React.Component<{
     navigate: (path: string) => void,
     onDelete: (event: CollectedEvent) => void,
     onScrollToEvent: (event: CollectedEvent) => void,
+    onBuildRuleFromExchange: (exchange: HttpExchange) => void,
 
     // Injected:
     uiStore?: UiStore,
@@ -87,6 +88,7 @@ export class HttpDetailsPane extends React.Component<{
             exchange,
             onDelete,
             onScrollToEvent,
+            onBuildRuleFromExchange,
             uiStore,
             accountStore,
             navigate
@@ -135,6 +137,7 @@ export class HttpDetailsPane extends React.Component<{
                 event={exchange}
                 onDelete={onDelete}
                 onScrollToEvent={onScrollToEvent}
+                onBuildRuleFromExchange={onBuildRuleFromExchange}
                 navigate={navigate}
                 isPaidUser={isPaidUser}
             />

src/components/view/view-page.tsx

@@ -22,8 +22,10 @@ import { UnreachableCheck } from '../../util/error';
 import { UiStore } from '../../model/ui-store';
 import { ProxyStore } from '../../model/proxy-store';
 import { EventsStore } from '../../model/events/events-store';
+import { RulesStore } from '../../model/rules/rules-store';
 import { HttpExchange } from '../../model/http/exchange';
 import { FilterSet } from '../../model/filters/search-filters';
+import { buildRuleFromExchange } from '../../model/rules/rule-creation';
 
 import { SplitPane } from '../split-pane';
 import { EmptyState } from '../common/empty-state';
@@ -43,6 +45,7 @@ interface ViewPageProps {
     eventsStore: EventsStore;
     proxyStore: ProxyStore;
     uiStore: UiStore;
+    rulesStore: RulesStore,
     navigate: (path: string) => void;
     eventId?: string;
 }
@@ -103,6 +106,7 @@ type EditorKey = typeof EDITOR_KEYS[number];
 @inject('eventsStore')
 @inject('proxyStore')
 @inject('uiStore')
+@inject('rulesStore')
 @observer
 class ViewPage extends React.Component<ViewPageProps> {
 
@@ -268,6 +272,7 @@ class ViewPage extends React.Component<ViewPageProps> {
                 navigate={this.props.navigate}
                 onDelete={this.onDelete}
                 onScrollToEvent={this.onScrollToCenterEvent}
+                onBuildRuleFromExchange={this.onBuildRuleFromExchange}
             />;
         } else if (this.selectedEvent.isTlsFailure()) {
             rightPane = <TlsFailureDetailsPane
@@ -402,6 +407,15 @@ class ViewPage extends React.Component<ViewPageProps> {
         event.pinned = !event.pinned;
     }
 
+    @action.bound
+    onBuildRuleFromExchange(exchange: HttpExchange) {
+        const { rulesStore, navigate } = this.props;
+
+        const rule = buildRuleFromExchange(exchange);
+        rulesStore!.draftRules.items.unshift(rule);
+        navigate(`/mock/${rule.id}`);
+    }
+
     @action.bound
     onDelete(event: CollectedEvent) {
         const { filteredEvents } = this.filteredEventState;
@@ -492,7 +506,9 @@ const LeftPane = styled.div`
 
 const StyledViewPage = styled(
     // Exclude stores etc from the external props, as they're injected
-    ViewPage as unknown as WithInjected<typeof ViewPage, 'uiStore' | 'proxyStore' | 'eventsStore' | 'navigate'>
+    ViewPage as unknown as WithInjected<typeof ViewPage,
+        'uiStore' | 'proxyStore' | 'eventsStore' | 'rulesStore' | 'navigate'
+    >
 )`
     height: 100vh;
     position: relative;