Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Migrate sub components into Plugin Action Editor (#36844)

Browse Source 
## Description

- Moving older components, utils and constants into the Plugin Action
Editor to complete the modularisation project.
- Update Plugin Action Editor to expect an action ID instead of fetching
it from the URL.
- Add a Readme



Fixes #34324 

## Automation

/ok-to-test tags="@tag.All"

### 🔍 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/11363303457>
> Commit: c36241f8cb19d57365c2555a02284b72aa849a67
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11363303457&attempt=3"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 16 Oct 2024 12:40:23 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
  - Introduced a new utility function `formatBytes` for byte formatting.
- Added comprehensive documentation for the Plugin Action Editor module.

- **Improvements**
  - Simplified action retrieval logic in the Plugin Action Editor.
- Enhanced import organization across various components for better
maintainability.

- **Bug Fixes**
- Resolved import path issues for several components and constants to
ensure correct functionality.

- **Chores**
- Updated multiple import paths to reflect the new directory structure
for improved modularity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Hetu Nandu 2024-10-16 18:29:10 +05:30 committed by GitHub
parent 060cf92e55
commit 7ff703c7de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
94 changed files with 250 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/src/PluginActionEditor/PluginActionEditor.tsx
View File

@ -1,6 +1,4 @@
import React from "react";
import { useLocation } from "react-router";
import { identifyEntityFromPath } from "../navigation/FocusEntity";
import { useSelector } from "react-redux";
import {
getActionByBaseId,
@ -20,15 +18,15 @@ import { useActionSettingsConfig } from "./hooks";
interface ChildrenProps {
children: React.ReactNode | React.ReactNode[];
actionId: string;
}
const PluginActionEditor = (props: ChildrenProps) => {
const { pathname } = useLocation();
const isEditorInitialized = useIsEditorInitialised();
const entity = identifyEntityFromPath(pathname);
const action = useSelector((state) => getActionByBaseId(state, entity.id));
const action = useSelector((state) =>
getActionByBaseId(state, props.actionId),
);
const pluginId = get(action, "pluginId", "");
const plugin = useSelector((state) => getPlugin(state, pluginId));

6
app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import APIEditorForm from "./components/APIEditorForm";
import { Flex } from "@appsmith/ads";
import { useChangeActionCall } from "./hooks/useChangeActionCall";
import { usePluginActionContext } from "../../PluginActionContext";
import { UIComponentTypes } from "api/PluginApi";
import GraphQLEditorForm from "./components/GraphQLEditor/GraphQLEditorForm";
import UQIEditorForm from "./components/UQIEditorForm";
import APIEditorForm from "./components/ApiEditor";
import GraphQLEditorForm from "./components/GraphQLEditor";
import UQIEditorForm from "./components/UQIEditor";
const PluginActionForm = () => {
useChangeActionCall();

0
app/client/src/pages/Editor/ActionForm/Section/index.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx
View File

0
app/client/src/pages/Editor/ActionForm/Section/styles.module.css → app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css
View File

0
app/client/src/pages/Editor/ActionForm/Zone/index.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/index.tsx
View File

0
app/client/src/pages/Editor/ActionForm/Zone/styles.module.css → app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css
View File

0
app/client/src/pages/Editor/ActionForm/index.ts → app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/index.ts
View File

10
app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx
View File

@ -1,14 +1,14 @@
import React from "react";
import CommonEditorForm from "./CommonEditorForm";
import { usePluginActionContext } from "PluginActionEditor";
import CommonEditorForm from "../CommonEditorForm";
import { usePluginActionContext } from "../../../../PluginActionContext";
import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
import { HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/CommonApiConstants";
import PostBodyData from "pages/Editor/APIEditor/PostBodyData";
import { HTTP_METHOD_OPTIONS } from "../../../../constants/CommonApiConstants";
import PostBodyData from "./PostBodyData";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
import Pagination from "pages/Editor/APIEditor/Pagination";
import Pagination from "./Pagination";
import { reduxForm } from "redux-form";
import {
useHandleRunClick,

6
app/client/src/pages/Editor/APIEditor/Pagination.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/Pagination.tsx
View File

@ -7,8 +7,10 @@ import { PaginationType } from "entities/Action";
import RadioFieldGroup from "components/editorComponents/form/fields/RadioGroupField";
import { Classes, Text, TextType } from "@appsmith/ads-old";
import { Button } from "@appsmith/ads";
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import { CodeEditorBorder } from "components/editorComponents/CodeEditor/EditorConfig";
import {
CodeEditorBorder,
type EditorTheme,
} from "components/editorComponents/CodeEditor/EditorConfig";
import { GifPlayer } from "@appsmith/ads-old";
import thumbnail from "assets/icons/gifs/thumbnail.png";
import configPagination from "assets/icons/gifs/config_pagination.gif";

4
app/client/src/pages/Editor/APIEditor/PostBodyData.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
View File

@ -5,7 +5,7 @@ import { formValueSelector } from "redux-form";
import {
POST_BODY_FORMAT_OPTIONS,
POST_BODY_FORMAT_TITLES,
} from "constants/ApiEditorConstants/CommonApiConstants";
} from "../../../../constants/CommonApiConstants";
import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
@ -22,7 +22,7 @@ import { Classes } from "@appsmith/ads-old";
import {
getPostBodyFormat,
updatePostBodyContentType,
} from "PluginActionEditor/store";
} from "../../../../store";
import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { createMessage, API_PANE_NO_BODY } from "ee/constants/messages";

1
app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./APIEditorForm";

2
app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import RequestDropdownField from "components/editorComponents/form/fields/RequestDropdownField";
import { replayHighlightClass } from "globalStyles/portals";
import EmbeddedDatasourcePathField from "components/editorComponents/form/fields/EmbeddedDatasourcePathField";
import EmbeddedDatasourcePathField from "./components/EmbeddedDatasourcePathField";
import styled from "styled-components";
import { Flex } from "@appsmith/ads";

4
app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx
View File

@ -4,10 +4,10 @@ import FormLabel from "components/editorComponents/FormLabel";
import type { AutoGeneratedHeader } from "pages/Editor/APIEditor/helpers";
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import React from "react";
import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
import { API_EDITOR_TABS } from "../../../../constants/CommonApiConstants";
import { DatasourceConfig } from "./components/DatasourceConfig";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import ApiAuthentication from "pages/Editor/APIEditor/ApiAuthentication";
import ApiAuthentication from "./components/ApiAuthentication";
import ActionSettings from "pages/Editor/ActionSettings";
import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
import { useSelectedFormTab } from "./hooks/useSelectedFormTab";

2
app/client/src/pages/Editor/APIEditor/ApiAuthentication.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/ApiAuthentication.tsx
View File

@ -13,7 +13,7 @@ import {
SAVE_DATASOURCE_MESSAGE,
createMessage,
} from "ee/constants/messages";
import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
import StoreAsDatasource from "./StoreAsDatasource";
import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
import { Icon, Text } from "@appsmith/ads";
import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";

8
app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx
View File

@ -23,7 +23,7 @@ import {
import { entityMarker } from "components/editorComponents/CodeEditor/MarkHelpers/entityMarker";
import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
import StoreAsDatasource from "./StoreAsDatasource";
import { DATASOURCE_URL_EXACT_MATCH_REGEX } from "constants/AppsmithActionConstants/ActionConstants";
import styled from "styled-components";
import * as FontFamilies from "constants/Fonts";
@ -42,7 +42,7 @@ import {
getDatasource,
getDatasourcesByPluginId,
} from "ee/selectors/entitiesSelector";
import { extractApiUrlPath } from "transformers/RestActionTransformer";
import { extractApiUrlPath } from "../../../../../transformers/RestActionTransformer";
import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
import { Text } from "@appsmith/ads";
import { TEMP_DATASOURCE_ID } from "constants/Datasource";
@ -50,7 +50,7 @@ import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
import { getCodeMirrorNamespaceFromEditor } from "utils/getCodeMirrorNamespace";
import { isDynamicValue } from "utils/DynamicBindingUtils";
import { isEnvironmentValid } from "ee/utils/Environments";
import { DEFAULT_DATASOURCE_NAME } from "constants/ApiEditorConstants/ApiEditorConstants";
import { DEFAULT_DATASOURCE_NAME } from "../../../../../constants/ApiEditorConstants";
import { isString } from "lodash";
import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";
import {
@ -59,7 +59,7 @@ import {
} from "ee/utils/BusinessFeatures/permissionPageHelpers";
import { isGACEnabled } from "ee/utils/planHelpers";
import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors";
import { getDatasourceInfo } from "PluginActionEditor/components/PluginActionForm/utils/getDatasourceInfo";
import { getDatasourceInfo } from "../utils/getDatasourceInfo";
interface ReduxStateProps {
workspaceId: string;

0
app/client/src/components/editorComponents/StoreAsDatasource.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx
View File

2
app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts
View File

@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
import {
getPluginActionConfigSelectedTab,
setPluginActionEditorSelectedTab,
} from "PluginActionEditor/store";
} from "../../../../../store";
export function useSelectedFormTab(): [
string | undefined,

4
app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/index.ts
View File

@ -1,5 +1 @@
export { default } from "./CommonEditorForm";
export { HintMessages } from "./HintMessages";
export { InfoFields } from "./InfoFields";
export { RequestTabs } from "./RequestTabs";

0
app/client/src/PluginActionEditor/components/PluginActionForm/utils/getDatasourceInfo.ts → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/utils/getDatasourceInfo.ts
View File

6
app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx
View File

@ -2,10 +2,10 @@ import React from "react";
import { reduxForm } from "redux-form";
import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
import CommonEditorForm from "../CommonEditorForm";
import Pagination from "pages/Editor/APIEditor/GraphQL/Pagination";
import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants";
import Pagination from "./Pagination";
import { GRAPHQL_HTTP_METHOD_OPTIONS } from "../../../../constants/GraphQLEditorConstants";
import PostBodyData from "./PostBodyData";
import { usePluginActionContext } from "PluginActionEditor";
import { usePluginActionContext } from "../../../../PluginActionContext";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";

2
app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/Pagination.tsx
View File

@ -12,7 +12,7 @@ import { connect } from "react-redux";
import type { AppState } from "ee/reducers";
import { FormLabel } from "components/editorComponents/form/fields/StyledFormComponents";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import type { GRAPHQL_PAGINATION_TYPE } from "constants/ApiEditorConstants/GraphQLEditorConstants";
import type { GRAPHQL_PAGINATION_TYPE } from "../../../../constants/GraphQLEditorConstants";
import {
LIMITBASED_PREFIX,
CURSORBASED_PREFIX,

2
app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
View File

@ -8,7 +8,7 @@ import {
TabBehaviour,
} from "components/editorComponents/CodeEditor/EditorConfig";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import { Section, Zone } from "pages/Editor/ActionForm";
import { Section, Zone } from "../ActionForm";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import FormLabel from "components/editorComponents/FormLabel";

1
app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./GraphQLEditorForm";

2
app/client/src/pages/Editor/QueryEditor/FormRender.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
View File

@ -20,7 +20,7 @@ import {
updateEvaluatedSectionConfig,
} from "components/formControls/utils";
import { isValidFormConfig } from "reducers/evaluationReducers/formEvaluationReducer";
import FormControl from "../FormControl";
import FormControl from "pages/Editor/FormControl";
import type { ControlProps } from "components/formControls/BaseControl";
import { Spinner } from "@appsmith/ads";
import type { QueryAction, SaaSAction } from "entities/Action";

0
app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/TemplateMenu.tsx
View File

4
app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditorForm.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import FormRender from "pages/Editor/QueryEditor/FormRender";
import { usePluginActionContext } from "../../../PluginActionContext";
import FormRender from "./FormRender";
import { usePluginActionContext } from "../../../../PluginActionContext";
import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
import { getFormValues, reduxForm } from "redux-form";
import type { QueryAction, SaaSAction } from "entities/Action";

1
app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./UQIEditorForm";

4
app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx
View File

@ -1,7 +1,7 @@
import { renderHook } from "@testing-library/react-hooks/dom";
import { useDispatch } from "react-redux";
import { PluginType } from "entities/Action";
import { usePluginActionContext } from "PluginActionEditor";
import { usePluginActionContext } from "../../../PluginActionContext";
import { changeApi, changeQuery } from "../../../store";
import usePrevious from "utils/hooks/usePrevious";
import { useChangeActionCall } from "./useChangeActionCall";
@ -15,7 +15,7 @@ jest.mock("../../../store", () => ({
changeQuery: jest.fn(),
}));
jest.mock("PluginActionEditor", () => ({
jest.mock("../../../PluginActionContext", () => ({
usePluginActionContext: jest.fn(),
}));

4
app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts
View File

@ -1,8 +1,8 @@
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { PluginType } from "entities/Action";
import { usePluginActionContext } from "PluginActionEditor";
import { changeApi, changeQuery } from "PluginActionEditor/store";
import { usePluginActionContext } from "../../../PluginActionContext";
import { changeApi, changeQuery } from "../../../store";
import usePrevious from "utils/hooks/usePrevious";
export const useChangeActionCall = () => {

2
app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { useSelector } from "react-redux";
import ActionNameEditor from "components/editorComponents/ActionNameEditor";
import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
import { usePluginActionContext } from "../PluginActionContext";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";

2
app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { IDEBottomView, ViewHideBehaviour } from "IDE";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "./constants";
import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
import { useDispatch, useSelector } from "react-redux";
import { setPluginActionEditorDebuggerState } from "../../store";

2
app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiFormatSegmentedResponse.tsx
View File

@ -7,7 +7,7 @@ import { Flex, SegmentedControl } from "@appsmith/ads";
import type { ActionResponse } from "api/ActionAPI";
import { setActionResponseDisplayFormat } from "actions/pluginActionActions";
import { actionResponseDisplayDataFormats } from "pages/Editor/utils";
import { ResponseDisplayFormats } from "constants/ApiEditorConstants/CommonApiConstants";
import { ResponseDisplayFormats } from "../../../constants/CommonApiConstants";
import { useDispatch } from "react-redux";
import styled from "styled-components";
import { ResponseFormatTabs } from "./ResponseFormatTabs";

2
app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponse.tsx
View File

@ -10,7 +10,7 @@ import {
import type { ActionResponse } from "api/ActionAPI";
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import type { SourceEntity } from "entities/AppsmithConsole";
import ApiResponseMeta from "components/editorComponents/ApiResponseMeta";
import ApiResponseMeta from "./ApiResponseMeta";
import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView";
import LogAdditionalInfo from "components/editorComponents/Debugger/ErrorLogs/components/LogAdditionalInfo";
import LogHelper from "components/editorComponents/Debugger/ErrorLogs/components/LogHelper";

4
app/client/src/components/editorComponents/ApiResponseMeta.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponseMeta.tsx
View File

@ -2,12 +2,12 @@ import type { PropsWithChildren } from "react";
import React from "react";
import { Flex } from "@appsmith/ads";
import { Text, TextType } from "@appsmith/ads-old";
import { formatBytes } from "../../utils/helpers";
import { isEmpty } from "lodash";
import BindDataButton from "pages/Editor/QueryEditor/BindDataButton";
import BindDataButton from "./BindDataButton";
import styled from "styled-components";
import type { ActionResponse } from "api/ActionAPI";
import { Text as BlueprintText } from "@blueprintjs/core/lib/esm/components/text/text";
import { formatBytes } from "../utils/formatBytes";
interface TextStyleProps {
accent: "primary" | "secondary" | "error";

0
app/client/src/pages/Editor/QueryEditor/BindDataButton.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/BindDataButton.tsx
View File

0
app/client/src/pages/Editor/QueryEditor/QueryResponseTab.test.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab.test.tsx
View File

10
app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab.tsx
View File

@ -6,9 +6,9 @@ import {
ResponseTabErrorContainer,
ResponseTabErrorContent,
ResponseTabErrorDefaultMessage,
} from "PluginActionEditor/components/PluginActionResponse/components/ApiResponse";
import { ResponseFormatTabs } from "PluginActionEditor/components/PluginActionResponse/components/ResponseFormatTabs";
import { NoResponse } from "PluginActionEditor/components/PluginActionResponse/components/NoResponse";
} from "./ApiResponse";
import { ResponseFormatTabs } from "./ResponseFormatTabs";
import { NoResponse } from "./NoResponse";
import LogAdditionalInfo from "components/editorComponents/Debugger/ErrorLogs/components/LogAdditionalInfo";
import LogHelper from "components/editorComponents/Debugger/ErrorLogs/components/LogHelper";
import LOG_TYPE from "entities/AppsmithConsole/logtype";
@ -27,7 +27,7 @@ import { getUpdateTimestamp } from "components/editorComponents/Debugger/ErrorLo
import type { SourceEntity } from "entities/AppsmithConsole";
import type { Action } from "entities/Action";
import { getActionData } from "ee/selectors/entitiesSelector";
import { actionResponseDisplayDataFormats } from "../utils";
import { actionResponseDisplayDataFormats } from "pages/Editor/utils";
import { getErrorAsString } from "sagas/ActionExecution/errorUtils";
import { isString } from "lodash";
import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView";
@ -36,7 +36,7 @@ import BindDataButton from "./BindDataButton";
import {
getPluginActionDebuggerState,
setPluginActionEditorSelectedTab,
} from "PluginActionEditor/store";
} from "../../../store";
import { EDITOR_TABS } from "constants/QueryEditorConstants";
import {
createMessage,

4
app/client/src/PluginActionEditor/components/PluginActionResponse/components/ResponseFormatTabs.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import { ResponseDisplayFormats } from "constants/ApiEditorConstants/CommonApiConstants";
import { ResponseDisplayFormats } from "../../../constants/CommonApiConstants";
import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
import { isString } from "lodash";
import Table from "pages/Editor/QueryEditor/Table";
import Table from "./Table";
type ResponseData = string | Record<string, unknown>[];

9
app/client/src/components/editorComponents/Debugger/Schema.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx
View File

@ -1,7 +1,10 @@
import { Flex } from "@appsmith/ads";
import React, { useEffect, useState } from "react";
import type { DatasourceColumns, DatasourceKeys } from "entities/Datasource";
import { DatasourceStructureContext } from "entities/Datasource";
import {
DatasourceStructureContext,
type DatasourceColumns,
type DatasourceKeys,
} from "entities/Datasource";
import { DatasourceStructureContainer as DatasourceStructureList } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer";
import { useSelector } from "react-redux";
import {
@ -12,7 +15,7 @@ import DatasourceField from "pages/Editor/DatasourceInfo/DatasourceField";
import { find } from "lodash";
import type { AppState } from "ee/reducers";
import RenderInterimDataState from "pages/Editor/DatasourceInfo/RenderInterimDataState";
import { getPluginActionDebuggerState } from "PluginActionEditor/store";
import { getPluginActionDebuggerState } from "../../../store";
interface Props {
datasourceId: string;

0
app/client/src/pages/Editor/QueryEditor/Table.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx
View File

0
app/client/src/pages/Editor/APIEditor/constants.ts → app/client/src/PluginActionEditor/components/PluginActionResponse/constants.ts
View File

0
app/client/src/components/editorComponents/ActionRightPane/useShowSchema.ts → app/client/src/PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema.ts
View File

14
app/client/src/PluginActionEditor/components/PluginActionResponse/utils/formatBytes.ts Normal file
View File

@ -0,0 +1,14 @@
export const formatBytes = (bytes: string | number) => {
if (!bytes) return;
const value = typeof bytes === "string" ? parseInt(bytes) : bytes;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
if (value === 0) return "0 bytes";
const i = parseInt(String(Math.floor(Math.log(value) / Math.log(1024))));
if (i === 0) return bytes + " " + sizes[i];
return (value / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
};

4
app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx
View File

@ -7,10 +7,10 @@ import {
useBlockExecution,
useHandleRunClick,
useAnalyticsOnRunClick,
} from "PluginActionEditor/hooks";
} from "../hooks";
import { useToggle } from "@mantine/hooks";
import { useSelector } from "react-redux";
import { isActionRunning } from "PluginActionEditor/store";
import { isActionRunning } from "../store";
interface PluginActionToolbarProps {
runOptions?: React.ReactNode;

0
app/client/src/constants/ApiEditorConstants/ApiEditorConstants.ts → app/client/src/PluginActionEditor/constants/ApiEditorConstants.ts
View File

0
app/client/src/constants/ApiEditorConstants/AppsmithAIEditorConstants.ts → app/client/src/PluginActionEditor/constants/AppsmithAIEditorConstants.ts
View File

0
app/client/src/constants/ApiEditorConstants/CommonApiConstants.ts → app/client/src/PluginActionEditor/constants/CommonApiConstants.ts
View File

0
app/client/src/constants/ApiEditorConstants/GraphQLEditorConstants.ts → app/client/src/PluginActionEditor/constants/GraphQLEditorConstants.ts
View File

102
app/client/src/PluginActionEditor/readme.md Normal file
View File

@ -0,0 +1,102 @@
## Plugin Action Editor
Appsmith allows its users to connect their UI to various different
data sources e.g. API end points or SQL Query Databases.
These data sources are configured using "Plugins" that define various details about
the configuration and execution. Each data source is a specific connection and
users can have multiple "Actions" built on top of these data sources.
Actions are implementations that can store and retrieve data from the data source.
The Plugin Action Editor is a module that exposes the UX that is used by the users
to implement details about these actions, its settings and test them in edit mode.
### Contents
This module is divided into 3 major composable sections.
- **Toolbar**: A row for the tools on top of the Action. Comes with Settings, Run Buttons and an overflow menu CTA to add further management items like copy or delete. Allows to add more items in it
- **Form**: A preset form based defined by the Plugin config.
- **Response**: A tabbed bottom view to show the Response and other debugging tools
One can use these 3 sections to define their compose different experiences.
#### Plugin Action Context
All the sections and its children are connected via the "Plugin Action Context" that allows for easy data passing.
The Wrapper "PluginActionEditor" will pass this context down. This includes:
- Action
- Action Response
- Plugin
- Datasource
- Form Configs
- Setting Configs
#### UI Store
The UI state is managed via redux, and it is exposed out as well for use
### How to use
Below we illustrate how by using a Composable structure to create the Action Editor
```typescript jsx
const AppPluginActionEditor = () => {
// Define the actionId that needs to be configured via the editor.
// In the example we fetch it from the route
const actionId = getActionIDFromRoute();
return (
/** Plugin Action Editor is our wrapper composable fragment.
* This will fetch the action and other related info
* from state and pass it down to its children via "context".
* This will ensure all children have the same way to access the action
* i.e. via context. Hence, this component is only responsible for
* abstracting the
* action state management
*/
<PluginActionEditor actionID={actionID}>
<PluginActionToolbar />
<PluginActionForm />
<PluginActionResponse />
</PluginActionEditor>
)
}
```
It is completely possible to mix and match these components, and compose them further to build
other experiences with them.
For example if you need to just have the Response view without the form
you can do the following
```typescript jsx
const PluginActionResponseView = () => {
// Define the actionId that needs to be configured via the editor.
// In the example we fetch it from the route
const actionId = getActionIDFromRoute();
return (
<PluginActionEditor actionID={actionID}>
<PluginActionResponse />
</PluginActionEditor>
)
}
```
### Update Guide
1. Update an existing functionality to be reflected in all variations
- Functionality updates should be done at the point of definition itself.
- Prefer having separate files for each functionality if it has a lot of logic or can be extended in EE
2. Add new functionality for all variations
- Add the functionality close to the usage point.
- Avoid configuration of functionality via props since it is used for all.
3. Add an EE variation to a functionality.
- Avoid adding any EE logic for this functionality as much as possible
- Ideally it should be exposed as a prop that can be updated in the EE usage point
- In case it needs to be done in place, make sure the functionality is its own file so that only that functionality
needs extension.
4. Create a specific variance for a certain use case not applicable for all
- Avoid adding the logic inside the module instead override via composition
- If it affects any feature in the module, expose via prop

0
app/client/src/PluginActionEditor/constants.ts → app/client/src/PluginActionEditor/store/constants.ts
View File

2
app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
View File

@ -1,7 +1,7 @@
import type { AppState } from "ee/reducers";
import { createSelector } from "reselect";
import { POST_BODY_FORM_DATA_KEY } from "../constants";
import { POST_BODY_FORM_DATA_KEY } from "./constants";
export const getActionEditorSavingMap = (state: AppState) =>
state.ui.pluginActionEditor.isSaving;

2
app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
View File

@ -5,7 +5,7 @@ import {
ReduxActionErrorTypes,
} from "ee/constants/ReduxActionConstants";
import type { Action } from "entities/Action";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "../components/PluginActionResponse/constants";
import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants";
import type { ActionResponse } from "api/ActionAPI";
import { omit, set } from "lodash";

2
app/client/src/transformers/CurlImportTransformer.test.ts → app/client/src/PluginActionEditor/transformers/CurlImportTransformer.test.ts
View File

@ -1,4 +1,4 @@
import transformCurlImport from "transformers/CurlImportTransformer";
import transformCurlImport from "./CurlImportTransformer";
describe("CurlImportTransformer", () => {
it("has quotes in start and end and escapes special characters", () => {

0
app/client/src/transformers/CurlImportTransformer.ts → app/client/src/PluginActionEditor/transformers/CurlImportTransformer.ts
View File

0
app/client/src/transformers/RestAPIDatasourceFormTransformer.ts → app/client/src/PluginActionEditor/transformers/RestAPIDatasourceFormTransformer.ts
View File

2
app/client/src/transformers/RestActionTransformer.ts → app/client/src/PluginActionEditor/transformers/RestActionTransformer.ts
View File

@ -1,7 +1,7 @@
import {
HTTP_METHOD,
CONTENT_TYPE_HEADER_KEY,
} from "constants/ApiEditorConstants/CommonApiConstants";
} from "../constants/CommonApiConstants";
import type { ApiAction } from "entities/Action";
import isEmpty from "lodash/isEmpty";
import isString from "lodash/isString";

5
app/client/src/transformers/RestActionTransformers.test.ts → app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts
View File

@ -1,15 +1,14 @@
import {
extractApiUrlPath,
transformRestAction,
} from "transformers/RestActionTransformer";
} from "./RestActionTransformer";
import type { ApiAction } from "entities/Action";
import { PluginType } from "entities/Action";
import {
HTTP_PROTOCOL,
MultiPartOptionTypes,
POST_BODY_FORMAT_OPTIONS,
// POST_BODY_FORMAT_OPTIONS_ENUM,
} from "constants/ApiEditorConstants/CommonApiConstants";
} from "../constants/CommonApiConstants";
// jest.mock("POST_");

2
app/client/src/api/helpers/validateJsonResponseMeta.ts
View File

@ -1,6 +1,6 @@
import * as Sentry from "@sentry/react";
import type { AxiosResponse } from "axios";
import { CONTENT_TYPE_HEADER_KEY } from "constants/ApiEditorConstants/CommonApiConstants";
import { CONTENT_TYPE_HEADER_KEY } from "PluginActionEditor/constants/CommonApiConstants";
export const validateJsonResponseMeta = (response: AxiosResponse) => {
if (

6
app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx
View File

@ -24,9 +24,9 @@ import {
isActionRunning,
} from "PluginActionEditor/store";
import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
import Schema from "components/editorComponents/Debugger/Schema";
import QueryResponseTab from "pages/Editor/QueryEditor/QueryResponseTab";
import useShowSchema from "PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema";
import Schema from "PluginActionEditor/components/PluginActionResponse/components/Schema";
import QueryResponseTab from "PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab";
import type { SourceEntity } from "entities/AppsmithConsole";
import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
import {

2
app/client/src/ce/PluginActionEditor/hooks/useBlockExecution.ts
View File

@ -1,7 +1,7 @@
import { getHasExecuteActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { DEFAULT_DATASOURCE_NAME } from "constants/ApiEditorConstants/ApiEditorConstants";
import { DEFAULT_DATASOURCE_NAME } from "PluginActionEditor/constants/ApiEditorConstants";
import { UIComponentTypes } from "api/PluginApi";
import { SQL_DATASOURCES } from "constants/QueryEditorConstants";
import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";

4
app/client/src/ce/navigation/FocusElements/AppIDE.ts
View File

@ -73,7 +73,7 @@ import {
import { getFirstDatasourceId } from "selectors/datasourceSelectors";
import { FocusElement, FocusElementConfigType } from "navigation/FocusElements";
import type { FocusElementsConfigList } from "sagas/FocusRetentionSaga";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
import {
getPluginActionConfigSelectedTab,
getPluginActionDebuggerState,
@ -81,7 +81,7 @@ import {
setPluginActionEditorSelectedTab,
} from "PluginActionEditor/store";
import { EDITOR_TABS } from "constants/QueryEditorConstants";
import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
export const AppIDEFocusElements: FocusElementsConfigList = {
[FocusEntity.DATASOURCE_LIST]: [

7
app/client/src/ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx
View File

@ -9,10 +9,15 @@ import {
ConvertToModuleCallout,
} from "./components/ConvertToModule";
import AppPluginActionToolbar from "./components/AppPluginActionToolbar";
import { useLocation } from "react-router";
import { identifyEntityFromPath } from "navigation/FocusEntity";
const AppPluginActionEditor = () => {
const { pathname } = useLocation();
const entity = identifyEntityFromPath(pathname);
return (
<PluginActionEditor>
<PluginActionEditor actionId={entity.id}>
<ConvertToModuleDisabler>
<AppPluginActionToolbar />
<ConvertToModuleCallout />

2
app/client/src/components/editorComponents/ActionCreator/viewComponents/ActionBlockTree/utils.tsx
View File

@ -9,7 +9,7 @@ import { getCodeFromMoustache, getEvaluationVersion } from "../../utils";
import { ApiMethodIcon } from "pages/Editor/Explorer/ExplorerIcons";
import { getCurrentActions } from "ee/selectors/entitiesSelector";
import { useSelector } from "react-redux";
import type { HTTP_METHOD } from "constants/ApiEditorConstants/CommonApiConstants";
import type { HTTP_METHOD } from "PluginActionEditor/constants/CommonApiConstants";
function GetIconForAction(
actionType: ActionTree["actionType"],

2
app/client/src/components/editorComponents/ApiResponseView.tsx
View File

@ -16,7 +16,7 @@ import type { BottomTab } from "./EntityBottomTabs";
import EntityBottomTabs from "./EntityBottomTabs";
import { DEBUGGER_TAB_KEYS } from "./Debugger/constants";
import { getErrorCount } from "selectors/debuggerSelectors";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
import type { Action } from "entities/Action";
import { EMPTY_RESPONSE } from "./emptyResponse";
import {

2
app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
View File

@ -22,7 +22,7 @@ import {
} from "ee/constants/messages";
import { DEBUGGER_TAB_KEYS } from "./constants";
import EntityBottomTabs from "../EntityBottomTabs";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
import { IDEBottomView, ViewHideBehaviour, ViewDisplayMode } from "IDE";
function DebuggerTabs() {

2
app/client/src/components/editorComponents/Debugger/Resizer/index.tsx
View File

@ -2,7 +2,7 @@ import { Layers } from "constants/Layers";
import type { RefObject } from "react";
import React, { useState, useEffect } from "react";
import styled, { css } from "styled-components";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
export const ResizerCSS = css`
width: 100%;

2
app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
View File

@ -17,7 +17,7 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import {
DEFAULT_MULTI_PART_DROPDOWN_PLACEHOLDER,
MULTI_PART_DROPDOWN_OPTIONS,
} from "constants/ApiEditorConstants/CommonApiConstants";
} from "PluginActionEditor/constants/CommonApiConstants";
import { Button, Text } from "@appsmith/ads";
import RequestDropdownField from "./RequestDropdownField";

2
app/client/src/constants/AppsmithActionConstants/formConfig/ApiSettingsConfig.ts
View File

@ -5,7 +5,7 @@ import {
import {
HTTP_PROTOCOL,
HTTP_PROTOCOL_VERSIONS,
} from "constants/ApiEditorConstants/CommonApiConstants";
} from "PluginActionEditor/constants/CommonApiConstants";
export default [
{

2
app/client/src/entities/AppsmithConsole/index.ts
View File

@ -2,7 +2,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants";
import type LOG_TYPE from "./logtype";
import type { PropertyEvaluationErrorType } from "utils/DynamicBindingUtils";
import type { PluginType } from "entities/Action";
import type { HTTP_METHOD } from "constants/ApiEditorConstants/CommonApiConstants";
import type { HTTP_METHOD } from "PluginActionEditor/constants/CommonApiConstants";
import type {
ENTITY_TYPE,
PLATFORM_ERROR,

10
app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
View File

@ -15,7 +15,7 @@ import equal from "fast-deep-equal/es6";
import { getPlugin } from "ee/selectors/entitiesSelector";
import type { AutoGeneratedHeader } from "./helpers";
import { noop } from "lodash";
import { DEFAULT_DATASOURCE_NAME } from "constants/ApiEditorConstants/ApiEditorConstants";
import { DEFAULT_DATASOURCE_NAME } from "PluginActionEditor/constants/ApiEditorConstants";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import {
@ -25,11 +25,9 @@ import {
import { ApiEditorContext } from "./ApiEditorContext";
import ActionRightPane from "components/editorComponents/ActionRightPane";
import RunHistory from "ee/components/RunHistory";
import {
HintMessages,
InfoFields,
RequestTabs,
} from "PluginActionEditor/components/PluginActionForm/components/CommonEditorForm";
import { HintMessages } from "PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/HintMessages";
import { InfoFields } from "PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields";
import { RequestTabs } from "PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs";
import { getSavingStatusForActionName } from "selectors/actionSelectors";
import { getAssetUrl } from "ee/utils/airgapHelpers";
import { ActionUrlIcon } from "../Explorer/ExplorerIcons";

4
app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx
View File

@ -12,8 +12,8 @@ import {
} from "ee/selectors/entitiesSelector";
import type { CommonFormProps } from "../CommonEditorForm";
import CommonEditorForm from "../CommonEditorForm";
import Pagination from "./Pagination";
import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants";
import Pagination from "PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/Pagination";
import { GRAPHQL_HTTP_METHOD_OPTIONS } from "PluginActionEditor/constants/GraphQLEditorConstants";
import PostBodyData from "PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData";
type APIFormProps = {

250
app/client/src/pages/Editor/APIEditor/GraphQL/QueryWrapperWithCSS.tsx
View File

@ -1,250 +0,0 @@
// import { Colors } from "constants/Colors";
import styled from "styled-components";
const QueryWrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
padding-left: 2px;
/* This CSS is adopted from GraphiQL to maintain the consistency with the GraphiQL playground */
/* COLORS */
/* Comment */
.cm-comment {
color: #999;
}
/* Punctuation */
.cm-punctuation {
color: #555;
}
/* Keyword */
.cm-keyword,
span.cm-m-graphql.cm-attribute {
color: #b11a04;
}
/* OperationName, FragmentName */
.cm-def {
color: #d2054e;
}
/* FieldName */
.cm-property {
color: #1f61a0;
}
/* FieldAlias */
.cm-qualifier {
color: #1c92a9;
}
/* ArgumentName and ObjectFieldName */
.cm-attribute {
color: #8b2bb9;
}
/* Number */
.cm-number {
color: #2882f9;
}
/* String */
.cm-string {
color: #d64292;
}
/* Boolean */
.cm-builtin {
color: #d47509;
}
/* EnumValue */
.cm-string-2 {
color: #0b7fc7;
}
/* Variable */
.cm-variable {
color: #397d13;
}
/* Directive */
.cm-meta {
color: #b33086;
}
/* Type */
.cm-atom {
color: #ca9800;
}
/* CURSOR */
/* DEFAULT THEME */
.cm-s-default .cm-keyword {
color: #708;
}
.cm-s-default .cm-atom {
color: #219;
}
.cm-s-default .cm-number {
color: #164;
}
.cm-s-default .cm-def {
color: #00f;
}
.cm-s-default .cm-variable-2 {
color: #05a;
}
.cm-s-default .cm-variable-3 {
color: #085;
}
.cm-s-default .cm-comment {
color: #a50;
}
.cm-s-default .cm-string {
color: #a11;
}
.cm-s-default .cm-string-2 {
color: #f50;
}
.cm-s-default .cm-meta {
color: #555;
}
.cm-s-default .cm-qualifier {
color: #555;
}
.cm-s-default .cm-builtin {
color: #30a;
}
.cm-s-default .cm-bracket {
color: #997;
}
.cm-s-default .cm-tag {
color: #170;
}
.cm-s-default .cm-attribute {
color: #00c;
}
.cm-s-default .cm-header {
color: blue;
}
.cm-s-default .cm-quote {
color: #090;
}
.cm-s-default .cm-hr {
color: #999;
}
.cm-s-default .cm-link {
color: #00c;
}
.cm-negative {
color: #d44;
}
.cm-positive {
color: #292;
}
.cm-header,
.cm-strong {
font-weight: bold;
}
.cm-em {
font-style: italic;
}
.cm-link {
text-decoration: underline;
}
.cm-strikethrough {
text-decoration: line-through;
}
.cm-s-default .cm-error {
color: #f00;
}
.cm-invalidchar {
color: #f00;
}
.CodeMirror-composing {
border-bottom: 2px solid;
}
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
color: #0f0;
}
.CodeMirror-matchingtag {
background: rgba(255, 150, 0, 0.3);
}
.CodeMirror-activeline-background {
background: #e8f2ff;
}
/* STOP */
.CodeMirror-info .type-name {
color: #ca9800;
}
.CodeMirror-info .field-name {
color: #1f61a0;
}
.CodeMirror-info .enum-value {
color: #0b7fc7;
}
.CodeMirror-info .arg-name {
color: #8b2bb9;
}
.CodeMirror-info .directive-name {
color: #b33086;
}
.CodeMirror-jump-token {
text-decoration: underline;
cursor: pointer;
}
&&&&& .CodeMirror {
border: 0;
}
&&& .CodeMirror-gutters {
background: var(--ads-v2-color-bg-subtle);
}
`;
export default QueryWrapper;

6
app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx
View File

@ -4,7 +4,7 @@ import type { InjectedFormProps } from "redux-form";
import { formValueSelector, reduxForm } from "redux-form";
import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
import type { Action } from "entities/Action";
import PostBodyData from "./PostBodyData";
import PostBodyData from "PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData";
import type { AppState } from "ee/reducers";
import { getApiName } from "selectors/formSelectors";
import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
@ -12,9 +12,9 @@ import get from "lodash/get";
import { getAction, getActionResponses } from "ee/selectors/entitiesSelector";
import type { CommonFormProps } from "./CommonEditorForm";
import CommonEditorForm from "./CommonEditorForm";
import Pagination from "./Pagination";
import Pagination from "PluginActionEditor/components/PluginActionForm/components/ApiEditor/Pagination";
import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";
import { HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/CommonApiConstants";
import { HTTP_METHOD_OPTIONS } from "PluginActionEditor/constants/CommonApiConstants";
type APIFormProps = {
httpMethodFromForm: string;

2
app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx
View File

@ -22,7 +22,7 @@ import {
getErrorCount,
getResponsePaneHeight,
} from "selectors/debuggerSelectors";
import { ActionExecutionResizerHeight } from "../APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
import { IDEBottomView, ViewHideBehaviour } from "IDE";
export const ResizerMainContainer = styled.div`

2
app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
View File

@ -19,7 +19,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants";
import {
datasourceToFormValues,
formValuesToDatasource,
} from "transformers/RestAPIDatasourceFormTransformer";
} from "PluginActionEditor/transformers/RestAPIDatasourceFormTransformer";
import type {
ApiDatasourceForm,
AuthorizationCode,

2
app/client/src/pages/Editor/DataSourceEditor/index.tsx
View File

@ -81,7 +81,7 @@ import {
} from "components/formControls/utils";
import type { ControlProps } from "components/formControls/BaseControl";
import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
import { formValuesToDatasource } from "transformers/RestAPIDatasourceFormTransformer";
import { formValuesToDatasource } from "PluginActionEditor/transformers/RestAPIDatasourceFormTransformer";
import { DSFormHeader } from "./DSFormHeader";
import type { PluginType } from "entities/Action";
import { PluginPackageName } from "entities/Action";

2
app/client/src/pages/Editor/DatasourceInfo/DatasourceViewModeSchema.tsx
View File

@ -13,7 +13,7 @@ import {
DATASOURCE_GENERATE_PAGE_BUTTON,
createMessage,
} from "ee/constants/messages";
import Table from "pages/Editor/QueryEditor/Table";
import Table from "PluginActionEditor/components/PluginActionResponse/components/Table";
import { generateTemplateToUpdatePage } from "actions/pageActions";
import {
getCurrentApplicationId,

2
app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx
View File

@ -10,7 +10,7 @@ import {
import type { DropdownOptions } from "../GeneratePage/components/constants";
import { DEFAULT_DROPDOWN_OPTION } from "../GeneratePage/components/constants";
import { isEmpty } from "lodash";
import Table from "pages/Editor/QueryEditor/Table";
import Table from "PluginActionEditor/components/PluginActionResponse/components/Table";
import {
getCurrentApplicationId,
getPagePermissions,

2
app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts
View File

@ -1,7 +1,7 @@
import { call, delay, put } from "redux-saga/effects";
import type { EntityInfo, IApiPaneNavigationConfig } from "../types";
import { ActionPaneNavigation } from "./exports";
import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
import { setPluginActionEditorSelectedTab } from "PluginActionEditor/store";
import { NAVIGATION_DELAY } from "../costants";

6
app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
View File

@ -4,8 +4,10 @@ import { MenuIcons } from "icons/MenuIcons";
import type { Plugin } from "api/PluginApi";
import ImageAlt from "assets/images/placeholder-image.svg";
import styled from "styled-components";
import type { HTTP_METHOD } from "constants/ApiEditorConstants/CommonApiConstants";
import { HTTP_METHODS_COLOR } from "constants/ApiEditorConstants/CommonApiConstants";
import {
HTTP_METHODS_COLOR,
type HTTP_METHOD,
} from "PluginActionEditor/constants/CommonApiConstants";
import { PRIMARY_KEY, FOREIGN_KEY } from "constants/DatasourceEditorConstants";
import { Icon } from "@appsmith/ads";
import { getAssetUrl } from "ee/utils/airgapHelpers";

4
app/client/src/pages/Editor/FormControl.tsx
View File

@ -27,8 +27,8 @@ import {
} from "ee/selectors/entitiesSelector";
import { get } from "lodash";
import { SQL_PLUGINS_DEFAULT_TEMPLATE_TYPE } from "constants/Datasource";
import TemplateMenu from "./QueryEditor/TemplateMenu";
import { SQL_DATASOURCES } from "../../constants/QueryEditorConstants";
import TemplateMenu from "PluginActionEditor/components/PluginActionForm/components/UQIEditor/TemplateMenu";
import { SQL_DATASOURCES } from "constants/QueryEditorConstants";
import type { Datasource, DatasourceStructure } from "entities/Datasource";
import { getCurrentEditingEnvironmentId } from "ee/selectors/environmentSelectors";

6
app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
View File

@ -29,12 +29,12 @@ import {
} from "PluginActionEditor/store";
import type { SourceEntity } from "entities/AppsmithConsole";
import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
import { DocsLink, openDoc } from "../../../constants/DocumentationLinks";
import { DocsLink, openDoc } from "constants/DocumentationLinks";
import { QueryEditorContext } from "./QueryEditorContext";
import QueryDebuggerTabs from "./QueryDebuggerTabs";
import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
import useShowSchema from "PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema";
import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
import FormRender from "./FormRender";
import FormRender from "PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender";
import QueryEditorHeader from "./QueryEditorHeader";
import RunHistory from "ee/components/RunHistory";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";

4
app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
View File

@ -14,12 +14,12 @@ import {
} from "ee/constants/messages";
import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs";
import ErrorLogs from "components/editorComponents/Debugger/Errors";
import Schema from "components/editorComponents/Debugger/Schema";
import Schema from "PluginActionEditor/components/PluginActionResponse/components/Schema";
import type { ActionResponse } from "api/ActionAPI";
import { isString } from "lodash";
import type { SourceEntity } from "entities/AppsmithConsole";
import type { Action } from "entities/Action";
import QueryResponseTab from "./QueryResponseTab";
import QueryResponseTab from "PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab";
import {
getDatasourceStructureById,
getPluginDatasourceComponentFromId,

5
app/client/src/pages/Editor/__tests__/QueryEditorTable.test.tsx
View File

@ -1,8 +1,9 @@
import React from "react";
import { render, screen } from "test/testUtils";
import "@testing-library/jest-dom";
import Table from "../QueryEditor/Table";
import { getScrollBarWidth } from "../QueryEditor/Table";
import Table, {
getScrollBarWidth,
} from "PluginActionEditor/components/PluginActionResponse/components/Table";
function createEle() {
return {

2
app/client/src/reducers/uiReducers/datasourcePaneReducer.ts
View File

@ -3,7 +3,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants";
import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
import type { Datasource } from "entities/Datasource";
import _ from "lodash";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
const initialState: DatasourcePaneReduxState = {
drafts: {},

2
app/client/src/reducers/uiReducers/debuggerReducer.ts
View File

@ -4,7 +4,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants";
import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
import { omit, isUndefined, isEmpty } from "lodash";
import equal from "fast-deep-equal";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
import { klona } from "klona";
export const DefaultDebuggerContext = {

2
app/client/src/reducers/uiReducers/jsPaneReducer.ts
View File

@ -5,7 +5,7 @@ import {
ReduxActionErrorTypes,
} from "ee/constants/ReduxActionConstants";
import type { JSCollection } from "entities/JSCollection";
import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
export enum JSEditorTab {
CODE = "CODE",

6
app/client/src/sagas/ActionSagas.ts
View File

@ -50,7 +50,7 @@ import {
} from "actions/pluginActionActions";
import { getDynamicBindingsChangesSaga } from "utils/DynamicBindingUtils";
import { validateResponse } from "./ErrorSagas";
import { transformRestAction } from "transformers/RestActionTransformer";
import { transformRestAction } from "PluginActionEditor/transformers/RestActionTransformer";
import {
getCurrentBasePageId,
getCurrentPageId,
@ -125,8 +125,8 @@ import {
API_EDITOR_FORM_NAME,
QUERY_EDITOR_FORM_NAME,
} from "ee/constants/forms";
import { DEFAULT_GRAPHQL_ACTION_CONFIG } from "constants/ApiEditorConstants/GraphQLEditorConstants";
import { DEFAULT_API_ACTION_CONFIG } from "constants/ApiEditorConstants/ApiEditorConstants";
import { DEFAULT_GRAPHQL_ACTION_CONFIG } from "PluginActionEditor/constants/GraphQLEditorConstants";
import { DEFAULT_API_ACTION_CONFIG } from "PluginActionEditor/constants/ApiEditorConstants";
import { fetchDatasourceStructure } from "actions/datasourceActions";
import { setAIPromptTriggered } from "utils/storage";
import { getDefaultTemplateActionConfig } from "utils/editorContextUtils";

10
app/client/src/sagas/ApiPaneSagas.ts
View File

@ -25,9 +25,9 @@ import {
HTTP_METHOD,
POST_BODY_FORMAT_OPTIONS,
POST_BODY_FORMAT_OPTIONS_ARRAY,
} from "constants/ApiEditorConstants/CommonApiConstants";
import { DEFAULT_CREATE_API_CONFIG } from "constants/ApiEditorConstants/ApiEditorConstants";
import { DEFAULT_CREATE_GRAPHQL_CONFIG } from "constants/ApiEditorConstants/GraphQLEditorConstants";
} from "PluginActionEditor/constants/CommonApiConstants";
import { DEFAULT_CREATE_API_CONFIG } from "PluginActionEditor/constants/ApiEditorConstants";
import { DEFAULT_CREATE_GRAPHQL_CONFIG } from "PluginActionEditor/constants/GraphQLEditorConstants";
import history from "utils/history";
import { autofill, change, initialize, reset } from "redux-form";
import type { Property } from "api/ActionAPI";
@ -78,12 +78,12 @@ import {
getApplicationByIdFromWorkspaces,
getCurrentApplicationIdForCreateNewApp,
} from "ee/selectors/applicationSelectors";
import { DEFAULT_CREATE_APPSMITH_AI_CONFIG } from "constants/ApiEditorConstants/AppsmithAIEditorConstants";
import { DEFAULT_CREATE_APPSMITH_AI_CONFIG } from "PluginActionEditor/constants/AppsmithAIEditorConstants";
import { checkAndGetPluginFormConfigsSaga } from "./PluginSagas";
import { convertToBasePageIdSelector } from "selectors/pageListSelectors";
import type { ApplicationPayload } from "entities/Application";
import { klonaLiteWithTelemetry } from "utils/helpers";
import { POST_BODY_FORM_DATA_KEY } from "../PluginActionEditor/constants";
import { POST_BODY_FORM_DATA_KEY } from "PluginActionEditor/store/constants";
function* syncApiParamsSaga(
actionPayload: ReduxActionWithMeta<string, { field: string }>,

2
app/client/src/sagas/CurlImportSagas.ts
View File

@ -10,7 +10,7 @@ import CurlImportApi from "api/ImportApi";
import type { ApiResponse } from "api/ApiResponses";
import AnalyticsUtil from "ee/utils/AnalyticsUtil";
import { getCurrentWorkspaceId } from "ee/selectors/selectedWorkspaceSelectors";
import transformCurlImport from "transformers/CurlImportTransformer";
import transformCurlImport from "PluginActionEditor/transformers/CurlImportTransformer";
import history from "utils/history";
import { CURL } from "constants/AppsmithActionConstants/ActionConstants";
import { apiEditorIdURL } from "ee/RouteBuilder";

2
app/client/src/sagas/ReplaySaga.ts
View File

@ -55,7 +55,7 @@ import {
isQueryAction,
isSaaSAction,
} from "entities/Action";
import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
import { EDITOR_TABS } from "constants/QueryEditorConstants";
import _, { isEmpty } from "lodash";
import type { ReplayEditorUpdate } from "entities/Replay/ReplayEntity/ReplayEditor";

2
app/client/src/utils/ApiPaneUtils.test.ts
View File

@ -1,4 +1,4 @@
import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants/CommonApiConstants";
import { POST_BODY_FORMAT_OPTIONS } from "PluginActionEditor/constants/CommonApiConstants";
import {
getContentTypeHeaderValue,
getIndextoUpdate,

2
app/client/src/utils/ApiPaneUtils.tsx
View File

@ -1,4 +1,4 @@
import { CONTENT_TYPE_HEADER_KEY } from "constants/ApiEditorConstants/CommonApiConstants";
import { CONTENT_TYPE_HEADER_KEY } from "../PluginActionEditor/constants/CommonApiConstants";
import {
getDynamicStringSegments,
isDynamicValue,

17
app/client/src/utils/helpers.tsx
View File

@ -10,7 +10,7 @@ import {
DEDICATED_WORKER_GLOBAL_SCOPE_IDENTIFIERS,
JAVASCRIPT_KEYWORDS,
} from "constants/WidgetValidation";
import { get, isNil, has, uniq } from "lodash";
import { get, has, isNil, uniq } from "lodash";
import type { Workspace } from "ee/constants/workspaceConstants";
import { hasCreateNewAppPermission } from "ee/utils/permissionHelpers";
import moment from "moment";
@ -57,21 +57,6 @@ export const snapToGrid = (
return [snappedX, snappedY];
};
export const formatBytes = (bytes: string | number) => {
if (!bytes) return;
const value = typeof bytes === "string" ? parseInt(bytes) : bytes;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
if (value === 0) return "0 bytes";
const i = parseInt(String(Math.floor(Math.log(value) / Math.log(1024))));
if (i === 0) return bytes + " " + sizes[i];
return (value / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
};
export const getAbsolutePixels = (size?: string | null) => {
if (!size) return 0;