chore: Visual changes for core navigation elements on IDE

app/client/cypress/support/Pages/EditorNavigation.ts

@@ -6,11 +6,12 @@ import { LeftPane } from "./IDE/LeftPane";
 import PageList from "./PageList";
 
 export enum AppSidebarButton {
-  Data = "Data",
+  Data = "Datasources",
   Editor = "Editor",
   Libraries = "Libraries",
   Settings = "Settings",
 }
+
 export const AppSidebar = new Sidebar(Object.values(AppSidebarButton));
 
 export enum PagePaneSegment {
@@ -42,6 +43,7 @@ export enum EntityType {
   JSObject = "JSObject",
   Page = "Page",
 }
+
 class EditorNavigation {
   public locators = {
     MaximizeBtn: "[data-testid='t--ide-maximize']",

app/client/cypress/support/Pages/IDE/Sidebar.ts

@@ -2,7 +2,7 @@ export class Sidebar {
   buttons: string[];
   locators = {
     sidebar: ".t--sidebar",
-    sidebarButton: (name: string) => `.t--sidebar-${name}`,
+    sidebarButton: (name: string) => `[data-testid='t--sidebar-${name}']`,
   };
 
   constructor(buttons: string[]) {

app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx

@@ -41,6 +41,12 @@ export const StyledSegment = styled.span`
   & > * {
     color: var(--ads-v2-colors-control-segment-value-default-fg);
   }
+
+  &[data-selected="true"] {
+    span {
+      font-weight: var(--ads-v2-font-weight-bold);
+    }
+  }
 `;
 
 export const StyledControlContainer = styled.div`
@@ -81,6 +87,7 @@ export const StyledControlContainer = styled.div`
 
   /* Select all segments which is not a selected and last child */
   /* seperator */
+
   &:not(:hover):not(:last-child):not([data-selected="true"]):not(
       :has(+ [data-selected="true"])
     ):after {

app/client/src/IDE/Components/Sidebar/Sidebar.tsx

@@ -44,6 +44,7 @@ function IDESidebar(props: IDESidebarProps) {
             key={button.state}
             onClick={onClick}
             selected={editorState === button.state}
+            testId={button.testId}
             title={button.title}
             tooltip={button.tooltip}
             urlSuffix={button.urlSuffix}
@@ -58,6 +59,7 @@ function IDESidebar(props: IDESidebarProps) {
             key={button.state}
             onClick={onClick}
             selected={editorState === button.state}
+            testId={button.testId}
             title={button.title}
             tooltip={button.tooltip}
             urlSuffix={button.urlSuffix}

app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx

@@ -11,9 +11,16 @@ const sidebarButtonProps: SidebarButtonProps = {
   selected: false,
   title: "Test",
   urlSuffix: "/test",
+  testId: "testId",
 };
 
 describe("SidebarButton", () => {
+  it("should render the button with the correct test id", () => {
+    const { getByTestId } = render(<SidebarButton {...sidebarButtonProps} />);
+
+    expect(getByTestId("t--sidebar-testId")).toBeDefined();
+  });
+
   it("should render the warning icon in case the datasource list is empty", () => {
     const withWarningCondition = {
       ...sidebarButtonProps,

app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx

@@ -16,6 +16,7 @@ const ConditionConfig: Record<Condition, { icon: string; color: string }> = {
 
 export interface SidebarButtonProps {
   title?: string;
+  testId: string;
   selected: boolean;
   icon: string;
   onClick: (urlSuffix: string) => void;
@@ -33,10 +34,8 @@ const Container = styled(Flex)`
   padding: 8px 0;
 `;
 
-const IconContainer = styled.div<{ selected: boolean }>`
+const IconContainer = styled.div`
   padding: 2px;
-  background-color: ${(props) =>
-    props.selected ? "var(--colors-raw-orange-100, #fbe6dc)" : "white"};
   border-radius: 3px;
   width: 32px;
   height: 32px;
@@ -46,11 +45,16 @@ const IconContainer = styled.div<{ selected: boolean }>`
   cursor: pointer;
   position: relative;
 
-  &:hover {
-    background: ${(props) =>
-      props.selected
-        ? "var(--colors-raw-orange-100, #fbe6dc)"
-        : "var(--ads-v2-color-bg-subtle, #f1f5f9);"};
+  &[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);
   }
 `;
 
@@ -85,9 +89,9 @@ function SidebarButton(props: SidebarButtonProps) {
         <IconContainer
           className={`t--sidebar-${title || tooltip}`}
           data-selected={selected}
+          data-testid={"t--sidebar-" + props.testId}
           onClick={handleOnClick}
           role="button"
-          selected={selected}
         >
           <Icon name={icon} size="lg" />
           {condition && (

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

@@ -31,11 +31,11 @@ export enum EditorState {
 }
 
 export const SidebarTopButtonTitles = {
-  DATA: "Data",
   EDITOR: "Editor",
 };
 
 export const SidebarBottomButtonTitles = {
+  DATA: "Datasources",
   SETTINGS: "Settings",
   LIBRARIES: "Libraries",
 };
@@ -62,27 +62,31 @@ export const TopButtons: IDESidebarButton[] = [
     state: EditorState.EDITOR,
     icon: "editor-v3",
     title: SidebarTopButtonTitles.EDITOR,
+    testId: SidebarTopButtonTitles.EDITOR,
     urlSuffix: "",
   },
+];
+
+export const BottomButtons: IDESidebarButton[] = [
   {
     state: EditorState.DATA,
     icon: "datasource-v3",
-    title: SidebarTopButtonTitles.DATA,
+    tooltip: SidebarBottomButtonTitles.DATA,
+    testId: SidebarBottomButtonTitles.DATA,
     urlSuffix: "datasource",
   },
-];
-
-export const BottomButtons: IDESidebarButton[] = [
   {
     state: EditorState.LIBRARIES,
     icon: "packages-v3",
     tooltip: SidebarBottomButtonTitles.LIBRARIES,
+    testId: SidebarBottomButtonTitles.LIBRARIES,
     urlSuffix: "libraries",
   },
   {
     state: EditorState.SETTINGS,
     icon: "settings-v3",
     tooltip: SidebarBottomButtonTitles.SETTINGS,
+    testId: SidebarBottomButtonTitles.SETTINGS,
     urlSuffix: "settings",
   },
 ];

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { createMessage, EDITOR_PANE_TEXTS } from "ee/constants/messages";
 import { EditorEntityTab } from "ee/entities/IDE/constants";
 import { useCurrentEditorState, useSegmentNavigation } from "../../hooks";
@@ -8,23 +8,30 @@ const SegmentSwitcher = () => {
   const { segment } = useCurrentEditorState();
   const { onSegmentChange } = useSegmentNavigation();
 
+  const segmentOptions = useMemo(() => {
+    return [
+      {
+        label: createMessage(EDITOR_PANE_TEXTS.queries_tab),
+        startIcon: "queries-line",
+        value: EditorEntityTab.QUERIES,
+      },
+      {
+        label: createMessage(EDITOR_PANE_TEXTS.js_tab),
+        startIcon: "content-type-json",
+        value: EditorEntityTab.JS,
+      },
+      {
+        label: createMessage(EDITOR_PANE_TEXTS.ui_tab),
+        startIcon: "dashboard-line",
+        value: EditorEntityTab.UI,
+      },
+    ];
+  }, []);
+
   return (
     <EditorSegments
       onSegmentChange={onSegmentChange}
-      options={[
-        {
-          label: createMessage(EDITOR_PANE_TEXTS.queries_tab),
-          value: EditorEntityTab.QUERIES,
-        },
-        {
-          label: createMessage(EDITOR_PANE_TEXTS.js_tab),
-          value: EditorEntityTab.JS,
-        },
-        {
-          label: createMessage(EDITOR_PANE_TEXTS.ui_tab),
-          value: EditorEntityTab.UI,
-        },
-      ]}
+      options={segmentOptions}
       selectedSegment={segment}
     />
   );

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

@@ -26,11 +26,11 @@ function Sidebar() {
   const datasources = useSelector(getDatasources);
   const datasourcesExist = datasources.length > 0;
 
-  // Updates the top button config based on datasource existence
-  const topButtons = React.useMemo(() => {
+  // Updates the bottom button config based on datasource existence
+  const bottomButtons = React.useMemo(() => {
     return datasourcesExist
-      ? TopButtons
-      : TopButtons.map((button) => {
+      ? BottomButtons
+      : BottomButtons.map((button) => {
           if (button.state === EditorState.DATA) {
             return {
               ...button,
@@ -64,11 +64,11 @@ function Sidebar() {
 
   return (
     <IDESidebar
-      bottomButtons={BottomButtons}
+      bottomButtons={bottomButtons}
       editorState={appState}
       id={"t--app-sidebar"}
       onClick={onClick}
-      topButtons={topButtons}
+      topButtons={TopButtons}
     />
   );
 }