feat: move building blocks to bottom of widget explorer (#35270)

## Description
**Problem**
While we don't have the configuration interface for blocks, we should
make them available as we have other regular widgets, but we shouldn't
promote them for new users, since they are not able to easily modify
them.
Remove the building blocks empty state that is creating confusion.

**Solution**
1. Move the building blocks group to the bottom of the widget sidebar
2. Adjust tests to suit new demands

Fixes #34964

## Automation

/ok-to-test tags="@tag.IDE, @tag.Widget, @tag.Templates"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10187244230>
> Commit: e0aac0ea572e34716e8613a272c5ba0cadbd6fde
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10187244230&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE, @tag.Widget, @tag.Templates`
> Spec:
> <hr>Wed, 31 Jul 2024 21:39:07 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Simplified the onboarding component to display static content instead
of dynamic behavior based on application state.
  
- **Bug Fixes**
- Updated test cases for the onboarding component to ensure it does not
render in preview mode, enhancing accuracy in expected behavior.
- Revised tests to reflect changes in the visibility of the suggested
widgets based on feature flag settings.

- **Chores**
- Minor reorganization of import statements and constants for clarity
without affecting functionality.
- Streamlined the visibility logic of suggested widgets by removing
unnecessary feature flag dependencies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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(
+    const previewModeStore = {
+      ...storeToUseWithDragDropBuildingBlocksEnabled,
+      ui: {
+        ...storeToUseWithDragDropBuildingBlocksEnabled.ui,
+        gitSync: {
+          protectedBranches: false,
+        },
+        editor: {
+          isPreviewMode: true,
+        },
+      },
+    };
+    render(BaseComponentRender(previewModeStore));
+
+    const buildingBlockOnboardingElement = screen.queryByText(
       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 onboardingElement = screen.getByText(
+    const onboardingElement = screen.queryByText(
       createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT),
     );
+    expect(buildingBlockOnboardingElement).not.toBeInTheDocument();
     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(
-      createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT),
-    );
-    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)}

app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx

@@ -3,7 +3,6 @@ import {
   WIDGET_PANEL_EMPTY_MESSAGE,
   createMessage,
 } from "@appsmith/constants/messages";
-import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
 import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
 import type {
@@ -15,7 +14,6 @@ import { Flex, SearchInput, Text } from "design-system";
 import Fuse from "fuse.js";
 import { debounce } from "lodash";
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { groupWidgetCardsByTags } from "../utils";
 import UIEntityTagGroup from "./UIEntityTagGroup";
 import { useUIExplorerItems } from "./hooks";
@@ -33,14 +31,9 @@ function UIEntitySidebar({
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const [isSearching, setIsSearching] = useState(false);
   const [areSearchResultsEmpty, setAreSearchResultsEmpty] = useState(false);
-  const isDragDropBuildingBlocksEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_drag_drop_building_blocks_enabled,
-  );
   const hideSuggestedWidgets = useMemo(
-    () =>
-      (isSearching && !areSearchResultsEmpty) ||
-      isDragDropBuildingBlocksEnabled,
-    [isSearching, areSearchResultsEmpty, isDragDropBuildingBlocksEnabled],
+    () => isSearching && !areSearchResultsEmpty,
+    [isSearching, areSearchResultsEmpty],
   );
 
   const searchWildcards = useMemo(

app/client/src/pages/Editor/widgetSidebar/tests/UIEntitySidebar.test.tsx

@@ -121,10 +121,10 @@ describe("UIEntitySidebar", () => {
     });
   });
 
-  it("5. should hide `Suggested` when drag drop building blocks feature flag is enabled", () => {
+  it("5. should show `Suggested` when drag drop building blocks feature flag is enabled", () => {
     mockUIExplorerItems();
     mockDragDropBuildingBlocksFF(true);
-    const { queryByText } = renderUIEntitySidebar(true, true);
-    expect(queryByText(WIDGET_TAGS.SUGGESTED_WIDGETS)).toBeNull();
+    const { getByText } = renderUIEntitySidebar(true, true);
+    expect(getByText(WIDGET_TAGS.SUGGESTED_WIDGETS)).toBeInTheDocument();
   });
 });