chore: 🤖 funnel filters serialize

lib/js/app/modules/queries/actions.ts

@@ -4,6 +4,7 @@ import { APIError } from '../../types';
 import {
   SET_QUERY_SETTINGS,
   RUN_QUERY,
+  SET_QUERY_SAVE_STATE,
   RUN_QUERY_ERROR,
   RUN_QUERY_SUCCESS,
   GET_SAVED_QUERIES,
@@ -64,6 +65,13 @@ export const saveQuery = (
   payload: { name, body },
 });
 
+export const setQuerySaveState = (isSaving: boolean): QueriesActions => ({
+  type: SET_QUERY_SAVE_STATE,
+  payload: {
+    isSaving,
+  },
+});
+
 export const saveQuerySuccess = (
   queryName: string,
   body: Record<string, any>

lib/js/app/modules/queries/constants.ts

@@ -3,6 +3,7 @@ export const RUN_QUERY = '@queries/RUN_QUERY';
 export const RUN_QUERY_SUCCESS = '@queries/RUN_QUERY_SUCCESS';
 export const RUN_QUERY_ERROR = '@queries/RUN_QUERY_ERROR';
 export const SAVE_QUERY = '@queries/SAVE_QUERY';
+export const SET_QUERY_SAVE_STATE = '@queries/SET_QUERY_SAVE_STATE';
 export const SAVE_QUERY_SUCCESS = '@queries/SAVE_QUERY_SUCCESS';
 export const SAVE_QUERY_ERROR = '@queries/SAVE_QUERY_ERROR';
 export const RESET_SAVE_QUERY_ERROR = '@queries/RESET_SAVE_QUERY_ERROR';

lib/js/app/modules/queries/index.ts

@@ -5,6 +5,7 @@ import {
   resetQueryResults,
   runQuery,
   deleteQuery,
+  setQuerySaveState,
   saveQuery,
   resetSavedQueryError,
   getOrganizationUsageLimits,
@@ -48,6 +49,7 @@ export {
   getQueryLimitReached,
   getQuerySettings,
   setQuerySettings,
+  setQuerySaveState,
   queriesReducer,
   runQuery,
   deleteQuery,

lib/js/app/modules/queries/reducer.ts

@@ -16,6 +16,7 @@ import {
   RESET_QUERY_RESULTS,
   SET_QUERY_LIMIT_REACHED,
   RESET_SAVE_QUERY_ERROR,
+  SET_QUERY_SAVE_STATE,
 } from './constants';
 
 export const initialState: ReducerState = {
@@ -62,6 +63,11 @@ export const queriesReducer = (
         ...state,
         saveQueryError: null,
       };
+    case SET_QUERY_SAVE_STATE:
+      return {
+        ...state,
+        isSavingQuery: false,
+      };
     case SAVE_QUERY_SUCCESS:
       return {
         ...state,

lib/js/app/modules/queries/saga.ts

@@ -16,12 +16,14 @@ import {
   setCacheQueryLimitExceed,
   setQueryCacheLimitError,
   setQueryLimitReached,
+  setQuerySaveState,
   resetQueryResults,
 } from './actions';
 
 import {
   showConfirmation,
   hideQuerySettingsModal,
+  getQuerySettingsModalVisibility,
   getViewMode,
   setViewMode,
   selectFirstSavedQuery,
@@ -96,35 +98,49 @@ function* saveQuery({ payload }: SaveQueryAction) {
     const { name, body } = payload;
     const notificationManager = yield getContext(NOTIFICATION_MANAGER_CONTEXT);
     const client = yield getContext(KEEN_CLIENT_CONTEXT);
+    const settingsModalVisible = yield select(getQuerySettingsModalVisibility);
 
     const responseBody = yield client.put({
       url: client.url('queries', 'saved', name),
       apiKey: client.config.masterKey,
       params: body,
     });
 
-    yield put(hideQuerySettingsModal());
+    if (settingsModalVisible) {
+      yield put(hideQuerySettingsModal());
+    }
+
     yield put(saveQuerySuccess(name, responseBody));
     yield notificationManager.showNotification({
       type: 'success',
       message: text.saveQuerySuccess,
     });
   } catch (error) {
     const { status, error_code: errorCode } = error;
+    const notificationManager = yield getContext(NOTIFICATION_MANAGER_CONTEXT);
 
     if (status === HttpStatus.INTERNAL_SERVER_ERROR) {
       yield put(hideQuerySettingsModal());
-      const notificationManager = yield getContext(
-        NOTIFICATION_MANAGER_CONTEXT
-      );
       yield notificationManager.showNotification({
         type: 'error',
         message: text.saveQueryError,
         showDismissButton: true,
         autoDismiss: false,
       });
     } else {
-      yield put(saveQueryError(error));
+      const settingsModalVisible = yield select(
+        getQuerySettingsModalVisibility
+      );
+      if (settingsModalVisible) {
+        yield put(saveQueryError(error));
+      } else {
+        yield put(setQuerySaveState(false));
+        yield notificationManager.showNotification({
+          type: 'error',
+          message: error.body,
+          autoDismiss: true,
+        });
+      }
     }
 
     if (

lib/js/app/modules/queries/types.ts

@@ -19,6 +19,7 @@ import {
   RESET_QUERY_RESULTS,
   GET_ORGANIZATION_USAGE_LIMITS,
   SET_QUERY_SETTINGS,
+  SET_QUERY_SAVE_STATE,
 } from './constants';
 
 import { APIError } from '../../types';
@@ -95,6 +96,11 @@ export interface SaveQueryAction {
   };
 }
 
+export interface QuerySaveStateAction {
+  type: typeof SET_QUERY_SAVE_STATE;
+  payload: { isSaving: boolean };
+}
+
 export interface SaveQuerySuccessAction {
   type: typeof SAVE_QUERY_SUCCESS;
   payload: {
@@ -188,6 +194,7 @@ export type QueriesActions =
   | SetCacheQueryLimitExceedAction
   | SetCacheQueryLimitErrorAction
   | SaveQueryAction
+  | QuerySaveStateAction
   | SaveQuerySuccessAction
   | SaveQueryErrorAction
   | DeleteQueryAction

lib/js/app/queryCreator/components/Filters/Filters.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { v4 as uuid } from 'uuid';
 import { ActionButton } from '@keen.io/ui-core';
 
-import { Title } from '../';
+import Title from '../Title';
 
 import FiltersComponent from './FiltersComponent';
 

lib/js/app/queryCreator/components/FunnelStep/FunnelStep.test.tsx

@@ -6,6 +6,7 @@ import configureStore from 'redux-mock-store';
 import FunnelStep from './FunnelStep';
 
 const props = {
+  id: 'id',
   index: 0,
   detailsVisible: false,
   timeframe: 'this_14_days',

lib/js/app/queryCreator/components/FunnelStep/FunnelStep.tsx

@@ -161,6 +161,7 @@ const FunnelStep: FC<Props> = ({
                   updateStep({
                     eventCollection: collection,
                     actorProperty: undefined,
+                    filters: [],
                   });
                 }}
               />

lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.tsx

@@ -29,10 +29,8 @@ const FunnelSteps: FC<{}> = () => {
   const sortableRef = useRef(null);
 
   const stepsRef = useRef(null);
-
-  useEffect(() => {
-    stepsRef.current = steps;
-  }, [steps]);
+  // @TODO: Check is correctly works
+  stepsRef.current = steps;
 
   useEffect(() => {
     new Sortable(sortableRef.current, {

lib/js/app/queryCreator/modules/query/actions.ts

@@ -21,6 +21,8 @@ import {
   SELECT_FUNNEL_STEP_EVENT_COLLECTION,
   UPDATE_FUNNEL_STEP,
   REMOVE_FUNNEL_STEP,
+  SET_FUNNEL_STEPS,
+  SET_FUNNEL_STEP_FILTERS,
   CHANGE_FUNNEL_STEPS_ORDER,
   ADD_FUNNEL_STEP_FILTER,
   UPDATE_FUNNEL_STEP_FILTER,
@@ -226,6 +228,22 @@ export const changeFunnelStepsOrder = (steps: FunnelStep[]): QueryActions => ({
   payload: { steps },
 });
 
+export const setFunnelSteps = (steps: FunnelStep[]): QueryActions => ({
+  type: SET_FUNNEL_STEPS,
+  payload: { steps },
+});
+
+export const setFunnelStepFilters = (
+  stepId: string,
+  filters: Filter[]
+): QueryActions => ({
+  type: SET_FUNNEL_STEP_FILTERS,
+  payload: {
+    stepId,
+    filters,
+  },
+});
+
 export const removeFunnelStep = (stepId: string): QueryActions => ({
   type: REMOVE_FUNNEL_STEP,
   payload: {

lib/js/app/queryCreator/modules/query/constants.ts

@@ -27,6 +27,8 @@ export const SELECT_FUNNEL_STEP_EVENT_COLLECTION =
 export const REMOVE_FUNNEL_STEP = '@query-creator/REMOVE_FUNNEL_STEP';
 export const UPDATE_FUNNEL_STEP = '@query-creator/UPDATE_FUNNEL_STEP';
 export const CLONE_FUNNEL_STEP = '@query-creator/CLONE_FUNNEL_STEP';
+export const SET_FUNNEL_STEPS = '@query-creator/SET_FUNNEL_STEPS';
+export const SET_FUNNEL_STEP_FILTERS = '@query-creator/SET_FUNNEL_STEP_FILTERS';
 export const CHANGE_FUNNEL_STEPS_ORDER =
   '@query-creator/CHANGE_FUNNEL_STEP_ORDER';
 export const ADD_FUNNEL_STEP_FILTER = '@query-creator/ADD_FUNNEL_STEP_FILTER';

lib/js/app/queryCreator/modules/query/index.ts

@@ -41,6 +41,8 @@ import {
   setPropertyNames,
   setTimeframe,
   setFilters,
+  setFunnelStepFilters,
+  setFunnelSteps,
   addFunnelStep,
   selectFunnelStepCollection,
   updateFunnelStep,
@@ -108,6 +110,8 @@ export {
   setFilters,
   selectTimezone,
   addFunnelStep,
+  setFunnelSteps,
+  setFunnelStepFilters,
   updateFunnelStep,
   removeFunnelStep,
   selectFunnelStepCollection,

lib/js/app/queryCreator/modules/query/reducer.ts

@@ -19,6 +19,8 @@ import {
   DEFAULT_TIMEFRAME,
   DEFAULT_TIMEZONE,
   ADD_FUNNEL_STEP,
+  SET_FUNNEL_STEPS,
+  SET_FUNNEL_STEP_FILTERS,
   CLONE_FUNNEL_STEP,
   REMOVE_FUNNEL_STEP,
   UPDATE_FUNNEL_STEP,
@@ -61,6 +63,8 @@ export const queryReducer = (
   state: ReducerState = initialState,
   action: QueryActions
 ) => {
+  console.log(action, 'sasaas');
+
   switch (action.type) {
     case ADD_FILTER:
       return {
@@ -183,6 +187,7 @@ export const queryReducer = (
             })),
         ],
       };
+    case SET_FUNNEL_STEPS:
     case CHANGE_FUNNEL_STEPS_ORDER:
       return {
         ...state,
@@ -207,6 +212,19 @@ export const queryReducer = (
           return step;
         }),
       };
+    case SET_FUNNEL_STEP_FILTERS:
+      return {
+        ...state,
+        steps: state.steps.map((step) => {
+          if (step.id === action.payload.stepId) {
+            return {
+              ...step,
+              filters: action.payload.filters,
+            };
+          }
+          return step;
+        }),
+      };
     case UPDATE_FUNNEL_STEP_FILTER:
       return {
         ...state,

lib/js/app/queryCreator/modules/query/types.ts

@@ -17,6 +17,8 @@ import {
   SET_FILTERS,
   SELECT_TIMEZONE,
   ADD_FUNNEL_STEP,
+  SET_FUNNEL_STEPS,
+  SET_FUNNEL_STEP_FILTERS,
   CLONE_FUNNEL_STEP,
   REMOVE_FUNNEL_STEP,
   UPDATE_FUNNEL_STEP,
@@ -237,6 +239,16 @@ export interface ChangeFunnelStepsOrderAction {
   payload: { steps: FunnelStep[] };
 }
 
+export interface SetFunnelSteps {
+  type: typeof SET_FUNNEL_STEPS;
+  payload: { steps: FunnelStep[] };
+}
+
+export interface SetFunnelStepFilters {
+  type: typeof SET_FUNNEL_STEP_FILTERS;
+  payload: { stepId: string; filters: Filter[] };
+}
+
 export interface AddFunnelStepFilterAction {
   type: typeof ADD_FUNNEL_STEP_FILTER;
   payload: {
@@ -289,6 +301,8 @@ export type QueryActions =
   | SetTimeframeAction
   | SetFiltersAction
   | SelectTimezoneAction
+  | SetFunnelSteps
+  | SetFunnelStepFilters
   | AddFunnelStepAction
   | UpdateFunnelStepAction
   | RemoveFunnelStepAction