Allow collapsing the entire request/response header section

Author: pimterry

src/components/common/collapsible-section.tsx

@@ -1,9 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { observable, action } from 'mobx';
 
 import { styled, css } from "../../styles";
+import { CollapsibleSectionKey, UiStore } from '../../model/ui/ui-store';
+
 import { isReactElement } from '../../util/ui';
 import { Icon, IconProp } from '../../icons';
 
@@ -13,6 +15,9 @@ interface CollapsibleSectionProps {
     withinGrid?: boolean;
     prefixTrigger?: boolean;
     contentName: string;
+
+    collapsePersistKey?: CollapsibleSectionKey;
+    uiStore?: UiStore;
 }
 
 const CollapsibleSectionWrapper = styled.section`
@@ -62,14 +67,17 @@ const SummaryAsSpacer = styled.div`
  * This component also works if there is no body provided - it falls back to just
  * showing the summary without the expand/collapse toggle.
  */
+@inject('uiStore')
 @observer
 export class CollapsibleSection extends React.Component<CollapsibleSectionProps> {
 
     static idCounter = 0;
     id = `collapsible-${CollapsibleSection.idCounter++}`;
 
     @observable
-    open = false;
+    open = this.props.collapsePersistKey
+        ? !!this.props.uiStore?.collapsibleSectionStates[this.props.collapsePersistKey]
+        : false;
 
     render() {
         const {
@@ -150,6 +158,10 @@ export class CollapsibleSection extends React.Component<CollapsibleSectionProps>
     toggleOpen(e: React.SyntheticEvent) {
         e.preventDefault();
         this.open = !this.open;
+
+        if (this.props.collapsePersistKey) {
+            this.props.uiStore!.collapsibleSectionStates[this.props.collapsePersistKey] = this.open;
+        }
     }
 }
 

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

@@ -143,15 +143,6 @@ const HeaderDocsLink = styled(DocsLink)`
     margin-top: 10px;
 `;
 
-const PseudoHeadersHiddenMessage = styled.span`
-    grid-column: 2 / -1;
-    font-style: italic;
-`;
-
-const PseudoHeadersContent = styled(CollapsibleSectionBody)`
-    line-height: 1.3;
-`;
-
 const getHeaderDescription = (
     name: string,
     value: string,
@@ -223,3 +214,12 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
         }) }
     </HeadersGrid>;
 }));
+
+export const HeaderHeadingContainer = styled.div<{ open?: boolean }>`
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+    ${p => p.open !== true && `
+        margin-bottom: -10px;
+    `}
+`;

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

@@ -26,7 +26,7 @@ import {
 import { DocsLink } from '../../common/docs-link';
 import { SourceIcon } from '../../common/source-icon';
 import { HttpVersionPill } from '../../common/http-version-pill';
-import { HeaderDetails } from './header-details';
+import { HeaderDetails, HeaderHeadingContainer } from './header-details';
 import { UrlBreakdown } from '../url-breakdown';
 import { StepClassKey } from '../../../model/rules/rules';
 import { MatchedRulePill, shouldShowRuleDetails } from './matched-rule-pill';
@@ -82,12 +82,20 @@ const RawRequestDetails = (p: {
             }
         </CollapsibleSection>
 
-        <ContentLabelBlock>Headers</ContentLabelBlock>
-        <HeaderDetails
-            httpVersion={p.httpVersion}
-            headers={p.request.rawHeaders}
-            requestUrl={p.request.parsedUrl}
-        />
+        <CollapsibleSection
+            contentName='Headers'
+            collapsePersistKey='httpRequestHeaders'
+        >
+            <HeaderHeadingContainer>
+                <ContentLabelBlock>Headers</ContentLabelBlock>
+            </HeaderHeadingContainer>
+
+            <HeaderDetails
+                httpVersion={p.httpVersion}
+                headers={p.request.rawHeaders}
+                requestUrl={p.request.parsedUrl}
+            />
+        </CollapsibleSection>
     </div>;
 }
 

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

@@ -16,7 +16,7 @@ import {
     CollapsibleCardHeading
 } from '../../common/card';
 import { Pill } from '../../common/pill';
-import { HeaderDetails } from './header-details';
+import { HeaderDetails, HeaderHeadingContainer } from './header-details';
 import {
 } from '../../common/card';
 import {
@@ -86,12 +86,20 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
                 }
             </CollapsibleSection>
 
-            <ContentLabelBlock>Headers</ContentLabelBlock>
-            <HeaderDetails
-                httpVersion={httpVersion}
-                headers={response.rawHeaders}
-                requestUrl={requestUrl}
-            />
+            <CollapsibleSection
+                contentName='Headers'
+                collapsePersistKey='httpResponseHeaders'
+            >
+                <HeaderHeadingContainer>
+                    <ContentLabelBlock>Headers</ContentLabelBlock>
+                </HeaderHeadingContainer>
+
+                <HeaderDetails
+                    httpVersion={httpVersion}
+                    headers={response.rawHeaders}
+                    requestUrl={requestUrl}
+                />
+            </CollapsibleSection>
         </div>
     </CollapsibleCard>;
 });

src/model/ui/ui-store.ts

@@ -50,6 +50,12 @@ const EXPANDABLE_VIEW_CARD_KEYS = [
 ] as const;
 export type ExpandableViewCardKey = typeof EXPANDABLE_VIEW_CARD_KEYS[number];
 
+const COLLAPSIBLE_SECTION_KEYS = [
+    'httpRequestHeaders',
+    'httpResponseHeaders'
+] as const;
+export type CollapsibleSectionKey = typeof COLLAPSIBLE_SECTION_KEYS[number];
+
 const isExpandableViewCard = (key: any): key is ExpandableViewCardKey =>
     EXPANDABLE_VIEW_CARD_KEYS.includes(key);
 
@@ -256,6 +262,14 @@ export class UiStore {
     @observable
     expandedViewCard: ExpandableViewCardKey | undefined;
 
+    // Store the state for various persistently collapsible sections here - true
+    // is open, false is collapsed.
+    @observable
+    readonly collapsibleSectionStates: { [key in CollapsibleSectionKey]: boolean } = {
+        'httpRequestHeaders': true,
+        'httpResponseHeaders': true
+    };
+
     @observable
     viewScrollPosition: number | 'end' = 'end';