Add a 'jump to view' button on Send

Author: pimterry

src/components/send/response-pane.tsx

@@ -24,11 +24,13 @@ import { SentResponseError } from './sent-response-error';
 export class ResponsePane extends React.Component<{
     uiStore?: UiStore,
     accountStore?: AccountStore,
+    editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>,
 
     requestInput: RequestInput,
     exchange: HttpExchange | undefined,
-    abortRequest: (() => void) | undefined,
-    editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>
+
+    abortRequest?: () => void,
+    showRequestOnViewPage?: () => void
 }> {
 
     get cardProps() {
@@ -53,12 +55,13 @@ export class ResponsePane extends React.Component<{
     }
 
     renderSuccessfulResponse(exchange: SuccessfulExchange) {
-        const { uiStore, editorNode } = this.props;
+        const { uiStore, editorNode, showRequestOnViewPage } = this.props;
         const response = exchange.response;
 
         return <>
             <ResponseStatusSection
                 exchange={exchange}
+                showRequestOnViewPage={showRequestOnViewPage}
                 theme={uiStore!.theme}
             />
             <SentResponseHeaderSection
@@ -78,7 +81,7 @@ export class ResponsePane extends React.Component<{
     }
 
     renderFailedResponse(exchange: CompletedExchange) {
-        const { uiStore } = this.props;
+        const { uiStore, showRequestOnViewPage } = this.props;
 
         const errorType = tagsToErrorType(exchange.tags);
 
@@ -92,6 +95,7 @@ export class ResponsePane extends React.Component<{
             <FailedResponseStatusSection
                 exchange={exchange}
                 errorType={errorType ?? 'unknown'}
+                showRequestOnViewPage={showRequestOnViewPage}
                 theme={uiStore!.theme}
             />
             <SentResponseError
@@ -112,9 +116,9 @@ export class ResponsePane extends React.Component<{
 
         return <>
             <PendingResponseStatusSection
-                theme={uiStore!.theme}
                 timingEvents={exchange?.timingEvents}
                 abortRequest={abortRequest}
+                theme={uiStore!.theme}
             />
             <PendingResponseHeaderSection
                 {...this.cardProps.responseHeaders}

src/components/send/send-page.tsx

@@ -4,6 +4,7 @@ import * as portals from 'react-reverse-portal';
 
 import { styled } from '../../styles';
 import { useHotkeys } from '../../util/ui';
+import { WithInjected } from '../../types';
 
 import { SendStore } from '../../model/send/send-store';
 
@@ -47,8 +48,9 @@ const SendPageKeyboardShortcuts = (props: {
 
 @inject('sendStore')
 @observer
-export class SendPage extends React.Component<{
-    sendStore?: SendStore
+class SendPage extends React.Component<{
+    sendStore: SendStore
+    navigate: (path: string) => void
 }> {
 
     private requestEditorNode = portals.createHtmlPortalNode<typeof ContainerSizedEditor>({
@@ -62,11 +64,20 @@ export class SendPage extends React.Component<{
         const {
             sendRequest,
             selectedRequest
-        } = this.props.sendStore!;
+        } = this.props.sendStore;
 
         sendRequest(selectedRequest);
     };
 
+    private showRequestOnViewPage = () => {
+        const { sentExchange } = this.props.sendStore.selectedRequest;
+        if (!sentExchange) return;
+
+        const { navigate } = this.props;
+
+        navigate(`/view/${sentExchange.id}`);
+    }
+
     render() {
         const {
             sendRequests,
@@ -75,7 +86,7 @@ export class SendPage extends React.Component<{
             deleteRequest,
             selectedRequest,
             addRequestInput
-        } = this.props.sendStore!;
+        } = this.props.sendStore;
 
         return <SendPageContainer>
             <SendTabs
@@ -114,8 +125,10 @@ export class SendPage extends React.Component<{
                     <ResponsePane
                         requestInput={selectedRequest.request}
                         exchange={selectedRequest.sentExchange}
-                        abortRequest={
-                            selectedRequest.pendingSend?.abort
+                        abortRequest={selectedRequest.pendingSend?.abort}
+                        showRequestOnViewPage={selectedRequest.sentExchange
+                            ? this.showRequestOnViewPage
+                            : undefined
                         }
                         editorNode={this.responseEditorNode}
                     />
@@ -131,4 +144,11 @@ export class SendPage extends React.Component<{
         </SendPageContainer>;
     }
 
-}
+}
+
+// Annoying cast required to handle the store prop nicely in our types
+const InjectedSendPage = SendPage as unknown as WithInjected<
+    typeof SendPage,
+    'sendStore' | 'navigate'
+>;
+export { InjectedSendPage as SendPage };

src/components/send/sent-response-status.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 
 import { TimingEvents } from '../../types';
 import { Theme, styled } from '../../styles';
+import { Icon } from '../../icons';
 import { getReadableSize } from '../../util/buffer';
 
 import { getStatusColor } from '../../model/events/categorization';
@@ -14,7 +15,7 @@ import { ErrorType } from '../../model/http/error-types';
 import { SendCardSection } from './send-card-section';
 import { Pill, PillButton } from '../common/pill';
 import { DurationPill } from '../common/duration-pill';
-import { Icon } from '../../icons';
+import { IconButton } from '../common/icon-button';
 
 const ResponseStatusSectionCard = styled(SendCardSection)`
     padding-top: 7px;
@@ -31,8 +32,19 @@ const ResponseStatusSectionCard = styled(SendCardSection)`
     }
 `;
 
+const ShowRequestButton = styled(IconButton).attrs(() => ({
+    icon: ['fas', 'search'],
+    title: 'Jump to this request on the View page'
+}))`
+    padding: 3px 10px;
+    margin-right: -10px;
+
+    margin-left: auto;
+`;
+
 export const ResponseStatusSection = (props: {
     exchange: SuccessfulExchange,
+    showRequestOnViewPage?: () => void,
     theme: Theme
 }) => {
     const response = props.exchange.response;
@@ -53,6 +65,9 @@ export const ResponseStatusSection = (props: {
             <Pill title="The size of the raw encoded response body">
                 { getReadableSize(response.body.encoded.byteLength) }
             </Pill>
+            { props.showRequestOnViewPage &&
+                <ShowRequestButton onClick={props.showRequestOnViewPage} />
+            }
         </header>
     </ResponseStatusSectionCard>;
 }
@@ -65,9 +80,9 @@ const AbortButton = styled(PillButton)`
 `;
 
 export const PendingResponseStatusSection = observer((props: {
-    theme: Theme,
     timingEvents?: Partial<TimingEvents>,
-    abortRequest?: () => void
+    abortRequest?: () => void,
+    theme: Theme,
 }) => {
     return <ResponseStatusSectionCard
         className='ignores-expanded' // This always shows, even if something is expanded
@@ -97,7 +112,8 @@ export const PendingResponseStatusSection = observer((props: {
 
 export const FailedResponseStatusSection = (props: {
     exchange: CompletedExchange,
-    errorType: ErrorType
+    errorType: ErrorType,
+    showRequestOnViewPage?: () => void,
     theme: Theme
 }) => {
     return <ResponseStatusSectionCard
@@ -113,6 +129,10 @@ export const FailedResponseStatusSection = (props: {
                 Failed: { _.startCase(props.errorType) }
             </Pill>
             <DurationPill timingEvents={props.exchange.timingEvents} />
+
+            { props.showRequestOnViewPage &&
+                <ShowRequestButton onClick={props.showRequestOnViewPage} />
+            }
         </header>
     </ResponseStatusSectionCard>;
 }