diff --git a/.github/workflows/build-docker-image.yml b/.github/workflows/build-docker-image.yml index 012bad87a221..9b554db8ff55 100644 --- a/.github/workflows/build-docker-image.yml +++ b/.github/workflows/build-docker-image.yml @@ -113,7 +113,7 @@ jobs: docker image ls --all --no-trunc --format '{{.Repository}},{{.ID}}' \ | grep -v cicontainer \ | cut -d, -f2 \ - | xargs docker rmi + | xargs -r docker rmi || true docker save cicontainer -o cicontainer.tar gzip cicontainer.tar diff --git a/app/client/cypress/e2e/Regression/ClientSide/AdminSettings/Admin_settings_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/AdminSettings/Admin_settings_spec.ts index 4a0cde5e7e84..c250602a91b7 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/AdminSettings/Admin_settings_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/AdminSettings/Admin_settings_spec.ts @@ -3,6 +3,8 @@ import { agHelper, adminSettings as adminSettingsHelper, homePage, + locators, + assertHelper, } from "../../../../support/Objects/ObjectsCore"; const { @@ -25,6 +27,9 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () { it("1. Should test that settings page is accessible to super user", () => { cy.LogOut(); cy.LoginFromAPI(Cypress.env("USERNAME"), Cypress.env("PASSWORD")); + agHelper.AssertElementAbsence(locators._loading); + assertHelper.AssertDocumentReady(); + agHelper.WaitUntilEleAppear(adminSettingsHelper._adminSettingsBtn); agHelper.GetNClick(adminSettingsHelper._adminSettingsBtn); agHelper.AssertURL(adminSettingsHelper.routes.GENERAL); cy.wait("@getEnvVariables"); @@ -33,6 +38,8 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () { it("2. Should test that settings page is not accessible to normal users", () => { cy.LoginFromAPI(Cypress.env("TESTUSERNAME3"), Cypress.env("TESTPASSWORD3")); + agHelper.AssertElementAbsence(locators._loading); + assertHelper.AssertDocumentReady(); agHelper.AssertElementAbsence(adminSettingsHelper._adminSettingsBtn); agHelper.VisitNAssert(adminSettingsHelper.routes.GENERAL); // non super users are redirected to home page @@ -54,7 +61,9 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () { () => { cy.visit("/applications", { timeout: 60000 }); if (!Cypress.env("AIRGAPPED")) cy.wait("@getAllWorkspaces"); - + agHelper.AssertElementAbsence(locators._loading); + assertHelper.AssertDocumentReady(); + agHelper.WaitUntilEleAppear(adminSettingsHelper._adminSettingsBtn); agHelper.GetNClick(adminSettingsHelper._adminSettingsBtn); cy.wait("@getEnvVariables"); agHelper.GetNClick(adminsSettings.generalTab); @@ -199,6 +208,9 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () { it("10. Verify default instance name", () => { cy.LogOut(); cy.LoginFromAPI(Cypress.env("USERNAME"), Cypress.env("PASSWORD")); + agHelper.AssertElementAbsence(locators._loading); + assertHelper.AssertDocumentReady(); + agHelper.WaitUntilEleAppear(adminSettingsHelper._adminSettingsBtn); agHelper.GetNClick(adminSettingsHelper._adminSettingsBtn); agHelper.AssertURL(adminSettingsHelper.routes.GENERAL); cy.wait("@getEnvVariables"); @@ -213,6 +225,9 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () { () => { homePage.LogOutviaAPI(); cy.LoginFromAPI(Cypress.env("USERNAME"), Cypress.env("PASSWORD")); + agHelper.AssertElementAbsence(locators._loading); + assertHelper.AssertDocumentReady(); + agHelper.WaitUntilEleAppear(adminSettingsHelper._adminSettingsBtn); agHelper.VisitNAssert("/applications", "getAllWorkspaces"); agHelper.GetNClick(adminSettingsHelper._adminSettingsBtn); cy.wait("@getEnvVariables"); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts index 9042c3ca0787..469bafcda094 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts @@ -5,26 +5,12 @@ import { } from "../../../../../support/Pages/EditorNavigation"; import PageList from "../../../../../support/Pages/PageList"; -let tempBranch = "tempBranch", - tempBranch0 = "tempBranch0", - tempBranch1 = "tempBranch1", - tempBranch2 = "tempBranch2", - tempBranch3 = "tempBranch3"; - -const buttonNameMainBranch = "buttonMainBranch"; -const buttonNameMainBranchEdited = "buttonMainBranchEdited"; -const buttonNameTemp0Branch = "buttonTemp0Branch"; -const buttonNameTempBranch1 = "buttonTempBranch1"; +let tempBranch2 = "tempBranch2"; const mainBranch = "master"; - -const inputNameTempBranch3 = "inputNameTempBranch3"; -const inputNameTempBranch31 = "inputNameTempBranch31"; - const cleanUrlBranch = "feat/clean_url"; - let applicationId: any; -let applicationName: any; let repoName: any; +let newPageName: string; describe( "Git sync: Merge changes via remote", @@ -49,7 +35,6 @@ describe( cy.get("@guid").then((uid: any) => { cy.get("@workspaceName").then((workspaceName: any) => { _.homePage.CreateAppInWorkspace(workspaceName, uid); - applicationName = uid; cy.get("@applicationId").then( (currentAppId) => (applicationId = currentAppId), ); @@ -62,17 +47,15 @@ describe( }); it("1. Supports merging head to base branch", function () { - //cy.switchGitBranch(mainBranch); _.gitSync.CreateGitBranch(tempBranch2, true); PageLeftPane.switchSegment(PagePaneSegment.UI); - cy.Createpage("NewPage"); - cy.commitAndPush(); - cy.merge(mainBranch); - _.gitSync.CloseOpsModal(); - cy.wait(4000); - cy.switchGitBranch(mainBranch); - cy.wait(4000); // wait for switch branch - cy.contains("NewPage"); + PageList.AddNewPage("New blank page")?.then((pageName) => { + newPageName = pageName.toString(); + _.gitSync.CommitAndPush(); + _.gitSync.MergeToMaster(); + _.gitSync.SwitchGitBranch(mainBranch); + PageList.assertPresence(newPageName); + }); }); it("2. Clicking '+' icon on bottom bar should open deploy popup", function () { @@ -86,8 +69,7 @@ describe( }); it("3. Checks clean url updates across branches", () => { - PageList.DeletePage("NewPage"); - cy.wait(1000); + PageList.DeletePage(newPageName); let legacyPathname = ""; let newPathname = ""; // question to qa can we remove this assertion @@ -96,7 +78,8 @@ describe( }).as("appAndPages"); cy.reload(); cy.wait("@getConsolidatedData").then((intercept2) => { - const { application, pages } = intercept2.response.body.data.pages.data; + const { application, pages } = + intercept2?.response?.body?.data?.pages?.data; const defaultPage = pages.find((p) => p.isDefault); legacyPathname = `/applications/${application.baseId}/pages/${defaultPage.baseId}`; newPathname = `/app/${application.slug}/${defaultPage.slug}-${defaultPage.baseId}`; @@ -116,7 +99,7 @@ describe( expect(location.pathname).includes(legacyPathname); }); - cy.switchGitBranch(mainBranch); + _.gitSync.SwitchGitBranch(mainBranch); cy.get(".t--upgrade").click({ force: true }); diff --git a/app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_Bug_Upload_File_GreaterThan_20MB_spec.ts b/app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_Bug_Upload_File_GreaterThan_20MB_spec.ts index aa0216990663..f9ec292671f3 100644 --- a/app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_Bug_Upload_File_GreaterThan_20MB_spec.ts +++ b/app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_Bug_Upload_File_GreaterThan_20MB_spec.ts @@ -10,7 +10,8 @@ import { } from "../../../../support/Objects/ObjectsCore"; const apiwidget = require("../../../../locators/apiWidgetslocator.json"); -describe( +//skipping this due to : https://github.com/appsmithorg/appsmith/issues/38156 +describe.skip( "To test [Bug]: A-force -> Not being able to upload file using binary format and multi part form data #34123", { tags: ["@tag.Datasource", "@tag.Git", "@tag.AccessControl"] }, () => { diff --git a/app/client/cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts b/app/client/cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts index 11df7b8477e8..d933bd60e216 100644 --- a/app/client/cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts +++ b/app/client/cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts @@ -61,17 +61,17 @@ describe( expect(interception.request.body.source).to.equal("SELF"); }); - dataSources.runQueryAndVerifyResponseViews({ - count: 1, - operator: "gte", - }); //minimum 1 rows are expected + // dataSources.runQueryAndVerifyResponseViews({ + // count: 1, + // operator: "gte", + // }); //minimum 1 rows are expected - AppSidebar.navigate(AppSidebarButton.Data); - dataSources - .getDatasourceListItemDescription(mockDBName) - .then(($queryCount) => - expect($queryCount).to.eq("2 queries in this app"), - ); + // AppSidebar.navigate(AppSidebarButton.Data); + // dataSources + // .getDatasourceListItemDescription(mockDBName) + // .then(($queryCount) => + // expect($queryCount).to.eq("2 queries in this app"), + // ); }); }); @@ -90,11 +90,11 @@ describe( assertHelper.AssertNetworkStatus("@trigger"); dataSources.ValidateNSelectDropdown("Command", "Find document(s)"); - dataSources.runQueryAndVerifyResponseViews({ - count: 1, - operator: "gte", - responseTypes: ["JSON", "RAW"], - }); + // dataSources.runQueryAndVerifyResponseViews({ + // count: 1, + // operator: "gte", + // responseTypes: ["JSON", "RAW"], + // }); }); }); }, diff --git a/app/client/cypress/locators/QueryEditor.json b/app/client/cypress/locators/QueryEditor.json index 045bfba86913..8f9fd177e9df 100644 --- a/app/client/cypress/locators/QueryEditor.json +++ b/app/client/cypress/locators/QueryEditor.json @@ -9,7 +9,7 @@ "addDatasource": ".t--add-datasource", "editDatasourceButton": ".t--edit-datasource", "switch": ".t--form-control-SWITCH input", - "queryResponse": "(//div[@class='table']//div[@class='tr'])[2]//div[@class='td mp-mask']", + "queryResponse": "(//div[@class='table']//div[@class='tr'])[2]//div[@class='td as-mask']", "querySelect": "//div[contains(@class, 't--template-menu')]//div[text()='Select']", "queryCreate": "//div[contains(@class, 't--template-menu')]//div[text()='Create']", "queryUpdate": "//div[contains(@class, 't--template-menu')]//div[text()='Update']", diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts index 398cb70cbcd1..a29e45df1359 100644 --- a/app/client/cypress/support/Pages/ApiPage.ts +++ b/app/client/cypress/support/Pages/ApiPage.ts @@ -67,9 +67,7 @@ export class ApiPage { "')]"; private _bodyTypeSelect = `//div[@data-testid="t--api-body-tab-switch"]`; private _bodyTypeToSelect = (subTab: string) => - "//div[contains(@class, 'rc-select-item-option')]//div[contains(text(),'" + - subTab + - "')]"; + ".rc-select-item-option:contains(" + subTab + ")"; private _rightPaneTab = (tab: string) => "//span[contains(text(), '" + tab + "')]/parent::button"; _visibleTextSpan = (spanText: string) => "//span[text()='" + spanText + "']"; diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts index 234337cc9a61..8064c9eb4055 100644 --- a/app/client/cypress/support/Pages/DataSources.ts +++ b/app/client/cypress/support/Pages/DataSources.ts @@ -147,7 +147,7 @@ export class DataSources { option + "']"; _queryTableResponse = - "//div[@data-guided-tour-id='query-table-response']//div[@class='tbody']//div[@class ='td mp-mask']"; + "//div[@data-guided-tour-id='query-table-response']//div[@class='tbody']//div[@class ='td as-mask']"; _queryResponseHeader = (header: string) => "//div[@data-guided-tour-id='query-table-response']//div[@class='table']//div[@role ='columnheader']//span[text()='" + header + diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 74294b336c73..c34efc626b2c 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -816,7 +816,7 @@ Cypress.Commands.add("ValidatePaginateResponseUrlData", (runTestCss) => { cy.wait(2000); cy.get(runTestCss).click(); cy.wait(2000); - cy.xpath("//div[@class='tr'][1]//div[@class='td mp-mask'][6]//span") + cy.xpath("//div[@class='tr'][1]//div[@class='td as-mask'][6]//span") .invoke("text") .then((valueToTest) => { // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -841,7 +841,7 @@ Cypress.Commands.add("ValidatePaginateResponseUrlDataV2", (runTestCss) => { cy.wait(2000); cy.get(runTestCss).click(); cy.wait(2000); - cy.xpath("//div[@class='tr'][1]//div[@class='td mp-mask'][6]//span") + cy.xpath("//div[@class='tr'][1]//div[@class='td as-mask'][6]//span") .invoke("text") .then((valueToTest) => { // eslint-disable-next-line cypress/no-unnecessary-waiting diff --git a/app/client/packages/design-system/ads/src/List/List.stories.tsx b/app/client/packages/design-system/ads/src/List/List.stories.tsx index fbeb7039c06c..d7cacdcf00b3 100644 --- a/app/client/packages/design-system/ads/src/List/List.stories.tsx +++ b/app/client/packages/design-system/ads/src/List/List.stories.tsx @@ -38,6 +38,7 @@ const items = [ { startIcon: , title: "Action item 3", + isSelected: true, }, { startIcon: , @@ -210,20 +211,36 @@ export const ListItemInlineDescStory = ListItemTemplate.bind({}) as StoryObj; ListItemInlineDescStory.storyName = "List item inline description"; ListItemInlineDescStory.argTypes = ListItemArgTypes; ListItemInlineDescStory.args = { - title: "Action item 1", + title: + "Action_item_1_with_a_very_long_name_that_should_show_ellipsis_in_the_same_line", description: "inline", }; -export const ListItemBlockDescStory = ListItemTemplate.bind({}) as StoryObj; -ListItemBlockDescStory.storyName = "List item block description"; -ListItemBlockDescStory.argTypes = ListItemArgTypes; -ListItemBlockDescStory.args = { +export const ListItemBlockDescWithIconStory = ListItemTemplate.bind( + {}, +) as StoryObj; +ListItemBlockDescWithIconStory.storyName = + "List item block description with icon"; +ListItemBlockDescWithIconStory.argTypes = ListItemArgTypes; +ListItemBlockDescWithIconStory.args = { startIcon: , title: "Action item 1", description: "block", descriptionType: "block", }; +export const ListItemBlockDescWithoutIconStory = ListItemTemplate.bind( + {}, +) as StoryObj; +ListItemBlockDescWithoutIconStory.storyName = + "List item block description without icon"; +ListItemBlockDescWithoutIconStory.argTypes = ListItemArgTypes; +ListItemBlockDescWithoutIconStory.args = { + title: "Action item 1", + description: "Action item 1 block description", + descriptionType: "block", +}; + export const ListItemOverflowStory = ListItemTemplate.bind({}) as StoryObj; ListItemOverflowStory.storyName = "List item title overflow"; ListItemOverflowStory.argTypes = ListItemArgTypes; diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx index 15efd1bf333a..27d4567e12b4 100644 --- a/app/client/packages/design-system/ads/src/List/List.styles.tsx +++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx @@ -31,6 +31,10 @@ const Sizes = { export const TooltipTextWrapper = styled.div` display: flex; min-width: 0; + + &.${ListItemIDescClassName}-wrapper { + min-width: unset; + } `; export const RightControlWrapper = styled.div` @@ -54,8 +58,11 @@ export const TopContentWrapper = styled.div` `; export const BottomContentWrapper = styled.div` - padding-left: var(--ads-v2-spaces-7); padding-bottom: var(--ads-v2-spaces-2); + + &[data-isiconpresent="true"] { + padding-left: var(--ads-v2-spaces-7); + } `; export const InlineDescriptionWrapper = styled.div` @@ -91,9 +98,14 @@ export const StyledListItem = styled.div<{ gap: var(--ads-v2-spaces-1); flex-shrink: 0; flex-direction: column; + max-height: 32px; ${({ size }) => Sizes[size]} + &[data-isblockdescription="true"] { + max-height: 54px; + } + &[data-rightcontrolvisibility="hover"] { ${RightControlWrapper} { display: none; @@ -124,19 +136,12 @@ export const StyledListItem = styled.div<{ background-color: var(--ads-v2-colors-content-surface-active-bg); } - /* Focus styles */ - - &:focus-visible { - outline: var(--ads-v2-border-width-outline) solid - var(--ads-v2-color-outline); - outline-offset: var(--ads-v2-offset-outline); - } - & .${ListItemTextOverflowClassName} { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; + padding-right: var(--ads-v2-spaces-2); } & .${ListItemTitleClassName} { diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx index 18240c8a7863..eb3c76d2ea5b 100644 --- a/app/client/packages/design-system/ads/src/List/List.tsx +++ b/app/client/packages/design-system/ads/src/List/List.tsx @@ -64,7 +64,10 @@ function TextWithTooltip(props: TextProps & { isMultiline?: boolean }) { return ( - + { e.stopPropagation(); @@ -114,6 +121,7 @@ function ListItem(props: ListItemProps) { {isBlockDescription && ( - + (props: EntityGroupProps) => { const { addConfig, className, groupTitle, items } = props; - return ; + return ( + + ); }; export const SingleGroupWithAddNLazyLoad = EntityGroupTemplate.bind( @@ -83,7 +88,7 @@ SingleGroupWithAddNLazyLoad.args = { const EntityGroupsListTemplate = (props: EntityGroupsListProps) => { const { groups } = props; - return ; + return ; }; export const MultipleGroupsWithAddNLazyLoad = EntityGroupsListTemplate.bind( diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx index 9493867fa5b6..05ad78b69a4a 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { useEffect, useMemo } from "react"; import { LoadMore } from "./EntityGroupsList.styles"; import type { EntityGroupProps, @@ -9,13 +9,13 @@ import { List, ListItem, type ListItemProps } from "../../../List"; import { Divider } from "../../../Divider"; const EntityGroupsList = (props: EntityGroupsListProps) => { - const { flexProps, groups, showDivider } = props; + const { flexProps, groups, showDivider, visibleItems } = props; return ( {groups.map((group, index) => ( - + {showDivider && index < groups.length - 1 && ( (props: EntityGroupsListProps) => { ); }; -const EntityGroup = ({ group }: { group: EntityGroupProps }) => { - const [visibleItemsCount, setVisibleItemsCount] = React.useState(5); +const EntityGroup = ({ + group, + visibleItems, +}: { + group: EntityGroupProps; + visibleItems?: number; +}) => { + const [visibleItemsCount, setVisibleItemsCount] = React.useState( + visibleItems || group.items.length, + ); + + useEffect(() => { + setVisibleItemsCount(visibleItems || group.items.length); + }, [group.items.length, visibleItems]); const lazyLoading = useMemo(() => { return { diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts index 84fdad710310..b086483823c2 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts @@ -16,4 +16,5 @@ export interface EntityGroupsListProps { groups: EntityGroupProps[]; flexProps?: FlexProps; showDivider?: boolean; + visibleItems?: number; } diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts index 5a1eafaa1dea..05cf52ead59e 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts @@ -13,4 +13,12 @@ export const EntityEditableName = styled(Text)` min-width: 3ch; text-overflow: unset; } + + & input { + background-color: var(--ads-v2-color-bg); + padding-top: 0; + padding-bottom: 0; + height: 32px; + top: 0; + } `; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx index def9e57dcbbd..cf5191006712 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx @@ -47,13 +47,6 @@ export const EntityItem = (props: EntityItemProps) => { () => ({ onChange: handleTitleChange, onKeyUp: handleKeyUp, - style: { - backgroundColor: "var(--ads-v2-color-bg)", - paddingTop: 0, - paddingBottom: 0, - height: "32px", - top: 0, - }, }), [handleKeyUp, handleTitleChange], ); diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts index cbb1cc9d03c5..e881373041a4 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts @@ -1,5 +1,6 @@ import styled from "styled-components"; import { Flex } from "../../../Flex"; +import { StyledListItem } from "../../../List/List.styles"; /** * This is used to add a spacing when collapse icon is not present @@ -10,11 +11,12 @@ export const CollapseSpacer = styled.div` export const PaddingOverrider = styled.div` width: 100%; + overflow-x: hidden; & > div { - /* Override the padding of the entity item since collapsible icon can be on the left - * By default the padding on the left is 8px, so we need to reduce it to 4px - **/ + // Override the padding of the entity item since collapsible icon can be on the left + // By default the padding on the left is 8px, so we need to reduce it to 4px + padding-left: 4px; } `; @@ -33,16 +35,27 @@ export const CollapseWrapper = styled.div` export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>` border-radius: var(--ads-v2-border-radius); cursor: pointer; + user-select: none; padding-left: ${(props) => { return 4 + props["data-depth"] * 8; }}px; + /* selected style */ + // Set the selected style for wrapper and remove from list item + &[data-selected="true"] { background-color: var(--ads-v2-colors-content-surface-active-bg); } + ${StyledListItem} { + &[data-selected="true"] { + background-color: unset; + } + } + /* disabled style */ + // Set the disabled style for wrapper and remove from list item &[data-disabled="true"] { cursor: not-allowed; @@ -50,6 +63,12 @@ export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>` background-color: var(--ads-v2-colors-content-surface-default-bg); } + ${StyledListItem} { + &[data-disabled="true"] { + background-color: unset; + } + } + &:hover { background-color: var(--ads-v2-colors-content-surface-hover-bg); } @@ -57,12 +76,4 @@ export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>` &:active { background-color: var(--ads-v2-colors-content-surface-active-bg); } - - /* Focus styles */ - - &:focus-visible { - outline: var(--ads-v2-border-width-outline) solid - var(--ads-v2-color-outline); - outline-offset: var(--ads-v2-offset-outline); - } `; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.stories.tsx b/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.stories.tsx new file mode 100644 index 000000000000..bff76ddf06aa --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { IDESidebar } from "./Sidebar"; +import { Condition } from "./enums"; +import { Flex } from "../../Flex"; +import type { IDESidebarProps } from "./types"; + +export default { + title: "ADS/Templates/IDE Sidebar", + component: IDESidebar, +} as Meta; + +const Template = (args: IDESidebarProps) => ( + + + +); + +const topButtons = [ + { + state: "Editor", + icon: "editor-v3", + title: "Editor", + testId: "Editor", + urlSuffix: "", + }, +]; + +const bottomButtons = [ + { + testId: "warning-button", + icon: "datasource-v3", + urlSuffix: "datasource", + tooltip: "Datasources", + }, + { + testId: "settings", + icon: "settings-v3", + urlSuffix: "settings", + tooltip: "Settings", + }, +]; + +export const Basic = Template.bind({}) as StoryObj; +Basic.args = { + topButtons, + bottomButtons, + editorState: "home", + // eslint-disable-next-line no-console + onClick: (urlSuffix: string) => console.log("Clicked:", urlSuffix), +}; + +export const WithCondition = Template.bind({}) as StoryObj; +WithCondition.args = { + topButtons, + bottomButtons: [ + { + ...bottomButtons[0], + condition: Condition.Warn, + tooltip: "No datasource found", + }, + bottomButtons[1], + ], + // eslint-disable-next-line no-console + onClick: (urlSuffix: string) => console.log("Clicked:", urlSuffix), + editorState: "settings", +}; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.tsx b/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.tsx new file mode 100644 index 000000000000..a713eb78f30c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/Sidebar.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { SidebarButton } from "./SidebarButton"; +import * as Styled from "./styles"; +import type { IDESidebarProps } from "./types"; + +export function IDESidebar(props: IDESidebarProps) { + const { bottomButtons, editorState, onClick, topButtons } = props; + + return ( + +
+ {topButtons.map((button) => ( + + ))} +
+
+ {bottomButtons.map((button) => ( + + ))} +
+ + ); +} diff --git a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.test.tsx similarity index 59% rename from app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx rename to app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.test.tsx index f583784d7431..9042fdecc697 100644 --- a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.test.tsx @@ -1,9 +1,10 @@ -import { render } from "test/testUtils"; +import { render, screen } from "@testing-library/react"; import React from "react"; -import SidebarButton, { type SidebarButtonProps } from "./SidebarButton"; +import { SidebarButton } from "./SidebarButton"; -import { Condition } from "../../../enums"; +import { Condition } from "../enums"; import userEvent from "@testing-library/user-event"; +import type { SidebarButtonProps } from "./SidebarButton.types"; const sidebarButtonProps: SidebarButtonProps = { icon: "down-arrow", @@ -16,9 +17,9 @@ const sidebarButtonProps: SidebarButtonProps = { describe("SidebarButton", () => { it("should render the button with the correct test id", () => { - const { getByTestId } = render(); + render(); - expect(getByTestId("t--sidebar-testId")).toBeDefined(); + expect(screen.getByTestId("t--sidebar-testId")).toBeDefined(); }); it("should render the warning icon in case the datasource list is empty", () => { @@ -27,11 +28,10 @@ describe("SidebarButton", () => { condition: Condition.Warn, }; - const { container } = render(); + render(); + const conditionIcon = screen.getByTestId("t--sidebar-Warn-condition-icon"); - const svgs = container.querySelectorAll("svg"); - - expect(svgs).toHaveLength(2); + expect(conditionIcon).toBeInTheDocument(); }); it("should call onClick with urlSuffix", async () => { @@ -39,9 +39,10 @@ describe("SidebarButton", () => { ...sidebarButtonProps, onClick: jest.fn(), }; - const { getByRole } = render(); - await userEvent.click(getByRole("button")); + render(); + + await userEvent.click(screen.getByRole("button")); expect(checkOnClick.onClick).toHaveBeenCalledWith(checkOnClick.urlSuffix); }); @@ -51,9 +52,10 @@ describe("SidebarButton", () => { selected: true, onClick: jest.fn(), }; - const { getByRole } = render(); - await userEvent.click(getByRole("button")); + render(); + + await userEvent.click(screen.getByRole("button")); expect(withSelected.onClick).not.toHaveBeenCalled(); }); }); diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.tsx b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.tsx new file mode 100644 index 000000000000..31ec67af23fc --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.tsx @@ -0,0 +1,46 @@ +import React, { useCallback } from "react"; +import { Icon } from "../../../Icon"; +import { Text } from "../../../Text"; +import { Tooltip } from "../../../Tooltip"; +import { ConditionConfig } from "./constants"; +import * as Styled from "./styles"; +import type { SidebarButtonProps } from "./SidebarButton.types"; + +export function SidebarButton(props: SidebarButtonProps) { + const { condition, icon, onClick, selected, title, tooltip, urlSuffix } = + props; + const handleOnClick = useCallback(() => { + if (!selected) { + onClick(urlSuffix); + } + }, [selected, onClick, urlSuffix]); + + return ( + + + + + {condition && ( + + )} + + + {title ? {title} : null} + + ); +} diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.types.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.types.ts new file mode 100644 index 000000000000..2463c1bd1a1b --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/SidebarButton.types.ts @@ -0,0 +1,12 @@ +import type { Condition } from "../enums"; + +export interface SidebarButtonProps { + title?: string; + testId: string; + selected: boolean; + icon: string; + onClick: (urlSuffix: string) => void; + urlSuffix: string; + tooltip?: string; + condition?: Condition; +} diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/constants.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/constants.ts new file mode 100644 index 000000000000..e84c46dad352 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/constants.ts @@ -0,0 +1,14 @@ +import { Condition } from "../enums"; + +export const ConditionConfig: Record< + Condition, + { icon: string; color: string } +> = { + [Condition.Warn]: { + icon: "warning", + color: "#ffe283", + }, + // TODO add this information for further conditions + // Error: { color: "", icon: "" }, + // Success: { color: "", icon: "" }, +}; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/index.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/index.ts new file mode 100644 index 000000000000..f0c09c219d60 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/index.ts @@ -0,0 +1 @@ +export { SidebarButton } from "./SidebarButton"; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/styles.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/styles.ts new file mode 100644 index 000000000000..52c498504df4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/SidebarButton/styles.ts @@ -0,0 +1,48 @@ +import styled from "styled-components"; +import { Icon } from "../../../Icon"; +import { Condition } from "../enums"; +import { ConditionConfig } from "./constants"; +import { Flex } from "../../../Flex"; + +export const Container = styled(Flex)` + justify-content: center; + flex-direction: column; + width: 50px; + text-align: center; + align-items: center; + padding: 8px 0; +`; +export const IconContainer = styled.div` + padding: 2px; + border-radius: 3px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + + &[data-selected="false"] { + background-color: var(--ads-v2-color-bg); + + &:hover { + background-color: var(--ads-v2-color-bg-subtle, #f1f5f9); + } + } + + &[data-selected="true"] { + background-color: var(--ads-v2-color-bg-muted); + } +`; +export const ConditionIcon = styled(Icon)` + position: absolute; + bottom: 3px; + right: -1px; + + &.t--sidebar-${Condition.Warn}-condition-icon { + color: ${ConditionConfig[Condition.Warn].color}; + } + + // TODO add more condition colors here +`; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/enums.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/enums.ts new file mode 100644 index 000000000000..2c62e72c91ad --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/enums.ts @@ -0,0 +1,5 @@ +export enum Condition { + Warn = "Warn", + // Error = "Error", + // Success = "Success", +} diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/index.tsx b/app/client/packages/design-system/ads/src/Templates/Sidebar/index.tsx new file mode 100644 index 000000000000..8e46e4fe4544 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/index.tsx @@ -0,0 +1,3 @@ +export { IDESidebar } from "./Sidebar"; +export type { IDESidebarButton } from "./types"; +export { Condition } from "./enums"; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/styles.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/styles.ts new file mode 100644 index 000000000000..62afed29bc6c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/styles.ts @@ -0,0 +1,12 @@ +import styled from "styled-components"; +import { Flex } from "../../Flex"; + +export const Container = styled(Flex)` + width: 50px; + border-right: 1px solid var(--ads-v2-color-border); + height: 100%; + flex-direction: column; + justify-content: space-between; + background-color: var(--ads-v2-color-bg); + position: relative; +`; diff --git a/app/client/packages/design-system/ads/src/Templates/Sidebar/types.ts b/app/client/packages/design-system/ads/src/Templates/Sidebar/types.ts new file mode 100644 index 000000000000..7a47105878c6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/Sidebar/types.ts @@ -0,0 +1,17 @@ +import type { SidebarButtonProps } from "./SidebarButton/SidebarButton.types"; + +// Sidebar handles the correct handling of sidebar button. It will check if +// the button should be selected and only handle calling the onClick +export interface IDESidebarButton + extends Omit { + state: string; + urlSuffix: string; +} + +export interface IDESidebarProps { + id?: string; + topButtons: IDESidebarButton[]; + bottomButtons: IDESidebarButton[]; + editorState: string; + onClick: (suffix: string) => void; +} diff --git a/app/client/packages/design-system/ads/src/Templates/index.ts b/app/client/packages/design-system/ads/src/Templates/index.ts index 283192812370..e8258f9d1b5f 100644 --- a/app/client/packages/design-system/ads/src/Templates/index.ts +++ b/app/client/packages/design-system/ads/src/Templates/index.ts @@ -1,2 +1,3 @@ export * from "./IDEHeader"; export * from "./EntityExplorer"; +export * from "./Sidebar"; diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 7cee09699342..336309b6d324 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -1,16 +1,14 @@ import Color from "colorjs.io"; import { useMemo } from "react"; import { TokensAccessor, defaultTokens, tokensConfigs } from "../../token"; -import { - useSizing, - useSpacing, - useTypography, - useIconSizing, - useIconDensity, -} from "./"; import type { ColorMode } from "../../color"; import type { TokenSource } from "../../token"; +import { useSizing } from "./useSizing"; +import { useSpacing } from "./useSpacing"; +import { useTypography } from "./useTypography"; +import { useIconSizing } from "./useIconSizing"; +import { useIconDensity } from "./useIconDensity"; const tokensAccessor = new TokensAccessor({ ...(defaultTokens as TokenSource), diff --git a/app/client/src/IDE/Components/BottomView.tsx b/app/client/src/IDE/Components/BottomView.tsx index 29f8e6f84587..ff404fc74e91 100644 --- a/app/client/src/IDE/Components/BottomView.tsx +++ b/app/client/src/IDE/Components/BottomView.tsx @@ -4,7 +4,7 @@ import Resizer, { ResizerCSS, } from "components/editorComponents/Debugger/Resizer"; import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/styledComponents"; -import { ViewDisplayMode, ViewHideBehaviour } from "IDE/Interfaces/View"; +import { ViewDisplayMode, ViewHideBehaviour } from "../Interfaces/View"; import { Button } from "@appsmith/ads"; import classNames from "classnames"; diff --git a/app/client/src/IDE/Components/Sidebar/Sidebar.tsx b/app/client/src/IDE/Components/Sidebar/Sidebar.tsx deleted file mode 100644 index 7076171a5ff6..000000000000 --- a/app/client/src/IDE/Components/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import SidebarButton from "./SidebarButton"; -import type { EditorState } from "ee/entities/IDE/constants"; -import type { SidebarButtonProps } from "./SidebarButton/SidebarButton"; -import { Flex } from "@appsmith/ads"; - -const Container = styled(Flex)` - width: 50px; - border-right: 1px solid var(--ads-v2-color-border); - height: 100%; - flex-direction: column; - justify-content: space-between; - background-color: var(--ads-v2-color-bg); - position: relative; -`; - -// Sidebar handles the correct handling of sidebar button. It will check if -// the button should be selected and only handle calling the onClick -export interface IDESidebarButton - extends Omit { - state: EditorState; - urlSuffix: string; -} - -interface IDESidebarProps { - id?: string; - topButtons: IDESidebarButton[]; - bottomButtons: IDESidebarButton[]; - editorState: EditorState; - onClick: (suffix: string) => void; -} - -function IDESidebar(props: IDESidebarProps) { - const { bottomButtons, editorState, onClick, topButtons } = props; - - return ( - -
- {topButtons.map((button) => ( - - ))} -
-
- {bottomButtons.map((button) => ( - - ))} -
- - ); -} - -export default IDESidebar; diff --git a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx b/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx deleted file mode 100644 index 24e299205580..000000000000 --- a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React, { useCallback } from "react"; -import { Flex, Icon, Text, Tooltip } from "@appsmith/ads"; -import styled from "styled-components"; - -import { Condition } from "../../../enums"; - -const ConditionConfig: Record = { - [Condition.Warn]: { - icon: "warning", - color: "#ffe283", - }, - // TODO add this information for further conditions - // Error: { color: "", icon: "" }, - // Success: { color: "", icon: "" }, -}; - -export interface SidebarButtonProps { - title?: string; - testId: string; - selected: boolean; - icon: string; - onClick: (urlSuffix: string) => void; - urlSuffix: string; - tooltip?: string; - condition?: Condition; -} - -const Container = styled(Flex)` - justify-content: center; - flex-direction: column; - width: 50px; - text-align: center; - align-items: center; - padding: 8px 0; -`; - -const IconContainer = styled.div` - padding: 2px; - border-radius: 3px; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; - - &[data-selected="false"] { - background-color: var(--ads-v2-color-bg); - - &:hover { - background-color: var(--ads-v2-color-bg-subtle, #f1f5f9); - } - } - - &[data-selected="true"] { - background-color: var(--ads-v2-color-bg-muted); - } -`; - -const ConditionIcon = styled(Icon)` - position: absolute; - bottom: 3px; - right: -1px; - - &.t--sidebar-${Condition.Warn}-condition-icon { - color: ${ConditionConfig[Condition.Warn].color}; - } - - // TODO add more condition colors here -`; - -function SidebarButton(props: SidebarButtonProps) { - const { condition, icon, onClick, selected, title, tooltip, urlSuffix } = - props; - const handleOnClick = useCallback(() => { - if (!selected) { - onClick(urlSuffix); - } - }, [selected, onClick, urlSuffix]); - - return ( - - - - - {condition && ( - - )} - - - {title ? {title} : null} - - ); -} - -export default SidebarButton; diff --git a/app/client/src/IDE/Components/Sidebar/SidebarButton/index.ts b/app/client/src/IDE/Components/Sidebar/SidebarButton/index.ts deleted file mode 100644 index 6b596087d7b6..000000000000 --- a/app/client/src/IDE/Components/Sidebar/SidebarButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./SidebarButton"; diff --git a/app/client/src/IDE/Components/Sidebar/index.tsx b/app/client/src/IDE/Components/Sidebar/index.tsx deleted file mode 100644 index 978e984b5163..000000000000 --- a/app/client/src/IDE/Components/Sidebar/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./Sidebar"; -export type { IDESidebarButton } from "./Sidebar"; diff --git a/app/client/src/IDE/index.ts b/app/client/src/IDE/index.ts index 7c9d5c768c06..c1303d468bd7 100644 --- a/app/client/src/IDE/index.ts +++ b/app/client/src/IDE/index.ts @@ -24,11 +24,6 @@ export { default as IDEToolbar } from "./Structure/Toolbar"; */ export { default as IDEBottomView } from "./Components/BottomView"; -/** - * IDESidebar is used inside the IDE to have a navigation menu on the left side of the screen. - * It switches between different editor states - */ -export { default as IDESidebar } from "./Components/Sidebar"; /** * IDESidePaneWrapper is used as a wrapper for side panes, which provides a border and optional padding * and enforces 100% width and height to the parent. @@ -57,5 +52,3 @@ export { =======================================================**/ export { ViewHideBehaviour, ViewDisplayMode } from "./Interfaces/View"; -export { Condition } from "./enums"; -export type { IDESidebarButton } from "./Components/Sidebar"; diff --git a/app/client/src/PluginActionEditor/PluginActionContext.tsx b/app/client/src/PluginActionEditor/PluginActionContext.tsx index 94420027508f..6a4e3672dad8 100644 --- a/app/client/src/PluginActionEditor/PluginActionContext.tsx +++ b/app/client/src/PluginActionEditor/PluginActionContext.tsx @@ -5,7 +5,7 @@ import React, { useMemo, } from "react"; import type { Action } from "entities/Action"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; import type { Datasource, EmbeddedRestDatasource } from "entities/Datasource"; import type { ActionResponse } from "api/ActionAPI"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index f69ad963999f..62bcf6282328 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Flex } from "@appsmith/ads"; import { useChangeActionCall } from "./hooks/useChangeActionCall"; import { usePluginActionContext } from "../../PluginActionContext"; -import { UIComponentTypes } from "api/PluginApi"; +import { UIComponentTypes } from "entities/Plugin"; import APIEditorForm from "./components/ApiEditor"; import GraphQLEditorForm from "./components/GraphQLEditor"; import UQIEditorForm from "./components/UQIEditor"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx index cee26fa60750..51b3e02d3ad4 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx @@ -1,5 +1,5 @@ -import React, { useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import React from "react"; +import { useSelector } from "react-redux"; import styled from "styled-components"; import { POST_BODY_FORMAT_OPTIONS, @@ -16,14 +16,14 @@ import { TabBehaviour, } from "components/editorComponents/CodeEditor/EditorConfig"; import { Classes } from "@appsmith/ads-old"; -import { - getPostBodyFormat, - updatePostBodyContentType, -} 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"; -import { Select, Option } from "@appsmith/ads"; +import SelectField from "components/editorComponents/form/fields/SelectField"; +import { getFormValues } from "redux-form"; +import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; +import type { Action } from "entities/Action"; +import { get } from "lodash"; const PostBodyContainer = styled.div` display: flex; @@ -31,6 +31,7 @@ const PostBodyContainer = styled.div` background-color: var(--ads-v2-color-bg); height: 100%; gap: var(--ads-v2-spaces-4); + .ads-v2-select { max-width: 250px; width: 100%; @@ -40,6 +41,7 @@ const PostBodyContainer = styled.div` const JSONEditorFieldWrapper = styled.div` /* margin: 0 30px; width: 65%; */ + .CodeMirror { height: auto; min-height: 250px; @@ -70,12 +72,12 @@ const expectedPostBody: CodeEditorExpected = { }; function PostBodyData(props: Props) { - const postBodyFormat = useSelector(getPostBodyFormat); - const dispatch = useDispatch(); - - const updateBodyContentType = useCallback((tab: string) => { - dispatch(updatePostBodyContentType(tab)); - }, []); + const formValues = useSelector(getFormValues(API_EDITOR_FORM_NAME)) as Action; + const postBodyFormat = get( + formValues, + "actionConfiguration.formData.apiContentType", + POST_BODY_FORMAT_OPTIONS.NONE, + ); const { dataTreePath, theme } = props; @@ -171,19 +173,14 @@ function PostBodyData(props: Props) { return ( - - {tabComponentsMap(postBodyFormat.value)} + + {tabComponentsMap(postBodyFormat)} ); } diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx index 788a68b91391..2666f2eb2b92 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx @@ -7,7 +7,7 @@ import { } from "ee/constants/messages"; import { Tag } from "@blueprintjs/core"; import styled from "styled-components"; -import { UIComponentTypes } from "api/PluginApi"; +import { UIComponentTypes } from "entities/Plugin"; import log from "loglevel"; import * as Sentry from "@sentry/react"; import type { FormEvalOutput } from "reducers/evaluationReducers/formEvaluationReducer"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts index b888239e3aaf..c017261fbccf 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { merge } from "lodash"; import { getConfigInitialValues } from "components/formControls/utils"; import { diff, type Diff } from "deep-diff"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx index 83e645f6da29..8f76a0a29e7d 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx @@ -1,6 +1,6 @@ import { renderHook } from "@testing-library/react-hooks/dom"; import { useDispatch } from "react-redux"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { usePluginActionContext } from "../../../PluginActionContext"; import { changeApi, changeQuery } from "../../../store"; import usePrevious from "utils/hooks/usePrevious"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts index bd1eb8faa3f0..aa151497ed88 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts @@ -1,6 +1,6 @@ import { useEffect } from "react"; import { useDispatch } from "react-redux"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { usePluginActionContext } from "../../../PluginActionContext"; import { changeApi, changeQuery } from "../../../store"; import usePrevious from "utils/hooks/usePrevious"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceInfo.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceInfo.tsx index 6c4dac8e1c68..4c00cc7c3143 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceInfo.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceInfo.tsx @@ -10,7 +10,7 @@ import { getQueryParams } from "utils/URLUtils"; import history from "utils/history"; import { useEditorType } from "ee/hooks"; import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; interface Props { datasourceId: string; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceSelector/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceSelector/index.tsx index 605120debccb..8d885134ea5b 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceSelector/index.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceSelector/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { UIComponentTypes, type Plugin } from "api/PluginApi"; +import { type Plugin, UIComponentTypes } from "entities/Plugin"; import ApiDatasourceSelector from "./ApiDatasourceSelector"; import QueryDatasourceSelector from "./QueryDatasourceSelector"; import { diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTab.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTab.tsx index 1d59b34583a2..78964d811697 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTab.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTab.tsx @@ -13,7 +13,7 @@ import type { AppState } from "ee/reducers"; import { fetchDatasourceStructure } from "actions/datasourceActions"; import history from "utils/history"; import { datasourcesEditorIdURL } from "ee/RouteBuilder"; -import { DatasourceComponentTypes } from "api/PluginApi"; +import { DatasourceComponentTypes } from "entities/Plugin"; import { getPluginActionDebuggerState } from "PluginActionEditor/store"; import { SchemaDisplayStatus, StatusDisplay } from "./StatusDisplay"; import { DatasourceTables } from "./DatasourceTables"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTables.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTables.tsx index ef23751816ef..47bb3abb581a 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTables.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/DatasourceTables.tsx @@ -9,7 +9,7 @@ import { refreshDatasourceStructure } from "actions/datasourceActions"; import { useDispatch } from "react-redux"; import { SchemaTableContainer } from "./styles"; import DatasourceInfo from "./DatasourceInfo"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; interface Props { datasourceId: string; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.test.tsx index a8c0da559ee2..1c9ed20e28c7 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.test.tsx @@ -3,7 +3,8 @@ import { render } from "@testing-library/react"; import { Provider } from "react-redux"; import configureStore from "redux-mock-store"; import { Response } from "./Response"; -import { PluginType, type Action } from "entities/Action"; +import { type Action } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { lightTheme } from "selectors/themeSelectors"; import { ThemeProvider } from "styled-components"; import { BrowserRouter as Router } from "react-router-dom"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.tsx index c7833df9d1d7..296032decbb7 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/Response.tsx @@ -9,7 +9,8 @@ import { Callout, Tooltip, type CalloutLinkProps } from "@appsmith/ads"; import type { ActionResponse } from "api/ActionAPI"; import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView"; import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; -import { PluginType, type Action } from "entities/Action"; +import { type Action } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { setActionResponseDisplayFormat } from "actions/pluginActionActions"; import { actionResponseDisplayDataFormats } from "pages/Editor/utils"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/checkForPreparedStatement.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/checkForPreparedStatement.ts index 6c3bd71a2e9f..c6951e5ba3ab 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/checkForPreparedStatement.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/checkForPreparedStatement.ts @@ -1,4 +1,5 @@ -import { PluginType, type Action } from "entities/Action"; +import { type Action } from "entities/Action"; +import { PluginType } from "entities/Plugin"; export function checkForPreparedStatement(action: Action) { const { actionConfiguration } = action; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts index 7630ff9a577d..54eb3a859417 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts @@ -1,5 +1,5 @@ import type { ActionResponse } from "api/ActionAPI"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { DEFAULT_ERROR_MESSAGE } from "../constants"; /** diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx index 3eb85a11b4fd..915dd81d9afd 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx @@ -44,12 +44,14 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` justify-content: space-between; flex-direction: column; overflow: auto; + .tableWrap { height: 100%; display: block; overflow-x: auto; overflow-y: hidden; } + .table { border-spacing: 0; color: var(--ads-v2-color-fg); @@ -57,29 +59,37 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` display: table; width: 100%; height: auto; + .thead, .tbody { overflow: hidden; } + .tbody { height: calc(100% - ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px); + .tr { width: 100%; } } + .tr { overflow: hidden; border-bottom: 1px solid var(--ads-v2-color-black-75); + &.selected-row { background: var(--ads-v2-color-bg-subtle); + &:hover { background: var(--ads-v2-color-bg-subtle); } } + &:hover { background: var(--ads-v2-color-gray-50); } } + .th, .td { margin: 0; @@ -87,6 +97,7 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` position: relative; font-size: ${TABLE_SIZES.ROW_FONT_SIZE}px; line-height: ${TABLE_SIZES.ROW_FONT_SIZE}px; + ${(props) => `${ props.minColumnWidth ? `min-width: ${props.minColumnWidth}px;` : "" @@ -94,6 +105,7 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` :last-child { border-right: 0; } + .resizer { display: inline-block; width: 10px; @@ -104,24 +116,28 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` transform: translateX(50%); z-index: 1; ${"" /* prevents from scrolling while dragging on touch devices */} - touch-action:none; + touch-action: none; + &.isResizing { cursor: n-resize; } } } + .th { padding: 0 10px 0 0; height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px; line-height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px; background: var(--ads-v2-color-gray-50); } + .td { height: auto; line-height: ${TABLE_SIZES.ROW_HEIGHT}px; padding: 0 10px; } } + .draggable-header, .hidden-header { width: 100%; @@ -132,30 +148,38 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>` color: var(--ads-v2-color-fg); font-weight: 500; padding-left: 10px; + &.sorted { padding-left: 5px; } } + .draggable-header { cursor: pointer; + &.reorder-line { width: 1px; height: 100%; } } + .hidden-header { opacity: 0.6; } + .column-menu { height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px; line-height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px; } + .th { display: flex; justify-content: space-between; + &.highlight-left { border-left: 2px solid var(--ads-v2-color-border-success); } + &.highlight-right { border-right: 2px solid var(--ads-v2-color-border-success); } @@ -313,7 +337,7 @@ function Table(props: TableProps) { return (
{cell.render("Cell")} @@ -348,7 +372,7 @@ function Table(props: TableProps) { {headerGroups.map((headerGroup: any, index: number) => (
{headerGroup.headers.map( diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema.ts index 10b3d4c9dffa..c383726ff35a 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema.ts @@ -2,7 +2,7 @@ import { getPluginDatasourceComponentFromId, getPluginNameFromId, } from "ee/selectors/entitiesSelector"; -import { DatasourceComponentTypes } from "api/PluginApi"; +import { DatasourceComponentTypes } from "entities/Plugin"; import { SCHEMALESS_PLUGINS } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer"; import { useSelector } from "react-redux"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx index 8529564e76b3..899dffcfcf94 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { UIComponentTypes } from "api/PluginApi"; +import { UIComponentTypes } from "entities/Plugin"; import { usePluginActionContext } from "../../PluginActionContext"; import ApiSettings from "./ApiSettings"; import QuerySettings from "./QuerySettings"; diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts index 96cd57870a0f..2f57b3822f09 100644 --- a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts +++ b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts @@ -24,20 +24,6 @@ export const openPluginActionSettings = (payload: boolean) => ({ }, }); -export const updatePostBodyContentType = ( - title: string, -): ReduxAction<{ title: string }> => ({ - type: ReduxActionTypes.UPDATE_API_ACTION_BODY_CONTENT_TYPE, - payload: { title }, -}); - -export const setExtraFormData = ( - values: Record, -) => ({ - type: ReduxActionTypes.SET_EXTRA_FORMDATA, - payload: { values }, -}); - export const changeApi = ( id: string, isSaas: boolean, diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts index b38e4bd1cc2f..d931e8210639 100644 --- a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts +++ b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts @@ -1,9 +1,6 @@ import type { AppState } from "ee/reducers"; import { createSelector } from "reselect"; -import { POST_BODY_FORM_DATA_KEY } from "./constants"; -import { POST_BODY_FORMAT_OPTIONS } from "../constants/CommonApiConstants"; - export const getActionEditorSavingMap = (state: AppState) => state.ui.pluginActionEditor.isSaving; @@ -38,26 +35,6 @@ export const isActionDeleting = (id: string) => (deletingMap) => id in deletingMap && deletingMap[id], ); -export const getFormData = (state: AppState) => - state.ui.pluginActionEditor.formData; - -type GetFormPostBodyFormat = (state: AppState) => { - label: string; - value: string; -}; - -export const getPostBodyFormat: GetFormPostBodyFormat = (state) => { - const formData = getFormData(state); - - if (POST_BODY_FORM_DATA_KEY in formData) { - return formData[POST_BODY_FORM_DATA_KEY]; - } - - return { - label: POST_BODY_FORMAT_OPTIONS.NONE, - value: POST_BODY_FORMAT_OPTIONS.NONE, - }; -}; export const getPluginActionConfigSelectedTab = (state: AppState) => state.ui.pluginActionEditor.selectedConfigTab; diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts index 3541e38fa1ac..a698845448d6 100644 --- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts +++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts @@ -26,7 +26,6 @@ export interface PluginActionEditorState { isDirty: Record; runErrorMessage: Record; selectedConfigTab?: string; - formData: Record; debugger: PluginEditorDebuggerState; settingsOpen?: boolean; } @@ -38,7 +37,6 @@ const initialState: PluginActionEditorState = { isDeleting: {}, isDirty: {}, runErrorMessage: {}, - formData: {}, debugger: { open: false, responseTabHeight: ActionExecutionResizerHeight, @@ -136,21 +134,6 @@ export const handlers = { set(state, ["isRunning", id], false); set(state, ["runErrorMessage", id], error.message); }, - /** - * This redux action sets the extra form data field for an action. This is used to select the - * appropriate body type tab selection in the Rest API plugin based on the content-type. - * This redux action can be extended to other functionalities as well in the future. - */ - [ReduxActionTypes.SET_EXTRA_FORMDATA]: ( - state: PluginActionEditorState, - action: ReduxAction<{ - values: Record; - }>, - ) => { - const { values } = action.payload; - - set(state, ["formData"], values); - }, [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: ( state: PluginActionEditorState, action: ReduxAction<{ selectedTab: string }>, diff --git a/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts b/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts index f775df96e2e9..95f5ee8a6dc3 100644 --- a/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts +++ b/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts @@ -3,7 +3,7 @@ import { transformRestAction, } from "./RestActionTransformer"; import type { ApiAction } from "entities/Action"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { HTTP_PROTOCOL, MultiPartOptionTypes, diff --git a/app/client/src/WidgetQueryGenerators/index.ts b/app/client/src/WidgetQueryGenerators/index.ts index e9073f33b276..8a10e9882bdf 100644 --- a/app/client/src/WidgetQueryGenerators/index.ts +++ b/app/client/src/WidgetQueryGenerators/index.ts @@ -1,4 +1,4 @@ -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import WidgetQueryGeneratorRegistry from "utils/WidgetQueryGeneratorRegistry"; import GSheets from "./GSheets"; import MongoDB from "./MongoDB"; diff --git a/app/client/src/actions/datasourceActions.ts b/app/client/src/actions/datasourceActions.ts index b80194c04d8a..ce4a2a55d91e 100644 --- a/app/client/src/actions/datasourceActions.ts +++ b/app/client/src/actions/datasourceActions.ts @@ -8,7 +8,7 @@ import type { FilePickerActionStatus, MockDatasource, } from "entities/Datasource"; -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; import type { ApiResponse, ResponseMeta } from "api/ApiResponses"; import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { diff --git a/app/client/src/actions/pluginActions.ts b/app/client/src/actions/pluginActions.ts index 02a29c028b65..6de49c2b2c03 100644 --- a/app/client/src/actions/pluginActions.ts +++ b/app/client/src/actions/pluginActions.ts @@ -9,7 +9,7 @@ import { import type { ApiResponse } from "api/ApiResponses"; import type { PluginFormPayload } from "api/PluginApi"; import type { DependencyMap } from "utils/DynamicBindingUtils"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; export const fetchPlugins = (payload?: { workspaceId?: string; diff --git a/app/client/src/api/PluginApi.ts b/app/client/src/api/PluginApi.ts index 5bcc33486109..690314ce4908 100644 --- a/app/client/src/api/PluginApi.ts +++ b/app/client/src/api/PluginApi.ts @@ -1,41 +1,9 @@ import Api from "api/Api"; import type { AxiosPromise } from "axios"; import type { ApiResponse } from "api/ApiResponses"; -import type { PluginPackageName, PluginType } from "entities/Action"; import type { DependencyMap } from "utils/DynamicBindingUtils"; import { FILE_UPLOAD_TRIGGER_TIMEOUT_MS } from "ee/constants/ApiConstants"; - -export type PluginId = string; -export type GenerateCRUDEnabledPluginMap = Record; - -export enum UIComponentTypes { - DbEditorForm = "DbEditorForm", - UQIDbEditorForm = "UQIDbEditorForm", - ApiEditorForm = "ApiEditorForm", - JsEditorForm = "JsEditorForm", - GraphQLEditorForm = "GraphQLEditorForm", -} - -export enum DatasourceComponentTypes { - RestAPIDatasourceForm = "RestAPIDatasourceForm", - AutoForm = "AutoForm", -} -export interface Plugin { - id: string; - name: string; - type: PluginType; - packageName: PluginPackageName; - iconLocation?: string; - uiComponent: UIComponentTypes; - datasourceComponent: DatasourceComponentTypes; - allowUserDatasources?: boolean; - templates: Record; - responseType?: "TABLE" | "JSON"; - documentationLink?: string; - generateCRUDPageComponent?: string; - // We need to know if the plugin requires a datasource (Eg Workflows plugin does not require a datasource to create queries) - requiresDatasource: boolean; -} +import type { DefaultPlugin, Plugin } from "entities/Plugin"; export interface PluginFormPayload { // TODO: Fix this the next time the file is edited @@ -51,14 +19,6 @@ export interface PluginFormPayload { formButton: string[]; } -export interface DefaultPlugin { - id: string; - name: string; - packageName: string; - iconLocation?: string; - allowUserDatasources?: boolean; -} - class PluginsApi extends Api { static url = "v1/plugins"; static defaultDynamicTriggerURL(datasourceId: string): string { diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/useDefaultTab.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/useDefaultTab.tsx index 399b32064751..f1ffac4b96ff 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/useDefaultTab.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/useDefaultTab.tsx @@ -1,7 +1,7 @@ import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { usePluginActionContext } from "PluginActionEditor"; import useShowSchema from "PluginActionEditor/components/PluginActionResponse/hooks/useShowSchema"; import { diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index e36d658e4d6e..6d6988b883f5 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -15,7 +15,7 @@ import { } from "ee/constants/messages"; import ErrorLogs from "components/editorComponents/Debugger/Errors"; import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { ApiResponseHeaders } from "PluginActionEditor/components/PluginActionResponse/components/ApiResponseHeaders"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import { getErrorCount } from "selectors/debuggerSelectors"; @@ -112,6 +112,7 @@ function usePluginActionResponseTabs() { if ( [ PluginType.DB, + PluginType.AI, PluginType.REMOTE, PluginType.SAAS, PluginType.INTERNAL, diff --git a/app/client/src/ce/PluginActionEditor/hooks/useBlockExecution.ts b/app/client/src/ce/PluginActionEditor/hooks/useBlockExecution.ts index a2acdd1f5594..e1ee5994c5f6 100644 --- a/app/client/src/ce/PluginActionEditor/hooks/useBlockExecution.ts +++ b/app/client/src/ce/PluginActionEditor/hooks/useBlockExecution.ts @@ -2,7 +2,7 @@ import { getHasExecuteActionPermission } from "ee/utils/BusinessFeatures/permiss import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { DEFAULT_DATASOURCE_NAME } from "PluginActionEditor/constants/ApiEditorConstants"; -import { UIComponentTypes } from "api/PluginApi"; +import { UIComponentTypes } from "entities/Plugin"; import { SQL_DATASOURCES } from "constants/QueryEditorConstants"; import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; diff --git a/app/client/src/ce/api/JSActionAPI.tsx b/app/client/src/ce/api/JSActionAPI.tsx index e9786759940b..12393dc4cb2c 100644 --- a/app/client/src/ce/api/JSActionAPI.tsx +++ b/app/client/src/ce/api/JSActionAPI.tsx @@ -3,7 +3,7 @@ import type { AxiosPromise } from "axios"; import type { JSCollection } from "entities/JSCollection"; import type { ApiResponse } from "api/ApiResponses"; import type { Variable, JSAction } from "entities/JSCollection"; -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; import type { FetchActionsPayload } from "api/ActionAPI"; import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers"; diff --git a/app/client/src/ce/components/editorComponents/Debugger/ErrorLogs/getLogIconForEntity.tsx b/app/client/src/ce/components/editorComponents/Debugger/ErrorLogs/getLogIconForEntity.tsx index c5c781efb04b..f38fdf9832b5 100644 --- a/app/client/src/ce/components/editorComponents/Debugger/ErrorLogs/getLogIconForEntity.tsx +++ b/app/client/src/ce/components/editorComponents/Debugger/ErrorLogs/getLogIconForEntity.tsx @@ -1,7 +1,7 @@ import type { FunctionComponent } from "react"; import React from "react"; import type { LogItemProps } from "components/editorComponents/Debugger/ErrorLogs/ErrorLogItem"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import WidgetIcon from "pages/Editor/Explorer/Widgets/WidgetIcon"; import { ApiMethodIcon, diff --git a/app/client/src/ce/constants/ModuleConstants.ts b/app/client/src/ce/constants/ModuleConstants.ts index 2c101aa279f4..aa69b5ff2f18 100644 --- a/app/client/src/ce/constants/ModuleConstants.ts +++ b/app/client/src/ce/constants/ModuleConstants.ts @@ -1,4 +1,4 @@ -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; type ID = string; diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 0a3d912b1692..1c34ede4b084 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -769,7 +769,6 @@ const ActionActionTypes = { UPDATE_ACTION_SUCCESS: "UPDATE_ACTION_SUCCESS", DELETE_ACTION_INIT: "DELETE_ACTION_INIT", DELETE_ACTION_SUCCESS: "DELETE_ACTION_SUCCESS", - SET_EXTRA_FORMDATA: "SET_EXTRA_FORMDATA", MOVE_ACTION_INIT: "MOVE_ACTION_INIT", MOVE_ACTION_SUCCESS: "MOVE_ACTION_SUCCESS", COPY_ACTION_INIT: "COPY_ACTION_INIT", @@ -787,7 +786,6 @@ const ActionActionTypes = { TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS: "TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS", TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT: "TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT", - UPDATE_API_ACTION_BODY_CONTENT_TYPE: "UPDATE_API_ACTION_BODY_CONTENT_TYPE", }; const ActionActionErrorTypes = { diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index a7ee8c2d92b2..8113359f35d6 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2575,23 +2575,23 @@ export const REQUEST_NEW_INTEGRATIONS = { REQUEST_NEW_BUTTON: () => "Request a new integration", REQUEST_BUTTON: () => "Request integration", CANCEL_BUTTON: () => "Cancel", - REQUEST_MODAL_HEADING: () => "Request a new integration", + REQUEST_MODAL_HEADING: () => "Request new integration", REQUEST_MODAL_INTEGRATION: { - LABEL: () => "Integration", + LABEL: () => "Integration name", PLACEHOLDER: () => "E.g. Zendesk, JIRA, Slack, others", NAME: "integration", ERROR: () => "Please enter integration name", }, REQUEST_MODAL_USECASE: { - LABEL: () => "Tell us more about your case", + LABEL: () => "How would this integration help you?", PLACEHOLDER: () => - "E.g. I want to create an app to manage my customers’ account.", + "For example, organizing client data or automating reports.", NAME: "useCase", }, REQUEST_MODAL_EMAIL: { LABEL: () => "Email", DESCRIPTION: () => - "Appsmith will use this email exclusively to follow up on your integration request.", + "We’ll use this email solely to follow up on your request.", NAME: "email", ERROR: () => "Please enter email", }, @@ -2599,10 +2599,10 @@ export const REQUEST_NEW_INTEGRATIONS = { }; export const PREMIUM_DATASOURCES = { - RELEVANT_EMAIL_DESCRIPTION: () => - "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Schedule a call now to see how Appsmith can transform your workflows!", - NON_RELEVANT_EMAIL_DESCRIPTION: () => - "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Give us your email and the Appsmith team will reach out to you soon.", + RELEVANT_EMAIL_DESCRIPTION: (integrationName: string) => + `Ready to connect with ${integrationName}? This feature is part of our premium plans. Schedule a call with our team to explore the right plan for your needs. We’re excited to help you get started!`, + NON_RELEVANT_EMAIL_DESCRIPTION: (integrationName: string) => + `Ready to connect with ${integrationName}? This feature is part of our premium plans. We'll help you find a plan that fits your needs. Simply share your email, and we'll be in touch soon.`, LEARN_MORE: () => "Learn more about Premium", SCHEDULE_CALL: () => "Schedule a call", SUBMIT: () => "Submit", @@ -2611,15 +2611,15 @@ export const PREMIUM_DATASOURCES = { FORM_EMAIL: { LABEL: () => "Email", DESCRIPTION: () => - "Appsmith will use this email to follow up on your integration interest.", + "We’ll use this email solely to follow up on your request.", NAME: "email", ERROR: () => "Please enter email", }, PREMIUM_TAG: () => "Premium", SOON_TAG: () => "Soon", - COMING_SOON_SUFFIX: () => "Coming soon", + COMING_SOON_SUFFIX: () => "is coming soon", COMING_SOON_DESCRIPTION: () => - "The Appsmith Team is actively working on it. We’ll let you know when this integration is live. ", + "This integration is currently in development. Submit your email below to be notified as soon as it’s available.", NOTIFY_ME: () => "Notify me", }; diff --git a/app/client/src/ce/entities/DataTree/dataTreeJSAction.test.ts b/app/client/src/ce/entities/DataTree/dataTreeJSAction.test.ts index 0978fa770b75..f9765a1ad245 100644 --- a/app/client/src/ce/entities/DataTree/dataTreeJSAction.test.ts +++ b/app/client/src/ce/entities/DataTree/dataTreeJSAction.test.ts @@ -1,4 +1,4 @@ -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { generateDataTreeJSAction } from "./dataTreeJSAction"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; diff --git a/app/client/src/ce/entities/DataTree/types.ts b/app/client/src/ce/entities/DataTree/types.ts index 42652009b95e..fe5489737776 100644 --- a/app/client/src/ce/entities/DataTree/types.ts +++ b/app/client/src/ce/entities/DataTree/types.ts @@ -1,7 +1,7 @@ import type { ActionResponse } from "api/ActionAPI"; -import type { PluginId } from "api/PluginApi"; +import type { PluginType, PluginId } from "entities/Plugin"; import type { ValidationConfig } from "constants/PropertyControlConstants"; -import type { ActionConfig, PluginType } from "entities/Action"; +import type { ActionConfig } from "entities/Action"; import type { ActionDescription } from "ee/workers/Evaluation/fns"; import type { Variable } from "entities/JSCollection"; import type { DependencyMap, DynamicPath } from "utils/DynamicBindingUtils"; diff --git a/app/client/src/ce/entities/Engine/actionHelpers.ts b/app/client/src/ce/entities/Engine/actionHelpers.ts index eba14ec5f190..87636eea3b3f 100644 --- a/app/client/src/ce/entities/Engine/actionHelpers.ts +++ b/app/client/src/ce/entities/Engine/actionHelpers.ts @@ -9,7 +9,7 @@ import type { DependentFeatureFlags } from "ee/selectors/engineSelectors"; import { fetchDatasources } from "actions/datasourceActions"; import { fetchPageDSLs } from "actions/pageActions"; import { fetchPlugins } from "actions/pluginActions"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; import { useSelector } from "react-redux"; import { useParams } from "react-router"; import type { EditConsolidatedApi } from "sagas/InitSagas"; diff --git a/app/client/src/ce/entities/IDE/constants.ts b/app/client/src/ce/entities/IDE/constants.ts index e7fa7a230b18..7809cb7f47d6 100644 --- a/app/client/src/ce/entities/IDE/constants.ts +++ b/app/client/src/ce/entities/IDE/constants.ts @@ -19,9 +19,9 @@ import { SAAS_EDITOR_API_ID_PATH, SAAS_EDITOR_DATASOURCE_ID_PATH, } from "pages/Editor/SaaSEditor/constants"; -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; import type { ComponentType, ReactNode } from "react"; -import type { IDESidebarButton } from "IDE"; +import type { IDESidebarButton } from "@appsmith/ads"; export enum EditorState { DATA = "DATA", diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index 336ddaeeee1a..e7a97ca3d3df 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts @@ -40,7 +40,7 @@ import { DEFAULT_ENTITY_EXPLORER_WIDTH, DEFAULT_PROPERTY_PANE_WIDTH, } from "constants/AppConstants"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity"; import { SelectionRequestType } from "sagas/WidgetSelectUtils"; import { getExplorerWidth } from "selectors/explorerSelector"; @@ -77,16 +77,11 @@ import { ActionExecutionResizerHeight } from "PluginActionEditor/components/Plug import { getPluginActionConfigSelectedTab, getPluginActionDebuggerState, - getFormData, - setExtraFormData, setPluginActionEditorDebuggerState, setPluginActionEditorSelectedTab, } from "PluginActionEditor/store"; import { EDITOR_TABS } from "constants/QueryEditorConstants"; -import { - API_EDITOR_TABS, - POST_BODY_FORMAT_OPTIONS, -} from "PluginActionEditor/constants/CommonApiConstants"; +import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants"; export const AppIDEFocusElements: FocusElementsConfigList = { [FocusEntity.DATASOURCE_LIST]: [ @@ -155,16 +150,6 @@ export const AppIDEFocusElements: FocusElementsConfigList = { }, }, }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.PluginActionFormData, - selector: getFormData, - setter: setExtraFormData, - defaultValue: { - label: POST_BODY_FORMAT_OPTIONS.NONE, - value: POST_BODY_FORMAT_OPTIONS.NONE, - }, - }, { type: FocusElementConfigType.Redux, name: FocusElement.PluginActionDebugger, diff --git a/app/client/src/ce/navigation/FocusSetters.ts b/app/client/src/ce/navigation/FocusSetters.ts index 0fd6452385f5..85a26812644e 100644 --- a/app/client/src/ce/navigation/FocusSetters.ts +++ b/app/client/src/ce/navigation/FocusSetters.ts @@ -4,7 +4,7 @@ import { datasourcesEditorIdURL, jsCollectionIdURL, } from "ee/RouteBuilder"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import type { FocusEntityInfo } from "navigation/FocusEntity"; import { FocusEntity } from "navigation/FocusEntity"; import { getQueryEntityItemUrl } from "../pages/Editor/IDE/EditorPane/Query/utils"; diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx index ca377143edef..465c87898aca 100644 --- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx +++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx @@ -20,8 +20,7 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import history from "utils/history"; import { builderURL } from "ee/RouteBuilder"; import { getDatasource, getPlugin } from "ee/selectors/entitiesSelector"; -import type { Plugin } from "api/PluginApi"; -import { PluginPackageName, PluginType } from "entities/Action"; +import { type Plugin, PluginPackageName, PluginType } from "entities/Plugin"; import DataSourceEditor from "pages/Editor/DataSourceEditor"; import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { fetchMockDatasources } from "actions/datasourceActions"; diff --git a/app/client/src/ce/pages/Editor/Explorer/helpers.tsx b/app/client/src/ce/pages/Editor/Explorer/helpers.tsx index 9b77024ba777..45b665e0d59d 100644 --- a/app/client/src/ce/pages/Editor/Explorer/helpers.tsx +++ b/app/client/src/ce/pages/Editor/Explorer/helpers.tsx @@ -18,7 +18,7 @@ import { } from "pages/Editor/SaaSEditor/constants"; import type { ActionData } from "ee/reducers/entityReducers/actionsReducer"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; import localStorage from "utils/localStorage"; import { EDITOR_PATHS } from "ee/entities/IDE/utils"; import type { Match } from "path-to-regexp"; diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils.test.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils.test.ts index 58b1cb1bf4a0..d12cadbbf429 100644 --- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils.test.ts +++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils.test.ts @@ -1,6 +1,6 @@ import { getJSEntityItemUrl, getJSUrl } from "./utils"; import urlBuilder from "ee/entities/URLRedirect/URLAssembly"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import type { FocusEntityInfo } from "navigation/FocusEntity"; import { FocusEntity } from "navigation/FocusEntity"; import { EditorState } from "ee/entities/IDE/constants"; diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/utils.test.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/utils.test.ts index 9285955c121a..f6e557398c62 100644 --- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/utils.test.ts +++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/utils.test.ts @@ -2,7 +2,7 @@ import { getQueryEntityItemUrl, getQueryUrl } from "./utils"; import type { FocusEntityInfo } from "navigation/FocusEntity"; import { FocusEntity } from "navigation/FocusEntity"; import { EditorState } from "ee/entities/IDE/constants"; -import { PluginPackageName, PluginType } from "entities/Action"; +import { PluginPackageName, PluginType } from "entities/Plugin"; import urlBuilder from "ee/entities/URLRedirect/URLAssembly"; describe("getQueryEntityItemUrl", () => { diff --git a/app/client/src/ce/sagas/DatasourcesSagas.ts b/app/client/src/ce/sagas/DatasourcesSagas.ts index 182367f31b0b..5359981a55c8 100644 --- a/app/client/src/ce/sagas/DatasourcesSagas.ts +++ b/app/client/src/ce/sagas/DatasourcesSagas.ts @@ -118,11 +118,16 @@ import localStorage from "utils/localStorage"; import log from "loglevel"; import { APPSMITH_TOKEN_STORAGE_KEY } from "pages/Editor/SaaSEditor/constants"; import { checkAndGetPluginFormConfigsSaga } from "sagas/PluginSagas"; -import { type Action, PluginPackageName, PluginType } from "entities/Action"; +import { type Action } from "entities/Action"; import LOG_TYPE from "entities/AppsmithConsole/logtype"; import { isDynamicValue } from "utils/DynamicBindingUtils"; import { getQueryParams } from "utils/URLUtils"; -import type { GenerateCRUDEnabledPluginMap, Plugin } from "api/PluginApi"; +import { + type GenerateCRUDEnabledPluginMap, + type Plugin, + PluginPackageName, + PluginType, +} from "entities/Plugin"; import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil"; import { klonaLiteWithTelemetry, diff --git a/app/client/src/ce/selectors/appIDESelectors.test.ts b/app/client/src/ce/selectors/appIDESelectors.test.ts index c4d62d41cbe1..43425a1490b6 100644 --- a/app/client/src/ce/selectors/appIDESelectors.test.ts +++ b/app/client/src/ce/selectors/appIDESelectors.test.ts @@ -1,6 +1,6 @@ import type { EntityItem } from "ee/entities/IDE/constants"; import { groupAndSortEntitySegmentList } from "./appIDESelectors"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; describe("groupAndSortEntitySegmentList", () => { it("should group and sort entity segment list alphabetically", () => { diff --git a/app/client/src/ce/selectors/entitiesSelector.ts b/app/client/src/ce/selectors/entitiesSelector.ts index a512b77ed0de..d81657d5d4a0 100644 --- a/app/client/src/ce/selectors/entitiesSelector.ts +++ b/app/client/src/ce/selectors/entitiesSelector.ts @@ -15,11 +15,7 @@ import { isEmbeddedRestDatasource, } from "entities/Datasource"; import type { Action } from "entities/Action"; -import { - isStoredDatasource, - PluginPackageName, - PluginType, -} from "entities/Action"; +import { isStoredDatasource } from "entities/Action"; import { countBy, find, get, groupBy, keyBy, sortBy } from "lodash"; import ImageAlt from "assets/images/placeholder-image.svg"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; @@ -32,11 +28,13 @@ import type { JSCollectionData, JSCollectionDataState, } from "ee/reducers/entityReducers/jsActionsReducer"; -import type { - DefaultPlugin, - GenerateCRUDEnabledPluginMap, - Plugin, -} from "api/PluginApi"; +import { + type DefaultPlugin, + type GenerateCRUDEnabledPluginMap, + type Plugin, + PluginPackageName, + PluginType, +} from "entities/Plugin"; import type { JSAction, JSCollection } from "entities/JSCollection"; import { APP_MODE } from "entities/App"; import type { ExplorerFileEntity } from "ee/pages/Editor/Explorer/helpers"; @@ -1670,7 +1668,7 @@ export const getQuerySegmentItems = createSelector( } return { - icon: ActionUrlIcon(iconUrl), + icon: ActionUrlIcon(iconUrl, "16", "16"), title: action.config.name, key: action.config.baseId, type: action.config.pluginType, diff --git a/app/client/src/ce/utils/Environments/index.tsx b/app/client/src/ce/utils/Environments/index.tsx index 7ac35bfd16e1..257be0b79746 100644 --- a/app/client/src/ce/utils/Environments/index.tsx +++ b/app/client/src/ce/utils/Environments/index.tsx @@ -1,4 +1,4 @@ -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import type { Datasource } from "entities/Datasource"; export const DB_NOT_SUPPORTED = [ diff --git a/app/client/src/ce/utils/actionExecutionUtils.test.ts b/app/client/src/ce/utils/actionExecutionUtils.test.ts index fdf9d9368cfa..9306f586616f 100644 --- a/app/client/src/ce/utils/actionExecutionUtils.test.ts +++ b/app/client/src/ce/utils/actionExecutionUtils.test.ts @@ -1,6 +1,6 @@ import { getTestPayloadFromCollectionData } from "./actionExecutionUtils"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import configureStore from "redux-mock-store"; describe("getTestPayloadFromCollectionData", () => { diff --git a/app/client/src/ce/utils/actionExecutionUtils.ts b/app/client/src/ce/utils/actionExecutionUtils.ts index 675d31ded0ba..524ff167d052 100644 --- a/app/client/src/ce/utils/actionExecutionUtils.ts +++ b/app/client/src/ce/utils/actionExecutionUtils.ts @@ -6,7 +6,7 @@ import store from "store"; import { getAppMode } from "ee/selectors/applicationSelectors"; import { getDatasource } from "ee/selectors/entitiesSelector"; import { getCurrentEnvironmentDetails } from "ee/selectors/environmentSelectors"; -import type { Plugin } from "api/PluginApi"; +import type { Plugin } from "entities/Plugin"; import { get, isNil } from "lodash"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; import { objectKeys } from "@appsmith/utils"; diff --git a/app/client/src/ce/utils/autocomplete/EntityDefinitions.test.ts b/app/client/src/ce/utils/autocomplete/EntityDefinitions.test.ts index 2b0bbd6053b1..0b5e260e35ea 100644 --- a/app/client/src/ce/utils/autocomplete/EntityDefinitions.test.ts +++ b/app/client/src/ce/utils/autocomplete/EntityDefinitions.test.ts @@ -1,4 +1,4 @@ -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; import { getPropsForJSActionEntity } from "ee/pages/Editor/Explorer/Entity/getEntityProperties"; import type { JSActionEntity } from "ee/entities/DataTree/types"; diff --git a/app/client/src/ce/utils/getEntityPayloadInfo.ts b/app/client/src/ce/utils/getEntityPayloadInfo.ts index 7077d9646c71..74a07264d6b0 100644 --- a/app/client/src/ce/utils/getEntityPayloadInfo.ts +++ b/app/client/src/ce/utils/getEntityPayloadInfo.ts @@ -7,7 +7,7 @@ import { type WidgetEntityConfig, ENTITY_TYPE, } from "ee/entities/DataTree/types"; -import type { PluginType } from "entities/Action"; +import type { PluginType } from "entities/Plugin"; export const getEntityPayloadInfo: Record< string, diff --git a/app/client/src/ce/workers/Evaluation/evaluationUtils.test.ts b/app/client/src/ce/workers/Evaluation/evaluationUtils.test.ts index 1c09c47de913..bcd0bbbb9d79 100644 --- a/app/client/src/ce/workers/Evaluation/evaluationUtils.test.ts +++ b/app/client/src/ce/workers/Evaluation/evaluationUtils.test.ts @@ -45,7 +45,7 @@ import TableWidget from "widgets/TableWidget"; import InputWidget from "widgets/InputWidgetV2"; import DataTreeEvaluator from "workers/common/DataTreeEvaluator"; import { Severity } from "entities/AppsmithConsole"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { registerWidgets } from "WidgetProvider/factory/registrationHelper"; // to check if logWarn was called. diff --git a/app/client/src/ce/workers/Evaluation/evaluationUtils.ts b/app/client/src/ce/workers/Evaluation/evaluationUtils.ts index 62d6f17531db..5363dc696246 100644 --- a/app/client/src/ce/workers/Evaluation/evaluationUtils.ts +++ b/app/client/src/ce/workers/Evaluation/evaluationUtils.ts @@ -16,7 +16,7 @@ import type { import { ENTITY_TYPE } from "ee/entities/DataTree/types"; import _, { difference, get, has, isEmpty, isNil, set } from "lodash"; import type { WidgetTypeConfigMap } from "WidgetProvider/factory"; -import { PluginType } from "entities/Action"; +import { PluginType } from "entities/Plugin"; import { klona } from "klona/full"; import { warn as logWarn } from "loglevel"; import type { EvalMetaUpdates } from "ee/workers/common/DataTreeEvaluator/types"; diff --git a/app/client/src/components/editorComponents/ActionCreator/helpers.tsx b/app/client/src/components/editorComponents/ActionCreator/helpers.tsx index 8648b6e9d3f5..b121ef4a5b70 100644 --- a/app/client/src/components/editorComponents/ActionCreator/helpers.tsx +++ b/app/client/src/components/editorComponents/ActionCreator/helpers.tsx @@ -14,7 +14,7 @@ import { } from "ee/workers/Evaluation/evaluationUtils"; import type { TreeDropdownOption } from "@appsmith/ads-old"; import { Icon } from "@appsmith/ads"; -import { PluginType } from "entities/Action"; +import { type Plugin, PluginType } from "entities/Plugin"; import type { JSAction, Variable } from "entities/JSCollection"; import keyBy from "lodash/keyBy"; import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers"; @@ -67,7 +67,6 @@ import type { ModuleInstanceDataState } from "ee/constants/ModuleInstanceConstan import { getModuleIcon, getPluginImagesFromPlugins } from "pages/Editor/utils"; import { getAllModules } from "ee/selectors/modulesSelector"; import type { Module } from "ee/constants/ModuleConstants"; -import type { Plugin } from "api/PluginApi"; import { createNewJSCollectionFromActionCreator, createNewQueryFromActionCreator, diff --git a/app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx b/app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx index 80ba7bbf0079..c71f8d115e8a 100644 --- a/app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx @@ -157,7 +157,7 @@ export function PeekOverlayPopUpContent( > {(dataType === "object" || dataType === "array") && jsData !== null && ( e.stopPropagation()} > @@ -325,7 +325,7 @@ export function LogItem(props: LogItemProps) { if (typeof logDatum === "object") { return ( e.stopPropagation()} > @@ -334,7 +334,7 @@ export function LogItem(props: LogItemProps) { ); } else { return ( - + {`${logDatum} `} ); diff --git a/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx b/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx index 6ef98d4043eb..dc1b99d93a77 100644 --- a/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx +++ b/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx @@ -1,9 +1,8 @@ import React, { useState } from "react"; import ReactJson from "react-json-view"; import { + EntityGroupsList, Flex, - List, - ListItem, type ListItemProps, SearchInput, Text, @@ -51,37 +50,23 @@ export const StateInspector = () => { value={searchTerm} /> - - {filteredItemGroups.map((item) => ( - - - {item.group} - - - {item.items.map((eachItem) => ( - - ))} - - - ))} - + { + return { + groupTitle: item.group, + items: item.items, + className: "", + }; + })} + /> {selectedItem ? ( ; diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx index 8701bd31c7d9..909fe827dd03 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx @@ -14,7 +14,7 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import type { DropdownOptionType } from "../../../types"; import type { WidgetProps } from "widgets/BaseWidget"; import { WidgetQueryGeneratorFormContext } from "components/editorComponents/WidgetQueryGeneratorForm"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import type { ActionData, ActionDataState, diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useDatasourceOptions.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useDatasourceOptions.tsx index cedf9653feba..9826e4de0e7c 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useDatasourceOptions.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useDatasourceOptions.tsx @@ -12,7 +12,7 @@ import { DatasourceConnectionMode, type MockDatasource, } from "entities/Datasource"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { addAndFetchMockDatasourceStructure, fetchDatasourceStructure, diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/useConnectData.ts b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/useConnectData.ts index a366e6e03c6f..c9ba2ef60647 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/useConnectData.ts +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/useConnectData.ts @@ -7,7 +7,7 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { isValidGsheetConfig } from "../utils"; import { useContext, useMemo } from "react"; import { WidgetQueryGeneratorFormContext } from "../index"; -import { PluginPackageName } from "../../../../entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { useFormConfig } from "../common/useFormConfig"; export function useConnectData() { diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/DatasourceSpecificControls/index.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/DatasourceSpecificControls/index.tsx index ce26440bdf5e..9e9556d696a2 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/DatasourceSpecificControls/index.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/DatasourceSpecificControls/index.tsx @@ -1,5 +1,5 @@ import type { AppState } from "ee/reducers"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import React, { useContext } from "react"; import { useSelector } from "react-redux"; import { getPluginPackageFromDatasourceId } from "ee/selectors/entitiesSelector"; diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumnDropdown.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumnDropdown.tsx index 40bbe2b8efa9..de5991fcd5ef 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumnDropdown.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumnDropdown.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo } from "react"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { get, isArray } from "lodash"; import { ALLOWED_SEARCH_DATATYPE } from "pages/Editor/GeneratePage/components/constants"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumns.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumns.tsx index 615b9b7b6a09..7202646f3bdc 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumns.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/useColumns.tsx @@ -1,5 +1,5 @@ import type { AppState } from "ee/reducers"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import { isArray } from "lodash"; import { useContext, useMemo } from "react"; import { useSelector } from "react-redux"; diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/constants.ts b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/constants.ts index 79c83f5c3d17..867a9b5c0af3 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/constants.ts +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/constants.ts @@ -1,4 +1,4 @@ -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; export const DROPDOWN_TRIGGER_DIMENSION = { HEIGHT: "36px", diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/utils.test.ts b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/utils.test.ts index 135c90005d6a..61a2fcfcbf61 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/utils.test.ts +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/utils.test.ts @@ -1,7 +1,7 @@ import WidgetQueryGeneratorRegistry from "utils/WidgetQueryGeneratorRegistry"; import { getDatasourceConnectionMode } from "./utils"; import type { DatasourceStorage } from "entities/Datasource"; -import { PluginPackageName } from "entities/Action"; +import { PluginPackageName } from "entities/Plugin"; import PostgreSQL from "WidgetQueryGenerators/PostgreSQL"; import GSheets from "WidgetQueryGenerators/GSheets"; diff --git a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx index 7dc1ea75e4a0..4bab6e5d980f 100644 --- a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx +++ b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx @@ -40,7 +40,7 @@ function DropdownFieldWrapper(props: DropdownFieldWrapperProps) { > {props.options.map((option: SelectOptionProps) => { return ( - ); diff --git a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx index 6c23cca3a500..b728ad86e495 100644 --- a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx +++ b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx @@ -24,6 +24,7 @@ interface DropdownWrapperProps { disabled?: boolean; dropdownMaxHeight?: string; enableSearch?: boolean; + testId?: string; } function DropdownWrapper(props: DropdownWrapperProps) { @@ -79,6 +80,7 @@ function DropdownWrapper(props: DropdownWrapperProps) { return (