From 9753df54f4b0a609475fd805fba6e35793b00749 Mon Sep 17 00:00:00 2001 From: arunvjn <32433245+arunvjn@users.noreply.github.com> Date: Fri, 20 May 2022 10:32:13 +0530 Subject: [PATCH] fix: remove transition delay in the switch between explorer and widgets. (#13942) --- .../cypress/locators/commonlocators.json | 7 +- app/client/cypress/support/commands.js | 10 +-- .../components/editorComponents/Sidebar.tsx | 62 +-------------- app/client/src/constants/Explorer.ts | 1 + .../pages/Editor/Explorer/Entity/index.tsx | 4 +- .../pages/Editor/Explorer/EntityExplorer.tsx | 18 +++-- .../pages/Editor/Explorer/ExplorerSearch.tsx | 6 +- .../src/pages/Editor/Explorer/index.tsx | 76 +++++++++++++++---- .../FirstTimeUserOnboarding/Statusbar.tsx | 1 - app/client/src/pages/Editor/WidgetSidebar.tsx | 25 ++---- 10 files changed, 97 insertions(+), 113 deletions(-) diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 2f14d90c94..ff24170dff 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -74,6 +74,7 @@ "evaluatedType": ".t--CodeEditor-evaluatedValue > div:first-of-type pre", "evaluatedCurrentValue": "div:last-of-type .t--CodeEditor-evaluatedValue > div:last-of-type pre", "entityExplorersearch": "#entity-explorer-search", + "searchEntityInExplorer": "#search-entity", "entitySearchResult": ".t--entity-name:contains('", "saveStatusContainer": ".t--save-status-container", "saveStatusIsSaving": "t--save-status-is-saving", @@ -156,9 +157,9 @@ "debugErrorMsg": ".t--debugger-message", "tableButtonVariant": ".t--property-control-buttonvariant .bp3-popover-target", "debuggerLabel": "span.debugger-label", - "debuggerContextMenu":".t--debugger-contextual-error-menu", + "debuggerContextMenu": ".t--debugger-contextual-error-menu", "cyclicDependencyError": "//div[@class='Toastify']//span[contains(text(),'Cyclic dependency found while evaluating')]", - "openDocumentationfromErrorTab":"//span[@name='book-line']", + "openDocumentationfromErrorTab": "//span[@name='book-line']", "appNameDeployMenu": ".t--app-name-menu-deploy-parent", "appNameDeployMenuPublish": ".t--app-name-menu-deploy", "appNameDeployMenuCurrentVersion": ".t--app-name-menu-deploy-current-version", @@ -178,4 +179,4 @@ "saveThemeBtn": ".t--save-theme-btn", "selectThemeBackBtn": ".t--theme-select-back-btn", "themeAppBorderRadiusBtn": ".t--theme-appBorderRadius" -} +} \ No newline at end of file diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 1c6e433b5a..188e0f4c62 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -313,7 +313,7 @@ Cypress.Commands.add("SearchApp", (appname) => { }); Cypress.Commands.add("SearchEntity", (apiname1, apiname2) => { - cy.get(commonlocators.entityExplorersearch) + cy.get(commonlocators.searchEntityInExplorer) .clear({ force: true }) .type(apiname1, { force: true }); // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -329,7 +329,7 @@ Cypress.Commands.add("SearchEntity", (apiname1, apiname2) => { Cypress.Commands.add("GlobalSearchEntity", (apiname1, dontAssertVisibility) => { // entity explorer search will be hidden - cy.get(commonlocators.entityExplorersearch) + cy.get(commonlocators.searchEntityInExplorer) .clear({ force: true }) .type(apiname1, { force: true }); // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -413,7 +413,7 @@ Cypress.Commands.add("CheckAndUnfoldWidgets", () => { }); Cypress.Commands.add("SearchEntityandOpen", (apiname1) => { - cy.get(commonlocators.entityExplorersearch) + cy.get(commonlocators.searchEntityInExplorer) .clear({ force: true }) .type(apiname1, { force: true }); cy.CheckAndUnfoldWidgets(); @@ -432,7 +432,7 @@ Cypress.Commands.add("SearchEntityandOpen", (apiname1) => { }); Cypress.Commands.add("SearchEntityAndUnfold", (apiname1) => { - cy.get(commonlocators.entityExplorersearch) + cy.get(commonlocators.searchEntityInExplorer) .clear({ force: true }) .type(apiname1, { force: true }); // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -451,7 +451,7 @@ Cypress.Commands.add("SearchEntityAndUnfold", (apiname1) => { Cypress.Commands.add("OpenBindings", (apiname1) => { cy.wait(500); - cy.get(commonlocators.entityExplorersearch) + cy.get(commonlocators.searchEntityInExplorer) .clear({ force: true }) .type(apiname1, { force: true }); cy.CheckAndUnfoldWidgets(); diff --git a/app/client/src/components/editorComponents/Sidebar.tsx b/app/client/src/components/editorComponents/Sidebar.tsx index 7c302c29de..56b78ec0f3 100644 --- a/app/client/src/components/editorComponents/Sidebar.tsx +++ b/app/client/src/components/editorComponents/Sidebar.tsx @@ -7,22 +7,17 @@ import React, { useMemo, } from "react"; import classNames from "classnames"; -import history from "utils/history"; import * as Sentry from "@sentry/react"; -import { PanelStack } from "@blueprintjs/core"; import { useDispatch, useSelector } from "react-redux"; import PerformanceTracker, { PerformanceTransactionName, } from "utils/PerformanceTracker"; -import { AppState } from "reducers"; import { getFirstTimeUserOnboardingComplete, getIsFirstTimeUserOnboardingEnabled, } from "selectors/onboardingSelectors"; import Explorer from "pages/Editor/Explorer"; -import Switcher from "components/ads/Switcher"; -import { trimQueryString } from "utils/helpers"; import AppComments from "comments/AppComments/AppComments"; import { setExplorerActiveAction } from "actions/explorerActions"; import { @@ -33,14 +28,10 @@ import { tailwindLayers } from "constants/Layers"; import TooltipComponent from "components/ads/Tooltip"; import { previewModeSelector } from "selectors/editorSelectors"; import useHorizontalResize from "utils/hooks/useHorizontalResize"; -import { forceOpenWidgetPanel } from "actions/widgetSidebarActions"; -import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; import OnboardingStatusbar from "pages/Editor/FirstTimeUserOnboarding/Statusbar"; import Pages from "pages/Editor/Explorer/Pages"; -import { Colors } from "constants/Colors"; import { EntityProperties } from "pages/Editor/Explorer/Entity/EntityProperties"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import { builderURL } from "RouteBuilder"; type Props = { width: number; @@ -58,38 +49,12 @@ export const EntityExplorerSidebar = memo((props: Props) => { const enableFirstTimeUserOnboarding = useSelector( getIsFirstTimeUserOnboardingEnabled, ); - const isFirstTimeUserOnboardingEnabled = useSelector( - getIsFirstTimeUserOnboardingEnabled, - ); const resizer = useHorizontalResize( sidebarRef, props.onWidthChange, props.onDragEnd, ); - const switches = [ - { - id: "explorer", - text: "Explorer", - action: () => dispatch(forceOpenWidgetPanel(false)), - }, - { - id: "widgets", - text: "Widgets", - action: () => { - !(trimQueryString(builderURL()) === window.location.pathname) && - history.push(builderURL()); - setTimeout(() => dispatch(forceOpenWidgetPanel(true)), 0); - if (isFirstTimeUserOnboardingEnabled) { - dispatch(toggleInOnboardingWidgetSelection(true)); - } - }, - }, - ]; - const [activeSwitch, setActiveSwitch] = useState(switches[0]); const [tooltipIsOpen, setTooltipIsOpen] = useState(false); - const isForceOpenWidgetPanel = useSelector( - (state: AppState) => state.ui.onBoarding.forceOpenWidgetPanel, - ); const isFirstTimeUserOnboardingComplete = useSelector( getFirstTimeUserOnboardingComplete, ); @@ -98,14 +63,6 @@ export const EntityExplorerSidebar = memo((props: Props) => { PerformanceTracker.stopTracking(); }); - useEffect(() => { - if (isForceOpenWidgetPanel) { - setActiveSwitch(switches[1]); - } else { - setActiveSwitch(switches[0]); - } - }, [isForceOpenWidgetPanel]); - // registering event listeners useEffect(() => { document.addEventListener("mousemove", onMouseMove); @@ -191,7 +148,7 @@ export const EntityExplorerSidebar = memo((props: Props) => {
{ > {/* SIDEBAR */}
@@ -209,19 +166,8 @@ export const EntityExplorerSidebar = memo((props: Props) => { {/* Popover that contains the bindings info */} - {/* SWITCHER */} -
- -
- + {/* Contains entity explorer & widgets library along with a switcher*/} +
{/* RESIZER */} diff --git a/app/client/src/constants/Explorer.ts b/app/client/src/constants/Explorer.ts index 94f482e1a5..3fa4f47fa3 100644 --- a/app/client/src/constants/Explorer.ts +++ b/app/client/src/constants/Explorer.ts @@ -1,2 +1,3 @@ export const ENTITY_EXPLORER_SEARCH_ID = "entity-explorer-search"; export const WIDGETS_SEARCH_ID = "#widgets-search"; +export const SEARCH_ENTITY = "search-entity"; diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx index d1a460c1b9..431504df46 100644 --- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx +++ b/app/client/src/pages/Editor/Explorer/Entity/index.tsx @@ -220,11 +220,11 @@ export const Entity = forwardRef( /* eslint-disable react-hooks/exhaustive-deps */ useEffect(() => { - if (props.isDefaultExpanded) { + if (props.isDefaultExpanded || props.searchKeyword) { open(true); props.onToggle && props.onToggle(true); } - }, [props.isDefaultExpanded]); + }, [props.isDefaultExpanded, props.searchKeyword]); useEffect(() => { if (!props.searchKeyword && !props.isDefaultExpanded) { open(false); diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx index f0fe15aa49..c1d8059bb9 100644 --- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx +++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx @@ -8,9 +8,7 @@ import React, { import styled from "styled-components"; import Divider from "components/editorComponents/Divider"; import Search from "./ExplorerSearch"; -import { NonIdealState, Classes, IPanelProps } from "@blueprintjs/core"; -import WidgetSidebar from "../WidgetSidebar"; -import history from "utils/history"; +import { NonIdealState, Classes } from "@blueprintjs/core"; import JSDependencies from "./JSDependencies"; import PerformanceTracker, { PerformanceTransactionName, @@ -29,6 +27,8 @@ import Datasources from "./Datasources"; import Files from "./Files"; import ExplorerWidgetGroup from "./Widgets/WidgetGroup"; import { builderURL } from "RouteBuilder"; +import history from "utils/history"; +import { SEARCH_ENTITY } from "constants/Explorer"; const Wrapper = styled.div` height: 100%; @@ -71,7 +71,7 @@ const StyledDivider = styled(Divider)` border-bottom-color: #f0f0f0; `; -function EntityExplorer(props: IPanelProps) { +function EntityExplorer({ isActive }: { isActive: boolean }) { const dispatch = useDispatch(); const [searchKeyword, setSearchKeyword] = useState(""); const searchInputRef: MutableRefObject = useRef( @@ -86,15 +86,13 @@ function EntityExplorer(props: IPanelProps) { getIsFirstTimeUserOnboardingEnabled, ); const noResults = false; - const { openPanel } = props; const showWidgetsSidebar = useCallback(() => { history.push(builderURL()); - openPanel({ component: WidgetSidebar }); dispatch(forceOpenWidgetPanel(true)); if (isFirstTimeUserOnboardingEnabled) { dispatch(toggleInOnboardingWidgetSelection(true)); } - }, [openPanel, isFirstTimeUserOnboardingEnabled]); + }, [isFirstTimeUserOnboardingEnabled]); /** * filter entitites @@ -112,10 +110,14 @@ function EntityExplorer(props: IPanelProps) { }; return ( - + {/* SEARCH */} void; + id?: string; }, ref: Ref, ) => { @@ -62,7 +63,7 @@ export const ExplorerSearch = forwardRef( autoComplete="off" autoFocus className="flex-grow py-2 text-gray-800 bg-transparent placeholder-trueGray-500" - id={ENTITY_EXPLORER_SEARCH_ID} + id={props.id || ENTITY_EXPLORER_SEARCH_ID} onBlur={() => setFocussed(false)} onChange={onChange} onFocus={() => setFocussed(true)} @@ -78,8 +79,7 @@ export const ExplorerSearch = forwardRef(
diff --git a/app/client/src/pages/Editor/Explorer/index.tsx b/app/client/src/pages/Editor/Explorer/index.tsx index 5760cccc59..306551757a 100644 --- a/app/client/src/pages/Editor/Explorer/index.tsx +++ b/app/client/src/pages/Editor/Explorer/index.tsx @@ -1,23 +1,73 @@ -import { IPanelProps } from "@blueprintjs/core"; -import React from "react"; -import { useEffect } from "react"; -import { useSelector } from "react-redux"; +import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; +import { forceOpenWidgetPanel } from "actions/widgetSidebarActions"; +import { Switcher } from "components/ads"; +import { Colors } from "constants/Colors"; +import { tailwindLayers } from "constants/Layers"; +import React, { useEffect, useMemo, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import { AppState } from "reducers"; +import { builderURL } from "RouteBuilder"; +import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors"; +import { trimQueryString } from "utils/helpers"; +import history from "utils/history"; import WidgetSidebar from "../WidgetSidebar"; import EntityExplorer from "./EntityExplorer"; -const isForceOpenWidgetPanelSelector = (state: AppState) => +const selectForceOpenWidgetPanel = (state: AppState) => state.ui.onBoarding.forceOpenWidgetPanel; -function ExplorerContent(props: IPanelProps) { - const isForceOpenWidgetPanel = useSelector(isForceOpenWidgetPanelSelector); - useEffect(() => { - if (isForceOpenWidgetPanel) { - props.openPanel({ component: WidgetSidebar }); - } - }, [isForceOpenWidgetPanel]); +function ExplorerContent() { + const dispatch = useDispatch(); + const isFirstTimeUserOnboardingEnabled = useSelector( + getIsFirstTimeUserOnboardingEnabled, + ); + const switches = useMemo( + () => [ + { + id: "explorer", + text: "Explorer", + action: () => dispatch(forceOpenWidgetPanel(false)), + }, + { + id: "widgets", + text: "Widgets", + action: () => { + !(trimQueryString(builderURL()) === window.location.pathname) && + history.push(builderURL()); + dispatch(forceOpenWidgetPanel(true)); + if (isFirstTimeUserOnboardingEnabled) { + dispatch(toggleInOnboardingWidgetSelection(true)); + } + }, + }, + ], + [ + dispatch, + forceOpenWidgetPanel, + isFirstTimeUserOnboardingEnabled, + toggleInOnboardingWidgetSelection, + ], + ); + const [activeSwitch, setActiveSwitch] = useState(switches[0]); + const openWidgetPanel = useSelector(selectForceOpenWidgetPanel); - return ; + useEffect(() => { + setActiveSwitch(switches[openWidgetPanel ? 1 : 0]); + }, [openWidgetPanel]); + + return ( +
+
+ +
+ + +
+ ); } export default ExplorerContent; diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx index 0147752356..2548f3a578 100644 --- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx +++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx @@ -33,7 +33,6 @@ import { ONBOARDING_STATUS_STEPS_THIRD_ALT, } from "@appsmith/constants/messages"; import { getTypographyByKey } from "constants/DefaultTheme"; - import { Colors } from "constants/Colors"; import { onboardingCheckListUrl } from "RouteBuilder"; diff --git a/app/client/src/pages/Editor/WidgetSidebar.tsx b/app/client/src/pages/Editor/WidgetSidebar.tsx index 323e45d764..03386b2bfa 100644 --- a/app/client/src/pages/Editor/WidgetSidebar.tsx +++ b/app/client/src/pages/Editor/WidgetSidebar.tsx @@ -1,22 +1,16 @@ -import React, { useRef, useEffect, useState } from "react"; +import React, { useRef, useState } from "react"; import { useSelector } from "react-redux"; import WidgetCard from "./WidgetCard"; import { getWidgetCards } from "selectors/editorSelectors"; -import { IPanelProps } from "@blueprintjs/core"; import ExplorerSearch from "./Explorer/ExplorerSearch"; import { debounce } from "lodash"; import produce from "immer"; -import { useLocation } from "react-router"; - import { createMessage, WIDGET_SIDEBAR_CAPTION, } from "@appsmith/constants/messages"; -import { matchBuilderPath } from "constants/routes"; -import { AppState } from "reducers"; -function WidgetSidebar(props: IPanelProps) { - const location = useLocation(); +function WidgetSidebar({ isActive }: { isActive: boolean }) { const cards = useSelector(getWidgetCards); const [filteredCards, setFilteredCards] = useState(cards); const searchInputRef = useRef(null); @@ -33,17 +27,6 @@ function WidgetSidebar(props: IPanelProps) { } setFilteredCards(filteredCards); }; - const isForceOpenWidgetPanel = useSelector( - (state: AppState) => state.ui.onBoarding.forceOpenWidgetPanel, - ); - - const onCanvas = matchBuilderPath(window.location.pathname); - - useEffect(() => { - if (!onCanvas || isForceOpenWidgetPanel === false) { - props.closePanel(); - } - }, [onCanvas, location, isForceOpenWidgetPanel]); /** * filter widgets @@ -64,7 +47,9 @@ function WidgetSidebar(props: IPanelProps) { }; return ( -
+