Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: scroll to active entity in explorer on route change (#13085)

Browse Source 
* Scroll to active entity in explorer on route change

* Removes scroll animation

* Open modal via entity explorer

* Try tonavigate to canvas only in edit mode

* Added cypress to assert modals' presence when triggered from the API page.
This commit is contained in:
arunvjn 2022-04-20 21:55:55 +05:30 committed by GitHub
parent 98f6a3fede
commit c925bf2efd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
View File

@ -20,6 +20,11 @@ describe("Modal Widget Functionality", function() {
.click();
cy.get(".t--entity-name:contains(Modal1)").click();
cy.get(".t--modal-widget").should("exist");
cy.CreateAPI("FirstAPI");
cy.get(".t--entity-name:contains(Modal1)").click();
cy.get(".t--modal-widget").should("exist");
});
it("3. Display toast on close action", () => {

3
app/client/src/pages/Editor/Explorer/Entity/index.tsx
View File

@ -96,6 +96,9 @@ export const EntityItem = styled.div<{
background: ${Colors.GREY_2};
}
scroll-margin-top: 36px;
scroll-snap-margin-top: 36px;
& .${EntityClassNames.TOOLTIP} {
${entityTooltipCSS}
.${Classes.POPOVER_TARGET} {

10
app/client/src/pages/Editor/Explorer/Files/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from "react";
import React, { useCallback, useEffect, useMemo } from "react";
import { useActiveAction } from "../hooks";
import { Entity } from "../Entity/index";
import {
@ -45,6 +45,14 @@ function Files() {
const activeActionId = useActiveAction();
useEffect(() => {
if (!activeActionId) return;
document.getElementById(`entity-${activeActionId}`)?.scrollIntoView({
block: "nearest",
inline: "nearest",
});
}, [activeActionId]);
const onFilesToggle = useCallback(
(isOpen: boolean) => {
saveExplorerStatus(applicationId, "queriesAndJs", isOpen);

10
app/client/src/sagas/ModalSagas.ts
View File

@ -46,6 +46,10 @@ import AppsmithConsole from "utils/AppsmithConsole";
import WidgetFactory from "utils/WidgetFactory";
import { Toaster } from "components/ads/Toast";
import { deselectAllInitAction } from "actions/widgetSelectionActions";
import { navigateToCanvas } from "pages/Editor/Explorer/Widgets/utils";
import { getCurrentPageId } from "selectors/editorSelectors";
import { APP_MODE } from "entities/App";
import { getAppMode } from "selectors/applicationSelectors";
const WidgetTypes = WidgetFactory.widgetTypes;
export function* createModalSaga(action: ReduxAction<{ modalName: string }>) {
@ -129,6 +133,12 @@ export function* showModalSaga(action: ReduxAction<{ modalId: string }>) {
},
});
const pageId: string = yield select(getCurrentPageId);
const appMode: APP_MODE = yield select(getAppMode);
if (appMode === APP_MODE.EDIT)
navigateToCanvas({ pageId, widgetId: action.payload.modalId });
yield put({
type: ReduxActionTypes.SELECT_WIDGET_INIT,
payload: { widgetId: action.payload.modalId },