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 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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`. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Jacques Ikot
GitHub
parent
c2dc2bb35b
commit
cd5f185d97
|
|
@ -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)}
|
||||
</Link>
|
||||
</SimilarTemplatesTitleWrapper>
|
||||
<Masonry
|
||||
breakpointCols={props.breakpointCols}
|
||||
className="grid"
|
||||
columnClassName="grid_column"
|
||||
>
|
||||
{props.similarTemplates.map((template) => (
|
||||
<Template
|
||||
hideForkTemplateButton={props.isForkingEnabled}
|
||||
key={template.id}
|
||||
onClick={() => props.onClick(template)}
|
||||
onForkTemplateClick={props.onFork}
|
||||
template={template}
|
||||
/>
|
||||
))}
|
||||
</Masonry>
|
||||
<TemplateGrid>
|
||||
{props.similarTemplates.map((template) => {
|
||||
if (
|
||||
template.functions.includes(
|
||||
TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE,
|
||||
)
|
||||
) {
|
||||
return (
|
||||
<BuildingBlock
|
||||
buildingBlock={template}
|
||||
hideForkTemplateButton={props.isForkingEnabled}
|
||||
key={template.id}
|
||||
onClick={() => handleClick(template)}
|
||||
onForkTemplateClick={props.onFork}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FixedHeightTemplate
|
||||
hideForkTemplateButton={props.isForkingEnabled}
|
||||
key={template.id}
|
||||
onClick={() => handleClick(template)}
|
||||
onForkTemplateClick={props.onFork}
|
||||
template={template}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TemplateGrid>
|
||||
</Section>
|
||||
</SimilarTemplatesWrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,17 +25,11 @@ import SimilarTemplates from "./Template/SimilarTemplates";
|
|||
import { templateIdUrl } from "@appsmith/RouteBuilder";
|
||||
import TemplateViewHeader from "./TemplateViewHeader";
|
||||
import { registerEditorWidgets } from "utils/editor/EditorUtils";
|
||||
const breakpointColumnsObject = {
|
||||
default: 4,
|
||||
3000: 3,
|
||||
1500: 3,
|
||||
1024: 2,
|
||||
800: 1,
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TemplateViewWrapper = styled.div`
|
||||
|
|
@ -198,7 +192,6 @@ export function TemplateView({
|
|||
</TemplateViewWrapper>
|
||||
{showSimilarTemplate && (
|
||||
<SimilarTemplates
|
||||
breakpointCols={breakpointColumnsObject}
|
||||
isForkingEnabled={!!workspaceList.length}
|
||||
onBackPress={goToTemplateListView}
|
||||
onClick={onSimilarTemplateClick}
|
||||
|
|
|
|||
|
|
@ -29,14 +29,6 @@ import LoadingScreen from "./LoadingScreen";
|
|||
import PageSelection from "./PageSelection";
|
||||
import { Link } from "design-system";
|
||||
|
||||
const breakpointColumns = {
|
||||
default: 4,
|
||||
3000: 3,
|
||||
1500: 3,
|
||||
1024: 2,
|
||||
800: 1,
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: 85vh;
|
||||
display: flex;
|
||||
|
|
@ -154,7 +146,6 @@ function TemplateDetailedView(props: TemplateDetailedViewProps) {
|
|||
<TemplateDescription template={currentTemplate} />
|
||||
</TemplateDescriptionWrapper>
|
||||
<StyledSimilarTemplatesWrapper
|
||||
breakpointCols={breakpointColumns}
|
||||
isForkingEnabled={false}
|
||||
onBackPress={props.onBackPress}
|
||||
onClick={onSimilarTemplateClick}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user