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

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,

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");
+  });
 });

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 <LoadingScreen text={LoadingText} />;
   }
@@ -157,7 +152,7 @@ function TemplateDetailedView(props: TemplateDetailedViewProps) {
             isForkingEnabled
             onBackPress={props.onBackPress}
             onClick={onSimilarTemplateClick}
-            onFork={onForkTemplateClick}
+            onFork={onSimilarTemplateClick}
             similarTemplates={similarTemplates}
           />
         </div>

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,