feat: Add "Start with template" option and refactor template components

app/client/src/ce/constants/messages.ts

@@ -264,8 +264,9 @@ export const APPLICATION_CARD_LIST_ZERO_STATE = () =>
 export const TRY_GUIDED_TOUR = () => `Try guided tour`;
 export const JOIN_OUR_DISCORD = () => `Join our discord`;
 export const WHATS_NEW = () => `What's new?`;
-export const WORKSPACE_ACTION_BUTTON = () => "Create New";
-export const NEW_APP = () => "New app";
+export const WORKSPACE_ACTION_BUTTON = () => "Create new";
+export const NEW_APP = () => "Application";
+export const NEW_APP_FROM_TEMPLATE = () => "Templates";
 export const NO_WORKSPACE_HEADING = () => "Oops! No workspace found";
 export const NO_WORKSPACE_DESCRIPTION = () =>
   "You can find workspace list on the left sidebar, try selecting one of them to access a workspace.";

app/client/src/ce/entities/FeatureFlag.ts

@@ -49,6 +49,8 @@ export const FEATURE_FLAG = {
   ab_start_with_data_default_enabled: "ab_start_with_data_default_enabled",
   release_actions_redesign_enabled: "release_actions_redesign_enabled",
   rollout_editor_pane_segments_enabled: "rollout_editor_pane_segments_enabled",
+  release_show_create_app_from_templates_enabled:
+    "release_show_create_app_from_templates_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -89,6 +91,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   ab_start_with_data_default_enabled: false,
   release_actions_redesign_enabled: false,
   rollout_editor_pane_segments_enabled: false,
+  release_show_create_app_from_templates_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import CreateNewAppFromTemplatesModal from ".";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+
+interface Props {
+  currentWorkspaceId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+}
+
+const CreateNewAppFromTemplatesWrapper = ({
+  currentWorkspaceId,
+  handleClose,
+  isOpen,
+}: Props) => {
+  const isCreateAppFromTemplatesEnabled = useFeatureFlag(
+    "release_show_create_app_from_templates_enabled",
+  );
+
+  if (!isCreateAppFromTemplatesEnabled) return null;
+
+  return (
+    <CreateNewAppFromTemplatesModal
+      currentWorkSpaceId={currentWorkspaceId}
+      handleClose={handleClose}
+      isOpen={isOpen}
+    />
+  );
+};
+
+export default CreateNewAppFromTemplatesWrapper;

app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/index.tsx

@@ -0,0 +1,195 @@
+import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import {
+  GO_BACK,
+  START_WITH_TEMPLATE_CONNECT_HEADING,
+  START_WITH_TEMPLATE_CONNECT_SUBHEADING,
+  createMessage,
+} from "@appsmith/constants/messages";
+import type { AppState } from "@appsmith/reducers";
+import { fetchDefaultPlugins } from "actions/pluginActions";
+import {
+  getAllTemplates,
+  getTemplateFilters,
+  importTemplateToWorkspace,
+  setActiveLoadingTemplateId,
+} from "actions/templateActions";
+import type { Template as TemplateInterface } from "api/TemplatesApi";
+import {
+  Link,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+} from "design-system";
+import { isEmpty } from "lodash";
+import { TemplateView } from "pages/Templates/TemplateView";
+import TemplatesListLayoutSwitcher from "pages/Templates/TemplatesModal/TemplatesListLayoutSwitcher";
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  activeLoadingTemplateId,
+  allTemplatesFiltersSelector,
+  getTemplatesSelector,
+  templatesCountSelector,
+} from "selectors/templatesSelectors";
+import styled from "styled-components";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { StartWithTemplatesHeader } from "../StartWithTemplatesWrapper";
+
+interface CreateNewAppFromTemplatesModalProps {
+  currentWorkSpaceId: string;
+  isOpen: boolean;
+  handleClose: (open: boolean) => void;
+}
+
+function CreateNewAppFromTemplatesModal({
+  currentWorkSpaceId,
+  handleClose,
+  isOpen,
+}: CreateNewAppFromTemplatesModalProps) {
+  const dispatch = useDispatch();
+  const templatesCount = useSelector(templatesCountSelector);
+  const pluginListLength = useSelector(
+    (state: AppState) => state.entities.plugins.defaultPluginList.length,
+  );
+  const filters = useSelector(allTemplatesFiltersSelector);
+  const [showTemplateDetails, setShowTemplateDetails] = useState("");
+  const allTemplates = useSelector(getTemplatesSelector);
+  const loadingTemplateId = useSelector(activeLoadingTemplateId);
+  const modadBodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setShowTemplateDetails("");
+    dispatch(setActiveLoadingTemplateId(""));
+    dispatch({
+      type: ReduxActionTypes.RESET_TEMPLATE_FILTERS,
+    });
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!templatesCount) {
+      dispatch(getAllTemplates());
+    }
+  }, [templatesCount]);
+
+  useEffect(() => {
+    if (!pluginListLength) {
+      dispatch(fetchDefaultPlugins());
+    }
+  }, [pluginListLength]);
+
+  useEffect(() => {
+    if (isEmpty(filters.functions)) {
+      dispatch(getTemplateFilters());
+    }
+  }, [filters]);
+
+  useEffect(() => {
+    if (!showTemplateDetails && modadBodyRef.current) {
+      modadBodyRef.current.scrollTop = 0;
+    }
+  }, [showTemplateDetails]);
+
+  const onClose = (open: boolean) => {
+    if (open === false) {
+      handleClose(open);
+      setShowTemplateDetails("");
+    }
+  };
+
+  const getTemplateById = (id: string) => {
+    const template = allTemplates.find((template) => template.id === id);
+    return template;
+  };
+
+  const handleSimilarTemplateClick = (template: TemplateInterface) => {
+    if (typeof template === "string") {
+      template = getTemplateById(template) as TemplateInterface;
+    }
+    if (!template) return;
+
+    AnalyticsUtil.logEvent("TEMPLATE_SELECT_NEW_APP_FLOW", {
+      templateId: template.id,
+      templateName: template.title,
+    });
+    onTemplateClick(template);
+  };
+
+  const onTemplateClick = (template: TemplateInterface | string) => {
+    const templateId = typeof template === "string" ? template : template.id;
+    !loadingTemplateId && setShowTemplateDetails(templateId);
+  };
+
+  const onClickUseTemplate = (templateId: string) => {
+    const template = getTemplateById(templateId);
+    if (template) {
+      AnalyticsUtil.logEvent("FORK_TEMPLATE_NEW_APP_FLOW", {
+        templateId: template.id,
+        templateName: template.title,
+      });
+      dispatch(setActiveLoadingTemplateId(templateId));
+      dispatch(importTemplateToWorkspace(templateId, currentWorkSpaceId));
+    }
+  };
+
+  return (
+    <Modal onOpenChange={(open) => onClose(open)} open={isOpen}>
+      <ModalContentWrapper data-testid="t--create-app-from-templates-dialog-component">
+        <ModalHeader>
+          {!showTemplateDetails ? (
+            <StartWithTemplatesHeader
+              isModalLayout
+              subtitle={createMessage(START_WITH_TEMPLATE_CONNECT_SUBHEADING)}
+              title={createMessage(START_WITH_TEMPLATE_CONNECT_HEADING)}
+            />
+          ) : (
+            <Link
+              data-testid="t--template-view-goback"
+              onClick={() => setShowTemplateDetails("")}
+              startIcon="arrow-left-line"
+            >
+              {createMessage(GO_BACK)}
+            </Link>
+          )}
+        </ModalHeader>
+        <ModalBodyWrapper
+          isDetailedView={!!showTemplateDetails}
+          ref={modadBodyRef}
+        >
+          {!!showTemplateDetails ? (
+            <TemplateView
+              handleBackPress={() => setShowTemplateDetails("")}
+              handleSimilarTemplateClick={handleSimilarTemplateClick}
+              isModalLayout
+              onClickUseTemplate={onClickUseTemplate}
+              showBack={false}
+              showSimilarTemplate
+              similarTemplatesClassName="!p-0"
+              templateId={showTemplateDetails}
+            />
+          ) : (
+            <TemplatesListLayoutSwitcher
+              analyticsEventNameForTemplateCardClick="TEMPLATE_SELECT_NEW_APP_FLOW"
+              isForkingEnabled
+              onForkTemplateClick={onClickUseTemplate}
+              onTemplateClick={onTemplateClick}
+            />
+          )}
+        </ModalBodyWrapper>
+      </ModalContentWrapper>
+    </Modal>
+  );
+}
+
+export default CreateNewAppFromTemplatesModal;
+
+const ModalContentWrapper = styled(ModalContent)`
+  width: 100%;
+  overflow-y: hidden;
+  background-color: var(--ads-v2-color-gray-50);
+`;
+const ModalBodyWrapper = styled(ModalBody)<{ isDetailedView?: boolean }>`
+  width: 100%;
+  overflow-y: ${(props) => (props.isDetailedView ? "scroll" : "hidden")};
+  padding-top: 0;
+`;

app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx

@@ -27,6 +27,7 @@ import {
   getAllTemplates,
   getTemplateFilters,
   importTemplateIntoApplicationViaOnboardingFlow,
+  setActiveLoadingTemplateId,
 } from "actions/templateActions";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
 import { Flex, Link, Text } from "design-system";
@@ -57,6 +58,7 @@ import { fetchingEnvironmentConfigs } from "@appsmith/actions/environmentAction"
 import StartWithTemplatesWrapper from "./StartWithTemplatesWrapper";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import type { Template } from "api/TemplatesApi";
 
 const SectionWrapper = styled.div`
   display: flex;
@@ -475,6 +477,24 @@ const CreateNewAppsOption = ({
     isEnabledForStartWithDataDefault &&
     (!createNewAppPluginId || !selectedDatasource);
 
+  const onForkTemplateClick = (template: Template) => {
+    const title = template.title;
+    AnalyticsUtil.logEvent("FORK_TEMPLATE_WHEN_ONBOARDING", { title });
+    // When fork template is clicked to add a new app using the template
+    if (!isImportingTemplate && application) {
+      dispatch(setActiveLoadingTemplateId(template.id));
+      dispatch(
+        importTemplateIntoApplicationViaOnboardingFlow(
+          template.id,
+          template.title,
+          template.pages.map((p) => p.name),
+          application.id,
+          application.workspaceId,
+        ),
+      );
+    }
+  };
+
   return (
     <SectionWrapper>
       <BackWrapper hidden={!useType}>
@@ -509,9 +529,7 @@ const CreateNewAppsOption = ({
           />
         ) : (
           <StartWithTemplatesWrapper
-            currentApplicationIdForCreateNewApp={
-              currentApplicationIdForCreateNewApp
-            }
+            onForkTemplateClick={onForkTemplateClick}
             setSelectedTemplate={setSelectedTemplate}
           />
         )