Task: response area expanded slice (#3267)

src/app/services/actions/response-expanded-action-creator.spec.ts

@@ -1,19 +1,19 @@
 import { RESPONSE_EXPANDED } from '../../../app/services/redux-constants';
-import { expandResponseArea } from '../../../app/services/actions/response-expanded-action-creator';
 import { AppAction } from '../../../types/action';
+import { expandResponseArea } from '../slices/response-area-expanded.slice';
 
 describe('Response Area Expansion', () => {
   it('should dispatch RESPONSE_EXPANDED when expandResponseArea() is called', () => {
     //Arrange
-    const response: boolean = true;
+    const payload: boolean = true;
 
     const expectedAction: AppAction = {
       type: RESPONSE_EXPANDED,
-      response
+      payload
     }
 
     // Act
-    const action = expandResponseArea(response);
+    const action = expandResponseArea(payload);
 
     // Assert
     expect(action).toEqual(expectedAction);

src/app/services/reducers/index.ts

@@ -11,14 +11,14 @@ import permissionGrants from '../slices/permission-grants.slice';
 import profile from '../slices/profile.slice';
 import proxyUrl from '../slices/proxy.slice';
 import resources from '../slices/resources.slice';
+import responseAreaExpanded from '../slices/response-area-expanded.slice';
 import sampleQuery from '../slices/sample-query.slice';
 import samplesReducer from '../slices/samples.slice';
 import scopes from '../slices/scopes.slice';
 import snippets from '../slices/snippet.slice';
 import themeChange from '../slices/theme.slice';
 
 import { queryRunnerStatus } from './query-runner-status-reducers';
-import { responseAreaExpanded } from './response-expanded-reducer';
 import { termsOfUse } from './terms-of-use-reducer';
 import { sidebarProperties } from './toggle-sidebar-reducer';
 

src/app/services/redux-constants.ts

@@ -40,7 +40,7 @@ export const AUTOCOMPLETE_FETCH_SUCCESS = 'autoComplete/fetch/fulfilled';
 export const AUTOCOMPLETE_FETCH_ERROR = 'autoComplete/fetch/rejected';
 export const AUTOCOMPLETE_FETCH_PENDING = 'autoComplete/fetch/pending';
 export const RESIZE_SUCCESS = 'dimensions/resizeSuccess';
-export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
+export const RESPONSE_EXPANDED = 'responseAreaExpanded/expandResponseArea';
 export const PERMISSIONS_PANEL_OPEN = 'PERMISSIONS_PANEL_OPEN';
 export const AUTHENTICATION_PENDING = 'auth/setAuthenticationPending';
 export const FETCH_RESOURCES_SUCCESS = 'resources/fetchResources/fulfilled';

src/app/services/slices/response-area-expanded.slice.ts

@@ -0,0 +1,12 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const responseAreaExpandedSlice = createSlice({
+  name: 'responseAreaExpanded',
+  initialState: false,
+  reducers: {
+    expandResponseArea: (_, action: PayloadAction<boolean>) => action.payload
+  }
+})
+
+export const { expandResponseArea } = responseAreaExpandedSlice.actions
+export default responseAreaExpandedSlice.reducer;

src/app/views/query-response/QueryResponse.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import { AppDispatch, useAppSelector } from '../../../store';
 import { telemetry } from '../../../telemetry';
 import { IQuery } from '../../../types/query-runner';
-import { expandResponseArea } from '../../services/actions/response-expanded-action-creator';
+import { expandResponseArea } from '../../services/slices/response-area-expanded.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 import { GetPivotItems } from './pivot-items/pivot-items';