Expose transform perspectives in the UI

Author: pimterry

src/components/common/pill.tsx

@@ -9,7 +9,9 @@ import {
  getBackgroundColor
 } from '../../util/colors';
 
-function getNonTransparentBackground(baseColor: string, theme: Theme) {
+// Returns a non-transparent but transparency-like background color for
+// a pill shown on top of the main background.
+function getPillBackground(baseColor: string, theme: Theme) {
  return polished.mix(0.3, baseColor, theme.mainBackground);
 }
 
@@ -51,7 +53,7 @@ export const PillButton = styled(UnstyledButton)`
  }
 `;
 
-const Select = styled(Pill.withComponent('select'))`
+export const PillSelect = styled(Pill.withComponent('select'))`
  text-align: left;
  border: none;
 
@@ -65,7 +67,7 @@ const Select = styled(Pill.withComponent('select'))`
 
  * {
  background-color: ${(p: { color?: string, theme?: Theme }) =>
- getNonTransparentBackground(
+ getPillBackground(
  p.color || p.theme!.pillDefaultColor,
  p.theme!
  )
@@ -86,7 +88,7 @@ export const PillSelector = <
  const asKey = props.keyFormatter || ((k: T) => k.toString() as K);
  const asName = props.nameFormatter || ((k: T) => k.toString());
 
- return <Select
+ return <PillSelect
  onChange={(e) => props.onChange(e.target.value as K)}
  value={asKey(props.value)}
  >
@@ -106,5 +108,5 @@ export const PillSelector = <
  }</optgroup>
  )
  }
- </Select>
+ </PillSelect>
 };

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

@@ -7,7 +7,6 @@ import * as portals from 'react-reverse-portal';
 
 import { ExchangeMessage } from '../../../types';
 
-import { ErrorLike } from '../../../util/error';
 import { getHeaderValue } from '../../../util/headers';
 
 import { ViewableContentType, getCompatibleTypes } from '../../../model/events/content-types';
@@ -38,6 +37,8 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
  url: string,
  message: ExchangeMessage,
  apiBodySchema?: SchemaObject,
+
+ editorKey: string,
  editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor>
 }> {
 
@@ -76,7 +77,9 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
  expanded,
  onCollapseToggled,
  onExpandToggled,
- ariaLabel
+ ariaLabel,
+ editorKey,
+ editorNode
  } = this.props;
 
  const compatibleContentTypes = getCompatibleTypes(
@@ -118,8 +121,8 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
  </header>
  <EditorCardContent showFullBorder={!expanded}>
  <ContentViewer
- contentId={`${message.id}-${direction}`}
- editorNode={this.props.editorNode}
+ contentId={editorKey}
+ editorNode={editorNode}
  headers={message.headers}
  contentType={decodedContentType}
  schema={apiBodySchema}

src/components/view/http/http-breakpoint-body-card.tsx

@@ -30,10 +30,11 @@ export class HttpBreakpointBodyCard extends React.Component<ExpandableCardProps
  title: string,
  direction: 'left' | 'right',
 
- exchangeId: string,
  body: EditableBody,
  rawHeaders: RawHeaders,
  onChange: (result: Buffer) => void,
+
+ editorKey: string,
  editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor>;
 }> {
 
@@ -71,13 +72,14 @@ export class HttpBreakpointBodyCard extends React.Component<ExpandableCardProps
  body,
  rawHeaders,
  title,
- exchangeId,
  direction,
  collapsed,
  expanded,
  onCollapseToggled,
  onExpandToggled,
- ariaLabel
+ ariaLabel,
+ editorNode,
+ editorKey
  } = this.props;
 
  const bodyString = bufferToString(body.decoded, this.textEncoding);
@@ -116,8 +118,8 @@ export class HttpBreakpointBodyCard extends React.Component<ExpandableCardProps
 
  <EditorCardContent showFullBorder={!expanded}>
  <portals.OutPortal<typeof SelfSizedEditor>
- contentId={`bp-${exchangeId}-${direction}`}
- node={this.props.editorNode}
+ contentId={`bp-${editorKey}`}
+ node={editorNode}
  language={this.contentType}
  value={bodyString}
  onChange={this.onBodyChange}

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

@@ -8,7 +8,7 @@ import { CollectedEvent, HtkResponse, HttpExchange, HttpExchangeView } from '../
 import { styled } from '../../../styles';
 import { logError } from '../../../errors';
 
-import { ExpandableViewCardKey, UiStore } from '../../../model/ui/ui-store';
+import { ContentPerspective, ExpandableViewCardKey, UiStore } from '../../../model/ui/ui-store';
 import { RulesStore } from '../../../model/rules/rules-store';
 import { AccountStore } from '../../../model/account/account-store';
 import { ApiExchange } from '../../../model/api/api-interfaces';
@@ -37,6 +37,7 @@ import { HttpRequestBreakpointHeader, HttpResponseBreakpointHeader } from './htt
 import { HttpBreakpointRequestCard } from './http-breakpoint-request-card';
 import { HttpBreakpointResponseCard } from './http-breakpoint-response-card';
 import { HttpBreakpointBodyCard } from './http-breakpoint-body-card';
+import { TransformCard } from './transform-card';
 
 // Used to push all cards below it to the bottom (when less than 100% height)
 const CardDivider = styled.div`
@@ -61,6 +62,7 @@ const makeFriendlyApiName = (rawName: string) => {
 @observer
 export class HttpDetailsPane extends React.Component<{
  exchange: HttpExchangeView,
+ perspective: ContentPerspective,
 
  requestEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
  responseEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
@@ -121,7 +123,7 @@ export class HttpDetailsPane extends React.Component<{
  }
 
  const cards = (exchange.downstream.isBreakpointed)
- ? this.renderBreakpointCards(exchange.downstream, apiName, apiExchange)
+ ? this.renderBreakpointCards(exchange, apiName, apiExchange)
  : this.renderNormalCards(exchange, apiName, apiExchange);
 
  return <>
@@ -235,30 +237,38 @@ export class HttpDetailsPane extends React.Component<{
  }
 
  private renderBreakpointCards(
- exchange: HttpExchange,
+ exchange: HttpExchangeView,
  apiName: string | undefined,
  apiExchange: ApiExchange | undefined
  ) {
  const { uiStore } = this.props;
- const { requestBreakpoint } = exchange;
+ const { requestBreakpoint } = exchange.downstream;
 
  const cards: Array<JSX.Element | null> = [];
 
  if (requestBreakpoint) {
  cards.push(<HttpBreakpointRequestCard
  {...this.cardProps.request}
- exchange={exchange}
+ exchange={exchange.downstream}
  onChange={requestBreakpoint.updateMetadata}
  />);
 
  cards.push(this.renderRequestBody(exchange, apiExchange));
  } else {
- const responseBreakpoint = exchange.responseBreakpoint!;
+ const responseBreakpoint = exchange.downstream.responseBreakpoint!;
+ const transformCard = this.renderTransformCard();
+ if (transformCard) cards.push(transformCard);
 
  cards.push(this.renderApiCard(apiName, apiExchange));
  cards.push(<HttpRequestCard
  {...this.cardProps.request}
- matchedRuleData={this.matchedRuleData}
+ matchedRuleData={
+ // Matched rule data is shown inline here only when there
+ // was not any substantial proxy transformation.
+ !transformCard
+ ? this.matchedRuleData
+ : undefined
+ }
  onRuleClicked={this.jumpToRule}
  exchange={exchange}
  />);
@@ -269,7 +279,7 @@ export class HttpDetailsPane extends React.Component<{
 
  cards.push(<HttpBreakpointResponseCard
  {...this.cardProps.response}
- exchange={exchange}
+ exchange={exchange.downstream}
  onChange={responseBreakpoint.updateMetadata}
  theme={uiStore!.theme}
  />);
@@ -290,11 +300,19 @@ export class HttpDetailsPane extends React.Component<{
 
  const cards: Array<JSX.Element | null> = [];
 
+ const transformCard = this.renderTransformCard();
+ if (transformCard) cards.push(transformCard);
  cards.push(this.renderApiCard(apiName, apiExchange));
 
  cards.push(<HttpRequestCard
  {...this.cardProps.request}
- matchedRuleData={this.matchedRuleData}
+ matchedRuleData={
+ // Matched rule data is shown inline here only when there
+ // was not any substantial proxy transformation.
+ !transformCard
+ ? this.matchedRuleData
+ : undefined
+ }
  onRuleClicked={this.jumpToRule}
  exchange={exchange}
  />);
@@ -377,14 +395,26 @@ export class HttpDetailsPane extends React.Component<{
  return cards;
  }
 
+ private renderTransformCard() {
+ const { uiStore } = this.props;
+
+ if (!this.props.exchange.upstream?.wasTransformed) return false;
+
+ return <TransformCard
+ key='transform'
+ matchedRuleData={this.matchedRuleData}
+ onRuleClicked={this.jumpToRule}
+ uiStore={uiStore!}
+ />;
+ }
+
  private renderRequestBody(exchange: HttpExchangeView, apiExchange: ApiExchange | undefined) {
  const { request } = exchange;
  const { requestBreakpoint } = exchange.downstream;
 
  return requestBreakpoint
  ? <HttpBreakpointBodyCard
  {...this.requestBodyParams()}
- exchangeId={exchange.id}
  body={requestBreakpoint.inProgressResult.body}
  rawHeaders={requestBreakpoint.inProgressResult.rawHeaders}
  onChange={requestBreakpoint.updateBody}
@@ -405,7 +435,6 @@ export class HttpDetailsPane extends React.Component<{
  return responseBreakpoint
  ? <HttpBreakpointBodyCard
  {...this.responseBodyParams()}
- exchangeId={exchange.id}
  body={responseBreakpoint.inProgressResult.body}
  rawHeaders={responseBreakpoint.inProgressResult.rawHeaders}
  onChange={responseBreakpoint.updateBody}
@@ -449,6 +478,7 @@ export class HttpDetailsPane extends React.Component<{
  ...this.cardProps.requestBody,
  title: 'Request Body',
  direction: 'right' as const,
+ editorKey: `${this.props.exchange.id}-${this.props.perspective}-request`,
  editorNode: this.props.requestEditor
  };
  }
@@ -459,6 +489,7 @@ export class HttpDetailsPane extends React.Component<{
  ...this.cardProps.responseBody,
  title: 'Response Body',
  direction: 'left' as const,
+ editorKey: `${this.props.exchange.id}-${this.props.perspective}-response`,
  editorNode: this.props.responseEditor
  };
  }

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

@@ -1,24 +1,17 @@
 import * as React from 'react';
-import { inject, observer } from 'mobx-react';
+import { observer } from 'mobx-react';
 
 import { HttpExchange, HtkRequest, HttpVersion, HttpExchangeView } from '../../../types';
-import { styled } from '../../../styles';
-import { PhosphorIcon } from '../../../icons';
 
-import { aOrAn, uppercaseFirst } from '../../../util/text';
-
-import { UiStore } from '../../../model/ui/ui-store';
 import { getSummaryColor } from '../../../model/events/categorization';
 import { getMethodDocs } from '../../../model/http/http-docs';
-import { nameHandlerClass } from '../../../model/rules/rule-descriptions';
-import { HandlerClassKey } from '../../../model/rules/rules';
 
 import {
  CollapsibleCardHeading,
  CollapsibleCard,
  CollapsibleCardProps
 } from '../../common/card';
-import { Pill, PillButton } from '../../common/pill';
+import { Pill } from '../../common/pill';
 import {
  CollapsibleSection,
  CollapsibleSectionSummary,
@@ -35,58 +28,8 @@ import { SourceIcon } from '../../common/source-icon';
 import { HttpVersionPill } from '../../common/http-version-pill';
 import { HeaderDetails } from './header-details';
 import { UrlBreakdown } from '../url-breakdown';
-
-const MatchedRulePill = styled(inject('uiStore')((p: {
- className?: string,
- uiStore?: UiStore,
- ruleData: {
- stepTypes: HandlerClassKey[],
- status: 'unchanged' | 'modified-types' | 'deleted'
- },
- onClick: () => void
-}) => {
- const { stepTypes } = p.ruleData;
- const stepDescription = stepTypes.length !== 1
- ? 'multi-step'
- : nameHandlerClass(stepTypes[0]);
-
- return <PillButton
- color={getSummaryColor('mutative')} // Conceptually similar - we've modified traffic
- className={p.className}
-
- // For now we show modified as unchanged, but we could highlight this later:
- disabled={p.ruleData.status === 'deleted'}
- onClick={p.ruleData.status !== 'deleted' ? p.onClick : undefined}
-
- title={
- `This request was handled by ${
- aOrAn(stepDescription)
- } ${stepDescription} rule${
- p.ruleData.status === 'deleted'
- ? ' which has since been deleted'
- : p.ruleData.status === 'modified-types'
- ? ' (which has since been modified)'
- : ''
- }.${
- p.ruleData.status !== 'deleted'
- ? '\nClick here to jump to the rule on the Modify page.'
- : ''
- }`
- }
- >
- <PhosphorIcon icon='Pencil' size='16px' />
- { uppercaseFirst(stepDescription) }
- </PillButton>;
-}))`
- margin-right: auto;
-
- text-decoration: none;
- word-spacing: 0;
-
- > svg {
- margin: -1px 5px 0 -1px;
- }
-`;
+import { HandlerClassKey } from '../../../model/rules/rules';
+import { MatchedRulePill } from './matched-rule-pill';
 
 const RawRequestDetails = (p: {
  request: HtkRequest,