From 1682ff24245de81857bba1d07b2505abefccc78d Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 6 Feb 2025 18:08:25 +0530 Subject: [PATCH 01/18] removing feature flag for using new Entity Item component from ADS templates --- app/client/src/ce/entities/FeatureFlag.ts | 2 - .../Editor/IDE/EditorPane/JS/old/ListItem.tsx | 27 --- .../IDE/EditorPane/Query/old/ListItem.tsx | 25 --- .../Editor/IDE/EditorPane/JS/old/ListItem.tsx | 1 - .../IDE/EditorPane/Query/old/ListItem.tsx | 1 - .../Explorer/Widgets/OldWidgetEntityList.tsx | 43 ---- .../Explorer/Widgets/WidgetContextMenu.tsx | 83 -------- .../Editor/Explorer/Widgets/WidgetEntity.tsx | 194 ------------------ .../pages/Editor/IDE/EditorPane/JS/List.tsx | 74 ++----- .../Editor/IDE/EditorPane/Query/List.tsx | 76 ++----- .../pages/Editor/IDE/EditorPane/UI/List.tsx | 11 +- 11 files changed, 25 insertions(+), 512 deletions(-) delete mode 100644 app/client/src/ce/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx delete mode 100644 app/client/src/ce/pages/Editor/IDE/EditorPane/Query/old/ListItem.tsx delete mode 100644 app/client/src/ee/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx delete mode 100644 app/client/src/ee/pages/Editor/IDE/EditorPane/Query/old/ListItem.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 diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index 23b10ca1545b..9cf129e41dcb 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -51,7 +51,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", } as const; export type FeatureFlag = keyof typeof FEATURE_FLAG; @@ -95,7 +94,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, }; export const AB_TESTING_EVENT_KEYS = { diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx deleted file mode 100644 index 65db9a369bd6..000000000000 --- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/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/entities/IDE/constants"; - -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/Editor/IDE/EditorPane/Query/old/ListItem.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/old/ListItem.tsx deleted file mode 100644 index 90db39393a2a..000000000000 --- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/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/entities/IDE/constants"; - -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/Editor/IDE/EditorPane/JS/old/ListItem.tsx b/app/client/src/ee/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx deleted file mode 100644 index f105e9a1ae28..000000000000 --- a/app/client/src/ee/pages/Editor/IDE/EditorPane/JS/old/ListItem.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "ce/pages/Editor/IDE/EditorPane/JS/old/ListItem"; diff --git a/app/client/src/ee/pages/Editor/IDE/EditorPane/Query/old/ListItem.tsx b/app/client/src/ee/pages/Editor/IDE/EditorPane/Query/old/ListItem.tsx deleted file mode 100644 index 4157586a5aaa..000000000000 --- a/app/client/src/ee/pages/Editor/IDE/EditorPane/Query/old/ListItem.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "ce/pages/Editor/IDE/EditorPane/Query/old/ListItem"; 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 921bfd15a228..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 "entities/DataTree/dataTreeFactory"; -import type { TreeDropdownOption } from "pages/Editor/Explorer/ContextMenu"; -import ContextMenu from "pages/Editor/Explorer/ContextMenu"; -import { useDeleteWidget } from "pages/Editor/IDE/EditorPane/UI/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/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx index 992afea302bd..f0b69033e90e 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; import { Flex, - Text, SearchAndAdd, NoSearchResults, EntityGroupsList, @@ -10,19 +9,12 @@ import { 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 "ee/pages/Editor/IDE/EditorPane/JS/hooks"; -import { JSListItem } from "ee/pages/Editor/IDE/EditorPane/JS/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 { useCreateActionsPermissions } from "ee/entities/IDE/hooks/useCreateActionsPermissions"; import type { EntityItem } from "ee/entities/IDE/constants"; import { JSEntity } from "ee/pages/Editor/IDE/EditorPane/JS/ListItem"; @@ -37,17 +29,11 @@ const JSContainer = styled(Flex)` 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 canCreateActions = useCreateActionsPermissions(ideType); - const isNewADSTemplatesEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - const filteredItemGroups = filterEntityGroupsBySearchTerm( searchTerm, itemGroups, @@ -80,54 +66,18 @@ const ListJSObjects = () => { gap="spaces-4" 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 !== "" ? ( { 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 canCreateActions = useCreateActionsPermissions(ideType); - const showWorkflows = useSelector(getShowWorkflowFeature); - - const isNewADSTemplatesEnabled = useFeatureFlag( - FEATURE_FLAG.release_ads_entity_item_enabled, - ); - const filteredItemGroups = filterEntityGroupsBySearchTerm( searchTerm, itemGroups, @@ -75,53 +58,18 @@ const ListQuery = () => { gap="spaces-4" 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 !== "" ? ( 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} From 304b6d7bb37f29acf027c7946faab3c24f94c296 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 6 Feb 2025 21:17:00 +0530 Subject: [PATCH 02/18] fixing failing unit tests --- .../EditableEntityName/EditableEntityName.tsx | 1 + .../EntityListTree/EntityListTree.tsx | 5 ++++- .../JS/utils/getJSContextMenuByIdeType.tsx | 4 ++++ .../JS/EntityItem/AppJSContextMenuItems.tsx | 4 ++++ .../IDE/EditorPane/JS/EntityItem/JSEntityItem.tsx | 15 ++++++++++----- .../Editor/IDE/EditorPane/JS/JSRender.test.tsx | 4 ++-- .../src/pages/Editor/IDE/EditorPane/JS/List.tsx | 2 +- .../Query/EntityItem/QueryEntityItem.tsx | 3 ++- .../pages/Editor/IDE/EditorPane/Query/List.tsx | 2 +- .../IDE/EditorPane/Query/QueryRender.test.tsx | 12 ++++++------ .../EditorPane/components/EntityContextMenu.tsx | 5 +++-- .../Editor/JSEditor/AppJSEditorContextMenu.tsx | 6 +++++- 12 files changed, 43 insertions(+), 20 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx index 7037649ca10e..3a9422710881 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx @@ -73,6 +73,7 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { > )} - + {item.children && item.isExpanded ? ( diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils/getJSContextMenuByIdeType.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils/getJSContextMenuByIdeType.tsx index d56db7010543..72b78a65899a 100644 --- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils/getJSContextMenuByIdeType.tsx +++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils/getJSContextMenuByIdeType.tsx @@ -8,6 +8,10 @@ export const getJSContextMenuByIdeType = ( ideType: IDEType, jsAction: JSCollection, ) => { + if (Boolean(jsAction?.isMainJSCollection)) { + return null; + } + switch (ideType) { case IDE_TYPE.App: { return ( diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx index 849144058dee..9b585d2dcbb0 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx @@ -35,6 +35,10 @@ export function AppJSContextMenuItems(props: Props) { jsActionPermissions, ); + if (Boolean(jsAction?.isMainJSCollection)) { + return null; + } + return ( <> diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/JSEntityItem.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/JSEntityItem.tsx index 9a341d91324a..7111d3fa70da 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/JSEntityItem.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/JSEntityItem.tsx @@ -48,6 +48,11 @@ export const JSEntityItem = ({ item }: { item: EntityItemProps }) => { jsActionPermissions, ); + const canEdit = useMemo( + () => canManageJSAction && !Boolean(jsAction?.isMainJSCollection), + [canManageJSAction, jsAction?.isMainJSCollection], + ); + const navigateToUrl = jsCollectionIdURL({ baseParentEntityId: parentEntityId, baseCollectionId: jsAction.baseId, @@ -70,7 +75,7 @@ export const JSEntityItem = ({ item }: { item: EntityItemProps }) => { const nameEditorConfig = useMemo(() => { return { - canEdit: canManageJSAction && !Boolean(jsAction.isMainJSCollection), + canEdit, isEditing: editingEntity === jsAction.id, isLoading: updatingEntity === jsAction.id, onEditComplete: exitEditMode, @@ -79,13 +84,12 @@ export const JSEntityItem = ({ item }: { item: EntityItemProps }) => { validateName: (newName: string) => validateName(newName, item.title), }; }, [ - canManageJSAction, + canEdit, editingEntity, exitEditMode, ideType, item.title, jsAction.id, - jsAction.isMainJSCollection, dispatch, updatingEntity, validateName, @@ -93,9 +97,10 @@ export const JSEntityItem = ({ item }: { item: EntityItemProps }) => { return ( { expect(getAllByText("JSObject1").length).toEqual(2); // Left pane active state expect( - getByTestId("t--entity-item-JSObject1").classList.contains("active"), - ).toBe(true); + getByTestId("t--entity-item-JSObject1").getAttribute("data-selected"), + ).toBe("true"); // Tabs active state expect( getByTestId("t--ide-tab-jsobject1").classList.contains("active"), diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx index f0b69033e90e..1815316f4523 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx @@ -73,7 +73,7 @@ const ListJSObjects = () => { items: items, className: "", renderList: (item: EntityItem) => { - return ; + return ; }, }; })} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/QueryEntityItem.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/QueryEntityItem.tsx index f74f53d02d28..b8bc46f7db10 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/QueryEntityItem.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/QueryEntityItem.tsx @@ -107,8 +107,9 @@ export const QueryEntityItem = ({ item }: { item: EntityItemProps }) => { return ( { items: items, className: "", renderList: (item: EntityItem) => { - return ; + return ; }, }; })} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx index 97ac93702354..2fecd9e6332b 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx @@ -156,8 +156,8 @@ describe("IDE URL rendering of Queries", () => { expect(getAllByText("Api1").length).toEqual(2); // Left pane active state expect( - getByTestId("t--entity-item-Api1").classList.contains("active"), - ).toBe(true); + getByTestId("t--entity-item-Api1").getAttribute("data-selected"), + ).toBe("true"); // Tabs active state expect(getByTestId("t--ide-tab-api1").classList.contains("active")).toBe( true, @@ -367,8 +367,8 @@ describe("IDE URL rendering of Queries", () => { expect(getAllByText("Query1").length).toBe(2); // Left pane active state expect( - getByTestId("t--entity-item-Query1").classList.contains("active"), - ).toBe(true); + getByTestId("t--entity-item-Query1").getAttribute("data-selected"), + ).toBe("true"); // Tabs active state expect( getByTestId("t--ide-tab-query1").classList.contains("active"), @@ -571,8 +571,8 @@ describe("IDE URL rendering of Queries", () => { expect(getAllByText("Sheets1").length).toBe(2); // Left pane active state expect( - getByTestId("t--entity-item-Sheets1").classList.contains("active"), - ).toBe(true); + getByTestId("t--entity-item-Sheets1").getAttribute("data-selected"), + ).toBe("true"); // Tabs active state expect( getByTestId("t--ide-tab-sheets1").classList.contains("active"), diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/EntityContextMenu.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/EntityContextMenu.tsx index a6b1e5bf6b54..afe349768134 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/EntityContextMenu.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/components/EntityContextMenu.tsx @@ -8,7 +8,8 @@ import { import { EntityClassNames } from "pages/Editor/Explorer/Entity"; interface Props { - children?: React.ReactNode[] | React.ReactNode; + children: React.ReactNode[] | React.ReactNode; + dataTestId?: string; } const EntityContextMenu = (props: Props) => { @@ -26,7 +27,7 @@ const EntityContextMenu = (props: Props) => { >