Skip to content

Commit

Permalink
Ability to pin or exclude headers from display
Browse files Browse the repository at this point in the history 
Also copy header to value to clipboard
  • Loading branch information
@mitchcapper
mitchcapper committed Aug 11, 2023
1 parent d164770 commit 923e894
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 16 deletions.
97 changes: 97 additions & 0 deletions src/components/view/headers-context-menu-builder.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { action, runInAction } from 'mobx';
import { copyToClipboard } from '../../util/ui';

import { AccountStore } from '../../model/account/account-store';
import { UiStore } from '../../model/ui/ui-store';
import { ContextMenuItem } from '../../model/ui/context-menu';
import { HeaderClickedData,HeadersHeaderClickedData } from './http/header-details';
import {IEList} from '../../model/IncludeExcludeList';

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, event, [

{
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>[]
]
}


]

);
};
}
}

export class HeadersContextMenuBuilder {

constructor(
private accountStore: AccountStore,
private uiStore: UiStore
) {}

getContextMenuCallback(event: HeaderClickedData) {
return (mouseEvent: React.MouseEvent) => {
const { isPaidUser } = this.accountStore;
let isPinned = event.HeadersIncludeExcludeList.IsKeyOnList(event.header_name,IEList.Favorite);

this.uiStore.handleContextMenuEvent(mouseEvent, event, [
{
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 )


}

]

);
};
}
}
67 changes: 61 additions & 6 deletions src/components/view/http/header-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Headers } from '../../../types';

import { getHeaderDocs } from '../../../model/http/http-docs';
import { AccountStore } from '../../../model/account/account-store';
import { UiStore } from '../../../model/ui/ui-store';

import { CollapsibleSection } from '../../common/collapsible-section';
import { DocsLink } from '../../common/docs-link';
Expand All @@ -18,6 +19,21 @@ import {

import { CookieHeaderDescription } from './set-cookie-header-description';
import { UserAgentHeaderDescription } from './user-agent-header-description';
import {IEList, IncludeExcludeList} from '../../../model/IncludeExcludeList';
import { ArrowIcon, Icon, WarningIcon } from '../../../icons';
import { filterProps } from '../../component-utils';
import { HeadersContextMenuBuilder } from '../headers-context-menu-builder';

//the header itself over the headers section
export interface HeadersHeaderClickedData {
HeadersIncludeExcludeList : IncludeExcludeList<string>
}

export interface HeaderClickedData {
HeadersIncludeExcludeList : IncludeExcludeList<string>,
header_name : string;
header_value : string;
}

const HeadersGrid = styled.section`
display: grid;
Expand Down Expand Up @@ -74,13 +90,44 @@ const getHeaderDescription = (
{ headerDocs }
</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: Headers,
requestUrl: URL,
accountStore?: AccountStore
accountStore?: AccountStore,
uiStore?: UiStore,
HeadersIncludeExcludeList : IncludeExcludeList<string>,
}) => {
const headerNames = Object.keys(props.headers).sort();
let contextMenuBuilder = new HeadersContextMenuBuilder(props.accountStore!,props.uiStore!);
let all_headers = Object.keys(props.headers);
const filtered = props.HeadersIncludeExcludeList.FilterArrayAgainstList(all_headers.sort(), IEList.Favorite, true );
const headerNames = Array.from( props.HeadersIncludeExcludeList.SortArrayAgainstList(filtered, IEList.Favorite));
let hiddenCount = all_headers.length - headerNames.length;

return headerNames.length === 0 ?
<BlankContentPlaceholder>(None)</BlankContentPlaceholder>
Expand Down Expand Up @@ -111,8 +158,8 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
)

return <CollapsibleSection withinGrid={true} key={key}>
<HeaderKeyValue>
<HeaderName>{ name }: </HeaderName>
<HeaderKeyValue onContextMenu={contextMenuBuilder.getContextMenuCallback({header_name:name,header_value:value,HeadersIncludeExcludeList:props.HeadersIncludeExcludeList})}>
<HeaderName><RowPin pinned={props.HeadersIncludeExcludeList.IsKeyOnList(name,IEList.Favorite)} /> { name }: </HeaderName>
<span>{ value }</span>
</HeaderKeyValue>

Expand All @@ -124,5 +171,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>;
}));
16 changes: 11 additions & 5 deletions src/components/view/http/http-request-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} from '../headers-context-menu-builder';

import {
CollapsibleCardHeading,
Expand Down Expand Up @@ -86,8 +88,11 @@ const MatchedRulePill = styled(inject('uiStore')((p: {
margin-right: 5px;
}
`;
const HeadersIncludeExcludeList = new IncludeExcludeList<string>();

const RawRequestDetails = (p: { request: HtkRequest }) => {

const RawRequestDetails = inject('uiStore') ((p: { uiStore?: UiStore, request: HtkRequest }) => {
const headerHeaderContextMenuBuilder = new HeadersHeaderContextMenuBuilder(p.uiStore!);
const methodDocs = getMethodDocs(p.request.method);
const methodDetails = [
methodDocs && <Markdown
Expand Down Expand Up @@ -132,10 +137,11 @@ const RawRequestDetails = (p: { request: HtkRequest }) => {
}
</CollapsibleSection>

<ContentLabelBlock>Headers</ContentLabelBlock>
<HeaderDetails headers={p.request.headers} requestUrl={p.request.parsedUrl} />
<ContentLabelBlock onContextMenu={headerHeaderContextMenuBuilder.getContextMenuCallback({HeadersIncludeExcludeList:HeadersIncludeExcludeList})}>Headers</ContentLabelBlock>
<HeaderDetails headers={p.request.headers} requestUrl={p.request.parsedUrl} HeadersIncludeExcludeList={HeadersIncludeExcludeList} />
</div>;
}
});


interface HttpRequestCardProps extends CollapsibleCardProps {
exchange: HttpExchange;
Expand All @@ -146,7 +152,7 @@ interface HttpRequestCardProps extends CollapsibleCardProps {
onRuleClicked: () => void;
}

export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
export const HttpRequestCard = observer(( props: HttpRequestCardProps) => {
const { exchange, matchedRuleData, onRuleClicked } = props;
const { request } = exchange;

Expand Down
16 changes: 11 additions & 5 deletions src/components/view/http/http-response-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
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';
Expand All @@ -9,6 +9,9 @@ import { Theme } from '../../../styles';
import { ApiExchange } from '../../../model/api/api-interfaces';
import { getStatusColor } from '../../../model/events/categorization';
import { getStatusDocs, getStatusMessage } from '../../../model/http/http-docs';
import {IEList, IncludeExcludeList} from '../../../model/IncludeExcludeList';
import {HeadersHeaderContextMenuBuilder} from '../headers-context-menu-builder';
import { UiStore } from '../../../model/ui/ui-store';

import {
CollapsibleCard,
Expand Down Expand Up @@ -36,10 +39,13 @@ interface HttpResponseCardProps extends CollapsibleCardProps {
theme: Theme;
requestUrl: URL;
response: HtkResponse;
uiStore?: UiStore;
apiExchange: ApiExchange | undefined;
}
const HeadersIncludeExcludeList = new IncludeExcludeList<string>();

export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
export const HttpResponseCard = inject('uiStore') (observer(( props: HttpResponseCardProps) => {
const headerHeaderContextMenuBuilder = new HeadersHeaderContextMenuBuilder(props.uiStore!);
const { response, requestUrl, theme, apiExchange } = props;

const apiResponseDescription = get(apiExchange, 'response', 'description');
Expand Down Expand Up @@ -85,8 +91,8 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
}
</CollapsibleSection>

<ContentLabelBlock>Headers</ContentLabelBlock>
<HeaderDetails headers={response.headers} requestUrl={requestUrl} />
<ContentLabelBlock onContextMenu={headerHeaderContextMenuBuilder.getContextMenuCallback({HeadersIncludeExcludeList:HeadersIncludeExcludeList})}>Headers</ContentLabelBlock>
<HeaderDetails headers={response.headers} requestUrl={requestUrl} HeadersIncludeExcludeList={HeadersIncludeExcludeList} />
</div>
</CollapsibleCard>;
});
}));

0 comments on commit 923e894

Please sign in to comment.