chore: Remove empty canvas prompts and improve widget editor header (#33993)
## Description We want drag and drop of building blocks to be the main way of accelarating UI development. This PR removes empty canvas prompts for `Start from template` and `Generate CRUD` Fixes #33874 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Sanity, @tag.Templates" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9394803876> > Commit: 5863f53f2ddc67fdabbb0eaa7407843e6eaa348e > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9394803876&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved the stability and accuracy of forking templates into existing apps connected to Git. - **Refactor** - Streamlined import order and removed unused imports in the Widget Editor Header. - Simplified logic and removed redundant conditions for rendering elements in the Widget Editor Header. - Updated Cypress tests to use custom functions and helper methods for better readability and maintainability. - **Chores** - Removed obsolete constants related to template card titles and page generation messages. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Rahul Barwal
GitHub
parent
c380837806
commit
8d0091ec78
|
|
@ -32,12 +32,10 @@ describe(
|
|||
});
|
||||
|
||||
it("1.Bug #17002 Forking a template into an existing app which is connected to git makes the application go into a bad state ", function () {
|
||||
cy.get(template.startFromTemplateCard).click();
|
||||
_.assertHelper.AssertNetworkStatus("fetchTemplate");
|
||||
|
||||
cy.get(template.templateDialogBox).should("be.visible");
|
||||
cy.get(template.templateCard).first().click();
|
||||
cy.get(template.templateViewForkButton).first().click();
|
||||
PageList.AddNewPage("Add page from template");
|
||||
_.agHelper.AssertElementExist(template.templateDialogBox);
|
||||
_.agHelper.GetNClick(template.templateCard);
|
||||
_.agHelper.GetNClick(template.templateViewForkButton);
|
||||
cy.waitUntil(() => cy.xpath("//span[text()='Setting up the template']"), {
|
||||
errorMsg: "Setting Templates did not finish even after 75 seconds",
|
||||
timeout: 75000,
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ describe(
|
|||
|
||||
it("2. Add selected pages from template to an app", () => {
|
||||
homePage.CreateNewApplication();
|
||||
agHelper.GetNClick(template.startFromTemplateCard);
|
||||
PageList.AddNewPage("Add page from template");
|
||||
agHelper.AssertElementVisibility(template.templateDialogBox);
|
||||
agHelper.GetNClick("//h1[text()='Applicant Tracker-test']");
|
||||
agHelper.FailIfErrorToast(
|
||||
|
|
|
|||
|
|
@ -1771,9 +1771,6 @@ export const WIDGET_USED = () => "Widgets";
|
|||
export const SIMILAR_TEMPLATES = () => "Similar templates";
|
||||
export const VIEW_ALL_TEMPLATES = () => "View all templates";
|
||||
export const FILTERS = () => "Filters";
|
||||
export const TEMPLATE_CARD_TITLE = () => "Start from a template";
|
||||
export const TEMPLATE_CARD_DESCRIPTION = () =>
|
||||
"Create app from template by selecting pages";
|
||||
export const FILTER_SELECTALL = () => "Select all";
|
||||
export const FILTER_SELECT_PAGE = () => "Add selected page";
|
||||
export const FILTER_SELECT_PAGES = () => "Add selected pages";
|
||||
|
|
@ -1826,9 +1823,6 @@ export const SEARCH_USERS = (
|
|||
|
||||
export const CREATE_PAGE = () => "New blank page";
|
||||
export const CANVAS_NEW_PAGE_CARD = () => "Create new page";
|
||||
export const GENERATE_PAGE = () => "Generate page from data table";
|
||||
export const GENERATE_PAGE_DESCRIPTION = () =>
|
||||
"Start app with a simple CRUD UI and customize it";
|
||||
export const ADD_PAGE_FROM_TEMPLATE = () => "Add page from template";
|
||||
export const INVALID_URL = () =>
|
||||
"Please enter a valid URL, for example, https://example.com";
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
import React from "react";
|
||||
import AnonymousDataPopup from "pages/Editor/FirstTimeUserOnboarding/AnonymousDataPopup";
|
||||
import EmptyCanvasPrompts from "./components/EmptyCanvasPrompts";
|
||||
import { useSelector } from "react-redux";
|
||||
import { combinedPreviewModeSelector } from "selectors/editorSelectors";
|
||||
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
|
||||
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
|
||||
import { EditorState } from "@appsmith/entities/IDE/constants";
|
||||
import useMissingModuleNotification from "@appsmith/pages/Editor/IDE/MainPane/useMissingModuleNotification";
|
||||
import AnonymousDataPopup from "pages/Editor/FirstTimeUserOnboarding/AnonymousDataPopup";
|
||||
import React from "react";
|
||||
|
||||
/**
|
||||
* WidgetEditorHeader
|
||||
|
|
@ -17,19 +11,9 @@ import useMissingModuleNotification from "@appsmith/pages/Editor/IDE/MainPane/us
|
|||
* - missing module notification
|
||||
*/
|
||||
export const WidgetEditorHeader = () => {
|
||||
const isNavigationSelectedInSettings = useSelector(
|
||||
getIsAppSettingsPaneWithNavigationTabOpen,
|
||||
);
|
||||
const appState = useCurrentAppState();
|
||||
const isAppSettingsPaneWithNavigationTabOpen =
|
||||
appState === EditorState.SETTINGS && isNavigationSelectedInSettings;
|
||||
const isPreviewMode = useSelector(combinedPreviewModeSelector);
|
||||
const missingModuleNotification = useMissingModuleNotification();
|
||||
return (
|
||||
<>
|
||||
{!isAppSettingsPaneWithNavigationTabOpen && (
|
||||
<EmptyCanvasPrompts isPreview={isPreviewMode} />
|
||||
)}
|
||||
{missingModuleNotification}
|
||||
<AnonymousDataPopup />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Text, TextType } from "design-system-old";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
selectURLSlugs,
|
||||
showCanvasTopSectionSelector,
|
||||
} from "selectors/editorSelectors";
|
||||
import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
|
||||
import history from "utils/history";
|
||||
import { generateTemplateFormURL } from "@appsmith/RouteBuilder";
|
||||
import { useParams } from "react-router";
|
||||
import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers";
|
||||
import { showTemplatesModal as showTemplatesModalAction } from "actions/templateActions";
|
||||
import {
|
||||
createMessage,
|
||||
GENERATE_PAGE,
|
||||
GENERATE_PAGE_DESCRIPTION,
|
||||
TEMPLATE_CARD_DESCRIPTION,
|
||||
TEMPLATE_CARD_TITLE,
|
||||
} from "@appsmith/constants/messages";
|
||||
import { deleteCanvasCardsState } from "actions/editorActions";
|
||||
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
|
||||
import { Icon } from "design-system";
|
||||
import {
|
||||
LayoutSystemFeatures,
|
||||
useLayoutSystemFeatures,
|
||||
} from "layoutSystems/common/useLayoutSystemFeatures";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin: ${(props) =>
|
||||
`${props.theme.spaces[7]}px ${props.theme.spaces[16]}px 0px ${props.theme.spaces[13]}px`};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${(props) => props.theme.spaces[7]}px;
|
||||
`;
|
||||
|
||||
const Card = styled.div<{ centerAlign?: boolean }>`
|
||||
padding: ${(props) =>
|
||||
`${props.theme.spaces[5]}px ${props.theme.spaces[9]}px`};
|
||||
border: solid 1px var(--ads-v2-color-border);
|
||||
background: var(--ads-v2-color-bg);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: var(--ads-v2-border-radius);
|
||||
${(props) =>
|
||||
props.centerAlign &&
|
||||
`
|
||||
justify-content: center;
|
||||
`}
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--ads-v2-color-bg-subtle);
|
||||
}
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: ${(props) => props.theme.spaces[7]}px;
|
||||
`;
|
||||
|
||||
interface routeId {
|
||||
applicationSlug: string;
|
||||
pageId: string;
|
||||
pageSlug: string;
|
||||
}
|
||||
|
||||
const goToGenPageForm = ({ pageId }: routeId): void => {
|
||||
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_ACTION_CARD_CLICK");
|
||||
history.push(generateTemplateFormURL({ pageId }));
|
||||
};
|
||||
|
||||
interface EmptyCanvasPromptsProps {
|
||||
isPreview: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* OldName: CanvasTopSection
|
||||
*/
|
||||
/**
|
||||
* This Component encompasses the prompts for empty canvas
|
||||
* prompts like generate crud app or import from template
|
||||
* @param props Object that contains
|
||||
* @prop isPreview, boolean to indicate preview mode
|
||||
* @returns
|
||||
*/
|
||||
function EmptyCanvasPrompts(props: EmptyCanvasPromptsProps) {
|
||||
const dispatch = useDispatch();
|
||||
const showCanvasTopSection = useSelector(showCanvasTopSectionSelector);
|
||||
const { isPreview } = props;
|
||||
const { pageId } = useParams<ExplorerURLParams>();
|
||||
const { applicationSlug, pageSlug } = useSelector(selectURLSlugs);
|
||||
|
||||
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
|
||||
const [enableForkingFromTemplates, enableGenerateCrud] =
|
||||
checkLayoutSystemFeatures([
|
||||
LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES,
|
||||
LayoutSystemFeatures.ENABLE_GENERATE_CRUD_APP,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showCanvasTopSection && !isPreview) {
|
||||
dispatch(deleteCanvasCardsState());
|
||||
}
|
||||
}, [showCanvasTopSection, isPreview]);
|
||||
|
||||
if (!showCanvasTopSection || isPreview) return null;
|
||||
|
||||
const showTemplatesModal = () => {
|
||||
dispatch(showTemplatesModalAction({ isOpenFromCanvas: false }));
|
||||
AnalyticsUtil.logEvent("CANVAS_BLANK_PAGE_CTA_CLICK", {
|
||||
item: "ADD_PAGE_FROM_TEMPLATE",
|
||||
});
|
||||
};
|
||||
|
||||
const onGeneratePageClick = () => {
|
||||
goToGenPageForm({ applicationSlug, pageSlug, pageId });
|
||||
AnalyticsUtil.logEvent("CANVAS_BLANK_PAGE_CTA_CLICK", {
|
||||
item: "GENERATE_PAGE",
|
||||
});
|
||||
};
|
||||
|
||||
const isAirgappedInstance = isAirgapped();
|
||||
const showCanvasPrompts =
|
||||
(enableForkingFromTemplates && !isAirgappedInstance) || enableGenerateCrud;
|
||||
return showCanvasPrompts ? (
|
||||
<Wrapper data-testid="canvas-ctas">
|
||||
{enableForkingFromTemplates && !isAirgappedInstance && (
|
||||
<Card data-testid="start-from-template" onClick={showTemplatesModal}>
|
||||
<Icon name="layout-2-line" size="lg" />
|
||||
<Content>
|
||||
<Text color={"var(--ads-v2-color-fg-emphasis)"} type={TextType.H5}>
|
||||
{createMessage(TEMPLATE_CARD_TITLE)}
|
||||
</Text>
|
||||
<Text type={TextType.P3}>
|
||||
{createMessage(TEMPLATE_CARD_DESCRIPTION)}
|
||||
</Text>
|
||||
</Content>
|
||||
</Card>
|
||||
)}
|
||||
{enableGenerateCrud && (
|
||||
<Card
|
||||
centerAlign={false}
|
||||
data-testid="generate-app"
|
||||
onClick={onGeneratePageClick}
|
||||
>
|
||||
<Icon name="database-2-line" size="lg" />
|
||||
<Content>
|
||||
<Text color={"var(--ads-v2-color-fg-emphasis)"} type={TextType.H5}>
|
||||
{createMessage(GENERATE_PAGE)}
|
||||
</Text>
|
||||
<Text type={TextType.P3}>
|
||||
{createMessage(GENERATE_PAGE_DESCRIPTION)}
|
||||
</Text>
|
||||
</Content>
|
||||
</Card>
|
||||
)}
|
||||
</Wrapper>
|
||||
) : null;
|
||||
}
|
||||
|
||||
export default EmptyCanvasPrompts;
|
||||
Loading…
Reference in New Issue
Block a user