diff --git a/app/client/cypress/support/Pages/EditorNavigation.ts b/app/client/cypress/support/Pages/EditorNavigation.ts index b175499aab32..971b607b1962 100644 --- a/app/client/cypress/support/Pages/EditorNavigation.ts +++ b/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']", diff --git a/app/client/cypress/support/Pages/IDE/Sidebar.ts b/app/client/cypress/support/Pages/IDE/Sidebar.ts index 00a75a1c7ca6..6d9d93c125f4 100644 --- a/app/client/cypress/support/Pages/IDE/Sidebar.ts +++ b/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[]) { diff --git a/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx b/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx index a93f7aa7fc9a..df71f94da913 100644 --- a/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx +++ b/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 { diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg index c0a187a04d2a..cadb81355910 100644 --- a/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/app/client/src/IDE/Components/Sidebar/Sidebar.tsx b/app/client/src/IDE/Components/Sidebar/Sidebar.tsx index 223a055eb655..7076171a5ff6 100644 --- a/app/client/src/IDE/Components/Sidebar/Sidebar.tsx +++ b/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} diff --git a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx b/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx index f2d181d80325..f583784d7431 100644 --- a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.test.tsx +++ b/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(); + + expect(getByTestId("t--sidebar-testId")).toBeDefined(); + }); + it("should render the warning icon in case the datasource list is empty", () => { const withWarningCondition = { ...sidebarButtonProps, diff --git a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx b/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx index 737d006e4f0c..24e299205580 100644 --- a/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx +++ b/app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx @@ -16,6 +16,7 @@ const ConditionConfig: Record = { 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) { {condition && ( diff --git a/app/client/src/ce/entities/IDE/constants.ts b/app/client/src/ce/entities/IDE/constants.ts index 0b19c02f6255..c16c9b826f49 100644 --- a/app/client/src/ce/entities/IDE/constants.ts +++ b/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", }, ]; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx index 3d4de90bfdd9..fa0df5e105c7 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx +++ b/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 ( ); diff --git a/app/client/src/pages/Editor/IDE/Sidebar.tsx b/app/client/src/pages/Editor/IDE/Sidebar.tsx index 455de72a5c99..c7d1fd4820c1 100644 --- a/app/client/src/pages/Editor/IDE/Sidebar.tsx +++ b/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 ( ); }