From 7f130368f22bcc6bd35feacfe63b4f2d2a0e0098 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Fri, 28 Apr 2023 08:36:33 +0530 Subject: [PATCH] fix: Updates + icon to take user to select pages page instead of direclty importing a template (#22595) ## Description When in add pages from template flow, if a user clicks on `+` icon in the templates list. Current: the template gets added automatically New: now user will be taken to page selection view(similar to when users click on template image) - Adds test case for + button now redirects to select pages - Adds test case for + icon in the similar templates Fixes # (issue) [21200](https://github.com/appsmithorg/appsmith/issues/21200) Media ## Type of change - Breaking change (fix or feature that would cause existing functionality to not work as expected) ## How Has This Been Tested? - 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 - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [X] Test plan has been approved by relevant developers - [X] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --- .../ForkTemplateToGitConnectedApp.js | 1 + .../Fork_Template_Existing_app_spec.js | 18 +++++++++++++ .../TemplatesModal/TemplateDetailedView.tsx | 27 ++++++++----------- .../Templates/TemplatesModal/TemplateList.tsx | 20 +++++++------- 4 files changed, 39 insertions(+), 27 deletions(-) diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/ForkTemplateToGitConnectedApp.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/ForkTemplateToGitConnectedApp.js index 96a7b22941..25bffe320d 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/ForkTemplateToGitConnectedApp.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/ForkTemplateToGitConnectedApp.js @@ -38,6 +38,7 @@ describe("Fork a template to the current app", () => { .scrollIntoView() .wait(500) .click(); + cy.get(template.templateViewForkButton).first().click(); cy.waitUntil(() => cy.xpath("//span[text()='Setting up the template']"), { errorMsg: "Setting Templates did not finish even after 75 seconds", timeout: 950000, diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js index b4ad1026ca..e534a5c0e5 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js @@ -73,4 +73,22 @@ describe("Fork a template to the current app from new page popover", () => { "template added successfully", ); }); + + it("Fork template button should take user to 'select pages from template' page", () => { + _.agHelper.RefreshPage(); + cy.AddPageFromTemplate(); + cy.get(_.templates.locators._forkApp).first().click(); + cy.get(template.templateViewForkButton).should("be.visible"); + }); + + it("Similar templates add icon should take user to 'select pages from template' page", () => { + _.agHelper.RefreshPage(); + cy.AddPageFromTemplate(); + // We are currentlyon on templates list page + cy.get(_.templates.locators._forkApp).first().click(); + // Here we are on template detail page, with similar templates at the bottom + cy.get(_.templates.locators._forkApp).first().click(); + + cy.get(template.templateViewForkButton).should("be.visible"); + }); }); diff --git a/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx b/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx index 883a01468f..23b8a8c85b 100644 --- a/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx @@ -3,31 +3,30 @@ import { FETCHING_TEMPLATES, FORKING_TEMPLATE, } from "@appsmith/constants/messages"; +import type { AppState } from "@appsmith/reducers"; import { getSimilarTemplatesInit, getTemplateInformation, - importTemplateIntoApplication, } from "actions/templateActions"; +import type { Template } from "api/TemplatesApi"; +import { VIEWER_PATH, VIEWER_PATH_DEPRECATED } from "constants/routes"; import { Text, TextType } from "design-system-old"; -import React, { useEffect, useState, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { generatePath, matchPath } from "react-router"; import { getActiveTemplateSelector, isFetchingTemplateSelector, isImportingTemplateToAppSelector, } from "selectors/templatesSelectors"; import styled from "styled-components"; -import { IframeTopBar, IframeWrapper } from "../TemplateView"; -import PageSelection from "./PageSelection"; -import LoadingScreen from "./LoadingScreen"; -import type { Template } from "api/TemplatesApi"; -import { generatePath, matchPath } from "react-router"; import { isURLDeprecated, trimQueryString } from "utils/helpers"; -import { VIEWER_PATH, VIEWER_PATH_DEPRECATED } from "constants/routes"; -import TemplateModalHeader from "./Header"; -import TemplateDescription from "../Template/TemplateDescription"; import SimilarTemplates from "../Template/SimilarTemplates"; -import type { AppState } from "@appsmith/reducers"; +import TemplateDescription from "../Template/TemplateDescription"; +import { IframeTopBar, IframeWrapper } from "../TemplateView"; +import TemplateModalHeader from "./Header"; +import LoadingScreen from "./LoadingScreen"; +import PageSelection from "./PageSelection"; const breakpointColumns = { default: 4, @@ -104,10 +103,6 @@ function TemplateDetailedView(props: TemplateDetailedViewProps) { } }; - const onForkTemplateClick = (template: Template) => { - dispatch(importTemplateIntoApplication(template.id, template.title)); - }; - if (isFetchingTemplate || isImportingTemplateToApp) { return ; } @@ -157,7 +152,7 @@ function TemplateDetailedView(props: TemplateDetailedViewProps) { isForkingEnabled onBackPress={props.onBackPress} onClick={onSimilarTemplateClick} - onFork={onForkTemplateClick} + onFork={onSimilarTemplateClick} similarTemplates={similarTemplates} /> diff --git a/app/client/src/pages/Templates/TemplatesModal/TemplateList.tsx b/app/client/src/pages/Templates/TemplatesModal/TemplateList.tsx index 76c25dcbd0..0f3ee8dbc3 100644 --- a/app/client/src/pages/Templates/TemplatesModal/TemplateList.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/TemplateList.tsx @@ -1,6 +1,11 @@ -import { importTemplateIntoApplication } from "actions/templateActions"; +import { + FETCHING_TEMPLATE_LIST, + FORKING_TEMPLATE, + createMessage, +} from "@appsmith/constants/messages"; +import type { Template } from "api/TemplatesApi"; import React from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; import { isFetchingTemplatesSelector, isImportingTemplateToAppSelector, @@ -8,14 +13,8 @@ import { import styled from "styled-components"; import { TemplatesContent } from ".."; import Filters from "../Filters"; -import LoadingScreen from "./LoadingScreen"; -import type { Template } from "api/TemplatesApi"; import TemplateModalHeader from "./Header"; -import { - createMessage, - FETCHING_TEMPLATE_LIST, - FORKING_TEMPLATE, -} from "@appsmith/constants/messages"; +import LoadingScreen from "./LoadingScreen"; const Wrapper = styled.div` display: flex; @@ -50,9 +49,8 @@ type TemplateListProps = { }; function TemplateList(props: TemplateListProps) { - const dispatch = useDispatch(); const onForkTemplateClick = (template: Template) => { - dispatch(importTemplateIntoApplication(template.id, template.title)); + props.onTemplateClick(template.id); }; const isImportingTemplateToApp = useSelector( isImportingTemplateToAppSelector,