change(ui) - filters show request or response body based on the flag from the api

frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx

@@ -4,7 +4,7 @@ import FilterSelection from '../FilterSelection';
 import FilterValue from '../FilterValue';
 import { Icon } from 'UI';
 import FilterSource from '../FilterSource';
-import { FilterType } from 'App/types/filter/filterType';
+import { FilterKey, FilterType } from 'App/types/filter/filterType';
 import SubFilterItem from '../SubFilterItem';
 
 interface Props {
@@ -13,9 +13,10 @@ interface Props {
   onUpdate: (filter) => void;
   onRemoveFilter: () => void;
   isFilter?: boolean;
+  saveRequestPayloads?: boolean;
 }
 function FilterItem(props: Props) {
-  const { isFilter = false, filterIndex, filter } = props;
+  const { isFilter = false, filterIndex, filter, saveRequestPayloads } = props;
   const canShowValues = !(filter.operator === "isAny" || filter.operator === "onAny" || filter.operator === "isUndefined");
   const isSubFilter = filter.type === FilterType.SUB_FILTERS;
 
@@ -83,7 +84,7 @@ function FilterItem(props: Props) {
         {/* filters */}
         {isSubFilter && (
           <div className="grid grid-col ml-3 w-full">
-            {filter.filters.map((subFilter, subFilterIndex) => (
+            {filter.filters.filter(i => (i.key !== FilterKey.FETCH_REQUEST_BODY && i.key !== FilterKey.FETCH_RESPONSE_BODY) || saveRequestPayloads).map((subFilter, subFilterIndex) => (
               <SubFilterItem
                 filterIndex={subFilterIndex}
                 filter={subFilter}

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -12,9 +12,10 @@ interface Props {
   onChangeEventsOrder: (e, { name, value }) => void;
   hideEventsOrder?: boolean;
   observeChanges?: () => void;
+  saveRequestPayloads?: boolean;
 }
 function FilterList(props: Props) {
-  const { observeChanges = () => {}, filter, hideEventsOrder = false } = props;
+  const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads } = props;
   const filters = List(filter.filters);
   const hasEvents = filters.filter((i: any) => i.isEvent).size > 0;
   const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0;
@@ -66,6 +67,7 @@ function FilterList(props: Props) {
               filter={filter}
               onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
               onRemoveFilter={() => onRemoveFilter(filterIndex) }
+              saveRequestPayloads={saveRequestPayloads}
             />
           ): null)}
           <div className='mb-2' />

frontend/app/components/shared/SessionSearch/SessionSearch.tsx

@@ -11,9 +11,10 @@ interface Props {
   appliedFilter: any;
   edit: typeof edit;
   addFilter: typeof addFilter;
+  saveRequestPayloads: boolean;
 }
 function SessionSearch(props: Props) {
-  const { appliedFilter } = props;
+  const { appliedFilter, saveRequestPayloads = false } = props;
   const hasEvents = appliedFilter.filters.filter(i => i.isEvent).size > 0;
   const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0;
 
@@ -60,6 +61,7 @@ function SessionSearch(props: Props) {
           onUpdateFilter={onUpdateFilter}
           onRemoveFilter={onRemoveFilter}
           onChangeEventsOrder={onChangeEventsOrder}
+          saveRequestPayloads={saveRequestPayloads}
         />
       </div>
 
@@ -82,5 +84,6 @@ function SessionSearch(props: Props) {
 }
 
 export default connect(state => ({
+  saveRequestPayloads: state.getIn(['site', 'active', 'saveRequestPayloads']),
   appliedFilter: state.getIn([ 'search', 'instance' ]),
 }), { edit, addFilter })(SessionSearch);

frontend/app/duck/site.js

@@ -40,6 +40,7 @@ const initialState = Map({
 	instance: fromJS(),
 	remainingSites: undefined,
 	siteId: null,
+	active: null,
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -59,10 +60,13 @@ const reducer = (state = initialState, action = {}) => {
 				? storedSiteId 
 				: action.data[0].projectId;
 			}
-			return state.set('list', List(action.data.map(Site))).set('siteId', siteId);
+			return state.set('list', List(action.data.map(Site)))
+				.set('siteId', siteId)
+				.set('active', List(action.data.map(Site)).find(s => s.id === parseInt(siteId)));
 		case SET_SITE_ID:
 			localStorage.setItem(SITE_ID_STORAGE_KEY, action.siteId)
-			return state.set('siteId', action.siteId);
+			const site = state.get('list').find(s => s.id === action.siteId);
+			return state.set('siteId', action.siteId).set('active', site);
 	}
 	return state;
 };

frontend/app/types/site/site.js

@@ -22,6 +22,7 @@ export default Record({
   stackIntegrations: false,
   projectKey: undefined,
   trackerVersion: undefined,
+  saveRequestPayloads: false,
 }, {
   idKey: 'id',
   methods: {