Ability to pin or exclude headers from display

mitchcapper · mitchcapper · commit d57ca72359c7 · 2023-09-26T16:14:25.000-07:00
diff --git a/src/components/send/sent-response-headers.tsx b/src/components/send/sent-response-headers.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { RawHeaders } from '../../types';
+import {IncludeExcludeList} from '../../model/IncludeExcludeList';
+
 
 import {
     CollapsibleCardHeading,
@@ -16,6 +18,7 @@ export interface ResponseHeaderSectionProps extends ExpandableCardProps {
     requestUrl: URL;
     headers: RawHeaders;
 }
+const HeadersIncludeExcludeList = new IncludeExcludeList<string>();
 
 export const SentResponseHeaderSection = ({
     requestUrl,
@@ -34,7 +37,7 @@ export const SentResponseHeaderSection = ({
                 Response Headers
             </CollapsibleCardHeading>
         </header>
-        <HeaderDetails
+        <HeaderDetails HeadersIncludeExcludeList={HeadersIncludeExcludeList}
             requestUrl={requestUrl}
             headers={headers}
         />
diff --git a/src/components/view/http/header-details.tsx b/src/components/view/http/header-details.tsx
@@ -18,6 +18,11 @@ import {
 
 import { CookieHeaderDescription } from './set-cookie-header-description';
 import { UserAgentHeaderDescription } from './user-agent-header-description';
+import { IEList, IncludeExcludeList } from '../../../model/IncludeExcludeList';
+import { HeadersContextMenuBuilder } from './headers-context-menu-builder';
+import { filterProps } from '../../component-utils';
+import { ArrowIcon, Icon, WarningIcon } from '../../../icons';
+import { UiStore } from '../../../model/ui/ui-store';
 
 const HeadersGrid = styled.section`
     display: grid;
@@ -77,12 +82,49 @@ const getHeaderDescription = (
     </p>
 };
 
-export const HeaderDetails = inject('accountStore')(observer((props: {
+
+const RowPin = styled(
+    filterProps(Icon, 'pinned')
+).attrs((p: { pinned: boolean }) => ({
+    icon: ['fas', 'thumbtack'],
+    title: p.pinned ? "This header is pinned, it will appear at the top of the list by default" : ''
+}))`
+    font-size: 90%;
+    background-color: ${p => p.theme.containerBackground};
+    /* Without this, 0 width pins create a large & invisible but still clickable icon */
+    overflow: hidden;
+    transition: width 0.1s, padding 0.1s, margin 0.1s;
+    ${(p: { pinned: boolean }) =>
+        p.pinned
+            ? `
+            width: auto;
+            padding: 4px;
+            height: 40%;
+            && { margin-right: -3px; }
+        `
+            : `
+            padding: 0px 0;
+            width: 0 !important;
+            margin: 0 !important;
+        `
+    }
+`;
+
+export const HeaderDetails = inject('accountStore', 'uiStore')(observer((props: {
     headers: RawHeaders,
     requestUrl: URL,
-    accountStore?: AccountStore
+    HeadersIncludeExcludeList: IncludeExcludeList<string>,
+    accountStore?: AccountStore,
+    uiStore?: UiStore
 }) => {
-    const sortedHeaders = _.sortBy(props.headers, ([key]) => key.toLowerCase());
+    const contextMenuBuilder = new HeadersContextMenuBuilder(
+        props.accountStore!,
+        props.uiStore!
+    );
+    const filtered = props.HeadersIncludeExcludeList.FilterArrayAgainstList(_.sortBy(props.headers, ([key]) => key.toLowerCase()), IEList.Favorite, true, ([key]) => key);
+    const sortedHeaders = Array.from(props.HeadersIncludeExcludeList.SortArrayAgainstList(filtered, IEList.Favorite, ([key]) => key));
+    let hiddenCount = props.headers.length - sortedHeaders.length;
+
 
     return sortedHeaders.length === 0 ?
         <BlankContentPlaceholder>(None)</BlankContentPlaceholder>
@@ -98,8 +140,8 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
                 )
 
                 return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
-                    <HeaderKeyValue>
-                        <HeaderName>{ key }: </HeaderName>
+                    <HeaderKeyValue onContextMenu={contextMenuBuilder.getContextMenuCallback({ header_name: key, header_value: [value], HeadersIncludeExcludeList: props.HeadersIncludeExcludeList })}>
+                        <HeaderName><RowPin pinned={props.HeadersIncludeExcludeList.IsKeyOnList(key, IEList.Favorite)} /> {key}: </HeaderName>
                         <span>{ value }</span>
                     </HeaderKeyValue>
 
@@ -111,5 +153,13 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
                     </HeaderDescriptionContainer> }
                 </CollapsibleSection>
             }) }
+            {
+hiddenCount > 0 ? 
+<CollapsibleSection withinGrid={true}><HeaderKeyValue>
+<HeaderName>Plus {hiddenCount} hidden...</HeaderName>
+
+</HeaderKeyValue></CollapsibleSection>
+ : <BlankContentPlaceholder />
+            }
         </HeadersGrid>;
 }));
diff --git a/src/components/view/http/headers-context-menu-builder.ts b/src/components/view/http/headers-context-menu-builder.ts
@@ -0,0 +1,111 @@
+import { action, runInAction } from 'mobx';
+
+
+import { AccountStore } from '../../../model/account/account-store';
+import { UiStore } from '../../../model/ui/ui-store';
+
+import { IEList, IncludeExcludeList } from '../../../model/IncludeExcludeList';
+
+import { copyToClipboard } from '../../../util/ui';
+import { ContextMenuItem } from '../../../model/ui/context-menu';
+
+
+
+
+export interface HeadersHeaderClickedData {
+    HeadersIncludeExcludeList : IncludeExcludeList<string>
+}
+
+export interface HeaderEvent {
+	HeadersIncludeExcludeList: IncludeExcludeList<string>,
+	header_name: string;
+	header_value: string[];
+}
+
+export class HeadersHeaderContextMenuBuilder {
+
+    constructor(
+        private uiStore: UiStore
+    ) {}
+
+    getContextMenuCallback(event: HeadersHeaderClickedData) {
+        return (mouseEvent: React.MouseEvent) => {
+			let excluded = event.HeadersIncludeExcludeList.GetKeysOnList(IEList.Exclude);
+
+			this.uiStore.handleContextMenuEvent(mouseEvent, [
+
+				{
+					type: 'submenu',
+					enabled: excluded.length > 0,
+					label: `Excluded`,
+					items: [
+						{
+							type: 'option',
+							label: `Clear All Excluded Headers`,
+							callback: async (data) => data.HeadersIncludeExcludeList.ClearList(IEList.Exclude)
+							
+						},
+						...
+						(excluded.map((headerName) => ({
+
+                                type: 'option',
+                                label: `Clear '${headerName}'`,
+                                callback: async (data: HeadersHeaderClickedData) => 
+								data.HeadersIncludeExcludeList.RemoveFromList(headerName,IEList.Exclude)
+                                    
+                                    
+                                }
+                            ))
+							 ) as ContextMenuItem<HeadersHeaderClickedData>[]
+					]
+				}
+
+
+			], event
+           
+			);
+        };
+    }
+}
+
+export class HeadersContextMenuBuilder {
+
+    constructor(
+        private accountStore: AccountStore,
+        private uiStore: UiStore
+    ) {}
+
+    getContextMenuCallback(event: HeaderEvent) {
+        return (mouseEvent: React.MouseEvent) => {
+            const { isPaidUser } = this.accountStore;
+			let isPinned = event.HeadersIncludeExcludeList.IsKeyOnList(event.header_name,IEList.Favorite);
+
+			this.uiStore.handleContextMenuEvent(mouseEvent,  [
+				{
+					type: 'option',
+					label: (isPinned ? `Unpin` : `Pin`) + ` This Header`,
+					callback: async (data) => {
+						isPinned ? data.HeadersIncludeExcludeList.RemoveFromList(data.header_name,IEList.Favorite) : data.HeadersIncludeExcludeList.AddOrUpdateToList(data.header_name,IEList.Favorite);
+					}
+				},
+				{
+					type: 'option',
+					label: `Exclude This Header`,
+					callback: async (data) => {
+						data.HeadersIncludeExcludeList.AddOrUpdateToList(data.header_name,IEList.Exclude);
+					}
+				},
+				{
+					type: 'option',
+					label: `Copy Header Value`,
+					callback: async (data) => copyToClipboard( data.header_value.join("\n" ) )
+						
+					
+				}
+
+			], event
+           
+			);
+        };
+    }
+}
diff --git a/src/components/view/http/http-request-card.tsx b/src/components/view/http/http-request-card.tsx
@@ -12,6 +12,8 @@ import { getSummaryColour } 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 {IEList, IncludeExcludeList} from '../../../model/IncludeExcludeList';
+import { HeadersHeaderContextMenuBuilder, HeaderEvent } from './headers-context-menu-builder';
 
 import {
     CollapsibleCardHeading,
@@ -87,7 +89,10 @@ const MatchedRulePill = styled(inject('uiStore')((p: {
     }
 `;
 
-const RawRequestDetails = (p: { request: HtkRequest }) => {
+const HeadersIncludeExcludeList = new IncludeExcludeList<string>();
+
+const RawRequestDetails = (p: { request: HtkRequest, contextMenuBuilder: HeadersHeaderContextMenuBuilder, uiStore : UiStore }) => {
+
     const methodDocs = getMethodDocs(p.request.method);
     const methodDetails = [
         methodDocs && <Markdown
@@ -131,24 +136,28 @@ const RawRequestDetails = (p: { request: HtkRequest }) => {
                 </CollapsibleSectionBody>
             }
         </CollapsibleSection>
-
-        <ContentLabelBlock>Headers</ContentLabelBlock>
-        <HeaderDetails headers={p.request.rawHeaders} requestUrl={p.request.parsedUrl} />
+        <ContentLabelBlock onContextMenu={p.contextMenuBuilder.getContextMenuCallback({HeadersIncludeExcludeList})}>Headers</ContentLabelBlock>
+        <HeaderDetails uiStore={p.uiStore} headers={p.request.rawHeaders} HeadersIncludeExcludeList={HeadersIncludeExcludeList} requestUrl={p.request.parsedUrl} />
     </div>;
 }
 
 interface HttpRequestCardProps extends CollapsibleCardProps {
     exchange: HttpExchange;
+    uiStore?: UiStore;
     matchedRuleData: {
         stepTypes: HandlerClassKey[],
         status: 'unchanged' | 'modified-types' | 'deleted'
     } | undefined;
     onRuleClicked: () => void;
 }
 
-export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
+export const HttpRequestCard = inject('uiStore') (observer((props: HttpRequestCardProps) => {
     const { exchange, matchedRuleData, onRuleClicked } = props;
     const { request } = exchange;
+    const contextMenuBuilder = new HeadersHeaderContextMenuBuilder(
+        props.uiStore!
+    );
+
 
     // We consider passthrough as a no-op, and so don't show anything in that case.
     const noopRule = matchedRuleData?.stepTypes.every(
@@ -177,6 +186,6 @@ export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
             </CollapsibleCardHeading>
         </header>
 
-        <RawRequestDetails request={request} />
+        <RawRequestDetails uiStore={props.uiStore!} request={request} contextMenuBuilder={contextMenuBuilder} />
     </CollapsibleCard>;
-});
+}));
diff --git a/src/components/view/http/http-response-card.tsx b/src/components/view/http/http-response-card.tsx
@@ -1,12 +1,14 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { observer } from 'mobx-react';
+
+import { inject, observer } from 'mobx-react';
 import { get } from 'typesafe-get';
 
 import { HtkResponse, Omit } from '../../../types';
 import { Theme } from '../../../styles';
 
 import { ApiExchange } from '../../../model/api/api-interfaces';
+import { UiStore } from '../../../model/ui/ui-store';
 import { getStatusColor } from '../../../model/events/categorization';
 import { getStatusDocs, getStatusMessage } from '../../../model/http/http-docs';
 
@@ -17,6 +19,8 @@ import {
 } from '../../common/card';
 import { Pill } from '../../common/pill';
 import { HeaderDetails } from './header-details';
+import { HeadersHeaderContextMenuBuilder, HeaderEvent } from './headers-context-menu-builder';
+import {IEList, IncludeExcludeList} from '../../../model/IncludeExcludeList';
 import {
 } from '../../common/card';
 import {
@@ -35,13 +39,19 @@ import { DocsLink } from '../../common/docs-link';
 interface HttpResponseCardProps extends CollapsibleCardProps  {
     theme: Theme;
     requestUrl: URL;
+    uiStore?: UiStore;
     response: HtkResponse;
     apiExchange: ApiExchange | undefined;
 }
+const HeadersIncludeExcludeList = new IncludeExcludeList<string>();
 
-export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
+export const HttpResponseCard = inject('uiStore') (observer((props: HttpResponseCardProps) => {
     const { response, requestUrl, theme, apiExchange } = props;
 
+    const contextMenuBuilder = new HeadersHeaderContextMenuBuilder(
+        props.uiStore!
+    );
+
     const apiResponseDescription = get(apiExchange, 'response', 'description');
     const statusDocs = getStatusDocs(response.statusCode);
 
@@ -84,9 +94,8 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
                     : null
                 }
             </CollapsibleSection>
-
-            <ContentLabelBlock>Headers</ContentLabelBlock>
-            <HeaderDetails headers={response.rawHeaders} requestUrl={requestUrl} />
+            <ContentLabelBlock  onContextMenu={contextMenuBuilder.getContextMenuCallback({HeadersIncludeExcludeList})}>Headers</ContentLabelBlock>
+            <HeaderDetails headers={response.rawHeaders} requestUrl={requestUrl} HeadersIncludeExcludeList={HeadersIncludeExcludeList} uiStore={props.uiStore}  />
         </div>
     </CollapsibleCard>;
-});
+}));
