## Description > [!TIP] **Goal** To drag any building blocks from the explorer and drop at any position on the users canvas with full implementation. **Implementation** - Show skeleton widget when building block is initially dragged unto the canvas. - Make API call to add datasources, queries, and JS to existing page of users app - Get returned widget DSL and use existing copy paste logic to display widgets on the canvas - Remove loading state, handle clean up for copy paste - Run all queries newly created by the dropped building block **Limitations** - There is a loading state and the process is not instant like dropping a widget This PR is followed by this one [here](https://github.com/appsmithorg/appsmith/pull/31406), which displays the loading state when a building block is dragged unto the canvas. Fixes #31856 ## Automation /ok-to-test tags="@tag.Templates, @tag.MainContainer, @tag.Visual, @tag.Widget" ### 🔍 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/8701664455> > Commit: 456a7a0a322e76974a7f5c41a6c1e274ef82e4ea > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8701664455&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new "Building Blocks" category in the widget sidebar for enhanced organization and accessibility. - Added functionality to resize building blocks with new horizontal and vertical limits. - Implemented a "see more" button for "Building Blocks" to display all associated widgets. - Enhanced drag and drop functionality for building blocks on the canvas. - **Enhancements** - Improved sorting logic for widgets, prioritizing "Building Blocks". - Enhanced widget search functionality within the sidebar. - **Bug Fixes** - Adjusted default rows and columns settings for explorer building blocks to improve layout and usability. - **Documentation** - Updated messages and constants related to new features for clarity and consistency. - **Refactor** - Refactored drag and drop handling logic to support new building block constraints and features. - Updated application state management to include building blocks related data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Anagh Hegde <anagh@appsmith.com> Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
122 lines
3.2 KiB
TypeScript
122 lines
3.2 KiB
TypeScript
import type { AxiosPromise } from "axios";
|
|
import Api from "api/Api";
|
|
import type { ApiResponse } from "./ApiResponses";
|
|
import type { WidgetType } from "constants/WidgetConstants";
|
|
import type {
|
|
ApplicationResponsePayload,
|
|
ApplicationPagePayload,
|
|
} from "@appsmith/api/ApplicationApi";
|
|
import type { Datasource } from "entities/Datasource";
|
|
|
|
export interface Template {
|
|
id: string;
|
|
userPermissions: string[];
|
|
title: string;
|
|
description: string;
|
|
appUrl: string;
|
|
gifUrl: string;
|
|
screenshotUrls: string[];
|
|
widgets: WidgetType[];
|
|
functions: string[];
|
|
useCases: string[];
|
|
datasources: string[];
|
|
pages: ApplicationPagePayload[];
|
|
allowPageImport: boolean;
|
|
templateGridColumnSize?: number;
|
|
templateGridRowSize?: number;
|
|
}
|
|
|
|
export type FetchTemplatesResponse = ApiResponse<Template[]>;
|
|
export type FilterKeys = "widgets" | "datasources";
|
|
|
|
export type FetchTemplateResponse = ApiResponse<Template>;
|
|
|
|
export type ImportTemplateResponse = ApiResponse<{
|
|
isPartialImport: boolean;
|
|
unConfiguredDatasourceList: Datasource[];
|
|
application: ApplicationResponsePayload;
|
|
}>;
|
|
|
|
export interface TemplateFiltersResponse extends ApiResponse {
|
|
data: {
|
|
functions: string[];
|
|
useCases?: string[];
|
|
};
|
|
}
|
|
|
|
export interface PublishCommunityTemplateRequest {
|
|
applicationId: string;
|
|
workspaceId: string;
|
|
branchName: string;
|
|
title: string;
|
|
headline: string;
|
|
description: string;
|
|
useCases: string[];
|
|
authorEmail: string;
|
|
}
|
|
|
|
export type PublishCommunityTemplateResponse = ApiResponse<{
|
|
isPublic: boolean;
|
|
forkingEnabled: boolean;
|
|
isCommunityTemplate: boolean;
|
|
modifiedAt: string;
|
|
}>;
|
|
|
|
class TemplatesAPI extends Api {
|
|
static baseUrl = "v1";
|
|
|
|
static async getAllTemplates(): Promise<
|
|
AxiosPromise<FetchTemplatesResponse>
|
|
> {
|
|
return Api.get(TemplatesAPI.baseUrl + `/app-templates`);
|
|
}
|
|
static async getTemplateInformation(
|
|
templateId: string,
|
|
): Promise<AxiosPromise<FetchTemplatesResponse>> {
|
|
return Api.get(TemplatesAPI.baseUrl + `/app-templates/${templateId}`);
|
|
}
|
|
static async getSimilarTemplates(
|
|
templateId: string,
|
|
): Promise<AxiosPromise<FetchTemplatesResponse>> {
|
|
return Api.get(
|
|
TemplatesAPI.baseUrl + `/app-templates/${templateId}/similar`,
|
|
);
|
|
}
|
|
static async importTemplate(
|
|
templateId: string,
|
|
workspaceId: string,
|
|
): Promise<AxiosPromise<ImportTemplateResponse>> {
|
|
return Api.post(
|
|
TemplatesAPI.baseUrl +
|
|
`/app-templates/${templateId}/import/${workspaceId}`,
|
|
);
|
|
}
|
|
static async importTemplateToApplication(
|
|
templateId: string,
|
|
applicationId: string,
|
|
organizationId: string,
|
|
body?: string[],
|
|
): Promise<AxiosPromise<ImportTemplateResponse>> {
|
|
return Api.post(
|
|
TemplatesAPI.baseUrl +
|
|
`/app-templates/${templateId}/merge/${applicationId}/${organizationId}`,
|
|
body,
|
|
);
|
|
}
|
|
static async getTemplateFilters(): Promise<
|
|
AxiosPromise<TemplateFiltersResponse>
|
|
> {
|
|
return Api.get(TemplatesAPI.baseUrl + `/app-templates/filters`);
|
|
}
|
|
static async publishCommunityTemplate(
|
|
body: PublishCommunityTemplateRequest,
|
|
): Promise<AxiosPromise<PublishCommunityTemplateResponse>> {
|
|
return Api.post(
|
|
TemplatesAPI.baseUrl + `/app-templates/publish/community-template`,
|
|
body,
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TemplatesAPI;
|