From d6fadc2dc2c24a5fd38fabcc6c790b3d249e8064 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Fri, 16 Feb 2024 16:04:35 +0530 Subject: [PATCH] fix: move create app from template flow logic from state to redux (#31177) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR attempts to move logic from state to redux. For some reason state logic is not getting transferred to release and prod sites. #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed ## Summary by CodeRabbit - **New Features** - Introduced a new modal for creating applications from templates, enhancing user experience. - **Enhancements** - Improved state management for the create app from templates modal using Redux, ensuring smoother user interactions. - **Refactor** - Streamlined the application creation process from templates by removing redundant code and utilizing Redux actions for better maintainability. --- app/client/src/actions/templateActions.ts | 8 ++++ .../src/ce/constants/ReduxActionConstants.tsx | 2 + .../CreateNewAppFromTemplatesWrapper.tsx | 17 ++++---- .../src/ce/pages/Applications/index.tsx | 40 +++---------------- .../reducers/uiReducers/templateReducer.ts | 18 +++++++++ app/client/src/sagas/TemplatesSagas.ts | 8 ++++ .../src/selectors/templatesSelectors.tsx | 3 ++ 7 files changed, 54 insertions(+), 42 deletions(-) diff --git a/app/client/src/actions/templateActions.ts b/app/client/src/actions/templateActions.ts index 65d27e8ff2..355126b972 100644 --- a/app/client/src/actions/templateActions.ts +++ b/app/client/src/actions/templateActions.ts @@ -118,3 +118,11 @@ export const setActiveLoadingTemplateId = (templateId: string) => ({ type: ReduxActionTypes.SET_ACTIVE_LOADING_TEMPLATE_ID, payload: templateId, }); + +export const showCreateAppFromTemplatesModal = () => ({ + type: ReduxActionTypes.SHOW_CREATE_APP_FROM_TEMPLATES_MODAL, +}); + +export const hideCreateAppFromTemplatesModal = () => ({ + type: ReduxActionTypes.HIDE_CREATE_APP_FROM_TEMPLATES_MODAL, +}); diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 9cb429c4d7..677e432b2e 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -732,6 +732,8 @@ const ActionTypes = { REMOVE_FROM_RECENTLY_ADDED_WIDGET: "REMOVE_FROM_RECENTLY_ADDED_WIDGET", SHOW_TEMPLATES_MODAL: "SHOW_TEMPLATES_MODAL", HIDE_TEMPLATES_MODAL: "HIDE_TEMPLATES_MODAL", + SHOW_CREATE_APP_FROM_TEMPLATES_MODAL: "SHOW_CREATE_APP_FROM_TEMPLATES_MODAL", + HIDE_CREATE_APP_FROM_TEMPLATES_MODAL: "HIDE_CREATE_APP_FROM_TEMPLATES_MODAL", GET_TEMPLATE_FILTERS_INIT: "GET_TEMPLATE_FILTERS_INIT", GET_TEMPLATE_FILTERS_SUCCESS: "GET_TEMPLATE_FILTERS_SUCCESS", INIT_TRIGGER_VALUES: "INIT_TRIGGER_VALUES", diff --git a/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx b/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx index 6de3faaefe..3d56c966db 100644 --- a/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx +++ b/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx @@ -1,24 +1,27 @@ import React from "react"; import CreateNewAppFromTemplatesModal from "."; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { useDispatch, useSelector } from "react-redux"; +import { createAppFromTemplatesModalSelector } from "selectors/templatesSelectors"; +import { hideCreateAppFromTemplatesModal } from "actions/templateActions"; interface Props { currentWorkspaceId: string; - handleClose: () => void; - isOpen: boolean; } -const CreateNewAppFromTemplatesWrapper = ({ - currentWorkspaceId, - handleClose, - isOpen, -}: Props) => { +const CreateNewAppFromTemplatesWrapper = ({ currentWorkspaceId }: Props) => { const isCreateAppFromTemplatesEnabled = useFeatureFlag( "release_show_create_app_from_templates_enabled", ); + const isOpen = useSelector(createAppFromTemplatesModalSelector); + const dispatch = useDispatch(); if (!isCreateAppFromTemplatesEnabled) return null; + const handleClose = () => { + dispatch(hideCreateAppFromTemplatesModal()); + }; + return ( { AnalyticsUtil.logEvent("TEMPLATE_DROPDOWN_CLICK"); - onStartFromTemplateClick(); + dispatch(showCreateAppFromTemplatesModal()); }; function NoWorkspaceFound() { @@ -969,7 +964,6 @@ export const ApplictionsMainPage = (props: any) => { extends Component { constructor(props: Props) { super(props); - - this.state = { - startFromTemplate: false, - } as State; - } - - componentDidUpdate(prevProps: Readonly): void { - if ( - prevProps.isReconnectModalOpen !== this.props.isReconnectModalOpen && - this.props.isReconnectModalOpen - ) { - this.setState({ startFromTemplate: false }); - } } componentDidMount() { @@ -1057,10 +1036,6 @@ export class Applications< this.props.searchApplications(""); } - handleStartFromTemplate() { - this.setState({ startFromTemplate: true }); - } - public render() { if (this.props.currentApplicationIdForCreateNewApp) { // FOR NEW USER @@ -1080,16 +1055,11 @@ export class Applications< return ( <> { - this.setState({ startFromTemplate: false }); - }} - isOpen={this.state.startFromTemplate} /> ); diff --git a/app/client/src/reducers/uiReducers/templateReducer.ts b/app/client/src/reducers/uiReducers/templateReducer.ts index 694011a8ea..691616b38f 100644 --- a/app/client/src/reducers/uiReducers/templateReducer.ts +++ b/app/client/src/reducers/uiReducers/templateReducer.ts @@ -30,6 +30,7 @@ const initialState: TemplatesReduxState = { isOpen: false, isOpenFromCanvas: false, }, + isCreateAppFromTemplateModalOpen: false, }; const templateReducer = createReducer(initialState, { @@ -264,6 +265,22 @@ const templateReducer = createReducer(initialState, { }, }; }, + [ReduxActionTypes.SHOW_CREATE_APP_FROM_TEMPLATES_MODAL]: ( + state: TemplatesReduxState, + ) => { + return { + ...state, + isCreateAppFromTemplateModalOpen: true, + }; + }, + [ReduxActionTypes.HIDE_CREATE_APP_FROM_TEMPLATES_MODAL]: ( + state: TemplatesReduxState, + ) => { + return { + ...state, + isCreateAppFromTemplateModalOpen: false, + }; + }, [ReduxActionTypes.GET_TEMPLATE_FILTERS_INIT]: ( state: TemplatesReduxState, ) => { @@ -313,6 +330,7 @@ export interface TemplatesReduxState { isOpenFromCanvas: boolean; }; loadingFilters: boolean; + isCreateAppFromTemplateModalOpen: boolean; } export default templateReducer; diff --git a/app/client/src/sagas/TemplatesSagas.ts b/app/client/src/sagas/TemplatesSagas.ts index f753641149..7fafa8fe22 100644 --- a/app/client/src/sagas/TemplatesSagas.ts +++ b/app/client/src/sagas/TemplatesSagas.ts @@ -28,6 +28,7 @@ import { getDefaultPageId } from "@appsmith/sagas/ApplicationSagas"; import { getDefaultPageId as selectDefaultPageId } from "sagas/selectors"; import { getAllTemplates, + hideCreateAppFromTemplatesModal, hideTemplatesModal, setTemplateNotificationSeenAction, showStarterBuildingBlockDatasourcePrompt, @@ -65,6 +66,7 @@ import { isAirgapped } from "@appsmith/utils/airgapHelpers"; import { STARTER_BUILDING_BLOCKS } from "constants/TemplatesConstants"; import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly"; import { fetchJSLibraries } from "actions/JSLibraryActions"; +import { createAppFromTemplatesModalSelector } from "selectors/templatesSelectors"; const isAirgappedInstance = isAirgapped(); @@ -128,6 +130,12 @@ function* importTemplateToWorkspaceSaga( history.push(pageURL); } yield put(getAllTemplates()); + const isCreateAppFromTemplateModal: boolean = yield select( + createAppFromTemplatesModalSelector, + ); + if (isCreateAppFromTemplateModal) { + yield put(hideCreateAppFromTemplatesModal()); + } } } catch (error) { yield put({ diff --git a/app/client/src/selectors/templatesSelectors.tsx b/app/client/src/selectors/templatesSelectors.tsx index 0f2771afff..0e954c2fb8 100644 --- a/app/client/src/selectors/templatesSelectors.tsx +++ b/app/client/src/selectors/templatesSelectors.tsx @@ -225,3 +225,6 @@ export const templatesCountSelector = (state: AppState) => export const activeLoadingTemplateId = (state: AppState) => state.ui.templates.activeLoadingTemplateId; + +export const createAppFromTemplatesModalSelector = (state: AppState) => + state.ui.templates.isCreateAppFromTemplateModalOpen;