From a0d9e990c6fba0a292f1d48406d8003e6824cf5f Mon Sep 17 00:00:00 2001 From: William Thorenfeldt <48119543+wrt95@users.noreply.github.com> Date: Mon, 18 Nov 2024 13:07:39 +0100 Subject: [PATCH] chore: replace DragAndDropTree with StudioDragAndDropTree (#14062) --- .../StudioDragAndDropTree.stories.tsx | 29 +++++ .../StudioDragAndDropTreeItem.tsx | 2 +- .../components/StudioDragAndDropTree/index.ts | 2 + .../studio-components/src/components/index.ts | 1 + .../components/NodePanel/NodePanel.test.tsx | 12 +- .../components/SchemaEditor/SchemaEditor.tsx | 7 +- .../SchemaTree/SchemaNode/SchemaNode.test.tsx | 10 +- .../SchemaTree/SchemaNode/SchemaNode.tsx | 6 +- .../components/SchemaTree/SchemaTree.test.tsx | 6 +- .../src/components/SchemaTree/SchemaTree.tsx | 6 +- .../TypesInspector/TypeItem.test.tsx | 6 +- .../components/TypesInspector/TypeItem.tsx | 6 +- frontend/packages/shared/package.json | 2 - .../DragAndDropTree/DragAndDropTree.test.tsx | 123 ------------------ .../DragAndDropTreeItem.module.css | 11 -- .../DragAndDropTreeItem.test.tsx | 104 --------------- .../DragAndDropTreeItem.tsx | 71 ---------- .../DragAndDropTreeItemContext.ts | 9 -- .../DragAndDropTreeItem/index.ts | 2 - .../DragAndDropTreeProvider.tsx | 12 -- .../DragAndDropTreeProvider/index.ts | 2 - .../DragAndDropTreeRoot.test.tsx | 47 ------- .../DragAndDropTreeRoot.tsx | 35 ----- .../DragAndDropTreeRootContext.ts | 9 -- .../DragAndDropTreeRoot/index.ts | 4 - .../EmptyList/EmptyList.module.css | 3 - .../DragAndDropTree/EmptyList/EmptyList.tsx | 13 -- .../DragAndDropTree/EmptyList/index.ts | 2 - .../src/components/DragAndDropTree/index.ts | 18 --- frontend/packages/ux-editor-v3/package.json | 2 - .../src/components/Elements/ToolbarItem.tsx | 9 +- .../containers/DesignView/FormLayout.test.tsx | 6 +- .../DesignView/FormTree/FormItem/FormItem.tsx | 6 +- .../DesignView/FormTree/FormTree.test.tsx | 6 +- .../DesignView/FormTree/FormTree.tsx | 6 +- .../src/containers/FormDesigner.tsx | 7 +- frontend/packages/ux-editor/package.json | 2 - .../Elements/ConfPageToolbar.test.tsx | 6 +- .../src/components/Elements/Elements.test.tsx | 6 +- .../src/components/Elements/ToolbarItem.tsx | 6 +- .../containers/DesignView/FormLayout.test.tsx | 6 +- .../DesignView/FormTree/FormItem/FormItem.tsx | 6 +- .../DesignView/FormTree/FormTree.test.tsx | 6 +- .../DesignView/FormTree/FormTree.tsx | 6 +- .../ux-editor/src/containers/FormDesigner.tsx | 6 +- yarn.lock | 6 - 46 files changed, 107 insertions(+), 551 deletions(-) create mode 100644 frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.module.css delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.test.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItemContext.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/index.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/DragAndDropTreeProvider.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/index.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.test.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/index.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.module.css delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.tsx delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/EmptyList/index.ts delete mode 100644 frontend/packages/shared/src/components/DragAndDropTree/index.ts diff --git a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx new file mode 100644 index 00000000000..9621879243d --- /dev/null +++ b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx @@ -0,0 +1,29 @@ +import React, { type ReactNode } from 'react'; +import type { Meta, StoryFn } from '@storybook/react'; +import { StudioDragAndDropTree } from './index'; + +type Story = StoryFn; + +export const Preview: Story = (): React.ReactElement => ( + {}} onMove={() => {}} rootId='1'> + +
{children}
} + nodeId='Id' + /> + + +); + +const meta: Meta = { + title: 'Components/StudioDragAndDropTree', + component: Preview, + argTypes: {}, +}; + +Preview.args = {}; + +export default meta; diff --git a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx index 8837e0b705b..1aa0d2292a0 100644 --- a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx +++ b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx @@ -4,7 +4,7 @@ import type { ReactNode } from 'react'; import React, { useContext } from 'react'; import { StudioDragAndDropTreeRootContext } from '../StudioDragAndDropTreeRoot'; import { StudioDragAndDropTreeItemContext } from './StudioDragAndDropTreeItemContext'; -import classes from './DragAndDropTreeItem.module.css'; +import classes from './StudioDragAndDropTreeItem.module.css'; import cn from 'classnames'; import { StudioEmptyList } from '../StudioEmptyList'; diff --git a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts index 692e674f65b..86a49a5a53e 100644 --- a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts +++ b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts @@ -16,3 +16,5 @@ export const StudioDragAndDropTree: StudioDragAndDropTreeComponent = { Provider: StudioDragAndDropTreeProvider, NewItem: StudioDragAndDrop.NewItem, }; + +export { type StudioDragAndDropTreeProviderProps } from './StudioDragAndDropTreeProvider'; diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts index 681bce3281e..092dff86449 100644 --- a/frontend/libs/studio-components/src/components/index.ts +++ b/frontend/libs/studio-components/src/components/index.ts @@ -19,6 +19,7 @@ export * from './StudioDeleteButton'; export * from './StudioDisplayTile'; export * from './StudioDivider'; export * from './StudioDragAndDrop'; +export * from './StudioDragAndDropTree'; export * from './StudioDropdownMenu'; export * from './StudioError'; export * from './StudioErrorMessage'; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx index c395769d2cd..1e1705a392b 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx @@ -9,8 +9,8 @@ import { stringDefinitionNodeMock, uiSchemaNodesMock, } from '../../../test/mocks/uiSchemaMock'; -import type { DragAndDropTreeProviderProps } from 'app-shared/components/DragAndDropTree/DragAndDropTreeProvider'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import type { StudioDragAndDropTreeProviderProps } from '@studio/components'; +import { StudioDragAndDropTree } from '@studio/components'; import { screen } from '@testing-library/react'; import { textMock } from '@studio/testing/mocks/i18nMock'; import userEvent from '@testing-library/user-event'; @@ -37,7 +37,7 @@ const defaultAppContextProps: SchemaEditorAppContextProps = { }; const defaultDragAndDropTreeProviderProps: Omit< - DragAndDropTreeProviderProps, + StudioDragAndDropTreeProviderProps, 'children' > = { onAdd: jest.fn(), @@ -153,7 +153,7 @@ describe('NodePanel', () => { type RenderNodePanelProps = { props?: Partial; appContextProps?: Partial; - dragAndDropTreeProviderProps?: Partial>; + dragAndDropTreeProviderProps?: Partial>; }; const renderNodePanel = ( @@ -164,10 +164,10 @@ const renderNodePanel = ( }, ) => renderWithProviders({ appContextProps: { ...defaultAppContextProps, ...appContextProps } })( - + {...defaultDragAndDropTreeProviderProps} {...dragAndDropTreeProviderProps} > - , + , ); diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 6b287d5be74..7b392025009 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -5,11 +5,10 @@ import { SchemaInspector } from '../SchemaInspector'; import type { UiSchemaNodes } from '@altinn/schema-model'; import { ROOT_POINTER } from '@altinn/schema-model'; import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; import { useMoveProperty } from './hooks/useMoveProperty'; import { useAddReference } from './hooks/useAddReference'; import { NodePanel } from '../NodePanel'; -import { StudioResizableLayout } from '@studio/components'; +import { StudioResizableLayout, StudioDragAndDropTree } from '@studio/components'; import { useUserQuery } from 'app-development/hooks/queries'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; @@ -24,7 +23,7 @@ export const SchemaEditor = () => { selectedTypePointer && schemaModel.getNodeBySchemaPointer(selectedTypePointer); return ( - { - + ); }; diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx index 30fc2148797..91c39dc098b 100644 --- a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx @@ -1,5 +1,5 @@ import { renderWithProviders } from '../../../../test/renderWithProviders'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { SchemaNode } from './SchemaNode'; import { userEvent } from '@testing-library/user-event'; import type { FieldNode } from '@altinn/schema-model'; @@ -204,11 +204,11 @@ const render = ({ return renderWithProviders({ appContextProps: { save, schemaModel, selectedUniquePointer, setSelectedUniquePointer }, })( - - + + - - , + + , ); }; diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx index e657d385049..e5b3dfe532d 100644 --- a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx @@ -7,7 +7,7 @@ import { isNodeValidParent, isReference, } from '@altinn/schema-model'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { renderSchemaNodeList } from '../renderSchemaNodeList'; import { renderIcon } from './renderIcon'; import { ActionButtons } from './ActionButtons'; @@ -46,7 +46,7 @@ export const SchemaNode = ({ ); return ( - {renderSchemaNodeList(savableModel, schemaPointer, uniquePointer)} - + ); }; diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx index 67a0d6033c3..2352352220a 100644 --- a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx @@ -5,7 +5,7 @@ import { definitionNodeMock, uiSchemaNodesMock, } from '../../../test/mocks/uiSchemaMock'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { SchemaTree } from './SchemaTree'; import { renderWithProviders } from '../../../test/renderWithProviders'; import { screen } from '@testing-library/react'; @@ -34,7 +34,7 @@ describe('SchemaTree', () => { const render = (schemaPointer?: string) => renderWithProviders()( - + - , + , ); diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx index 7f257722c53..749e0933b87 100644 --- a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { renderSchemaNodeList } from './renderSchemaNodeList'; import { useTranslation } from 'react-i18next'; import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel'; @@ -17,12 +17,12 @@ export const SchemaTree = ({ schemaPointer }: SchemaTreeProps) => { const { t } = useTranslation(); return ( - {renderSchemaNodeList(savableModel, schemaPointer, uniquePointer)} - + ); }; diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx index 258a6dbb123..3eded0b6109 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx @@ -4,7 +4,7 @@ import { FieldType, ObjectKind, ROOT_POINTER } from '@altinn/schema-model'; import { screen } from '@testing-library/react'; import { TypeItem } from './TypeItem'; import { renderWithProviders } from '../../../test/renderWithProviders'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; describe('TypeItem', () => { const uiSchemaNode: FieldNode = { @@ -21,9 +21,9 @@ describe('TypeItem', () => { }; it('should render the component', () => { renderWithProviders()( - + - , + , ); expect(screen.getByText('MyTestType')).toBeInTheDocument(); }); diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx index af55723e7f2..a77719e8bc3 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx @@ -5,7 +5,7 @@ import { CogIcon, FileJsonIcon } from '@studio/icons'; import classes from './TypeItem.module.css'; import classNames from 'classnames'; import { typeItemId } from '@studio/testing/testids'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; export interface TypeItemProps { uiSchemaNode: UiSchemaNode; @@ -20,7 +20,7 @@ export const TypeItem = ({ uiSchemaNode, selected, setSelectedTypePointer }: Typ const name = extractNameFromPointer(uiSchemaNode.schemaPointer); return ( - +
{name}
- + ); }; diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index fa1803bc6a7..3476ac19458 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -6,8 +6,6 @@ "classnames": "2.5.1", "qs": "6.13.0", "react": "18.3.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", "react-dom": "18.3.1", "react-router-dom": "6.26.2" }, diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx deleted file mode 100644 index b6f51a98d1a..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import { fireEvent, render as renderRtl, screen } from '@testing-library/react'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; -import userEvent from '@testing-library/user-event'; - -const user = userEvent.setup(); - -// Test data: -const onAdd = jest.fn(); -const onMove = jest.fn(); -const rootId = 'rootId'; -const emptyMessage = 'No items'; -const rootNodeId1 = '1'; -const rootNodeLabel1 = 'Test 1'; -const subNodeId1_1 = '1.1'; -const subNodeLabel1_1 = 'Test 1.1'; -const subNodeId1_2 = '1.2'; -const subNodeLabel1_2 = 'Test 1.2'; -const subSubNodeId1_1_1 = '1.1.1'; -const subSubNodeLabel1_1_1 = 'Test 1.1.1'; -const rootNodeId2 = '2'; -const rootNodeLabel2 = 'Test 2'; -const subNodeId2_1 = '2.1'; -const subNodeLabel2_1 = 'Test 2.1'; - -const render = () => - renderRtl( - - - - - - - - - - - - - , - ); - -describe('DragAndDropTree', () => { - it('Renders root items', () => { - render(); - expect( - screen.getByRole('treeitem', { name: rootNodeLabel1, expanded: false }), - ).toBeInTheDocument(); - expect( - screen.getByRole('treeitem', { name: rootNodeLabel2, expanded: false }), - ).toBeInTheDocument(); - }); - - it('Expands an item when clicked', async () => { - render(); - const firstItem = screen.getByRole('treeitem', { name: rootNodeLabel1, expanded: false }); - await user.click(firstItem); - expect(screen.getByRole('treeitem', { name: subNodeLabel1_1 })).toBeInTheDocument(); - expect(screen.getByRole('treeitem', { name: subNodeLabel1_2 })).toBeInTheDocument(); - }); - - it('Focuses on first node when user presses the tab key', async () => { - render(); - expect(screen.getByRole('treeitem', { name: rootNodeLabel1 })).not.toHaveFocus(); - await user.tab(); - expect(screen.getByRole('treeitem', { name: rootNodeLabel1 })).toHaveFocus(); - }); - - it('Focuses on next node when user presses the down arrow key', async () => { - render(); - const firstItem = screen.getByRole('treeitem', { name: rootNodeLabel1 }); - fireEvent.keyDown(firstItem, { key: 'ArrowDown' }); - - const secondItem = screen.getByRole('treeitem', { name: rootNodeLabel2 }); - expect(secondItem).toHaveFocus(); - }); - - it('Does not display empty message when there are items', () => { - render(); - expect(screen.queryByText(emptyMessage)).not.toBeInTheDocument(); - }); - - it('Displays empty message when there are no items', () => { - renderRtl( - - - , - ); - expect(screen.getByText(emptyMessage)).toBeInTheDocument(); - }); - - it('Removes empty message when items are added', () => { - const { rerender } = renderRtl( - - - , - ); - rerender( - - - - - , - ); - expect(screen.queryByText(emptyMessage)).not.toBeInTheDocument(); - }); - - it('Adds empty message when items are removed', () => { - const { rerender } = renderRtl( - - - - - , - ); - rerender( - - - , - ); - expect(screen.getByText(emptyMessage)).toBeInTheDocument(); - }); -}); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.module.css b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.module.css deleted file mode 100644 index 6e15cdbb848..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.item.hasHoveredItem { - background-color: color-mix( - in srgb, - var(--fds-semantic-surface-action-first-no_fill-hover), - transparent - ); -} - -.labelButtonWrapper.hasHoveredItem { - background-color: var(--fds-semantic-surface-action-first-no_fill-hover); -} diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.test.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.test.tsx deleted file mode 100644 index a4bd891d189..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.test.tsx +++ /dev/null @@ -1,104 +0,0 @@ -/* eslint-disable testing-library/no-container, testing-library/no-node-access, react/display-name */ - -import React from 'react'; -import { render as renderRtl, screen } from '@testing-library/react'; -import type { DragAndDropTreeItemProps } from './DragAndDropTreeItem'; -import { DragAndDropTreeItem } from './DragAndDropTreeItem'; -import type { DragAndDropTreeRootContextProps } from '../DragAndDropTreeRoot'; -import { DragAndDropTreeRootContext } from '../DragAndDropTreeRoot'; -import { DragAndDropTreeProvider } from '../DragAndDropTreeProvider'; -import type { DragAndDropTreeItemContextProps } from './DragAndDropTreeItemContext'; -import { DragAndDropTreeItemContext } from './DragAndDropTreeItemContext'; -import { StudioTreeView } from '@studio/components'; - -// Test data: -const label = 'Test'; -const nodeId = 'node'; -const parentId = 'parent'; -const onAdd = jest.fn(); -const onMove = jest.fn(); -const rootId = 'rootId'; -const hoveredNodeParent = null; -const setHoveredNodeParent = jest.fn(); -const defaultProps: DragAndDropTreeItemProps = { label, nodeId }; -const defaultItemContextProps: DragAndDropTreeItemContextProps = { nodeId: parentId }; -const defaultRootContextProps: DragAndDropTreeRootContextProps = { - hoveredNodeParent, - setHoveredNodeParent, -}; - -interface RenderProps { - props?: Partial; - itemContextProps?: Partial; - rootContextProps?: Partial; -} - -type RenderWrapperProps = Omit; - -const wrapper = - ({ itemContextProps = {}, rootContextProps = {} }: RenderWrapperProps = {}) => - ( - { children }, // eslint-disable-line react/prop-types - ) => ( - - - - - {children} - - - - - ); -const render = ({ props = {}, itemContextProps = {}, rootContextProps = {} }: RenderProps = {}) => - renderRtl(, { - wrapper: wrapper({ itemContextProps, rootContextProps }), - }); - -// Mocks: -jest.mock('./DragAndDropTreeItem.module.css', () => ({ - item: 'item', - hasHoveredItem: 'hasHoveredItem', -})); - -describe('DragAndDropTreeItem', () => { - it('Renders a treeitem with the given label', () => { - render(); - expect(screen.getByRole('treeitem', { name: label })).toBeInTheDocument(); - }); - - it('Does not have the hasHoveredItem class name by default', () => { - const { container } = render(); - const item = container.querySelector('.item'); - expect(item).not.toHaveClass('hasHoveredItem'); - }); - - it('Has the hasHoveredItem class name if hoveredNodeParent matches nodeId', () => { - const { container } = render({ rootContextProps: { hoveredNodeParent: nodeId } }); - const item = container.querySelector('.item'); - expect(item).toHaveClass('hasHoveredItem'); - }); - - it('Does not display the empty message by default', () => { - const emptyMessage = 'Empty'; - render({ props: { emptyMessage } }); - expect(screen.queryByText(emptyMessage)).not.toBeInTheDocument(); - }); - - it('Displays the empty message when the component is expandable and there are no children', () => { - const emptyMessage = 'Empty'; - render({ props: { expandable: true, emptyMessage } }); - expect(screen.getByText(emptyMessage)).toBeInTheDocument(); - }); - - it('Does not display the empty message when the component is expandable and there are subitems', () => { - const emptyMessage = 'Empty'; - const children = ; - render({ props: { expandable: true, emptyMessage, children } }); - expect(screen.queryByText(emptyMessage)).not.toBeInTheDocument(); - }); -}); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.tsx deleted file mode 100644 index 34f537d5719..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { StudioTreeView, StudioDragAndDrop } from '@studio/components'; -import type { ReactNode } from 'react'; -import React, { useContext } from 'react'; -import { DragAndDropTreeRootContext } from '../DragAndDropTreeRoot'; -import { DragAndDropTreeItemContext } from './DragAndDropTreeItemContext'; -import classes from './DragAndDropTreeItem.module.css'; -import cn from 'classnames'; -import { EmptyList } from 'app-shared/components/DragAndDropTree/EmptyList/EmptyList'; - -export interface DragAndDropTreeItemProps { - children?: ReactNode; - emptyMessage?: string; - expandable?: boolean; - icon?: ReactNode; - label: string; - labelWrapper?: (children: ReactNode) => ReactNode; - nodeId: string; - title?: string; -} - -export const DragAndDropTreeItem = ({ - children, - emptyMessage, - expandable, - icon, - label, - labelWrapper, - nodeId, - title, -}: DragAndDropTreeItemProps) => { - const { hoveredNodeParent, setHoveredNodeParent } = useContext(DragAndDropTreeRootContext); - const { nodeId: parentId } = useContext(DragAndDropTreeItemContext); - - const isExpandable = expandable || Boolean(children); - const renderLabel = labelWrapper ?? ((node) => node); - const handleDragOver = () => setHoveredNodeParent(parentId); - const hasHoveredItemClass = hoveredNodeParent === nodeId ? classes.hasHoveredItem : null; - const labelButtonWrapperClass = cn(classes.labelButtonWrapper, hasHoveredItemClass); - - return ( - ( - - ( -
- {renderLabel(node)} -
- )} - title={title} - > - {isExpandable && renderChildren(children, emptyMessage)} - - - )} - /> - ); -}; - -const renderChildren = (children: ReactNode, emptyMessage?: string) => { - const content = children || {emptyMessage}; - return {content}; -}; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItemContext.ts b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItemContext.ts deleted file mode 100644 index 13c084b18e8..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItemContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createContext } from 'react'; - -export type DragAndDropTreeItemContextProps = { - nodeId: string; -}; - -export const DragAndDropTreeItemContext = createContext({ - nodeId: null, -}); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/index.ts b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/index.ts deleted file mode 100644 index dc64c1ef9a2..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { DragAndDropTreeItem } from './DragAndDropTreeItem'; -export type { DragAndDropTreeItemProps } from './DragAndDropTreeItem'; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/DragAndDropTreeProvider.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/DragAndDropTreeProvider.tsx deleted file mode 100644 index fe32741e6ae..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/DragAndDropTreeProvider.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { StudioDragAndDrop, type StudioDragAndDropProviderProps } from '@studio/components'; - -export type DragAndDropTreeProviderProps = Omit, 'gap'>; - -export function DragAndDropTreeProvider(props: DragAndDropTreeProviderProps) { - return ( - - {props.children} - - ); -} diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/index.ts b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/index.ts deleted file mode 100644 index a865940e602..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { DragAndDropTreeProvider } from './DragAndDropTreeProvider'; -export type { DragAndDropTreeProviderProps } from './DragAndDropTreeProvider'; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.test.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.test.tsx deleted file mode 100644 index f6db352ce65..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { useContext } from 'react'; -import { render as renderRtl, renderHook, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { DragAndDropTreeRoot } from './DragAndDropTreeRoot'; -import { StudioDragAndDrop } from '@studio/components'; -import { DragAndDropTreeRootContext } from 'app-shared/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext'; - -const user = userEvent.setup(); - -// Test data: -const childrenTestId = 'test'; -const renderComponent = (children?: ReactNode) => ( - - -
{children}
- - -); - -const render = (children?: ReactNode) => renderRtl(renderComponent(children)); - -describe('DragAndDropTreeRoot', () => { - afterEach(jest.clearAllMocks); - - it('Renders children', () => { - render(); - expect(screen.getByTestId(childrenTestId)).toBeInTheDocument(); - }); - - it('Sets hovered node parent to given value when `setHoveredNodeParent` is called and back to null when mouse leaves', async () => { - const { result } = renderHook(() => useContext(DragAndDropTreeRootContext), { - wrapper: ({ children }) => renderComponent(children), - }); - const item = screen.getByTestId(childrenTestId); - - expect(result.current.hoveredNodeParent).toBeNull(); // Should be null by default - - const hoveredNodeParent = 'hoveredNodeParent'; - await user.hover(item); - await waitFor(() => result.current.setHoveredNodeParent(hoveredNodeParent)); // Simulate setHoveredNodeParent call from somewhere inside the children - expect(result.current.hoveredNodeParent).toBe(hoveredNodeParent); - - await user.unhover(item); // Simulate mouse leave - expect(result.current.hoveredNodeParent).toBeNull(); - }); -}); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.tsx deleted file mode 100644 index 38e88918e98..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { useState } from 'react'; -import { StudioTreeView, StudioDragAndDrop } from '@studio/components'; -import { DragAndDropTreeRootContext } from './DragAndDropTreeRootContext'; -import { EmptyList } from 'app-shared/components/DragAndDropTree/EmptyList'; - -export interface DragAndDropTreeRootProps { - children?: ReactNode; - emptyMessage?: string; - onSelect?: (nodeId: string) => void; - selectedId?: string; -} - -export const DragAndDropTreeRoot = ({ - children, - emptyMessage, - onSelect, - selectedId, -}: DragAndDropTreeRootProps) => { - const [hoveredNodeParent, setHoveredNodeParent] = useState(null); - - return ( - - - setHoveredNodeParent(null)} - selectedId={selectedId} - > - {children || {emptyMessage}} - - - - ); -}; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext.ts b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext.ts deleted file mode 100644 index 37096e82dea..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { Dispatch, SetStateAction } from 'react'; -import { createContext } from 'react'; - -export type DragAndDropTreeRootContextProps = { - hoveredNodeParent: string | null; - setHoveredNodeParent: Dispatch>; -}; - -export const DragAndDropTreeRootContext = createContext(null); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/index.ts b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/index.ts deleted file mode 100644 index c0c945c03c7..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { DragAndDropTreeRoot } from './DragAndDropTreeRoot'; -export type { DragAndDropTreeRootProps } from './DragAndDropTreeRoot'; -export { DragAndDropTreeRootContext } from './DragAndDropTreeRootContext'; -export type { DragAndDropTreeRootContextProps } from './DragAndDropTreeRootContext'; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.module.css b/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.module.css deleted file mode 100644 index 8e828ba804d..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.root { - padding: 0.5rem; -} diff --git a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.tsx b/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.tsx deleted file mode 100644 index 50dabe37a3f..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/EmptyList.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Paragraph } from '@digdir/designsystemet-react'; -import classes from './EmptyList.module.css'; - -export interface EmptyListProps { - children: string; -} - -export const EmptyList = ({ children }: EmptyListProps) => ( - - {children} - -); diff --git a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/index.ts b/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/index.ts deleted file mode 100644 index 06d0de6e53f..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/EmptyList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { EmptyList } from './EmptyList'; -export type { EmptyListProps } from './EmptyList'; diff --git a/frontend/packages/shared/src/components/DragAndDropTree/index.ts b/frontend/packages/shared/src/components/DragAndDropTree/index.ts deleted file mode 100644 index b698b6a6ff8..00000000000 --- a/frontend/packages/shared/src/components/DragAndDropTree/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { DragAndDropTreeItem } from './DragAndDropTreeItem'; -import { DragAndDropTreeRoot } from './DragAndDropTreeRoot'; -import { StudioDragAndDrop } from '@studio/components'; -import { DragAndDropTreeProvider } from './DragAndDropTreeProvider'; - -type DragAndDropTreeComponent = { - Item: typeof DragAndDropTreeItem; - Root: typeof DragAndDropTreeRoot; - Provider: typeof DragAndDropTreeProvider; - NewItem: typeof StudioDragAndDrop.NewItem; -}; - -export const DragAndDropTree: DragAndDropTreeComponent = { - Item: DragAndDropTreeItem, - Root: DragAndDropTreeRoot, - Provider: DragAndDropTreeProvider, - NewItem: StudioDragAndDrop.NewItem, -}; diff --git a/frontend/packages/ux-editor-v3/package.json b/frontend/packages/ux-editor-v3/package.json index 84f6c8627da..faccf04cfaf 100644 --- a/frontend/packages/ux-editor-v3/package.json +++ b/frontend/packages/ux-editor-v3/package.json @@ -8,8 +8,6 @@ "@studio/icons": "workspace:^", "classnames": "2.5.1", "react": "18.3.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", "react-dom": "18.3.1", "react-redux": "9.1.2", "redux": "5.0.1", diff --git a/frontend/packages/ux-editor-v3/src/components/Elements/ToolbarItem.tsx b/frontend/packages/ux-editor-v3/src/components/Elements/ToolbarItem.tsx index c86aabf7352..6d2bb0ace82 100644 --- a/frontend/packages/ux-editor-v3/src/components/Elements/ToolbarItem.tsx +++ b/frontend/packages/ux-editor-v3/src/components/Elements/ToolbarItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ToolbarItemComponent } from '../toolbar/ToolbarItemComponent'; import type { ComponentTypeV3 } from 'app-shared/types/ComponentTypeV3'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; interface IToolbarItemProps { text: string; @@ -13,9 +13,12 @@ interface IToolbarItemProps { export const ToolbarItem = ({ notDraggable, componentType, text, icon }: IToolbarItemProps) => { return (
- notDraggable={notDraggable} payload={componentType}> + + notDraggable={notDraggable} + payload={componentType} + > - +
); }; diff --git a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormLayout.test.tsx b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormLayout.test.tsx index 0cfe76425bd..2f809dfb395 100644 --- a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormLayout.test.tsx +++ b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormLayout.test.tsx @@ -5,7 +5,7 @@ import { layoutMock } from '../../testing/layoutMock'; import { screen } from '@testing-library/react'; import { renderWithMockStore } from '../../testing/mocks'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { FormItemContextProvider } from '../FormItemContext'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { internalLayoutWithMultiPageGroup } from '../../testing/layoutWithMultiPageGroupMocks'; @@ -33,9 +33,9 @@ describe('FormLayout', () => { const render = (props?: Partial) => renderWithMockStore()( - + - , + , ); diff --git a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormItem/FormItem.tsx b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormItem/FormItem.tsx index fd08c719ed5..b890e8990dd 100644 --- a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormItem/FormItem.tsx +++ b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormItem/FormItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { IInternalLayout } from '../../../../types/global'; import { getItem, isContainer } from '../../../../utils/formLayoutUtils'; import { renderItemList } from '../renderItemList'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { FormItemTitle } from './FormItemTitle'; import { formItemConfigs } from '../../../../data/formItemConfig'; import { useItemTitle } from './useItemTitle'; @@ -36,7 +36,7 @@ export const FormItem = ({ layout, id }: FormItemProps) => { ); return ( - } emptyMessage={t('ux_editor.container_empty')} expandable={isContainer(layout, id)} @@ -45,6 +45,6 @@ export const FormItem = ({ layout, id }: FormItemProps) => { nodeId={id} > {renderItemList(layout, id)} - + ); }; diff --git a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.test.tsx b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.test.tsx index bfbb208b2e3..b7e0b0616fb 100644 --- a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.test.tsx +++ b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { screen } from '@testing-library/react'; import { FormTree } from './FormTree'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { BASE_CONTAINER_ID, DEFAULT_LANGUAGE } from 'app-shared/constants'; import { renderWithMockStore } from '../../../testing/mocks'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; @@ -173,9 +173,9 @@ const render = (layout: IInternalLayout = layoutMock) => { queryClient, )( - + - + , ); }; diff --git a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.tsx b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.tsx index 2942f15d383..6ed6988b9fc 100644 --- a/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.tsx +++ b/frontend/packages/ux-editor-v3/src/containers/DesignView/FormTree/FormTree.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { IInternalLayout } from '../../../types/global'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { renderItemList } from './renderItemList'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; import { useFormItemContext } from '../../FormItemContext'; @@ -18,12 +18,12 @@ export const FormTree = ({ layout }: FormTreeProps) => { const handleSelect = async (id: string) => handleEdit(getItem(layout, id)); return ( - {renderItemList(layout, BASE_CONTAINER_ID)} - + ); }; diff --git a/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx index 583bd37f418..91e36e8919e 100644 --- a/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx +++ b/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx @@ -10,7 +10,7 @@ import { useFormLayoutsQuery } from '../hooks/queries/useFormLayoutsQuery'; import { useFormLayoutSettingsQuery } from '../hooks/queries/useFormLayoutSettingsQuery'; import { useRuleModelQuery } from '../hooks/queries/useRuleModelQuery'; import { ErrorPage } from '../components/ErrorPage'; -import { StudioPageSpinner } from '@studio/components'; +import { StudioPageSpinner, StudioDragAndDropTree } from '@studio/components'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; import { useRuleConfigQuery } from '../hooks/queries/useRuleConfigQuery'; import { useInstanceIdQuery } from 'app-shared/hooks/queries'; @@ -31,7 +31,6 @@ import { useSearchParams } from 'react-router-dom'; import { FormLayoutActions } from '../features/formDesigner/formLayout/formLayoutSlice'; import { Preview } from '../components/Preview'; import { setSelectedLayoutInLocalStorage } from '../utils/localStorageUtils'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; export interface FormDesignerProps { selectedLayout: string; @@ -144,7 +143,7 @@ export const FormDesigner = ({ }; return ( - +
@@ -153,7 +152,7 @@ export const FormDesigner = ({
- + ); } return ; diff --git a/frontend/packages/ux-editor/package.json b/frontend/packages/ux-editor/package.json index 6ad917fc51e..b0da0741bcc 100644 --- a/frontend/packages/ux-editor/package.json +++ b/frontend/packages/ux-editor/package.json @@ -7,8 +7,6 @@ "@studio/icons": "workspace:^", "classnames": "2.5.1", "react": "18.3.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", "react-dom": "18.3.1", "typescript": "5.6.2", "uuid": "10.0.0" diff --git a/frontend/packages/ux-editor/src/components/Elements/ConfPageToolbar.test.tsx b/frontend/packages/ux-editor/src/components/Elements/ConfPageToolbar.test.tsx index 98ab7babc83..88282aa1fb9 100644 --- a/frontend/packages/ux-editor/src/components/Elements/ConfPageToolbar.test.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/ConfPageToolbar.test.tsx @@ -6,7 +6,7 @@ import { paymentLayoutComponents, subformLayoutComponents, } from '../../data/formItemConfig'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { textMock } from '@studio/testing/mocks/i18nMock'; import type { ConfPageType } from './types/ConfigPageType'; import { renderWithProviders } from '@altinn/ux-editor/testing/mocks'; @@ -52,8 +52,8 @@ describe('ConfPageToolbar', () => { const renderConfPageToolbar = (confPageType: ConfPageType) => { return renderWithProviders( - + - , + , ); }; diff --git a/frontend/packages/ux-editor/src/components/Elements/Elements.test.tsx b/frontend/packages/ux-editor/src/components/Elements/Elements.test.tsx index a0b9d5c54ae..f1567a3b6d9 100644 --- a/frontend/packages/ux-editor/src/components/Elements/Elements.test.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/Elements.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { screen, waitForElementToBeRemoved } from '@testing-library/react'; import { Elements } from './Elements'; import { renderWithProviders } from '../../testing/mocks'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { textMock } from '@studio/testing/mocks/i18nMock'; import type { AppContextProps } from '../../AppContext'; import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext'; @@ -123,9 +123,9 @@ const renderElements = ( queryClient?: QueryClient, ) => { return renderWithProviders( - + - , + , { appContextProps, queries, diff --git a/frontend/packages/ux-editor/src/components/Elements/ToolbarItem.tsx b/frontend/packages/ux-editor/src/components/Elements/ToolbarItem.tsx index 3eaa1df61a8..fbe48f52ea6 100644 --- a/frontend/packages/ux-editor/src/components/Elements/ToolbarItem.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/ToolbarItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ToolbarItemComponent } from '../toolbar/ToolbarItemComponent'; import type { ComponentType, CustomComponentType } from 'app-shared/types/ComponentType'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; type ToolbarItemProps = { componentTitle: string; @@ -17,7 +17,7 @@ export const ToolbarItem = ({ icon, }: ToolbarItemProps) => { return ( - + notDraggable={notDraggable} payload={componentType} > @@ -26,6 +26,6 @@ export const ToolbarItem = ({ componentTitle={componentTitle} icon={icon} /> - + ); }; diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx index bcdd2818caf..4377a357333 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx @@ -5,7 +5,7 @@ import { layoutMock } from '../../testing/layoutMock'; import { screen } from '@testing-library/react'; import { renderWithProviders } from '../../testing/mocks'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { FormItemContextProvider } from '../FormItemContext'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { internalLayoutWithMultiPageGroup } from '../../testing/layoutWithMultiPageGroupMocks'; @@ -59,9 +59,9 @@ describe('FormLayout', () => { const render = (props?: Partial) => renderWithProviders( - + - , + , ); diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItem.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItem.tsx index c8a798c2c3f..7817ea38626 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItem.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { IInternalLayout } from '../../../../types/global'; import { getItem, isContainer } from '../../../../utils/formLayoutUtils'; import { renderItemList } from '../renderItemList'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { FormItemTitle } from './FormItemTitle'; import { formItemConfigs } from '../../../../data/formItemConfig'; import { useTranslation } from 'react-i18next'; @@ -38,7 +38,7 @@ export const FormItem = ({ layout, id, duplicateComponents }: FormItemProps) => ); return ( - } emptyMessage={t('ux_editor.container_empty')} expandable={isContainer(layout, id)} @@ -47,6 +47,6 @@ export const FormItem = ({ layout, id, duplicateComponents }: FormItemProps) => nodeId={id} > {renderItemList(layout, duplicateComponents, id)} - + ); }; diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.test.tsx index 8fc0580666c..ca65bfdffa4 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.test.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { screen } from '@testing-library/react'; import { FormTree } from './FormTree'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { BASE_CONTAINER_ID, DEFAULT_LANGUAGE } from 'app-shared/constants'; import { renderWithProviders } from '../../../testing/mocks'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; @@ -171,9 +171,9 @@ const render = (layout: IInternalLayout = layoutMock) => { queryClient.setQueryData([QueryKey.TextResources, org, app], textResources); return renderWithProviders( - + - + , { queryClient, diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.tsx index 555f332e77d..7bc8e9565b3 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormTree.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { IInternalLayout } from '../../../types/global'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; +import { StudioDragAndDropTree } from '@studio/components'; import { renderItemList } from './renderItemList'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; import { useFormItemContext } from '../../FormItemContext'; @@ -19,12 +19,12 @@ export const FormTree = ({ layout, duplicateComponents }: FormTreeProps) => { const handleSelect = async (id: string) => handleEdit(getItem(layout, id)); return ( - {renderItemList(layout, duplicateComponents, BASE_CONTAINER_ID)} - + ); }; diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx index 28d7cd8e269..52a35a5f55a 100644 --- a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx +++ b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx @@ -12,6 +12,7 @@ import { StudioPageSpinner, StudioResizableLayout, useLocalStorage, + StudioDragAndDropTree, } from '@studio/components'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; import { useRuleConfigQuery } from '../hooks/queries/useRuleConfigQuery'; @@ -30,7 +31,6 @@ import { import { useAddItemToLayoutMutation } from '../hooks/mutations/useAddItemToLayoutMutation'; import { useFormLayoutMutation } from '../hooks/mutations/useFormLayoutMutation'; import { Preview } from '../components/Preview'; -import { DragAndDropTree } from 'app-shared/components/DragAndDropTree'; import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils'; export const FormDesigner = (): JSX.Element => { @@ -153,7 +153,7 @@ export const FormDesigner = (): JSX.Element => { }; return ( - +
{
- + ); } return ; diff --git a/yarn.lock b/yarn.lock index 388bd8dcc6f..9e05b3acce7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -125,8 +125,6 @@ __metadata: classnames: "npm:2.5.1" jest: "npm:29.7.0" react: "npm:18.3.1" - react-dnd: "npm:16.0.1" - react-dnd-html5-backend: "npm:16.0.1" react-dom: "npm:18.3.1" react-redux: "npm:9.1.2" redux: "npm:5.0.1" @@ -146,8 +144,6 @@ __metadata: classnames: "npm:2.5.1" jest: "npm:29.7.0" react: "npm:18.3.1" - react-dnd: "npm:16.0.1" - react-dnd-html5-backend: "npm:16.0.1" react-dom: "npm:18.3.1" typescript: "npm:5.6.2" uuid: "npm:10.0.0" @@ -6439,8 +6435,6 @@ __metadata: jest: "npm:29.7.0" qs: "npm:6.13.0" react: "npm:18.3.1" - react-dnd: "npm:16.0.1" - react-dnd-html5-backend: "npm:16.0.1" react-dom: "npm:18.3.1" react-router-dom: "npm:6.26.2" typescript: "npm:5.6.2"