chore: Move Sidebar to IDE/Components

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

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import Resizer, {
   ResizerCSS,
 } from "components/editorComponents/Debugger/Resizer";
-import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/constants";
-import { ViewHideBehaviour, ViewDisplayMode } from "IDE/Interfaces/View";
+import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/styledComponents";
+import { ViewDisplayMode, ViewHideBehaviour } from "IDE/Interfaces/View";
 import { Button } from "design-system";
 
 const VIEW_MIN_HEIGHT = 38;

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

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import SidebarButton from "./SidebarButton";
+import type { EditorState } from "@appsmith/entities/IDE/constants";
+import type { SidebarButtonProps } from "./SidebarButton/SidebarButton";
+import { Flex } from "design-system";
+
+const Container = styled(Flex)`
+  width: 50px;
+  border-right: 1px solid var(--ads-v2-color-border);
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--ads-v2-color-bg);
+  position: relative;
+`;
+
+// Sidebar handles the correct handling of sidebar button. It will check if
+// the button should be selected and only handle calling the onClick
+export interface IDESidebarButton
+  extends Omit<SidebarButtonProps, "onClick" | "selected"> {
+  state: EditorState;
+  urlSuffix: string;
+}
+
+interface IDESidebarProps {
+  id?: string;
+  topButtons: IDESidebarButton[];
+  bottomButtons: IDESidebarButton[];
+  editorState: EditorState;
+  onClick: (suffix: string) => void;
+}
+
+function IDESidebar(props: IDESidebarProps) {
+  const { bottomButtons, editorState, onClick, topButtons } = props;
+
+  return (
+    <Container className="t--sidebar" id={props.id}>
+      <div>
+        {topButtons.map((button) => (
+          <SidebarButton
+            icon={button.icon}
+            key={button.state}
+            onClick={onClick}
+            selected={editorState === button.state}
+            title={button.title}
+            tooltip={button.tooltip}
+            urlSuffix={button.urlSuffix}
+          />
+        ))}
+      </div>
+      <div>
+        {bottomButtons.map((button) => (
+          <SidebarButton
+            icon={button.icon}
+            key={button.state}
+            onClick={onClick}
+            selected={editorState === button.state}
+            title={button.title}
+            tooltip={button.tooltip}
+            urlSuffix={button.urlSuffix}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+export default IDESidebar;

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

@@ -0,0 +1,26 @@
+import { render } from "test/testUtils";
+import React from "react";
+import SidebarButton, { type SidebarButtonProps } from "./SidebarButton";
+
+import { Condition } from "../../../enums";
+
+const sidebarButtonProps: SidebarButtonProps = {
+  icon: "down-arrow",
+  onClick: () => {},
+  selected: false,
+  title: "Test",
+};
+
+describe("SidebarButton", () => {
+  it("should render the warning icon in case the datasource list is empty", () => {
+    const withWarningCondition = {
+      ...sidebarButtonProps,
+      condition: Condition.Warn,
+    };
+
+    const { container } = render(<SidebarButton {...withWarningCondition} />);
+
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,105 @@
+import React, { useCallback } from "react";
+import { Flex, Icon, Text, Tooltip } from "design-system";
+import styled from "styled-components";
+
+import { Condition } from "../../../enums";
+
+const ConditionConfig: Record<Condition, { icon: string; color: string }> = {
+  [Condition.Warn]: {
+    icon: "warning",
+    color: "#ffe283",
+  },
+  // TODO add this information for further conditions
+  // Error: { color: "", icon: "" },
+  // Success: { color: "", icon: "" },
+};
+
+export interface SidebarButtonProps {
+  title?: string;
+  selected: boolean;
+  icon: string;
+  onClick: (urlSuffix: string) => void;
+  urlSuffix: string;
+  tooltip?: string;
+  condition?: Condition;
+}
+
+const Container = styled(Flex)`
+  justify-content: center;
+  flex-direction: column;
+  width: 50px;
+  text-align: center;
+  align-items: center;
+  padding: 8px 0;
+`;
+
+const IconContainer = styled.div<{ selected: boolean }>`
+  padding: 2px;
+  background-color: ${(props) =>
+    props.selected ? "var(--colors-raw-orange-100, #fbe6dc)" : "white"};
+  border-radius: 3px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: ${(props) =>
+      props.selected
+        ? "var(--colors-raw-orange-100, #fbe6dc)"
+        : "var(--ads-v2-color-bg-subtle, #f1f5f9);"};
+  }
+`;
+
+const ConditionIcon = styled(Icon)`
+  position: absolute;
+  bottom: 3px;
+  right: -1px;
+
+  &.t--sidebar-${Condition.Warn}-condition-icon {
+    color: ${ConditionConfig[Condition.Warn].color};
+  }
+
+  // TODO add more condition colors here
+`;
+
+function SidebarButton(props: SidebarButtonProps) {
+  const { condition, icon, onClick, selected, title, tooltip, urlSuffix } =
+    props;
+  const handleOnClick = useCallback(() => {
+    if (!selected) {
+      onClick(urlSuffix);
+    }
+  }, [selected, onClick, urlSuffix]);
+  return (
+    <Container>
+      <Tooltip
+        content={tooltip}
+        isDisabled={!!title && !tooltip}
+        placement={"right"}
+      >
+        <IconContainer
+          className={`t--sidebar-${title || tooltip}`}
+          data-selected={selected}
+          onClick={handleOnClick}
+          selected={selected}
+        >
+          <Icon name={icon} size="lg" />
+          {condition && (
+            <ConditionIcon
+              className={`t--sidebar-${condition}-condition-icon`}
+              name={ConditionConfig[condition].icon}
+              size="md"
+            />
+          )}
+        </IconContainer>
+      </Tooltip>
+      {title ? <Text kind="body-s">{title}</Text> : null}
+    </Container>
+  );
+}
+
+export default SidebarButton;

app/client/src/IDE/Components/Sidebar/SidebarButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./SidebarButton";

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

@@ -0,0 +1,2 @@
+export { default } from "./Sidebar";
+export type { IDESidebarButton } from "./Sidebar";

app/client/src/IDE/enums.ts

@@ -0,0 +1,5 @@
+export enum Condition {
+  Warn = "Warn",
+  // Error = "Error",
+  // Success = "Success",
+}

app/client/src/IDE/index.ts

@@ -40,9 +40,17 @@ export { default as IDEHeaderDropdown } from "./Components/HeaderDropdown";
  */
 export { default as IDEBottomView } from "./Components/BottomView";
 
+/**
+ * IDESidebar is used inside the IDE to have a navigation menu on the left side of the screen.
+ * It switches between different editor states
+ */
+export { default as IDESidebar } from "./Components/Sidebar";
+
 /* ====================================================
     **** Interfaces ****
     Common types that are used by the different components of the IDE
 =======================================================**/
 
 export { ViewHideBehaviour, ViewDisplayMode } from "./Interfaces/View";
+export { Condition } from "./enums";
+export type { IDESidebarButton } from "./Components/Sidebar";

app/client/src/api/LibraryAPI.tsx

@@ -21,7 +21,7 @@ export default class LibraryApi extends Api {
     library: Partial<JSLibrary>,
   ) {
     const url = LibraryApi.getUpdateLibraryBaseURL(applicationId) + "/remove";
-    return Api.patch(url, { accessor: library.accessor, url: library.url });
+    return Api.patch(url, library);
   }
 
   static async getLibraries(applicationId: string, mode: APP_MODE) {

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

@@ -21,11 +21,8 @@ import {
   SAAS_EDITOR_DATASOURCE_ID_PATH,
 } 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";
+import type { ComponentType, ReactNode } from "react";
+import type { IDESidebarButton } from "IDE";
 
 export enum EditorState {
   DATA = "DATA",
@@ -61,20 +58,7 @@ 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[] = [
+export const TopButtons: IDESidebarButton[] = [
   {
     state: EditorState.EDITOR,
     icon: "editor-v3",
@@ -86,22 +70,20 @@ export const TopButtons: SidebarButton[] = [
     icon: "datasource-v3",
     title: SidebarTopButtonTitles.DATA,
     urlSuffix: "datasource",
-    conditionType: SideButtonType.DATSOURCE,
-    conditionTooltip: createMessage(EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON),
   },
 ];
 
-export const BottomButtons: SidebarButton[] = [
+export const BottomButtons: IDESidebarButton[] = [
   {
     state: EditorState.LIBRARIES,
     icon: "packages-v3",
-    title: SidebarBottomButtonTitles.LIBRARIES,
+    tooltip: SidebarBottomButtonTitles.LIBRARIES,
     urlSuffix: "libraries",
   },
   {
     state: EditorState.SETTINGS,
     icon: "settings-v3",
-    title: SidebarBottomButtonTitles.SETTINGS,
+    tooltip: SidebarBottomButtonTitles.SETTINGS,
     urlSuffix: "settings",
   },
 ];

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

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { builderURL } from "@appsmith/RouteBuilder";
+import { getCurrentPageId } from "selectors/editorSelectors";
+import history, { NavigationMethod } from "utils/history";
+import { useCurrentAppState } from "./hooks";
+import { getCurrentWorkspaceId } from "@appsmith/selectors/selectedWorkspaceSelectors";
+import { fetchWorkspace } from "@appsmith/actions/workspaceActions";
+import { IDESidebar, Condition } from "IDE";
+import {
+  BottomButtons,
+  EditorState,
+  TopButtons,
+} from "@appsmith/entities/IDE/constants";
+import { getDatasources } from "@appsmith/selectors/entitiesSelector";
+import {
+  createMessage,
+  EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON,
+} from "@appsmith/constants/messages";
+
+function Sidebar() {
+  const dispatch = useDispatch();
+  const appState = useCurrentAppState();
+  const pageId = useSelector(getCurrentPageId);
+  const currentWorkspaceId = useSelector(getCurrentWorkspaceId);
+  const datasources = useSelector(getDatasources);
+  const datasourcesExist = datasources.length > 0;
+
+  // Updates the top button config based on datasource existence
+  const topButtons = React.useMemo(() => {
+    return datasourcesExist
+      ? TopButtons
+      : TopButtons.map((button) => {
+          if (button.state === EditorState.DATA) {
+            return {
+              ...button,
+              condition: Condition.Warn,
+              tooltip: createMessage(EMPTY_DATASOURCE_TOOLTIP_SIDEBUTTON),
+            };
+          }
+          return button;
+        });
+  }, [datasourcesExist]);
+
+  useEffect(() => {
+    dispatch(fetchWorkspace(currentWorkspaceId));
+  }, [currentWorkspaceId, dispatch]);
+
+  const onClick = useCallback(
+    (suffix) => {
+      history.push(
+        builderURL({
+          pageId,
+          suffix,
+        }),
+        {
+          invokedBy: NavigationMethod.AppSidebar,
+        },
+      );
+    },
+    [pageId],
+  );
+
+  return (
+    <IDESidebar
+      bottomButtons={BottomButtons}
+      editorState={appState}
+      id={"t--app-sidebar"}
+      onClick={onClick}
+      topButtons={topButtons}
+    />
+  );
+}
+
+export default Sidebar;