PromucFlow_constructor/app/client/src/api/TemplatesApi.ts
Jacques Ikot 0118051301
feat: implement dropping building blocks on canvas (#31857)
## 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>
2024-04-16 09:41:09 +01:00

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;