## Description Enhancements to Templates Gallery: 1. Fixed Template Heights: Adjusted the template card display to feature a fixed height for each template, providing a consistent and visually appealing layout. 2. Title Update to "Operations": Revised the section title from "Templates" to "Operations" to better reflect the purpose and content of the gallery. 3. New Card for Building Blocks: Created a new card to accommodate building blocks seamlessly. This enhancement ensures a more comprehensive representation of the available elements within each template. 4. Transition to Grid Layout: Replaced the Masonry layout with a grid structure for improved alignment and visual harmony between templates and building blocks. This change enhances the overall organization and presentation of content within the gallery. Figma - https://www.figma.com/file/kbU9xPv44neCfv1FFo9Ndu/User-Activation?type=design&node-id=4293-41441&mode=design&t=nPvqyNdtbtsKmvm2-0 #### PR fixes following issue(s) Fixes #29456 #### Media #### Type of change - New feature (non-breaking change which adds functionality) ## 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 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced styled components for improved layout and design of building block templates. - Added a new "Fork" button with tooltip functionality to Building Block components. - Implemented a grid layout for template presentation using the new `TemplateGrid` styled component. - Created a `FixedHeightTemplate` component to enforce consistent sizing and text truncation for template elements. - **Enhancements** - Updated the `BuildingBlock` component to support a new `onForkTemplateClick` event. - Refined the visual presentation and layout of templates with updated CSS styles. - Improved the template filtering interface with new selectors and loading indicators. - Enhanced the `TemplatesContent` component to include search functionality and display the count of templates and filters. - **Bug Fixes** - Fixed issues with template rendering by replacing the use of `Masonry` with `TemplateGrid`. - Adjusted the `RequestTemplate` component to correctly display the request text based on the `isBuildingBlock` prop. - **Refactor** - Refactored the `TemplatesContent` component into `StartWithTemplateContent` and `StartWithTemplateFilters` for better modularity. - Removed redundant code and imports across various template-related components and files. - Streamlined test scripts by introducing custom helper functions for template interactions. - **Documentation** - Added a new message constant `REQUEST_BUILDING_BLOCK` for requesting building blocks. - **Style** - Applied updated styles to the `SearchWrapper` and `ModalContentWrapper` components for better visual consistency. - **Chores** - Updated the `TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE` constant to reflect the correct terminology. - **Tests** - Modified test cases related to filtering templates and forking templates to reflect changes in the UI and functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { ObjectsRegistry } from "../Objects/Registry";
|
|
|
|
// Edit mode modal
|
|
export class Templates {
|
|
private agHelper = ObjectsRegistry.AggregateHelper;
|
|
private homePage = ObjectsRegistry.HomePage;
|
|
public locators = {
|
|
_templatesTab: ".t--templates-tab",
|
|
_forkApp: ".t--fork-template",
|
|
_templateCard: "[data-testid='template-card']",
|
|
_templatesSearchInput: "[data-testid='t--application-search-input']",
|
|
_resultsHeader: "[data-testid='t--application-templates-results-header']",
|
|
_templateViewGoBack: "[data-testid='t--template-view-goback']",
|
|
_templateDialogBox: "[data-testid=t--templates-dialog-component]",
|
|
_closeTemplateDialogBoxBtn: ".ads-v2-modal__content-header-close-button",
|
|
_requestForTemplateBtn: "span:contains('Request for a template')",
|
|
_tempaltesFilterItem: "[data-testid='t--templates-filter-item']",
|
|
};
|
|
|
|
FilterTemplatesByName(query: string) {
|
|
ObjectsRegistry.AggregateHelper.TypeText(
|
|
this.locators._templatesSearchInput,
|
|
query,
|
|
);
|
|
this.agHelper.Sleep();
|
|
}
|
|
|
|
GetTemplatesCardsList() {
|
|
return cy.get(this.locators._templateCard);
|
|
}
|
|
|
|
public SwitchToTemplatesTab() {
|
|
cy.url().then((url) => {
|
|
if (!url.endsWith("applications")) {
|
|
this.homePage.NavigateToHome();
|
|
}
|
|
this.agHelper.GetNClick(this.locators._templatesTab);
|
|
this.agHelper.AssertElementVisibility(
|
|
this.locators._requestForTemplateBtn,
|
|
true,
|
|
0,
|
|
60000,
|
|
); //giving more time here for templates page to fully load, since there is no intercept validation for same
|
|
});
|
|
}
|
|
|
|
RefreshTemplatesPage(
|
|
withDummyData: boolean,
|
|
templateFixture = "Templates/AllowPageImportTemplates.json",
|
|
) {
|
|
if (withDummyData) {
|
|
cy.fixture(templateFixture).then((templatesData) => {
|
|
cy.intercept(
|
|
{
|
|
method: "GET",
|
|
url: "/api/v1/app-templates",
|
|
},
|
|
{
|
|
statusCode: 200,
|
|
body: templatesData,
|
|
},
|
|
);
|
|
});
|
|
}
|
|
cy.intercept("GET", "/api/v1/app-templates/filters").as("fetchFilters");
|
|
this.agHelper.RefreshPage("fetchFilters");
|
|
this.agHelper.AssertElementVisibility(this.locators._templateCard);
|
|
}
|
|
|
|
FilterByFirst2Categories() {
|
|
return this.agHelper
|
|
.GetElement(this.locators._tempaltesFilterItem)
|
|
.then((categories) => {
|
|
const first2Categories = categories.slice(1, 3);
|
|
first2Categories.map((_, category) => {
|
|
cy.wrap(category).click();
|
|
});
|
|
});
|
|
}
|
|
}
|