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


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

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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",
   },
 ];

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);

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 */}
-      <DatasourceStarterLayoutPrompt />
+
       {!isAppSidebarEnabled && (
         <>
           <Datasources

app/client/src/pages/Editor/IDE/Sidebar/SidebarButton.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Icon, Text, Tooltip } from "design-system";
 import styled from "styled-components";
+import DatasourceStarterLayoutPrompt from "pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt";
+import { SidebarTopButtonTitles } from "entities/IDE/constants";
 
 interface Props {
   title?: string;
@@ -42,6 +44,9 @@ const IconContainer = styled.div<{ selected: boolean }>`
 function SidebarButton(props: Props) {
   return (
     <Container>
+      {props.title === SidebarTopButtonTitles.DATA && (
+        <DatasourceStarterLayoutPrompt />
+      )}
       <Tooltip
         content={props.tooltip}
         isDisabled={!!props.title && !props.tooltip}