From cd5f185d970414d751870b2cdc07bd3062e1f738 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 23 Jan 2024 11:05:47 +0100 Subject: [PATCH] fix: update similar templates component cards (#30313) ## Description **Goal** To use the new FixedHeightTemplate and BuildingBlock components in the similar templates section of the platform. **Refactor** Removed react-masonry-css and used css grid in implementing similar templates list Added a width: 100%; style declaration to the Wrapper component in TemplateView.tsx to maintain full width #### PR fixes following issue(s) Fixes #29983 #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) ## 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 ## Summary by CodeRabbit - **Refactor** - Updated the rendering logic in the `SimilarTemplates` component for enhanced conditional display of elements based on template features. - Added a `width: 100%;` style declaration to the `Wrapper` component in `TemplateView.tsx`. --- .../Templates/Template/SimilarTemplates.tsx | 86 ++++++++++--------- .../src/pages/Templates/TemplateView.tsx | 9 +- .../TemplatesModal/TemplateDetailedView.tsx | 9 -- 3 files changed, 48 insertions(+), 56 deletions(-) diff --git a/app/client/src/pages/Templates/Template/SimilarTemplates.tsx b/app/client/src/pages/Templates/Template/SimilarTemplates.tsx index 14e973eeff..074ba9b01d 100644 --- a/app/client/src/pages/Templates/Template/SimilarTemplates.tsx +++ b/app/client/src/pages/Templates/Template/SimilarTemplates.tsx @@ -5,46 +5,34 @@ import { } from "@appsmith/constants/messages"; import type { Template as TemplateInterface } from "api/TemplatesApi"; import { Text, Link } from "design-system"; -import React from "react"; -import type { MasonryProps } from "react-masonry-css"; -import Masonry from "react-masonry-css"; +import React, { useCallback } from "react"; import styled from "styled-components"; -import Template from "."; import { Section } from "./TemplateDescription"; +import FixedHeightTemplate from "./FixedHeightTemplate"; +import BuildingBlock from "../BuildingBlock"; +import { TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE } from "../constants"; -export const SimilarTemplatesWrapper = styled.div` +const SimilarTemplatesWrapper = styled.div` padding-right: 132px; padding-left: 132px; - - .grid { - display: flex; - margin-left: ${(props) => -props.theme.spaces[9]}px; - margin-top: ${(props) => props.theme.spaces[12]}px; - } - - .grid_column { - padding-left: ${(props) => props.theme.spaces[9]}px; - } `; -export const SimilarTemplatesTitleWrapper = styled.div` +const SimilarTemplatesTitleWrapper = styled.div` display: flex; align-items: center; justify-content: space-between; `; -// const BackButtonWrapper = styled.div<{ width?: number }>` -// cursor: pointer; -// display: flex; -// align-items: center; -// gap: ${(props) => props.theme.spaces[2]}px; -// ${(props) => props.width && `width: ${props.width};`} -// `; +const TemplateGrid = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-gap: 16px; + margin-top: ${(props) => props.theme.spaces[12]}px; +`; interface SimilarTemplatesProp { similarTemplates: TemplateInterface[]; onBackPress: (e: React.MouseEvent) => void; - breakpointCols: MasonryProps["breakpointCols"]; onClick: (template: TemplateInterface) => void; onFork?: (template: TemplateInterface) => void; className?: string; @@ -52,6 +40,13 @@ interface SimilarTemplatesProp { } function SimilarTemplates(props: SimilarTemplatesProp) { + const handleClick = useCallback( + (template: TemplateInterface) => { + props.onClick(template); + }, + [props.onClick], + ); + if (!props.similarTemplates.length) { return null; } @@ -67,21 +62,34 @@ function SimilarTemplates(props: SimilarTemplatesProp) { {createMessage(VIEW_ALL_TEMPLATES)} - - {props.similarTemplates.map((template) => ( -