fix: add a warning icon and tooltip to indicate empty datasources (#33618)

app/client/src/ce/constants/messages.ts

@@ -2514,3 +2514,6 @@ export const BETA_TAG = () => `Beta`;
 export const BUTTON_WIDGET_DEFAULT_LABEL = () => "Do something";
 
 export const PAGE_ENTITY_NAME = "Page";
+
+export const EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON = () =>
+  "Create a datasource to power your app with data.";

app/client/src/ce/entities/IDE/constants.ts

@@ -22,6 +22,10 @@ import {
 } from "pages/Editor/SaaSEditor/constants";
 import type { PluginType } from "entities/Action";
 import type { ReactNode, ComponentType } from "react";
+import {
+  EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON,
+  createMessage,
+} from "@appsmith/constants/messages";
 
 export enum EditorState {
   DATA = "DATA",
@@ -57,11 +61,17 @@ export enum EditorViewMode {
   SplitScreen = "SplitScreen",
 }
 
+export enum SideButtonType {
+  DATSOURCE = "DATASOURCE",
+}
+
 export interface SidebarButton {
   state: EditorState;
   icon: string;
   title?: string;
   urlSuffix: string;
+  conditionType?: SideButtonType;
+  conditionTooltip?: string;
 }
 
 export const TopButtons: SidebarButton[] = [
@@ -76,6 +86,8 @@ export const TopButtons: SidebarButton[] = [
     icon: "datasource-v3",
     title: SidebarTopButtonTitles.DATA,
     urlSuffix: "datasource",
+    conditionType: SideButtonType.DATSOURCE,
+    conditionTooltip: createMessage(EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON),
   },
 ];
 

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

@@ -0,0 +1,23 @@
+import { render } from "test/testUtils";
+import React from "react";
+import type { SidebarButtonProps } from "./SidebarButton";
+import SidebarButton from "./SidebarButton";
+import { TopButtons } from "@appsmith/entities/IDE/constants";
+
+const sidebarButtonProps: SidebarButtonProps = {
+  icon: TopButtons[1].icon,
+  onClick: () => {},
+  selected: false,
+  title: TopButtons[1].title,
+  conditionIcon: "warning",
+  tooltip: TopButtons[1].conditionTooltip,
+};
+
+describe("SidebarButton", () => {
+  it("should render the warning icon incase the datasource list is empty", () => {
+    const { container } = render(<SidebarButton {...sidebarButtonProps} />);
+
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs).toHaveLength(2);
+  });
+});

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

@@ -4,12 +4,13 @@ import styled from "styled-components";
 import DatasourceStarterLayoutPrompt from "pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt";
 import { SidebarTopButtonTitles } from "@appsmith/entities/IDE/constants";
 
-interface Props {
+export interface SidebarButtonProps {
   title?: string;
   selected: boolean;
   icon: string;
   onClick: () => void;
   tooltip?: string;
+  conditionIcon?: string;
 }
 
 const Container = styled.div`
@@ -33,6 +34,7 @@ const IconContainer = styled.div<{ selected: boolean }>`
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  position: relative;
   &:hover {
     background: ${(props) =>
       props.selected
@@ -41,7 +43,16 @@ const IconContainer = styled.div<{ selected: boolean }>`
   }
 `;
 
-function SidebarButton(props: Props) {
+const ConditionIcon = styled(Icon)`
+  position: absolute;
+  bottom: 3px;
+  right: -1px;
+  &.t--sidebar-${SidebarTopButtonTitles.DATA}-condition-icon {
+    color: #ffe283;
+  }
+`;
+
+function SidebarButton(props: SidebarButtonProps) {
   return (
     <Container>
       {props.title === SidebarTopButtonTitles.DATA && (
@@ -59,6 +70,13 @@ function SidebarButton(props: Props) {
           selected={props.selected}
         >
           <Icon name={props.icon} size="lg" />
+          {props.conditionIcon && (
+            <ConditionIcon
+              className={`t--sidebar-${props.title}-condition-icon`}
+              name={props.conditionIcon}
+              size="md"
+            />
+          )}
         </IconContainer>
       </Tooltip>
       {props.title ? <Text kind="body-s">{props.title}</Text> : null}

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

@@ -2,6 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import SidebarButton from "./SidebarButton";
 import type { SidebarButton as SidebarButtonType } from "@appsmith/entities/IDE/constants";
+import { SideButtonType } from "@appsmith/entities/IDE/constants";
+import { useSelector } from "react-redux";
+import { getDatasources } from "@appsmith/selectors/entitiesSelector";
 
 const Container = styled.div`
   width: 50px;
@@ -23,6 +26,23 @@ interface SidebarComponentProps {
 
 function SidebarComponent(props: SidebarComponentProps) {
   const { appState, bottomButtons, onClick, topButtons } = props;
+  const datasources = useSelector(getDatasources);
+  const getConditionalIconAndTooltip = (
+    type?: SideButtonType,
+    conditionTooltip?: string,
+  ) => {
+    switch (type) {
+      case SideButtonType.DATSOURCE:
+        if (datasources.length === 0)
+          return {
+            conditionIcon: "warning",
+            tooltip: conditionTooltip,
+          };
+        return {};
+      default:
+        return {};
+    }
+  };
 
   return (
     <Container className="t--sidebar" id="t--app-sidebar">
@@ -38,6 +58,10 @@ function SidebarComponent(props: SidebarComponentProps) {
             }}
             selected={appState === b.state}
             title={b.title}
+            {...getConditionalIconAndTooltip(
+              b.conditionType,
+              b.conditionTooltip,
+            )}
           />
         ))}
       </div>