From 73e2b59b03996bd7233b4ef14254179b9689f561 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 25 Mar 2025 22:44:03 +0530 Subject: [PATCH 1/2] removing feature flag for app IDE new entity explorer --- app/client/src/ce/entities/FeatureFlag.ts | 2 - .../components/JSListItem/old/ListItem.tsx | 27 --- .../QueryEntityItem/old/ListItem.tsx | 25 -- .../components/JSListItem/old/ListItem.tsx | 1 - .../QueryEntityItem/old/ListItem.tsx | 1 - .../components/JSExplorer/JSSegmentList.tsx | 77 +----- .../ContextMenu/OldPageContextMenu.tsx | 227 ------------------ .../components/PageList/OldPageEntity.tsx | 127 ---------- .../AppIDE/components/PageList/PageList.tsx | 22 +- .../QueryExplorer/QuerySegmentList.tsx | 80 +----- .../AppIDE/components/UIList/UIList.test.tsx | 1 - .../pages/AppIDE/components/UIList/UIList.tsx | 11 +- .../routers/JSEditor/JSRender.test.tsx | 3 - .../routers/QueryEditor/QueryRender.test.tsx | 9 - .../Explorer/Widgets/OldWidgetEntityList.tsx | 43 ---- .../Explorer/Widgets/WidgetContextMenu.tsx | 83 ------- .../Editor/Explorer/Widgets/WidgetEntity.tsx | 194 --------------- .../Editor/Explorer/Widgets/WidgetIcon.tsx | 22 -- app/client/test/testUtils.tsx | 1 - 19 files changed, 26 insertions(+), 930 deletions(-) delete mode 100644 app/client/src/ce/pages/AppIDE/components/JSListItem/old/ListItem.tsx delete mode 100644 app/client/src/ce/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx delete mode 100644 app/client/src/ee/pages/AppIDE/components/JSListItem/old/ListItem.tsx delete mode 100644 app/client/src/ee/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx delete mode 100644 app/client/src/pages/AppIDE/components/PageList/ContextMenu/OldPageContextMenu.tsx delete mode 100644 app/client/src/pages/AppIDE/components/PageList/OldPageEntity.tsx delete mode 100644 app/client/src/pages/Editor/Explorer/Widgets/OldWidgetEntityList.tsx delete mode 100644 app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx delete mode 100644 app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx delete mode 100644 app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index 13fd0ce62a9d..bd584d643639 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -48,7 +48,6 @@ export const FEATURE_FLAG = { "config_mask_session_recordings_enabled", config_user_session_recordings_enabled: "config_user_session_recordings_enabled", - release_ads_entity_item_enabled: "release_ads_entity_item_enabled", release_external_saas_plugins_enabled: "release_external_saas_plugins_enabled", release_tablev2_infinitescroll_enabled: @@ -96,7 +95,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { kill_session_recordings_enabled: false, config_user_session_recordings_enabled: true, config_mask_session_recordings_enabled: true, - release_ads_entity_item_enabled: false, release_external_saas_plugins_enabled: false, release_tablev2_infinitescroll_enabled: false, release_table_custom_sort_function_enabled: false, diff --git a/app/client/src/ce/pages/AppIDE/components/JSListItem/old/ListItem.tsx b/app/client/src/ce/pages/AppIDE/components/JSListItem/old/ListItem.tsx deleted file mode 100644 index d1622c54e160..000000000000 --- a/app/client/src/ce/pages/AppIDE/components/JSListItem/old/ListItem.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import ExplorerJSCollectionEntity from "pages/Editor/Explorer/JSActions/JSActionEntity"; -import { Flex } from "@appsmith/ads"; -import type { EntityItem } from "ee/IDE/Interfaces/EntityItem"; - -export interface JSListItemProps { - item: EntityItem; - isActive: boolean; - parentEntityId: string; -} - -export const JSListItem = (props: JSListItemProps) => { - const { isActive, item, parentEntityId } = props; - - return ( - - - - ); -}; diff --git a/app/client/src/ce/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx b/app/client/src/ce/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx deleted file mode 100644 index 7a62dffb63ed..000000000000 --- a/app/client/src/ce/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import ExplorerActionEntity from "pages/Editor/Explorer/Actions/ActionEntity"; -import type { EntityItem } from "ee/IDE/Interfaces/EntityItem"; - -export interface QueryListItemProps { - item: EntityItem; - isActive: boolean; - parentEntityId: string; -} - -export const QueryListItem = (props: QueryListItemProps) => { - const { isActive, item, parentEntityId } = props; - - return ( - - ); -}; diff --git a/app/client/src/ee/pages/AppIDE/components/JSListItem/old/ListItem.tsx b/app/client/src/ee/pages/AppIDE/components/JSListItem/old/ListItem.tsx deleted file mode 100644 index d975f9c4b716..000000000000 --- a/app/client/src/ee/pages/AppIDE/components/JSListItem/old/ListItem.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "ce/pages/AppIDE/components/JSListItem/old/ListItem"; diff --git a/app/client/src/ee/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx b/app/client/src/ee/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx deleted file mode 100644 index 55a10cc704a0..000000000000 --- a/app/client/src/ee/pages/AppIDE/components/QueryEntityItem/old/ListItem.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "ce/pages/AppIDE/components/QueryEntityItem/old/ListItem"; diff --git a/app/client/src/pages/AppIDE/components/JSExplorer/JSSegmentList.tsx b/app/client/src/pages/AppIDE/components/JSExplorer/JSSegmentList.tsx index 791e6157cd3f..9d7aa59aabe4 100644 --- a/app/client/src/pages/AppIDE/components/JSExplorer/JSSegmentList.tsx +++ b/app/client/src/pages/AppIDE/components/JSExplorer/JSSegmentList.tsx @@ -2,27 +2,18 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; import { Flex, - Text, SearchAndAdd, NoSearchResults, EntityGroupsList, } from "@appsmith/ads"; import styled from "styled-components"; - import { selectJSSegmentEditorList } from "ee/selectors/appIDESelectors"; -import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import { ActionParentEntityType } from "ee/entities/Engine/actionHelpers"; -import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider"; import { useJSAdd } from "../JSAdd"; -import { JSListItem } from "ee/pages/AppIDE/components/JSListItem/old/ListItem"; import { BlankState } from "./BlankState"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; import { filterEntityGroupsBySearchTerm } from "IDE/utils"; -import { useLocation } from "react-router"; -import { getIDETypeByUrl } from "ee/entities/IDE/utils"; -import { useParentEntityInfo } from "ee/IDE/hooks/useParentEntityInfo"; import { JSEntity } from "ee/pages/AppIDE/components/JSListItem/ListItem"; import type { EntityItem } from "ee/IDE/Interfaces/EntityItem"; import { getPagePermissions } from "selectors/editorSelectors"; @@ -38,11 +29,7 @@ const JSContainer = styled(Flex)` export const ListJSObjects = () => { const [searchTerm, setSearchTerm] = useState(""); const itemGroups = useSelector(selectJSSegmentEditorList); - const activeActionBaseId = useActiveActionBaseId(); - const location = useLocation(); - const ideType = getIDETypeByUrl(location.pathname); - const { editorId, parentEntityId } = useParentEntityInfo(ideType); const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); const pagePermissions = useSelector(getPagePermissions); const canCreateActions = getHasCreateActionPermission( @@ -50,10 +37,6 @@ export const ListJSObjects = () => { pagePermissions, ); - const isNewADSTemplatesEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - const filteredItemGroups = filterEntityGroupsBySearchTerm( searchTerm, itemGroups, @@ -86,54 +69,18 @@ export const ListJSObjects = () => { gap="spaces-3" overflowY="auto" > - {isNewADSTemplatesEnabled ? ( - { - return { - groupTitle: group === "NA" ? "" : group, - items: items, - className: "", - renderList: (item: EntityItem) => { - return ; - }, - }; - })} - /> - ) : ( - filteredItemGroups.map(({ group, items }) => { - return ( - - {group !== "NA" ? ( - - - {group} - - - ) : null} - - {items.map((item) => { - return ( - - ); - })} - - - ); - }) - )} + { + return { + groupTitle: group === "NA" ? "" : group, + items: items, + className: "", + renderList: (item: EntityItem) => { + return ; + }, + }; + })} + /> {filteredItemGroups.length === 0 && searchTerm !== "" ? ( void; -}) { - const dispatch = useDispatch(); - const [confirmDelete, setConfirmDelete] = useState(false); - - /** - * delete the page - * - * @return void - */ - const deletePageCallback = useCallback((): void => { - dispatch(deletePageAction(props.pageId)); - AnalyticsUtil.logEvent("DELETE_PAGE", { - pageName: props.name, - }); - }, [dispatch]); - - /** - * sets the page as default - * - * @return void - */ - const setPageAsDefaultCallback = useCallback((): void => { - dispatch(setPageAsDefault(props.pageId, props.applicationId)); - }, [dispatch]); - - /** - * edit the page name - * - * @return void - */ - const editPageName = useCallback( - () => dispatch(initExplorerEntityNameEdit(props.pageId)), - [dispatch, props.pageId], - ); - - /** - * clone the page - * - * @return void - */ - const clonePage = useCallback( - () => dispatch(clonePageInit(props.pageId)), - [dispatch, props.pageId], - ); - - /** - * sets the page hidden - * - * @return void - */ - const setHiddenField = useCallback( - () => - dispatch( - updatePageAction({ - id: props.pageId, - name: props.name, - isHidden: !props.isHidden, - }), - ), - [dispatch, props.pageId, props.name, props.isHidden], - ); - - const showPartialImportExportInMenu = useMemo( - () => props.hasExportPermission && props.isCurrentPage, - [props.hasExportPermission, props.isCurrentPage], - ); - - const handlePartialExportClick = () => { - if (props.onItemSelected) props.onItemSelected(); - - dispatch(openPartialExportModal(true)); - }; - const handlePartialImportClick = () => { - if (props.onItemSelected) props.onItemSelected(); - - dispatch(openPartialImportModal(true)); - }; - - const pagePermissions = - useSelector(getPageById(props.pageId))?.userPermissions || []; - - const userAppPermissions = useSelector( - (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [], - ); - - const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); - - const canCreatePages = getHasCreatePagePermission( - isFeatureEnabled, - userAppPermissions, - ); - - const canManagePages = getHasManagePagePermission( - isFeatureEnabled, - pagePermissions, - ); - - const canDeletePages = getHasDeletePagePermission( - isFeatureEnabled, - pagePermissions, - ); - - const optionsTree = [ - canManagePages && { - value: "rename", - onSelect: editPageName, - label: createMessage(CONTEXT_RENAME), - }, - canCreatePages && - canManagePages && { - value: "clone", - onSelect: clonePage, - label: createMessage(CONTEXT_CLONE), - }, - canManagePages && { - value: "visibility", - onSelect: setHiddenField, - // Possibly support ReactNode in TreeOption - label: ( - - {props.isHidden ? "Show" : "Hide"} - - - ) as ReactNode as string, - }, - !props.isDefaultPage && - canManagePages && { - value: "setdefault", - onSelect: setPageAsDefaultCallback, - label: createMessage(CONTEXT_SET_AS_HOME_PAGE), - }, - props.isDefaultPage && - canManagePages && { - className: "!text-[color:var(--appsmith-color-black-500)]", - disabled: true, - value: "setdefault", - label: createMessage(CONTEXT_SET_AS_HOME_PAGE), - }, - showPartialImportExportInMenu && { - value: "partial-export", - onSelect: handlePartialExportClick, - label: createMessage(CONTEXT_PARTIAL_EXPORT), - }, - showPartialImportExportInMenu && { - value: "partial-import", - onSelect: handlePartialImportClick, - label: createMessage(CONTEXT_PARTIAL_IMPORT), - }, - !props.isDefaultPage && - canDeletePages && { - className: "t--apiFormDeleteBtn single-select", - confirmDelete: confirmDelete, - value: "delete", - onSelect: () => { - confirmDelete ? deletePageCallback() : setConfirmDelete(true); - }, - label: confirmDelete - ? createMessage(CONFIRM_CONTEXT_DELETE) - : createMessage(CONTEXT_DELETE), - intent: "danger", - }, - ].filter(Boolean); - - return optionsTree?.length > 0 ? ( - - ) : null; -} - -export default PageContextMenu; diff --git a/app/client/src/pages/AppIDE/components/PageList/OldPageEntity.tsx b/app/client/src/pages/AppIDE/components/PageList/OldPageEntity.tsx deleted file mode 100644 index 29778794e8fd..000000000000 --- a/app/client/src/pages/AppIDE/components/PageList/OldPageEntity.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { useCallback, useEffect, useRef } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useLocation } from "react-router"; - -import type { Page } from "entities/Page"; -import { defaultPageIcon, pageIcon } from "pages/Editor/Explorer/ExplorerIcons"; -import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import PageContextMenu from "./ContextMenu/OldPageContextMenu"; -import { - getCurrentApplicationId, - getCurrentPageId, -} from "selectors/editorSelectors"; -import { EntityClassNames } from "pages/Editor/Explorer/Entity"; -import { PERMISSION_TYPE, isPermitted } from "ee/utils/permissionHelpers"; -import { getCurrentApplication } from "ee/selectors/applicationSelectors"; -import type { AppState } from "ee/reducers"; -import { StyledEntity } from "pages/Editor/Explorer/Common/components"; -import { toValidPageName } from "utils/helpers"; -import { updatePageAction } from "actions/pageActions"; -import { useGetPageFocusUrl } from "./hooks/useGetPageFocusUrl"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; -import history, { NavigationMethod } from "utils/history"; - -const PageElement = ({ - onClick, - page, -}: { - page: Page; - onClick?: () => void; -}) => { - const dispatch = useDispatch(); - const location = useLocation(); - const navigateToUrl = useGetPageFocusUrl(page.basePageId); - const ref = useRef(null); - - const currentPageId = useSelector(getCurrentPageId); - const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); - const applicationId = useSelector(getCurrentApplicationId); - const userAppPermissions = useSelector( - (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [], - ); - - const icon = page.isDefault ? defaultPageIcon : pageIcon; - const isCurrentPage = currentPageId === page.pageId; - const pagePermissions = page.userPermissions; - - const canManagePages = getHasManagePagePermission( - isFeatureEnabled, - pagePermissions, - ); - const hasExportPermission = isPermitted( - userAppPermissions ?? [], - PERMISSION_TYPE.EXPORT_APPLICATION, - ); - - useEffect(() => { - if (ref.current && isCurrentPage) { - ref.current.scrollIntoView({ - inline: "nearest", - block: "nearest", - }); - } - }, [ref, isCurrentPage]); - - const switchPage = useCallback( - (page: Page) => { - AnalyticsUtil.logEvent("PAGE_NAME_CLICK", { - name: page.pageName, - fromUrl: location.pathname, - type: "PAGES", - toUrl: navigateToUrl, - }); - dispatch(toggleInOnboardingWidgetSelection(true)); - history.push(navigateToUrl, { - invokedBy: NavigationMethod.EntityExplorer, - }); - - if (onClick) { - onClick(); - } - }, - [location.pathname, currentPageId, navigateToUrl], - ); - - const contextMenu = ( - - ); - - return ( - switchPage(page)} - active={isCurrentPage} - canEditEntityName={canManagePages} - className={`page fullWidth ${isCurrentPage && "activePage"}`} - contextMenu={contextMenu} - disabled={page.isHidden} - entityId={page.pageId} - icon={icon} - isDefaultExpanded={isCurrentPage} - key={page.pageId} - name={page.pageName} - onNameEdit={toValidPageName} - ref={ref} - searchKeyword={""} - step={0} - updateEntityName={(id, name) => - updatePageAction({ id, name, isHidden: !!page.isHidden }) - } - /> - ); -}; - -export { PageElement }; diff --git a/app/client/src/pages/AppIDE/components/PageList/PageList.tsx b/app/client/src/pages/AppIDE/components/PageList/PageList.tsx index 736a4e6a440e..b46c554e64b6 100644 --- a/app/client/src/pages/AppIDE/components/PageList/PageList.tsx +++ b/app/client/src/pages/AppIDE/components/PageList/PageList.tsx @@ -1,9 +1,5 @@ -import React, { Fragment } from "react"; -import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import React from "react"; import type { Page } from "entities/Page"; -import { ListItemContainer } from "@appsmith/ads"; -import { PageElement as OldPageEntity } from "./OldPageEntity"; import { PageEntity } from "./PageEntity"; interface PageListProps { @@ -12,22 +8,6 @@ interface PageListProps { } export const PageList = ({ onItemSelected, pages }: PageListProps) => { - const isNewADSEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - - if (!isNewADSEnabled) { - return ( - <> - {pages.map((page) => ( - - - - ))} - - ); - } - return ( <> {pages.map((page) => ( diff --git a/app/client/src/pages/AppIDE/components/QueryExplorer/QuerySegmentList.tsx b/app/client/src/pages/AppIDE/components/QueryExplorer/QuerySegmentList.tsx index cbb09871231a..4f391664426c 100644 --- a/app/client/src/pages/AppIDE/components/QueryExplorer/QuerySegmentList.tsx +++ b/app/client/src/pages/AppIDE/components/QueryExplorer/QuerySegmentList.tsx @@ -1,29 +1,19 @@ import React, { useState } from "react"; import { Flex, - Text, SearchAndAdd, NoSearchResults, EntityGroupsList, } from "@appsmith/ads"; import { useSelector } from "react-redux"; - -import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { selectQuerySegmentEditorList } from "ee/selectors/appIDESelectors"; -import { ActionParentEntityType } from "ee/entities/Engine/actionHelpers"; -import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider"; import { useQueryAdd } from "../QueryAdd"; -import { QueryListItem } from "ee/pages/AppIDE/components/QueryEntityItem/old/ListItem"; -import { getShowWorkflowFeature } from "ee/selectors/workflowSelectors"; import { BlankState } from "./BlankState"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; import { filterEntityGroupsBySearchTerm } from "IDE/utils"; import { ActionEntityItem } from "ee/pages/AppIDE/components/QueryEntityItem/ListItem"; -import { useLocation } from "react-router"; -import { getIDETypeByUrl } from "ee/entities/IDE/utils"; -import { useParentEntityInfo } from "ee/IDE/hooks/useParentEntityInfo"; import { objectKeys } from "@appsmith/utils"; import type { EntityItem } from "ee/IDE/Interfaces/EntityItem"; import { getPagePermissions } from "selectors/editorSelectors"; @@ -32,24 +22,13 @@ import { getHasCreateActionPermission } from "ee/utils/BusinessFeatures/permissi export const ListQuery = () => { const [searchTerm, setSearchTerm] = useState(""); const itemGroups = useSelector(selectQuerySegmentEditorList); - const activeActionBaseId = useActiveActionBaseId(); - const location = useLocation(); - const ideType = getIDETypeByUrl(location.pathname); - const { editorId, parentEntityId } = useParentEntityInfo(ideType); const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); const pagePermissions = useSelector(getPagePermissions); const canCreateActions = getHasCreateActionPermission( isFeatureEnabled, pagePermissions, ); - - const showWorkflows = useSelector(getShowWorkflowFeature); - - const isNewADSTemplatesEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - const filteredItemGroups = filterEntityGroupsBySearchTerm( searchTerm, itemGroups, @@ -81,53 +60,18 @@ export const ListQuery = () => { gap="spaces-3" overflowY="auto" > - {isNewADSTemplatesEnabled ? ( - { - return { - groupTitle: group, - items: items, - className: "", - renderList: (item: EntityItem) => { - return ; - }, - }; - })} - /> - ) : ( - filteredItemGroups.map(({ group, items }) => { - return ( - - - - {group} - - - - {items.map((file) => { - return ( - - ); - })} - - - ); - }) - )} + { + return { + groupTitle: group, + items: items, + className: "", + renderList: (item: EntityItem) => { + return ; + }, + }; + })} + /> {filteredItemGroups.length === 0 && searchTerm !== "" ? ( ({ ...jest.requireActual("ee/selectors/featureFlagsSelectors"), selectFeatureFlags: () => ({ ...DEFAULT_FEATURE_FLAG_VALUE, - release_ads_entity_item_enabled: true, }), })); diff --git a/app/client/src/pages/AppIDE/components/UIList/UIList.tsx b/app/client/src/pages/AppIDE/components/UIList/UIList.tsx index c0abf2930da8..903efcde480a 100644 --- a/app/client/src/pages/AppIDE/components/UIList/UIList.tsx +++ b/app/client/src/pages/AppIDE/components/UIList/UIList.tsx @@ -12,7 +12,6 @@ import { EmptyState } from "@appsmith/ads"; import history from "utils/history"; import { builderURL } from "ee/RouteBuilder"; import { UIEntityListTree } from "../UIEntityListTree"; -import { OldWidgetEntityList } from "pages/Editor/Explorer/Widgets/OldWidgetEntityList"; const ListWidgets = (props: { setFocusSearchInput: (focusSearchInput: boolean) => void; @@ -52,10 +51,6 @@ const ListWidgets = (props: { [addButtonClickHandler, canManagePages], ); - const isNewWidgetTreeEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - return ( {!widgetsExist ? ( @@ -91,11 +86,7 @@ const ListWidgets = (props: { overflowY="auto" px="spaces-3" > - {isNewWidgetTreeEnabled ? ( - - ) : ( - - )} + ) : null} diff --git a/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx index 0e81df156cfa..15b0b10f91ec 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx @@ -148,9 +148,6 @@ describe("IDE Render: JS", () => { { url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${js1.baseId}`, initialState: state, - featureFlags: { - release_ads_entity_item_enabled: true, - }, }, ); diff --git a/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx index cfc233e97035..ea62435139e2 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx @@ -158,9 +158,6 @@ describe("IDE URL rendering of Queries", () => { { url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/api/${anApi.baseId}`, initialState: state, - featureFlags: { - release_ads_entity_item_enabled: true, - }, }, ); @@ -373,9 +370,6 @@ describe("IDE URL rendering of Queries", () => { url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/queries/${anQuery.baseId}`, sagasToRun: sagasToRunForTests, initialState: state, - featureFlags: { - release_ads_entity_item_enabled: true, - }, }, ); @@ -588,9 +582,6 @@ describe("IDE URL rendering of Queries", () => { url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/saas/google-sheets-plugin/api/${anQuery.baseId}`, sagasToRun: sagasToRunForTests, initialState: state, - featureFlags: { - release_ads_entity_item_enabled: true, - }, }, ); diff --git a/app/client/src/pages/Editor/Explorer/Widgets/OldWidgetEntityList.tsx b/app/client/src/pages/Editor/Explorer/Widgets/OldWidgetEntityList.tsx deleted file mode 100644 index d5b2d2650c3b..000000000000 --- a/app/client/src/pages/Editor/Explorer/Widgets/OldWidgetEntityList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { useMemo } from "react"; -import styled from "styled-components"; -import { Flex } from "@appsmith/ads"; -import { useSelector } from "react-redux"; -import { getCurrentBasePageId } from "selectors/editorSelectors"; -import { selectWidgetsForCurrentPage } from "ee/selectors/entitiesSelector"; -import WidgetEntity from "./WidgetEntity"; - -const ListContainer = styled(Flex)` - & .t--entity-item { - height: 32px; - } -`; - -export const OldWidgetEntityList = () => { - const basePageId = useSelector(getCurrentBasePageId) as string; - const widgets = useSelector(selectWidgetsForCurrentPage); - const widgetsInStep = useMemo(() => { - return widgets?.children?.map((child) => child.widgetId) || []; - }, [widgets?.children]); - - if (!widgets) return null; - - if (!widgets.children) return null; - - return ( - - {widgets.children.map((child) => ( - - ))} - - ); -}; diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx deleted file mode 100644 index 0b91b2ca6f72..000000000000 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { initExplorerEntityNameEdit } from "actions/explorerActions"; -import type { AppState } from "ee/reducers"; -import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; -import { ENTITY_TYPE } from "ee/entities/DataTree/types"; -import type { TreeDropdownOption } from "pages/Editor/Explorer/ContextMenu"; -import ContextMenu from "pages/Editor/Explorer/ContextMenu"; -import { useDeleteWidget } from "pages/AppIDE/components/UIEntityListTree/hooks/useDeleteWidget"; - -export function WidgetContextMenu(props: { - widgetId: string; - pageId: string; - className?: string; - canManagePages?: boolean; -}) { - const { widgetId } = props; - - const widget = useSelector((state: AppState) => { - return state.ui.pageWidgets[props.pageId].dsl[props.widgetId]; - }); - - const dispatch = useDispatch(); - - const deleteWidget = useDeleteWidget(widgetId); - - const showBinding = useCallback((widgetId, widgetName) => { - dispatch({ - type: ReduxActionTypes.SET_ENTITY_INFO, - payload: { - entityId: widgetId, - entityName: widgetName, - entityType: ENTITY_TYPE.WIDGET, - show: true, - }, - }); - }, []); - - const editWidgetName = useCallback(() => { - dispatch(initExplorerEntityNameEdit(widgetId)); - }, [dispatch, widgetId]); - - const optionTree: TreeDropdownOption[] = [ - { - value: "showBinding", - onSelect: () => showBinding(props.widgetId, widget.widgetName), - label: "Show bindings", - }, - ]; - - if (props.canManagePages) { - const option: TreeDropdownOption = { - value: "rename", - onSelect: editWidgetName, - label: "Rename", - }; - - optionTree.push(option); - } - - if (widget.isDeletable !== false && props.canManagePages) { - const option: TreeDropdownOption = { - value: "delete", - onSelect: deleteWidget, - label: "Delete", - intent: "danger", - confirmDelete: true, - }; - - optionTree.push(option); - } - - return optionTree.length > 0 ? ( - - ) : null; -} - -WidgetContextMenu.displayName = "WidgetContextMenu"; - -export default WidgetContextMenu; diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx deleted file mode 100644 index 0783bfd93982..000000000000 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import React, { memo, useCallback, useMemo } from "react"; -import WidgetFactory from "../../../../WidgetProvider/factory"; -import Entity, { EntityClassNames } from "../Entity"; -import type { WidgetProps } from "widgets/BaseWidget"; -import type { WidgetType } from "constants/WidgetConstants"; -import { useSelector } from "react-redux"; -import { updateWidgetName } from "actions/propertyPaneActions"; -import type { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer"; -import { getLastSelectedWidget, getSelectedWidgets } from "selectors/ui"; -import { useNavigateToWidget } from "./useNavigateToWidget"; -import WidgetIcon from "./WidgetIcon"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { builderURL } from "ee/RouteBuilder"; -import { useLocation } from "react-router"; -import { getPagePermissions } from "selectors/editorSelectors"; -import { NavigationMethod } from "utils/history"; -import { getEntityExplorerWidgetsToExpand } from "selectors/widgetSelectors"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; -import { convertToPageIdSelector } from "selectors/pageListSelectors"; -import WidgetContextMenu from "./WidgetContextMenu"; - -export type WidgetTree = WidgetProps & { children?: WidgetTree[] }; - -const UNREGISTERED_WIDGETS: WidgetType[] = ["ICON_WIDGET"]; - -const useWidget = ( - widgetId: string, - widgetType: WidgetType, - basePageId: string, -) => { - const selectedWidgets = useSelector(getSelectedWidgets); - const lastSelectedWidget = useSelector(getLastSelectedWidget); - const isWidgetSelected = selectedWidgets.includes(widgetId); - const multipleWidgetsSelected = selectedWidgets.length > 1; - - const { navigateToWidget } = useNavigateToWidget(); - - const boundNavigateToWidget = useCallback( - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (e: any) => { - const isMultiSelect = e.metaKey || e.ctrlKey; - const isShiftSelect = e.shiftKey; - - navigateToWidget( - widgetId, - widgetType, - basePageId, - NavigationMethod.EntityExplorer, - isWidgetSelected, - isMultiSelect, - isShiftSelect, - ); - }, - [widgetId, widgetType, basePageId, isWidgetSelected, navigateToWidget], - ); - - return { - navigateToWidget: boundNavigateToWidget, - isWidgetSelected, - multipleWidgetsSelected, - lastSelectedWidget, - }; -}; - -export interface WidgetEntityProps { - widgetId: string; - widgetName: string; - widgetType: WidgetType; - step: number; - basePageId: string; - childWidgets?: CanvasStructure[]; - parentModalId?: string; - searchKeyword?: string; - isDefaultExpanded?: boolean; - widgetsInStep: string[]; -} - -export const WidgetEntity = memo((props: WidgetEntityProps) => { - const pageId = useSelector((state) => - convertToPageIdSelector(state, props.basePageId), - ); - const widgetsToExpand = useSelector(getEntityExplorerWidgetsToExpand); - // If the widget icon is a React component, then we get it from the Widget methods. - const { IconCmp } = WidgetFactory.getWidgetMethods(props.widgetType); - const icon = IconCmp ? : ; - const location = useLocation(); - - const forceExpand = widgetsToExpand.includes(props.widgetId); - - const pagePermissions = useSelector(getPagePermissions); - - const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); - - const canManagePages = getHasManagePagePermission( - isFeatureEnabled, - pagePermissions, - ); - - const { - isWidgetSelected, - lastSelectedWidget, - multipleWidgetsSelected, - navigateToWidget, - } = useWidget(props.widgetId, props.widgetType, props.basePageId); - - const { parentModalId, widgetId, widgetType } = props; - /** - * While navigating to a widget we need to show a modal if the widget is nested within it - * Since the immediate parent for the widget would be a canvas instead of the modal, - * so we track the immediate modal parent for the widget - */ - const parentModalIdForChildren = useMemo(() => { - return widgetType === "MODAL_WIDGET" ? widgetId : parentModalId; - }, [widgetType, widgetId, parentModalId]); - - const switchWidget = useCallback( - (e) => { - AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", { - type: "WIDGETS", - fromUrl: location.pathname, - toUrl: `${builderURL({ - basePageId: props.basePageId, - hash: widgetId, - })}`, - name: props.widgetName, - }); - navigateToWidget(e); - }, - [location.pathname, props.basePageId, widgetId, props.widgetName], - ); - - if (UNREGISTERED_WIDGETS.indexOf(props.widgetType) > -1) return null; - - const contextMenu = ( - - ); - - const showContextMenu = !multipleWidgetsSelected && pageId; - const widgetsInStep = props?.childWidgets - ? props?.childWidgets?.map((child) => child.widgetId) - : []; - - return ( - - {props.childWidgets && - props.childWidgets.length > 0 && - props.childWidgets.map((child) => ( - - ))} - - ); -}); - -WidgetEntity.displayName = "WidgetEntity"; - -export default WidgetEntity; diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx deleted file mode 100644 index ba98d293a91e..000000000000 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { WidgetType } from "constants/WidgetConstants"; -import React from "react"; -import useWidgetConfig from "utils/hooks/useWidgetConfig"; -import { ENTITY_ICON_SIZE } from "../ExplorerIcons"; - -function WidgetIcon(props: { - type: WidgetType; - width?: number; - height?: number; -}) { - const { height = ENTITY_ICON_SIZE, type, width = ENTITY_ICON_SIZE } = props; - - const svg = useWidgetConfig(type, "iconSVG"); - - if (svg) { - return ; - } - - return null; -} - -export default WidgetIcon; diff --git a/app/client/test/testUtils.tsx b/app/client/test/testUtils.tsx index 1aaee0579cfc..0d57bddfc09a 100644 --- a/app/client/test/testUtils.tsx +++ b/app/client/test/testUtils.tsx @@ -59,7 +59,6 @@ const setupState = (state?: State) => { reduxStore.dispatch( fetchFeatureFlagsSuccess({ ...DEFAULT_FEATURE_FLAG_VALUE, - release_ads_entity_item_enabled: true, ...state.featureFlags, }), ); From 589ae540cf367d972ba26e4678c8c1210f90c416 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 25 Mar 2025 23:18:45 +0530 Subject: [PATCH 2/2] adding back deleted file --- .../Editor/Explorer/Widgets/WidgetIcon.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx new file mode 100644 index 000000000000..ba98d293a91e --- /dev/null +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx @@ -0,0 +1,22 @@ +import type { WidgetType } from "constants/WidgetConstants"; +import React from "react"; +import useWidgetConfig from "utils/hooks/useWidgetConfig"; +import { ENTITY_ICON_SIZE } from "../ExplorerIcons"; + +function WidgetIcon(props: { + type: WidgetType; + width?: number; + height?: number; +}) { + const { height = ENTITY_ICON_SIZE, type, width = ENTITY_ICON_SIZE } = props; + + const svg = useWidgetConfig(type, "iconSVG"); + + if (svg) { + return ; + } + + return null; +} + +export default WidgetIcon;