feat: move building blocks to bottom of widget explorer

app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts

@@ -1,10 +1,8 @@
 import {
-  entityExplorer,
   agHelper,
+  entityExplorer,
   locators,
-  draggableWidgets,
 } from "../../../../support/Objects/ObjectsCore";
-import { PageLeftPane } from "../../../../support/Pages/EditorNavigation";
 
 describe(
   "Entity explorer tests related to widgets and validation",

app/client/src/constants/WidgetConstants.tsx

@@ -229,7 +229,6 @@ export const MAX_MODAL_WIDTH_FROM_MAIN_WIDTH = 0.95;
 export const FILE_SIZE_LIMIT_FOR_BLOBS = 5000 * 1024; // 5MB
 
 export const WIDGET_TAGS = {
-  BUILDING_BLOCKS: "Building Blocks",
   SUGGESTED_WIDGETS: "Suggested",
   INPUTS: "Inputs",
   BUTTONS: "Buttons",
@@ -241,6 +240,7 @@ export const WIDGET_TAGS = {
   SLIDERS: "Sliders",
   CONTENT: "Content",
   EXTERNAL: "External",
+  BUILDING_BLOCKS: "Building Blocks",
 } as const;
 
 export type WidgetTags = (typeof WIDGET_TAGS)[keyof typeof WIDGET_TAGS];

app/client/src/layoutSystems/common/dropTarget/OnBoarding/OnBoarding.test.tsx

@@ -56,42 +56,33 @@ describe("OnBoarding - Non-AirGap Edition", () => {
     expect(title).toBeInTheDocument();
   });
 
-  it("2. renders the onboarding component when drag and drop is enabled", () => {
+  it("2. does not render onboarding component when in preview mode", () => {
     mockUseCurrentEditorStatePerTestCase(EditorEntityTab.UI);
-    render(BaseComponentRender(storeToUseWithDragDropBuildingBlocksEnabled));
-    const title = screen.getByText(
-      createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_BUILDING_BLOCK_HINT.TITLE),
-    );
-    expect(title).toBeInTheDocument();
-    const description = screen.getByText(
-      createMessage(
-        EMPTY_CANVAS_HINTS.DRAG_DROP_BUILDING_BLOCK_HINT.DESCRIPTION,
-      ),
-    );
-    expect(description).toBeInTheDocument();
-  });
-
-  it("4. renders the onboarding component when drag and drop is enabled, with JS segment enabled", () => {
-    mockUseCurrentEditorStatePerTestCase(EditorEntityTab.JS);
-    render(BaseComponentRender(storeToUseWithDragDropBuildingBlocksEnabled));
+    const previewModeStore = {
+      ...storeToUseWithDragDropBuildingBlocksEnabled,
+      ui: {
+        ...storeToUseWithDragDropBuildingBlocksEnabled.ui,
+        gitSync: {
+          protectedBranches: false,
+        },
+        editor: {
+          isPreviewMode: true,
+        },
+      },
+    };
+    render(BaseComponentRender(previewModeStore));
 
-    const onboardingElement = screen.getByText(
-      createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT),
+    const buildingBlockOnboardingElement = screen.queryByText(
+      createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_BUILDING_BLOCK_HINT.TITLE),
     );
-    expect(onboardingElement).toBeInTheDocument();
-  });
-
-  it("5. renders the onboarding component when drag and drop is enabled, with Queries segment enabled", () => {
-    mockUseCurrentEditorStatePerTestCase(EditorEntityTab.QUERIES);
-    render(BaseComponentRender(storeToUseWithDragDropBuildingBlocksEnabled));
-
-    const onboardingElement = screen.getByText(
+    const onboardingElement = screen.queryByText(
       createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT),
     );
+    expect(buildingBlockOnboardingElement).not.toBeInTheDocument();
     expect(onboardingElement).toBeInTheDocument();
   });
 
-  it("6. does not render onboarding component when in preview mode", () => {
+  it("3. does not render onboarding component when in preview mode", () => {
     mockUseCurrentEditorStatePerTestCase(EditorEntityTab.UI);
     const previewModeStore = {
       ...storeToUseWithDragDropBuildingBlocksEnabled,

app/client/src/layoutSystems/common/dropTarget/OnBoarding/index.tsx

@@ -2,54 +2,9 @@ import {
   EMPTY_CANVAS_HINTS,
   createMessage,
 } from "@appsmith/constants/messages";
-import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
-import {
-  EditorEntityTab,
-  EditorState as IDEAppState,
-} from "@appsmith/entities/IDE/constants";
-import { isAirgapped } from "@appsmith/utils/airgapHelpers";
-import {
-  useCurrentAppState,
-  useCurrentEditorState,
-} from "pages/Editor/IDE/hooks";
-import React, { useMemo } from "react";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import BuildingBlockExplorerDropTarget from "../buildingBlockExplorerDropTarget";
-import { useSelector } from "react-redux";
-import { combinedPreviewModeSelector } from "selectors/editorSelectors";
+import React from "react";
 
 function Onboarding() {
-  const appState = useCurrentAppState();
-  const isPreviewMode = useSelector(combinedPreviewModeSelector);
-  const isAirgappedInstance = isAirgapped();
-  const { segment } = useCurrentEditorState();
-
-  const releaseDragDropBuildingBlocksEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_drag_drop_building_blocks_enabled,
-  );
-
-  const isEditorState = appState === IDEAppState.EDITOR;
-  const isUISegment = segment === EditorEntityTab.UI;
-
-  const shouldShowBuildingBlocksDropTarget = useMemo(
-    () =>
-      !isAirgappedInstance &&
-      isEditorState &&
-      isUISegment &&
-      !isPreviewMode &&
-      releaseDragDropBuildingBlocksEnabled,
-    [
-      isEditorState,
-      releaseDragDropBuildingBlocksEnabled,
-      isUISegment,
-      isPreviewMode,
-      isAirgappedInstance,
-    ],
-  );
-
-  if (shouldShowBuildingBlocksDropTarget) {
-    return <BuildingBlockExplorerDropTarget />;
-  }
   return (
     <h2 className="absolute top-0 left-0 right-0 flex items-end h-108 justify-center text-2xl font-bold text-gray-300">
       {createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT)}