EnxDev commented on code in PR #36855:
URL: https://github.com/apache/superset/pull/36855#discussion_r2652664703
##########
superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.test.tsx:
##########
@@ -199,4 +199,102 @@ describe('TabsRenderer', () => {
expect(screen.getByText('Tab 1 Content')).toBeInTheDocument();
expect(screen.queryByText('Tab 2 Content')).not.toBeInTheDocument(); //
Not active
});
+
+ test('updates DndContext key when tabIds change to reset drag state', () => {
+ const threeTabItems: TabItem[] = [
+ {
+ key: 'tab-1',
+ label: <div>Tab 1</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 1 Content</div>,
+ },
+ {
+ key: 'tab-2',
+ label: <div>Tab 2</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 2 Content</div>,
+ },
+ {
+ key: 'tab-3',
+ label: <div>Tab 3</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 3 Content</div>,
+ },
+ ];
+
+ const mockRef = { current: null };
+ const onTabsReorderMock = jest.fn();
+ const initialTabIds = ['tab-1', 'tab-2', 'tab-3'];
+
+ const props: TabsRendererProps = {
+ ...mockProps,
+ tabItems: threeTabItems,
+ tabIds: initialTabIds,
+ editMode: true,
+ tabsDragSourceRef: mockRef,
+ onTabsReorder: onTabsReorderMock,
+ };
+
+ const { rerender } = render(<TabsRenderer {...props} />);
+
+ // Verify component renders in edit mode with DndContext
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
+
+ // Simulate first reorder: tab-1 moved to end -> ['tab-2', 'tab-3',
'tab-1']
+ const reorderedTabIds = ['tab-2', 'tab-3', 'tab-1'];
+ rerender(<TabsRenderer {...props} tabIds={reorderedTabIds} />);
+
+ // The component should re-render with new tabIds
+ // The key prop on DndContext (JSON.stringify(tabIds)) ensures fresh drag
state
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
+
+ // Simulate second reorder: tab-2 moved to end -> ['tab-3', 'tab-1',
'tab-2']
+ const secondReorderedTabIds = ['tab-3', 'tab-1', 'tab-2'];
+ rerender(<TabsRenderer {...props} tabIds={secondReorderedTabIds} />);
+
+ // Component should still render correctly after multiple reorders
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
+ });
+
+ test('renders DndContext in edit mode for tab reordering', () => {
+ const mockRef = { current: null };
+ const onTabsReorderMock = jest.fn();
+
+ const editModeProps: TabsRendererProps = {
+ ...mockProps,
+ editMode: true,
+ tabsDragSourceRef: mockRef,
+ onTabsReorder: onTabsReorderMock,
+ };
+
+ render(<TabsRenderer {...editModeProps} />);
+
+ // In edit mode, tabs should be draggable
+ const tabsContainer = screen.getByTestId('dashboard-component-tabs');
+ expect(tabsContainer).toBeInTheDocument();
+
+ // Verify the tabs are rendered
+ expect(screen.getByText('Tab 1')).toBeInTheDocument();
+ expect(screen.getByText('Tab 2')).toBeInTheDocument();
+ });
+
+ test('does not render DndContext when not in edit mode', () => {
+ const onTabsReorderMock = jest.fn();
+
+ const viewModeProps: TabsRendererProps = {
+ ...mockProps,
+ editMode: false,
+ onTabsReorder: onTabsReorderMock,
+ };
+
+ render(<TabsRenderer {...viewModeProps} />);
+
+ // Component should render without drag functionality
+ const tabsContainer = screen.getByTestId('dashboard-component-tabs');
+ expect(tabsContainer).toBeInTheDocument();
+
+ // Tabs should still be visible
+ expect(screen.getByText('Tab 1')).toBeInTheDocument();
+ expect(screen.getByText('Tab 2')).toBeInTheDocument();
+ });
Review Comment:
It should be update as well
##########
superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.test.tsx:
##########
@@ -199,4 +199,102 @@ describe('TabsRenderer', () => {
expect(screen.getByText('Tab 1 Content')).toBeInTheDocument();
expect(screen.queryByText('Tab 2 Content')).not.toBeInTheDocument(); //
Not active
});
+
+ test('updates DndContext key when tabIds change to reset drag state', () => {
+ const threeTabItems: TabItem[] = [
+ {
+ key: 'tab-1',
+ label: <div>Tab 1</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 1 Content</div>,
+ },
+ {
+ key: 'tab-2',
+ label: <div>Tab 2</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 2 Content</div>,
+ },
+ {
+ key: 'tab-3',
+ label: <div>Tab 3</div>,
+ closeIcon: <div>×</div>,
+ children: <div>Tab 3 Content</div>,
+ },
+ ];
+
+ const mockRef = { current: null };
+ const onTabsReorderMock = jest.fn();
+ const initialTabIds = ['tab-1', 'tab-2', 'tab-3'];
+
+ const props: TabsRendererProps = {
+ ...mockProps,
+ tabItems: threeTabItems,
+ tabIds: initialTabIds,
+ editMode: true,
+ tabsDragSourceRef: mockRef,
+ onTabsReorder: onTabsReorderMock,
+ };
+
+ const { rerender } = render(<TabsRenderer {...props} />);
+
+ // Verify component renders in edit mode with DndContext
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
+
+ // Simulate first reorder: tab-1 moved to end -> ['tab-2', 'tab-3',
'tab-1']
+ const reorderedTabIds = ['tab-2', 'tab-3', 'tab-1'];
+ rerender(<TabsRenderer {...props} tabIds={reorderedTabIds} />);
+
+ // The component should re-render with new tabIds
+ // The key prop on DndContext (JSON.stringify(tabIds)) ensures fresh drag
state
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
+
+ // Simulate second reorder: tab-2 moved to end -> ['tab-3', 'tab-1',
'tab-2']
+ const secondReorderedTabIds = ['tab-3', 'tab-1', 'tab-2'];
+ rerender(<TabsRenderer {...props} tabIds={secondReorderedTabIds} />);
+
+ // Component should still render correctly after multiple reorders
+ expect(screen.getByTestId('dashboard-component-tabs')).toBeInTheDocument();
Review Comment:
It should be update
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
