From 9a38452fe59542b3f37632e4dac63dd6c498c03e Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Mon, 18 Dec 2023 16:53:49 +0100 Subject: [PATCH] fix: move canvas starter datasource prompt from entity explorer to sidebar button (#29559) ## Description In this fix, we've moved the canvas starter datasource prompt into the newly introduced left side bar for data. This enhancement not only ensures a more intuitive user experience but also establishes a clear and cohesive relationship with the data button, streamlining the workflow for a more efficient and user-friendly interface. Notion - https://www.notion.so/appsmith/Bring-in-data-modal-pops-up-in-the-wrong-place-after-the-new-sidebar-update-ecfe985e89944caeb618ea1a19398342?pvs=4 #### PR fixes following issue(s) Fixes #29484 #### Type of change - Bug fix (non-breaking change which fixes an issue) - ## Testing #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed ## Summary by CodeRabbit - **Style** - Improved the visual layout of popover components for better user interface alignment. - **Refactor** - Streamlined the user interface by removing the `DatasourceStarterLayoutPrompt` from the `EntityExplorer` component. - Enhanced the `SidebarButton` component to conditionally render the `DatasourceStarterLayoutPrompt` based on context, ensuring a more dynamic and responsive user experience. --- app/client/src/entities/IDE/constants.ts | 18 ++++++++++++++---- .../DatasourceStarterLayoutPrompt.tsx | 4 ++-- .../pages/Editor/Explorer/EntityExplorer.tsx | 4 +--- .../pages/Editor/IDE/Sidebar/SidebarButton.tsx | 5 +++++ 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/app/client/src/entities/IDE/constants.ts b/app/client/src/entities/IDE/constants.ts index a76ddb8e57..eaec22c15c 100644 --- a/app/client/src/entities/IDE/constants.ts +++ b/app/client/src/entities/IDE/constants.ts @@ -5,6 +5,16 @@ export enum EditorState { LIBRARIES = "LIBRARIES", } +export const SidebarTopButtonTitles = { + DATA: "Data", + EDITOR: "Editor", +}; + +export const SidebarBottomButtonTitles = { + SETTINGS: "Settings", + LIBRARIES: "Libraries", +}; + export interface SidebarButton { state: EditorState; icon: string; @@ -16,13 +26,13 @@ export const TopButtons: SidebarButton[] = [ { state: EditorState.EDITOR, icon: "file-copy-2-line", - title: "Editor", + title: SidebarTopButtonTitles.EDITOR, urlSuffix: "", }, { state: EditorState.DATA, icon: "database-2-line", - title: "Data", + title: SidebarTopButtonTitles.DATA, urlSuffix: "datasource", }, ]; @@ -31,13 +41,13 @@ export const BottomButtons: SidebarButton[] = [ { state: EditorState.LIBRARIES, icon: "box-3-line", - title: "Libraries", + title: SidebarBottomButtonTitles.LIBRARIES, urlSuffix: "libraries", }, { state: EditorState.SETTINGS, icon: "settings-2-line", - title: "Settings", + title: SidebarBottomButtonTitles.SETTINGS, urlSuffix: "settings", }, ]; diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt.tsx index 00cb4f57d5..8fbcc9a1ea 100644 --- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt.tsx +++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt.tsx @@ -120,7 +120,7 @@ const PromptImage = importSvg( ); const StyledPopoverContent = styled(PopoverContent)` - margin-left: 23px; + margin-left: 43px; width: 282px; padding-vertical: 12px; border-radius: 4px; @@ -133,7 +133,7 @@ const StyledPopoverContent = styled(PopoverContent)` const Ellipse = styled.div` position: absolute; top: 0px; - left: -15px; + left: 5px; width: 36px; height: 36px; background: rgba(225, 86, 21, 0.2); diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx index 27d57507ca..e19647197b 100644 --- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx +++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx @@ -35,7 +35,6 @@ import { } from "@appsmith/pages/Editor/Explorer/helpers"; import { integrationEditorURL } from "@appsmith/RouteBuilder"; import WalkthroughContext from "components/featureWalkthrough/walkthroughContext"; -import DatasourceStarterLayoutPrompt from "./Datasources/DatasourceStarterLayoutPrompt"; import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; import { FilesContextProvider } from "./Files/FilesContextProvider"; import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; @@ -177,8 +176,7 @@ function EntityExplorer({ isActive }: { isActive: boolean }) { title="No entities found" /> )} - {/* Shows first time users only */} - + {!isAppSidebarEnabled && ( <> ` function SidebarButton(props: Props) { return ( + {props.title === SidebarTopButtonTitles.DATA && ( + + )}