From e8cb460b77bc20be60dd4d256fbe7a440b0f4e05 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Thu, 1 Aug 2024 14:01:40 +0100 Subject: [PATCH] feat: move building blocks to bottom of widget explorer (#35270) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: e0aac0ea572e34716e8613a272c5ba0cadbd6fde > Cypress dashboard. > Tags: `@tag.IDE, @tag.Widget, @tag.Templates` > Spec: >
Wed, 31 Jul 2024 21:39:07 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../ExplorerTests/Widgets_Sidebar.ts | 4 +- app/client/src/constants/WidgetConstants.tsx | 2 +- .../dropTarget/OnBoarding/OnBoarding.test.tsx | 47 ++++++++----------- .../common/dropTarget/OnBoarding/index.tsx | 47 +------------------ .../Editor/widgetSidebar/UIEntitySidebar.tsx | 11 +---- .../tests/UIEntitySidebar.test.tsx | 6 +-- 6 files changed, 27 insertions(+), 90 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts index 976f64110c..87eb4c5ce0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts +++ b/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", diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index 15886b63d5..f5ff857584 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/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]; diff --git a/app/client/src/layoutSystems/common/dropTarget/OnBoarding/OnBoarding.test.tsx b/app/client/src/layoutSystems/common/dropTarget/OnBoarding/OnBoarding.test.tsx index d8ff159f9c..8920db9ec7 100644 --- a/app/client/src/layoutSystems/common/dropTarget/OnBoarding/OnBoarding.test.tsx +++ b/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, diff --git a/app/client/src/layoutSystems/common/dropTarget/OnBoarding/index.tsx b/app/client/src/layoutSystems/common/dropTarget/OnBoarding/index.tsx index e5499e36a8..571676212d 100644 --- a/app/client/src/layoutSystems/common/dropTarget/OnBoarding/index.tsx +++ b/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 ; - } return (

{createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT)} diff --git a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx index 1f666b47ba..1188a6feb3 100644 --- a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx +++ b/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(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( diff --git a/app/client/src/pages/Editor/widgetSidebar/tests/UIEntitySidebar.test.tsx b/app/client/src/pages/Editor/widgetSidebar/tests/UIEntitySidebar.test.tsx index 4b40346ec2..1d041fe20d 100644 --- a/app/client/src/pages/Editor/widgetSidebar/tests/UIEntitySidebar.test.tsx +++ b/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(); }); });