chore: Make App Sidebar Generally Available

app/client/src/actions/appSettingsPaneActions.ts

@@ -1,22 +1,5 @@
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import type {
-  AppSettingsPaneContext,
-  AppSettingsPaneReduxState,
-} from "reducers/uiReducers/appSettingsPaneReducer";
-import type { Action } from "redux";
-
-export const openAppSettingsPaneAction = (context?: AppSettingsPaneContext) => {
-  return {
-    type: ReduxActionTypes.OPEN_APP_SETTINGS_PANE,
-    payload: context,
-  };
-};
-
-export const closeAppSettingsPaneAction = (): Action => {
-  return {
-    type: ReduxActionTypes.CLOSE_APP_SETTINGS_PANE,
-  };
-};
+import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer";
 
 export const updateAppSettingsPaneSelectedTabAction = (
   payload: AppSettingsPaneReduxState,

app/client/src/ce/entities/FeatureFlag.ts

@@ -22,7 +22,6 @@ export const FEATURE_FLAG = {
   release_anvil_enabled: "release_anvil_enabled",
   ab_show_templates_instead_of_blank_canvas_enabled:
     "ab_show_templates_instead_of_blank_canvas_enabled",
-  release_app_sidebar_enabled: "release_app_sidebar_enabled",
   release_server_dsl_migrations_enabled:
     "release_server_dsl_migrations_enabled",
   license_git_branch_protection_enabled:
@@ -36,9 +35,6 @@ export const FEATURE_FLAG = {
   license_widget_rtl_support_enabled: "license_widget_rtl_support_enabled",
   release_custom_widgets_enabled: "release_custom_widgets_enabled",
   ab_create_new_apps_enabled: "ab_create_new_apps_enabled",
-  release_show_new_sidebar_announcement_enabled:
-    "release_show_new_sidebar_announcement_enabled",
-  rollout_app_sidebar_enabled: "rollout_app_sidebar_enabled",
   release_show_partial_import_export_enabled:
     "release_show_partial_import_export_enabled",
   release_show_new_sidebar_pages_pane_enabled:
@@ -77,7 +73,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_gac_enabled: false,
   release_anvil_enabled: false,
   ab_show_templates_instead_of_blank_canvas_enabled: false,
-  release_app_sidebar_enabled: false,
   release_server_dsl_migrations_enabled: false,
   license_git_branch_protection_enabled: false,
   release_git_autocommit_feature_enabled: false,
@@ -86,8 +81,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_widget_rtl_support_enabled: false,
   release_custom_widgets_enabled: false,
   ab_create_new_apps_enabled: false,
-  release_show_new_sidebar_announcement_enabled: false,
-  rollout_app_sidebar_enabled: false,
   release_show_partial_import_export_enabled: false,
   release_show_new_sidebar_pages_pane_enabled: false,
   ab_one_click_learning_popover_enabled: false,

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts

@@ -24,7 +24,6 @@ import {
   WIDGETS_EDITOR_ID_PATH,
 } from "constants/routes";
 import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
-import IntegrationEditor from "pages/Editor/IntegrationEditor";
 import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist";
 import ApiEditor from "pages/Editor/APIEditor";
 import QueryEditor from "pages/Editor/QueryEditor";
@@ -42,7 +41,6 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
 import GeneratePage from "pages/Editor/GeneratePage";
 import type { RouteProps } from "react-router";
-import { useIsAppSidebarEnabled } from "navigation/featureFlagHooks";
 import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 import { useSelector } from "react-redux";
@@ -59,7 +57,6 @@ export interface RouteReturnType extends RouteProps {
  */
 
 function useRoutes(path: string): RouteReturnType[] {
-  const isAppSidebarEnabled = useIsAppSidebarEnabled();
   const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const editorMode = useSelector(getIDEViewMode);
 
@@ -104,9 +101,7 @@ function useRoutes(path: string): RouteReturnType[] {
       },
       {
         key: "Datasource Create and Active",
-        component: isAppSidebarEnabled
-          ? CreateNewDatasourceTab
-          : IntegrationEditor,
+        component: CreateNewDatasourceTab,
         exact: true,
         path: `${path}${INTEGRATION_EDITOR_PATH}`,
       },
@@ -159,9 +154,7 @@ function useRoutes(path: string): RouteReturnType[] {
     },
     {
       key: "Datasource Create and Active",
-      component: isAppSidebarEnabled
-        ? CreateNewDatasourceTab
-        : IntegrationEditor,
+      component: CreateNewDatasourceTab,
       exact: true,
       path: `${path}${INTEGRATION_EDITOR_PATH}`,
     },

app/client/src/ce/pages/Editor/routes.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from "react";
 import { Route, Switch } from "react-router-dom";
 import { useLocation, useRouteMatch } from "react-router";
 import ApiEditor from "pages/Editor/APIEditor";
-import IntegrationEditor from "pages/Editor/IntegrationEditor";
 import QueryEditor from "pages/Editor/QueryEditor";
 import JSEditor from "pages/Editor/JSEditor";
 import GeneratePage from "pages/Editor/GeneratePage";
@@ -23,15 +22,13 @@ import { SaaSEditorRoutes } from "pages/Editor/SaaSEditor/routes";
 import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist";
 import { DatasourceEditorRoutes } from "pages/routes";
 import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor";
-import CreateNewDatasourceTab from "../../../pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
-import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
+import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
 function EditorRoutes() {
   const { path } = useRouteMatch();
   const { pathname } = useLocation();
-  const isAppSidebarEnabled = useIsAppSidebarEnabled();
 
   useEffect(() => {
     return () => {
@@ -45,9 +42,7 @@ function EditorRoutes() {
   return (
     <Switch key={path}>
       <SentryRoute
-        component={
-          isAppSidebarEnabled ? CreateNewDatasourceTab : IntegrationEditor
-        }
+        component={CreateNewDatasourceTab}
         exact
         path={`${path}${INTEGRATION_EDITOR_PATH}`}
       />

app/client/src/components/editorComponents/EntityExplorerSidebar.tsx

@@ -13,26 +13,19 @@ import { useDispatch, useSelector } from "react-redux";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
-import {
-  setExplorerActiveAction,
-  updateExplorerWidthAction,
-} from "actions/explorerActions";
+import { updateExplorerWidthAction } from "actions/explorerActions";
 import {
   getExplorerActive,
-  getExplorerPinned,
   getExplorerWidth,
 } from "selectors/explorerSelector";
 import { tailwindLayers } from "constants/Layers";
 import { Tooltip } from "design-system";
 import useHorizontalResize from "utils/hooks/useHorizontalResize";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { SIDEBAR_ID } from "constants/Explorer";
-import { EntityClassNames } from "pages/Editor/Explorer/Entity";
-import { getEditingEntityName } from "@appsmith/selectors/entitiesSelector";
 import styled from "styled-components";
 import moment from "moment";
 import AnalyticsUtil from "../../utils/AnalyticsUtil";
-import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks";
 
 const StyledResizer = styled.div<{ resizing: boolean }>`
   ${(props) =>
@@ -59,8 +52,6 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
   const width = useSelector(getExplorerWidth);
   const active = useSelector(getExplorerActive);
   const sidebarRef = useRef<HTMLDivElement>(null);
-  const pinned = useSelector(getExplorerPinned);
-  const isAppSidebarEnabled = useIsAppSidebarEnabled();
 
   /**
    * on entity explorer sidebar width change
@@ -82,82 +73,11 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
 
   const resizer = useHorizontalResize(sidebarRef, onWidthChange, onDragEnd);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
-  const isEditingEntityName = useSelector(getEditingEntityName);
   PerformanceTracker.startTracking(PerformanceTransactionName.SIDE_BAR_MOUNT);
   useEffect(() => {
     PerformanceTracker.stopTracking();
   });
 
-  // registering event listeners
-  useEffect(() => {
-    document.addEventListener("mousemove", onMouseMove);
-
-    return () => {
-      document.removeEventListener("mousemove", onMouseMove);
-    };
-  }, [active, pinned, resizer.resizing, isEditingEntityName]);
-
-  /**
-   * passing the event to touch move on mouse move
-   *
-   * @param event
-   */
-  const onMouseMove = (event: MouseEvent) => {
-    const eventWithTouches = Object.assign({}, event, {
-      touches: [{ clientX: event.clientX, clientY: event.clientY }],
-    });
-    onTouchMove(eventWithTouches);
-  };
-
-  /**
-   * Is a context menu of any of the explorer entities open
-   */
-  const isContextMenuOpen = () => {
-    const menus = document.getElementsByClassName(
-      EntityClassNames.CONTEXT_MENU_CONTENT,
-    );
-    const node = menus[0];
-    if (!document.body.contains(node)) {
-      return false;
-    }
-
-    return true;
-  };
-
-  /**
-   * calculate the new width based on the pixel moved
-   *
-   * @param event
-   */
-  const onTouchMove = (
-    event:
-      | TouchEvent
-      | (MouseEvent & { touches: { clientX: number; clientY: number }[] }),
-  ) => {
-    const currentX = event.touches[0].clientX;
-
-    // only calculate the following in unpin mode
-    if (!pinned) {
-      if (active) {
-        // if user cursor is out of the entity explorer width ( with some extra window = 20px ), make the
-        // entity explorer inactive. Also, 20px here is to increase the window in which a user can drag the resizer
-        if (
-          currentX >= width + 20 &&
-          !resizer.resizing &&
-          !isContextMenuOpen() &&
-          !isEditingEntityName
-        ) {
-          dispatch(setExplorerActiveAction(false));
-        }
-      } else {
-        // check if user cursor is at extreme left when the explorer is inactive, if yes, make the explorer active
-        if (currentX <= 20) {
-          dispatch(setExplorerActiveAction(true));
-        }
-      }
-    }
-  };
-
   /**
    * on hover of resizer, show tooltip
    */
@@ -179,15 +99,15 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
    * resizer left position
    */
   const resizerLeft = useMemo(() => {
-    return !pinned && !active ? 0 : width;
-  }, [pinned, active, width]);
+    return !active ? 0 : width;
+  }, [active, width]);
 
   useEffect(() => {
     dispatch({
       type: ReduxActionTypes.SET_ENTITY_INFO,
       payload: { show: false },
     });
-  }, [resizerLeft, pinned]);
+  }, [resizerLeft]);
 
   const [hoverStartTime, setHoverStartTime] = useState(0);
 
@@ -206,13 +126,9 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
   return (
     <div
       className={classNames({
-        "js-entity-explorer t--entity-explorer transition-transform transform  flex h-full duration-400":
+        "js-entity-explorer t--entity-explorer transition-transform transform  flex h-full duration-400 relative":
           true,
-        "border-r": !isAppSidebarEnabled,
-        relative: pinned,
-        "-translate-x-80": !pinned && !active,
-        "shadow-xl": !pinned,
-        fixed: !pinned,
+        "-translate-x-80": !active,
       })}
       data-testid={active ? "sidebar-active" : "sidebar"}
       id={SIDEBAR_ID}

app/client/src/components/editorComponents/PropertyPaneSidebar.tsx

@@ -15,9 +15,6 @@ import { getIsDraggingForSelection } from "selectors/canvasSelectors";
 import MultiSelectPropertyPane from "pages/Editor/MultiSelectPropertyPane";
 import { getIsDraggingOrResizing } from "selectors/widgetSelectors";
 import { selectedWidgetsPresentInCanvas } from "selectors/propertyPaneSelectors";
-import { getIsAppSettingsPaneOpen } from "selectors/appSettingsPaneSelectors";
-import AppSettingsPane from "pages/Editor/AppSettingsPane";
-import { APP_SETTINGS_PANE_WIDTH } from "constants/AppConstants";
 import styled from "styled-components";
 import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
@@ -54,7 +51,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
 
   const selectedWidgetIds = useSelector(getSelectedWidgets);
   const isDraggingOrResizing = useSelector(getIsDraggingOrResizing);
-  const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
   const { isOpened: isWalkthroughOpened, popFeature } =
     useContext(WalkthroughContext) || {};
   //while dragging or resizing and
@@ -86,16 +82,13 @@ export const PropertyPaneSidebar = memo((props: Props) => {
 
   /**
    * renders the property pane:
-   * 1. if isAppSettingsPaneOpen -> AppSettingsPane
    * 2. if no widget is selected -> CanvasPropertyPane
    * 3. if more than one widget is selected -> MultiWidgetPropertyPane
    * 4. if user is dragging for selection -> CanvasPropertyPane
    * 5. if only one widget is selected -> WidgetPropertyPane
    */
   const propertyPane = useMemo(() => {
     switch (true) {
-      case isAppSettingsPaneOpen:
-        return <AppSettingsPane />;
       case selectedWidgetsLength > 1:
         return <MultiSelectPropertyPane />;
       case selectedWidgetsLength === 1:
@@ -107,7 +100,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
         return <CanvasPropertyPane />;
     }
   }, [
-    isAppSettingsPaneOpen,
     selectedWidgetsLength,
     isDraggingForSelection,
     shouldNotRenderPane,
@@ -138,33 +130,26 @@ export const PropertyPaneSidebar = memo((props: Props) => {
         ref={sidebarRef}
       >
         {/* RESIZER */}
-        {!isAppSettingsPaneOpen && (
-          <StyledResizer
-            className={`absolute top-0 left-0 w-2 h-full -ml-1 group cursor-ew-resize ${tailwindLayers.resizer}`}
-            onMouseDown={onMouseDown}
-            onTouchEnd={onMouseUp}
-            onTouchStart={onTouchStart}
-            resizing={resizing}
-          >
-            <div
-              className={classNames({
-                "w-1 h-full bg-transparent transform transition flex items-center":
-                  true,
-              })}
-            />
-          </StyledResizer>
-        )}
+        <StyledResizer
+          className={`absolute top-0 left-0 w-2 h-full -ml-1 group cursor-ew-resize ${tailwindLayers.resizer}`}
+          onMouseDown={onMouseDown}
+          onTouchEnd={onMouseUp}
+          onTouchStart={onTouchStart}
+          resizing={resizing}
+        >
+          <div
+            className={classNames({
+              "w-1 h-full bg-transparent transform transition flex items-center":
+                true,
+            })}
+          />
+        </StyledResizer>
         <div
           className={classNames({
-            "h-full p-0 overflow-y-auto min-w-72": true,
-            "max-w-104": !isAppSettingsPaneOpen,
+            "h-full p-0 overflow-y-auto min-w-72 max-w-104": true,
             "transition-all duration-100": !resizing,
           })}
-          style={{
-            width: isAppSettingsPaneOpen
-              ? APP_SETTINGS_PANE_WIDTH
-              : props.width,
-          }}
+          style={{ width: props.width }}
         >
           {propertyPane}
         </div>