chrissewell/hetty
1
0
Fork 0
mirror of https://github.com/dstotijn/hetty.git synced 2025-07-01 18:47:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add request filter for intercept

Browse Source
This commit is contained in:
David Stotijn
2022-03-15 19:32:29 +01:00
parent d051d48941
commit f4074a8060
18 changed files with 500 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
admin/src/features/projects/graphql/activeProject.graphql
View File

@ -6,6 +6,7 @@ query ActiveProject {
settings {
intercept {
enabled
requestFilter
}
}
}

114
admin/src/features/settings/components/Settings.tsx
View File

@ -1,13 +1,25 @@
import { useApolloClient } from "@apollo/client";
import { TabContext, TabPanel } from "@mui/lab";
import TabList from "@mui/lab/TabList";
import { Box, FormControl, FormControlLabel, FormHelperText, Switch, Tab, Typography } from "@mui/material";
import {
Box,
Button,
CircularProgress,
FormControl,
FormControlLabel,
FormHelperText,
Switch,
Tab,
TextField,
Typography,
} from "@mui/material";
import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useActiveProject } from "lib/ActiveProjectContext";
import Link from "lib/components/Link";
import { ActiveProjectDocument, useUpdateInterceptSettingsMutation } from "lib/graphql/generated";
import { withoutTypename } from "lib/graphql/omitTypename";
enum TabValue {
Intercept = "intercept",
@ -16,24 +28,55 @@ enum TabValue {
export default function Settings(): JSX.Element {
const client = useApolloClient();
const activeProject = useActiveProject();
const [updateInterceptSettings, updateIntercepSettingsResult] = useUpdateInterceptSettingsMutation();
const [updateInterceptSettings, updateIntercepSettingsResult] = useUpdateInterceptSettingsMutation({
onCompleted(data) {
client.cache.updateQuery({ query: ActiveProjectDocument }, (cachedData) => ({
activeProject: {
...cachedData.activeProject,
settings: {
...cachedData.activeProject.settings,
intercept: data.updateInterceptSettings,
},
},
}));
setInterceptReqFilter(data.updateInterceptSettings.requestFilter || "");
},
});
const [interceptReqFilter, setInterceptReqFilter] = useState("");
useEffect(() => {
setInterceptReqFilter(activeProject?.settings.intercept.requestFilter || "");
}, [activeProject?.settings.intercept.requestFilter]);
const handleInterceptEnabled: SwitchBaseProps["onChange"] = (e, checked) => {
if (!activeProject) {
e.preventDefault();
return;
}
const handleInterceptEnabled: SwitchBaseProps["onChange"] = (_, checked) => {
updateInterceptSettings({
variables: {
input: {
...withoutTypename(activeProject.settings.intercept),
enabled: checked,
},
},
onCompleted(data) {
client.cache.updateQuery({ query: ActiveProjectDocument }, (cachedData) => ({
activeProject: {
...cachedData.activeProject,
settings: {
intercept: data.updateInterceptSettings,
},
},
}));
});
};
const handleInterceptReqFilter = () => {
if (!activeProject) {
return;
}
updateInterceptSettings({
variables: {
input: {
...withoutTypename(activeProject.settings.intercept),
requestFilter: interceptReqFilter,
},
},
});
};
@ -52,7 +95,7 @@ export default function Settings(): JSX.Element {
<Typography paragraph sx={{ mb: 4 }}>
Settings allow you to tweak the behaviour of Hetty’s features.
</Typography>
<Typography variant="h6" sx={{ mb: 2 }}>
<Typography variant="h5" sx={{ mb: 2 }}>
Project settings
</Typography>
{!activeProject && (
@ -86,6 +129,49 @@ export default function Settings(): JSX.Element {
<Link href="/proxy/intercept">manual review</Link>.
</FormHelperText>
</FormControl>
<Typography variant="h6" sx={{ mt: 3 }}>
Rules
</Typography>
<form>
<FormControl sx={{ width: "50%" }}>
<TextField
label="Request filter"
placeholder={`method = "GET" OR url =~ "/foobar"`}
color="primary"
variant="outlined"
value={interceptReqFilter}
onChange={(e) => setInterceptReqFilter(e.target.value)}
InputProps={{
sx: { fontFamily: "'JetBrains Mono', monospace" },
autoCorrect: "false",
spellCheck: "false",
}}
InputLabelProps={{
shrink: true,
}}
margin="normal"
sx={{ mr: 1 }}
/>
<FormHelperText>
Filter expression to match incoming requests on. When set, only matching requests are intercepted.
</FormHelperText>
</FormControl>
<Button
type="submit"
variant="text"
color="primary"
size="large"
sx={{
mt: 2,
py: 1.8,
}}
onClick={handleInterceptReqFilter}
disabled={updateIntercepSettingsResult.loading}
startIcon={updateIntercepSettingsResult.loading ? <CircularProgress size={22} /> : undefined}
>
Update
</Button>
</form>
</TabPanel>
</TabContext>
</>

1
admin/src/features/settings/graphql/updateInterceptSettings.graphql
View File

@ -1,5 +1,6 @@
mutation UpdateInterceptSettings($input: UpdateInterceptSettingsInput!) {
updateInterceptSettings(input: $input) {
enabled
requestFilter
}
}

8
admin/src/lib/graphql/generated.tsx
View File

@ -119,6 +119,7 @@ export type HttpResponseLog = {
export type InterceptSettings = {
__typename?: 'InterceptSettings';
enabled: Scalars['Boolean'];
requestFilter?: Maybe<Scalars['String']>;
};
export type ModifyRequestInput = {
@ -315,6 +316,7 @@ export type SenderRequestInput = {
export type UpdateInterceptSettingsInput = {
enabled: Scalars['Boolean'];
requestFilter?: InputMaybe<Scalars['String']>;
};
export type CancelRequestMutationVariables = Exact<{
@ -341,7 +343,7 @@ export type ModifyRequestMutation = { __typename?: 'Mutation', modifyRequest: {
export type ActiveProjectQueryVariables = Exact<{ [key: string]: never; }>;
export type ActiveProjectQuery = { __typename?: 'Query', activeProject?: { __typename?: 'Project', id: string, name: string, isActive: boolean, settings: { __typename?: 'ProjectSettings', intercept: { __typename?: 'InterceptSettings', enabled: boolean } } } | null };
export type ActiveProjectQuery = { __typename?: 'Query', activeProject?: { __typename?: 'Project', id: string, name: string, isActive: boolean, settings: { __typename?: 'ProjectSettings', intercept: { __typename?: 'InterceptSettings', enabled: boolean, requestFilter?: string | null } } } | null };
export type CloseProjectMutationVariables = Exact<{ [key: string]: never; }>;
@ -453,7 +455,7 @@ export type UpdateInterceptSettingsMutationVariables = Exact<{
}>;
export type UpdateInterceptSettingsMutation = { __typename?: 'Mutation', updateInterceptSettings: { __typename?: 'InterceptSettings', enabled: boolean } };
export type UpdateInterceptSettingsMutation = { __typename?: 'Mutation', updateInterceptSettings: { __typename?: 'InterceptSettings', enabled: boolean, requestFilter?: string | null } };
export type GetInterceptedRequestsQueryVariables = Exact<{ [key: string]: never; }>;
@ -579,6 +581,7 @@ export const ActiveProjectDocument = gql`
settings {
intercept {
enabled
requestFilter
}
}
}
@ -1244,6 +1247,7 @@ export const UpdateInterceptSettingsDocument = gql`
mutation UpdateInterceptSettings($input: UpdateInterceptSettingsInput!) {
updateInterceptSettings(input: $input) {
enabled
requestFilter
}
}
`;

3
admin/src/lib/graphql/useApollo.ts
View File

@ -19,6 +19,9 @@ function createApolloClient() {
},
},
},
ProjectSettings: {
merge: true,
},
},
}),
});