From d27c4af72f10870b3878357a814d024418939e9e Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 12:01:32 +0200 Subject: [PATCH 01/13] Add minimumsize to center columns on ux editor --- .../packages/ux-editor/src/containers/FormDesigner.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx index 63e3e56e810..33ced5185d6 100644 --- a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx +++ b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx @@ -164,10 +164,13 @@ export const FormDesigner = (): JSX.Element => { onCollapseToggle={() => setElementsCollapsed((prev) => !prev)} /> - + - setHidePreview(resizing)}> + setHidePreview(resizing)} + > Date: Mon, 15 Jul 2024 12:02:34 +0200 Subject: [PATCH 02/13] Make editgrid tabs flex wrap --- .../src/components/config/editModal/EditGrid/EditGrid.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css index 1ea531e532d..10291a1292c 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css @@ -8,6 +8,7 @@ } .tabs { + flex-wrap: wrap; overflow: scroll; --scroll-bar-color: white; } From fcab0449f524f225172ec29d19be946c7a2d4cad Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 12:09:32 +0200 Subject: [PATCH 03/13] Remove onhover effect for resizing handles --- .../StudioResizableLayoutHandle.module.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.module.css b/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.module.css index 279fdff723e..6d93b2949a2 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.module.css +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.module.css @@ -10,10 +10,6 @@ position: absolute; } -.resizeHandle:hover:after { - background-color: rgba(0, 0, 0, 0.1); -} - .resizeHandleH { cursor: col-resize; } From 2e6654ce8024cab492b7b0707c808d71ec7eae26 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 12:27:43 +0200 Subject: [PATCH 04/13] Use localStorage for collapsed state and preview default as opened --- .../ux-editor/src/containers/FormDesigner.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx index 33ced5185d6..854603b1357 100644 --- a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx +++ b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx @@ -9,7 +9,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, StudioResizableLayout } from '@studio/components'; +import { StudioPageSpinner, StudioResizableLayout, useLocalStorage } from '@studio/components'; import { BASE_CONTAINER_ID } from 'app-shared/constants'; import { useRuleConfigQuery } from '../hooks/queries/useRuleConfigQuery'; import { useInstanceIdQuery, useUserQuery } from 'app-shared/hooks/queries'; @@ -63,8 +63,14 @@ export const FormDesigner = (): JSX.Element => { selectedFormLayoutSetName, ); const { handleEdit } = useFormItemContext(); - const [previewCollapsed, setPreviewCollapsed] = useState(true); - const [elementsCollapsed, setElementsCollapsed] = useState(false); + const [previewCollapsed, setPreviewCollapsed] = useLocalStorage( + `form-designer-main:previewCollapsed:${user.id}:${org}`, + false, + ); + const [elementsCollapsed, setElementsCollapsed] = useLocalStorage( + `form-designer-main:elementsCollapsed:${user.id}:${org}`, + false, + ); const [hidePreview, setHidePreview] = useState(false); const t = useText(); @@ -161,7 +167,7 @@ export const FormDesigner = (): JSX.Element => { > setElementsCollapsed((prev) => !prev)} + onCollapseToggle={() => setElementsCollapsed(!elementsCollapsed)} /> @@ -180,7 +186,7 @@ export const FormDesigner = (): JSX.Element => { > setPreviewCollapsed((prev) => !prev)} + onCollapseToggle={() => setPreviewCollapsed(!previewCollapsed)} hidePreview={hidePreview} /> From fa0be30aae055781d9d3e3e4401a7f30669f7f5f Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 12:45:14 +0200 Subject: [PATCH 05/13] Add overflow auto for x axis on properties panel --- .../ux-editor/src/components/Properties/Properties.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.module.css b/frontend/packages/ux-editor/src/components/Properties/Properties.module.css index b7c626d65cf..dfcca284b18 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Properties.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/Properties.module.css @@ -1,6 +1,7 @@ .root { background: var(--fds-semantic-surface-neutral-subtle); flex: var(--properties-width-fraction); + overflow-x: auto; } .dataModelBindings { From 61b7d5c2eca863d90905b87b58272d9454515280 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 13:32:05 +0200 Subject: [PATCH 06/13] Refactor flexgrow property to use element prop instead of html ref --- .../classes/StudioResizableLayoutElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts index 54caa2d91c6..4ecfbfb4607 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts @@ -13,7 +13,7 @@ export class StudioResizableLayoutArea { } public get flexGrow() { - return parseFloat(this.HTMLElementRef.style.flexGrow || '1'); + return this.reactElement.props.flexGrow || 1; } public get minimumSize() { From 2cd76e63631778c95f5932d4f4c643dcff0c49af Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 13:33:26 +0200 Subject: [PATCH 07/13] Refactor function to reuse code --- .../hooks/useStudioResizableFunctions.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.ts index 06f2dda76ef..1324754fc6e 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.ts @@ -13,16 +13,6 @@ export const useStudioResizableLayoutFunctions = ( children: any[], setContainerSize: (index: number, size: number) => void, ): useResizableFunctionsReturnType => { - const getElementNeighbour = (index: number): StudioResizableLayoutArea => { - const neighbourIndex = elementRefs.current.length < index + 2 ? index - 1 : index + 1; - return new StudioResizableLayoutArea( - neighbourIndex, - elementRefs.current[neighbourIndex], - children[neighbourIndex], - orientation, - ); - }; - const getElement = (index: number): StudioResizableLayoutArea => { return new StudioResizableLayoutArea( index, @@ -32,6 +22,11 @@ export const useStudioResizableLayoutFunctions = ( ); }; + const getElementNeighbour = (index: number): StudioResizableLayoutArea => { + const neighbourIndex = elementRefs.current.length < index + 2 ? index - 1 : index + 1; + return getElement(neighbourIndex); + }; + const calculatePixelSizes = ( element: StudioResizableLayoutArea, neighbour: StudioResizableLayoutArea, From aa71919fa8a2e06f8fe5922c0fcfdfae223525c7 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 13:34:10 +0200 Subject: [PATCH 08/13] Add throttling to resizing to avoid multiple resizes per render cycle --- .../hooks/useStudioResizableLayoutMouseMovement.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts index 65c8aaf9fe8..fed57eddfaa 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts @@ -1,4 +1,4 @@ -import { useRef, useCallback, useState } from 'react'; +import { useRef, useCallback, useState, useEffect } from 'react'; import type { StudioResizableOrientation } from '../StudioResizableLayoutContainer/StudioResizableLayoutContainer'; export const useStudioResizableLayoutMouseMovement = ( @@ -12,8 +12,17 @@ export const useStudioResizableLayoutMouseMovement = ( const startMousePosition = useRef(0); const [isResizing, setIsResizing] = useState(false); + // throttle mouseMove events to avoid calculating new size before last rerender + const update = useRef(1); + const lastEventUpdate = useRef(0); + useEffect(() => { + update.current++; + }); + const mouseMove = useCallback( (event: MouseEvent): void => { + if (update.current === lastEventUpdate.current) return; + lastEventUpdate.current = update.current; const mousePos = orientation === 'horizontal' ? event.clientX : event.clientY; const mouseTotalDelta = mousePos - startMousePosition.current; const mouseDelta = mousePos - lastMousePosition.current; @@ -25,6 +34,8 @@ export const useStudioResizableLayoutMouseMovement = ( const mouseUp = useCallback( (_: MouseEvent): void => { + update.current = 1; + lastEventUpdate.current = 0; setIsResizing(false); window.removeEventListener('mousemove', mouseMove); window.removeEventListener('mouseup', mouseUp); From 605298941118dbf27b1e1b783e0d355e9975c63d Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 13:58:58 +0200 Subject: [PATCH 09/13] Fix tests using userQuery in ux-editor --- frontend/packages/ux-editor/src/App.test.tsx | 3 +++ .../ux-editor/src/containers/FormDesigner.test.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/packages/ux-editor/src/App.test.tsx b/frontend/packages/ux-editor/src/App.test.tsx index e00d19a05c1..d8fbe70acca 100644 --- a/frontend/packages/ux-editor/src/App.test.tsx +++ b/frontend/packages/ux-editor/src/App.test.tsx @@ -9,6 +9,8 @@ import type { AppContextProps } from './AppContext'; import ruleHandlerMock from './testing/ruleHandlerMock'; import { layoutSetsMock } from './testing/layoutSetsMock'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { user as userMock } from 'app-shared/mocks/mocks'; +import { QueryKey } from 'app-shared/types/QueryKey'; const mockQueries: Partial = { getInstanceIdForPreview: jest.fn().mockImplementation(() => Promise.resolve('test')), @@ -24,6 +26,7 @@ const renderApp = ( appContextProps: Partial = {}, ) => { const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.CurrentUser], [userMock]); return renderWithProviders(, { queries, appContextProps, diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx index 4bb3ba30717..1a0ba5c2bb9 100644 --- a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx +++ b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx @@ -20,6 +20,7 @@ import { formItemContextProviderMock } from '../testing/formItemContextMocks'; import { appContextMock } from '../testing/appContextMock'; import { app, org } from '@studio/testing/testids'; import userEvent from '@testing-library/user-event'; +import { user as userMock } from 'app-shared/mocks/mocks'; // Test data: const defaultTexts: ITextResources = { @@ -43,6 +44,7 @@ const render = () => { [], ); queryClient.setQueryData([QueryKey.TextResources, org, app], defaultTexts); + queryClient.setQueryData([QueryKey.CurrentUser], [userMock]); return renderWithProviders( { expect(screen.queryByText(textMock('ux_editor.loading_form_layout'))).not.toBeInTheDocument(), ); - await user.click(screen.getByTitle(textMock('ux_editor.open_preview'))); - expect(screen.getByTitle(textMock('ux_editor.close_preview'))).toBeInTheDocument(); - await user.click(screen.getByTitle(textMock('ux_editor.close_preview'))); expect(screen.getByTitle(textMock('ux_editor.open_preview'))).toBeInTheDocument(); + + await user.click(screen.getByTitle(textMock('ux_editor.open_preview'))); + expect(screen.getByTitle(textMock('ux_editor.close_preview'))).toBeInTheDocument(); }); }); From 1cef1c7d3a1f4cba63de43b94c06dbabcab5cfa6 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 14:18:44 +0200 Subject: [PATCH 10/13] Alter test to include case for resizing last element in container --- .../hooks/useStudioResizableFunctions.test.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.test.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.test.ts index b70f2b50968..2806a37e6b6 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.test.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableFunctions.test.ts @@ -9,7 +9,9 @@ describe('useStudioResizableLayoutFunctions', () => { beforeEach(() => { setContainerSize = jest.fn(); - elementRefs = { current: [document.createElement('div'), document.createElement('div')] }; + elementRefs = { + current: [document.createElement('div'), document.createElement('div')], + }; children = [ { props: { collapsed: false, minimumSize: 0, maximumSize: 100, collapsedSize: 0 } }, { props: { collapsed: false, minimumSize: 0, maximumSize: 100, collapsedSize: 0 } }, @@ -33,7 +35,7 @@ describe('useStudioResizableLayoutFunctions', () => { it('should call resizeTo with correct parameters when resizeDelta is called', () => { const { result } = renderFunctionsHook(elementRefs, children, setContainerSize); - result.current.resizeDelta(0, 100); + result.current.resizeDelta(1, 100); expect(setContainerSize).toHaveBeenCalled(); }); From 155d5d9d95fe611321c7a8d58a1e84fd616dc6be Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 14:25:28 +0200 Subject: [PATCH 11/13] Revert "Refactor flexgrow property to use element prop instead of html ref" This reverts commit 8685e3d1a5f29f2dc5efc1ce02c8eea1f89d087c. --- .../classes/StudioResizableLayoutElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts index 4ecfbfb4607..54caa2d91c6 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/classes/StudioResizableLayoutElement.ts @@ -13,7 +13,7 @@ export class StudioResizableLayoutArea { } public get flexGrow() { - return this.reactElement.props.flexGrow || 1; + return parseFloat(this.HTMLElementRef.style.flexGrow || '1'); } public get minimumSize() { From d8eef7cf2dbef002670e3fc7f62367c3d547e0b3 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 15 Jul 2024 14:33:51 +0200 Subject: [PATCH 12/13] Remove unused code --- .../StudioResizableLayoutHandle.tsx | 2 +- .../hooks/useStudioResizableLayoutMouseMovement.ts | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx b/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx index af905c76a60..eab6a97d745 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx @@ -20,7 +20,7 @@ export const StudioResizableLayoutHandle = ({ const { resizeDelta, containerSize } = useStudioResizableLayoutContext(index); const { onMouseDown, isResizing } = useStudioResizableLayoutMouseMovement( orientation, - (delta, _) => { + (delta) => { resizeDelta(index, delta); }, ); diff --git a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts index fed57eddfaa..0d704dfd99f 100644 --- a/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts +++ b/frontend/libs/studio-components/src/components/StudioResizableLayout/hooks/useStudioResizableLayoutMouseMovement.ts @@ -3,13 +3,12 @@ import type { StudioResizableOrientation } from '../StudioResizableLayoutContain export const useStudioResizableLayoutMouseMovement = ( orientation: StudioResizableOrientation, - onMousePosChange: (delta: number, position: number) => void, + onMousePosChange: (delta: number) => void, ): { onMouseDown: (event: React.MouseEvent) => () => void; isResizing: boolean; } => { const lastMousePosition = useRef(0); - const startMousePosition = useRef(0); const [isResizing, setIsResizing] = useState(false); // throttle mouseMove events to avoid calculating new size before last rerender @@ -24,9 +23,8 @@ export const useStudioResizableLayoutMouseMovement = ( if (update.current === lastEventUpdate.current) return; lastEventUpdate.current = update.current; const mousePos = orientation === 'horizontal' ? event.clientX : event.clientY; - const mouseTotalDelta = mousePos - startMousePosition.current; const mouseDelta = mousePos - lastMousePosition.current; - onMousePosChange(mouseDelta, mouseTotalDelta); + onMousePosChange(mouseDelta); lastMousePosition.current = mousePos; }, [orientation, onMousePosChange], @@ -49,7 +47,6 @@ export const useStudioResizableLayoutMouseMovement = ( event.preventDefault(); setIsResizing(true); lastMousePosition.current = orientation === 'horizontal' ? event.clientX : event.clientY; - startMousePosition.current = lastMousePosition.current; window.addEventListener('mousemove', mouseMove); window.addEventListener('mouseup', mouseUp); }, From d7c2f3c91485419a2e75eded81498990b480fb76 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Tue, 16 Jul 2024 16:14:30 +0200 Subject: [PATCH 13/13] Revert "Make editgrid tabs flex wrap" This reverts commit 25a685cf9ef3ebd74e82b9f546286e21cf28ab3b. --- .../src/components/config/editModal/EditGrid/EditGrid.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css index 10291a1292c..1ea531e532d 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.module.css @@ -8,7 +8,6 @@ } .tabs { - flex-wrap: wrap; overflow: scroll; --scroll-bar-color: white; }