Rename 'mock' to 'modify' everywhere

Not all rules are mocks, and for some users 'mock' can be quite a
confusing phrase. Modify is clearer, and conveniently keeps us on the
same Ctrl+M keyboard shortcut. 'Modify' as a verb unfortunately doesn't
mean 'create a rule' unlike 'mock' so some rephrasing has been required,
but hopefully everything is covered here.

Author: pimterry

src/components/account/plan-picker.tsx

@@ -407,11 +407,11 @@ export class PlanPicker extends React.Component<PlanPickerProps> {
                     </TierPriceBlock>
                     <TierFeatures>
                         <Feature>
-                            <strong>Automated HTTP mocking & rewriting rules</strong>, including traffic redirection,
-                            mock responses, and errors & timeouts.
+                            <strong>Automated HTTP rewriting rules</strong>, including traffic
+                            redirection, mock responses, and errors & timeouts.
                         </Feature>
                         <Feature>
-                            <strong>Reusable Mock & Send tools</strong>. Persistent by default, plus
+                            <strong>Reusable Modify & Send tools</strong>. Persistent by default, plus
                             import/export so you can store, reuse & share your rules & requests.
                         </Feature>
                         <Feature>

src/components/app.tsx

@@ -19,14 +19,14 @@ import { UiStore } from '../model/ui/ui-store';
 import {
     serverVersion,
     versionSatisfies,
-    MOCK_SERVER_RANGE,
+    MODIFY_RULE_SERVER_RANGE,
     SERVER_SEND_API_SUPPORTED
 } from '../services/service-versions';
 
 import { Sidebar, SidebarItem, SIDEBAR_WIDTH } from './sidebar';
 import { InterceptPage } from './intercept/intercept-page';
 import { ViewPage } from './view/view-page';
-import { MockPage } from './mock/mock-page';
+import { ModifyPage } from './modify/modify-page';
 import { SendPage } from './send/send-page';
 import { SettingsPage } from './settings/settings-page';
 
@@ -71,7 +71,7 @@ const AppKeyboardShortcuts = (props: {
         e.preventDefault();
     }, [props.navigate]);
     useHotkeys('Ctrl+3,Cmd+3', (e) => {
-        props.navigate('/mock');
+        props.navigate('/modify');
         e.preventDefault();
     }, [props.navigate]);
     useHotkeys('Ctrl+9,Cmd+9', (e) => {
@@ -125,18 +125,18 @@ class App extends React.Component<{
 
             ...(
                 (
-                    // Hide Mock option if the server is too old for proper support.
+                    // Hide Modify option if the server is too old for proper support.
                     // We show by default to avoid flicker in the most common case
                     serverVersion.state !== 'fulfilled' ||
-                    versionSatisfies(serverVersion.value, MOCK_SERVER_RANGE)
+                    versionSatisfies(serverVersion.value, MODIFY_RULE_SERVER_RANGE)
                 )
                 ? [{
-                    name: 'Mock',
-                    title: `Add rules to mock & rewrite HTTP traffic (${Ctrl}+3)`,
+                    name: 'Modify',
+                    title: `Add rules to transform & mock HTTP traffic (${Ctrl}+3)`,
                     icon: 'Pencil',
                     position: 'top',
                     type: 'router',
-                    url: '/mock'
+                    url: '/modify'
                 }]
                 : []
             ),
@@ -220,8 +220,8 @@ class App extends React.Component<{
                     <Route path={'/intercept'} pageComponent={InterceptPage} />
                     <Route path={'/view'} pageComponent={ViewPage} />
                     <Route path={'/view/:eventId'} pageComponent={ViewPage} />
-                    <Route path={'/mock'} pageComponent={MockPage} />
-                    <Route path={'/mock/:initialRuleId'} pageComponent={MockPage} />
+                    <Route path={'/modify'} pageComponent={ModifyPage} />
+                    <Route path={'/modify/:initialRuleId'} pageComponent={ModifyPage} />
                     <Route path={'/send'} pageComponent={SendPage} />
                     <Route path={'/settings'} pageComponent={SettingsPage} />
                 </Router>

src/components/common/card.tsx

@@ -90,7 +90,7 @@ const Card = styled.section.attrs((p: CardProps) => ({
     }
 `;
 
-// Card-like buttons, e.g. mock rule rows & intercept buttons
+// Card-like buttons, e.g. modify rule rows & intercept buttons
 export const LittleCard = styled(Card)`
     padding: 15px;
 

src/components/mock/handler-config.tsx src/components/modify/handler-config.tsxsrc/components/mock/handler-config.tsx renamed to src/components/modify/handler-config.tsx

@@ -26,9 +26,9 @@ import { SERIALIZED_RULES_MIME_TYPE, serializeRules } from '../../model/rules/ru
 
 import { clickOnEnter } from '../component-utils';
 import { Button, SecondaryButton } from '../common/inputs';
-import { MockRuleList } from './mock-rule-list';
+import { RuleList } from './rule-list';
 
-interface MockPageProps {
+interface ModifyPageProps {
     className?: string;
     rulesStore: RulesStore;
     accountStore: AccountStore;
@@ -37,7 +37,7 @@ interface MockPageProps {
     initialRuleId?: string;
 }
 
-const MockPageContainer = styled.section`
+const ModifyPageContainer = styled.section`
     box-sizing: border-box;
     height: 100%;
     width: 100%;
@@ -46,12 +46,12 @@ const MockPageContainer = styled.section`
     align-items: stretch;
 `;
 
-const MockPageScrollContainer = styled.div`
+const ModifyPageScrollContainer = styled.div`
     overflow-y: scroll;
     flex-grow: 1;
 `;
 
-const MockPageHeader = styled.header`
+const ModifyPageHeader = styled.header`
     box-sizing: border-box;
     width: 100%;
     padding: 20px calc(40px + 16px) 20px 40px; /* ~16px to match scrollbar below */
@@ -64,9 +64,8 @@ const MockPageHeader = styled.header`
     align-items: center;
 `;
 
-const MockHeading = styled.h1`
+const EditHeading = styled.h1`
     font-size: ${p => p.theme.loudHeadingSize};
-    font-family: ${p => p.theme.titleTextFamily};
     font-weight: bold;
     flex-grow: 1;
 `;
@@ -91,7 +90,7 @@ const OtherButton = styled(SecondaryButton)`
 @inject('rulesStore')
 @inject('accountStore')
 @observer
-class MockPage extends React.Component<MockPageProps> {
+class ModifyPage extends React.Component<ModifyPageProps> {
 
     containerRef = React.createRef<HTMLDivElement>();
 
@@ -153,9 +152,9 @@ class MockPage extends React.Component<MockPageProps> {
         } = this.props.rulesStore;
         const { isPaidUser } = this.props.accountStore;
 
-        return <MockPageContainer ref={this.containerRef}>
-            <MockPageHeader>
-                <MockHeading>Mock & Rewrite HTTP</MockHeading>
+        return <ModifyPageContainer ref={this.containerRef}>
+            <ModifyPageHeader>
+                <EditHeading>Transform & Mock HTTP</EditHeading>
 
                 <OtherButton
                     disabled={!areSomeRulesNonDefault}
@@ -208,10 +207,10 @@ class MockPage extends React.Component<MockPageProps> {
                 >
                     <Icon icon={['fas', 'save']} /> Save changes
                 </SaveButton>
-            </MockPageHeader>
+            </ModifyPageHeader>
 
-            <MockPageScrollContainer>
-                <MockRuleList
+            <ModifyPageScrollContainer>
+                <RuleList
                     activeRules={rules}
                     draftRules={draftRules}
                     collapsedRulesMap={this.collapsedRulesMap}
@@ -228,8 +227,8 @@ class MockPage extends React.Component<MockPageProps> {
                     moveRule={moveDraftRule}
                     combineRulesAsGroup={combineDraftRulesAsGroup}
                 />
-            </MockPageScrollContainer>
-        </MockPageContainer>
+            </ModifyPageScrollContainer>
+        </ModifyPageContainer>
     }
 
     @action.bound
@@ -353,8 +352,8 @@ class MockPage extends React.Component<MockPageProps> {
 }
 
 // Exclude stores etc from the external props, as they're injected
-const InjectedMockPage = MockPage as unknown as WithInjected<
-    typeof MockPage,
+const InjectedModifyPage = ModifyPage as unknown as WithInjected<
+    typeof ModifyPage,
     'rulesStore' | 'accountStore' | 'navigate'
 >;
-export { InjectedMockPage as MockPage };
+export { InjectedModifyPage as ModifyPage };

src/components/mock/handler-selection.tsx …/components/modify/handler-selection.tsxsrc/components/mock/handler-selection.tsx renamed to src/components/modify/handler-selection.tsx src/components/mock/handler-selection.tsx renamed to src/components/modify/handler-selection.tsx

@@ -15,16 +15,16 @@ import { Icon } from '../../icons';
 import {
     isRuleGroup,
     ItemPath,
-    HtkMockRuleGroup,
+    HtkRuleGroup,
     mapRules,
     flattenRules
 } from '../../model/rules/rules-structure';
 import { getMethodColor } from '../../model/events/categorization';
 
 import { clickOnEnter, noPropagation } from '../component-utils';
 import { TextInput } from '../common/inputs';
-import { DragHandle } from './mock-drag-handle';
-import { IconMenu, IconMenuButton } from './mock-item-menu';
+import { DragHandle } from './rule-drag-handle';
+import { IconMenu, IconMenuButton } from './rule-icon-menu';
 
 const CollapsedItemPlaceholder = styled.div<{
     index: number,
@@ -186,11 +186,11 @@ const extendGroupDraggableStyles = (
     };
 };
 
-const isFullyActiveGroup = (group: HtkMockRuleGroup) =>
+const isFullyActiveGroup = (group: HtkRuleGroup) =>
     flattenRules(group).every(r => r.activated);
 
 export const GroupHeader = observer((p: {
-    group: HtkMockRuleGroup,
+    group: HtkRuleGroup,
     path: ItemPath,
     index: number,
     collapsed: boolean,
@@ -336,7 +336,7 @@ const GroupTailPlaceholder = styled.div`
     margin-bottom: -20px;
 `;
 
-export const GroupTail = (p: { group: HtkMockRuleGroup, index: number }) =>
+export const GroupTail = (p: { group: HtkRuleGroup, index: number }) =>
     <Draggable
         draggableId={p.group.id + '-tail'}
         index={p.index}