diff --git a/frontend/packages/shared/src/utils/featureToggleUtils.ts b/frontend/packages/shared/src/utils/featureToggleUtils.ts index 5764ed75a5d..206b241715a 100644 --- a/frontend/packages/shared/src/utils/featureToggleUtils.ts +++ b/frontend/packages/shared/src/utils/featureToggleUtils.ts @@ -6,7 +6,6 @@ const persistFeatureKey = 'persistFeatureFlag'; // All the features that you want to be toggle on/off should be added here. To ensure that we type check the feature name. export type SupportedFeatureFlags = | 'componentConfigBeta' - | 'configureLayoutSet' | 'shouldOverrideAppLibCheck' | 'resourceAccessLists'; diff --git a/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.module.css b/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.module.css deleted file mode 100644 index 7ed59ccfaa2..00000000000 --- a/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.configureLayoutSetButton { - text-align: left; -} - -.configureLayoutSet { - display: flex; - margin: 10px; -} - -.configureLayoutSetInfo { - max-width: 500px; - border-radius: 20px; - padding: 10px; -} - -.informationButton { - width: 25px; - height: 25px; - margin-top: 5px; -} - -.label { - display: block; - margin-bottom: 8px; -} diff --git a/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.tsx b/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.tsx deleted file mode 100644 index e2862f24360..00000000000 --- a/frontend/packages/ux-editor-v3/src/components/Elements/ConfigureLayoutSetPanel.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import type { ChangeEvent, KeyboardEvent, MouseEvent } from 'react'; -import React, { useEffect, useState, useRef, useCallback, useId } from 'react'; -import { useTranslation, Trans } from 'react-i18next'; -import classes from './ConfigureLayoutSetPanel.module.css'; -import { useConfigureLayoutSetMutation } from '../../hooks/mutations/useConfigureLayoutSetMutation'; -import { Paragraph, Textfield } from '@digdir/design-system-react'; -import { Popover } from '@mui/material'; -import { InformationIcon } from '@navikt/aksel-icons'; -import { altinnDocsUrl } from 'app-shared/ext-urls'; -import { validateLayoutNameAndLayoutSetName } from '../../utils/validationUtils/validateLayoutNameAndLayoutSetName'; -import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; -import { StudioButton } from '@studio/components'; - -export const ConfigureLayoutSetPanel = () => { - const inputLayoutSetNameId = useId(); - const { org, app } = useStudioUrlParams(); - const { t } = useTranslation(); - const configureLayoutSetMutation = useConfigureLayoutSetMutation(org, app); - const [anchorEl, setAnchorEl] = useState(null); - const [popoverOpen, setPopoverOpen] = useState(false); - const [layoutSetName, setLayoutSetName] = useState(''); - const [editLayoutSetName, setEditLayoutSetName] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - const configPanelRef = useRef(null); - - const handleConfigureLayoutSet = async (): Promise => { - if (layoutSetName === '') { - setErrorMessage(t('left_menu.pages_error_empty')); - } else { - await configureLayoutSetMutation.mutateAsync({ layoutSetName }); - } - }; - - const handleTogglePopOver = (event?: MouseEvent): void => { - setAnchorEl(event ? event.currentTarget : null); - setPopoverOpen(!!event); - }; - - const handleKeyPress = (event: KeyboardEvent) => { - const shouldSave = event.key === 'Enter'; - if (shouldSave) { - handleConfigureLayoutSet(); - setEditLayoutSetName(false); - return; - } - - const shouldCancel = event.key === 'Escape'; - if (shouldCancel) { - closePanelAndResetLayoutSetName(); - } - }; - - const handleClickOutside = useCallback((event: Event): void => { - const target = event.target as HTMLElement; - - // If the click is outside the configPanelRef, close the panel and reset the layoutSetName - if (!configPanelRef.current?.contains(target)) { - closePanelAndResetLayoutSetName(); - } - }, []); - - const closePanelAndResetLayoutSetName = (): void => { - setEditLayoutSetName(false); - setLayoutSetName(''); - }; - - useEffect(() => { - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [handleClickOutside]); - - const toggleConfigureLayoutSetName = (): void => { - setEditLayoutSetName((prevEditLayoutSetName) => !prevEditLayoutSetName); - }; - - const handleOnNameChange = (event: ChangeEvent): void => { - // The Regex below replaces all illegal characters with a dash - const newNameCandidate = event.target.value.replace(/[/\\?%*:|"<>]/g, '-').trim(); - - const error = validateLayoutSetName(newNameCandidate); - - if (error) { - setErrorMessage(error); - return; - } - - setErrorMessage(''); - setLayoutSetName(newNameCandidate); - }; - - const validateLayoutSetName = (newLayoutSetName?: string): string | null => { - if (!newLayoutSetName) { - return t('left_menu.pages_error_empty'); - } - - if (newLayoutSetName.length >= 30) { - return t('left_menu.pages_error_length'); - } - - if (!validateLayoutNameAndLayoutSetName(newLayoutSetName)) { - return t('left_menu.pages_error_format'); - } - return null; - }; - - return ( -
- {editLayoutSetName ? ( -
- - - {errorMessage && ( - - {errorMessage} - - )} -
- ) : ( - - {t('left_menu.configure_layout_sets')} - - )} -
- -
- {popoverOpen && ( - - handleTogglePopOver()} - > - - - - - - )} -
- ); -}; diff --git a/frontend/packages/ux-editor-v3/src/components/Elements/Elements.tsx b/frontend/packages/ux-editor-v3/src/components/Elements/Elements.tsx index f4839b5b2a5..1d9c87ce445 100644 --- a/frontend/packages/ux-editor-v3/src/components/Elements/Elements.tsx +++ b/frontend/packages/ux-editor-v3/src/components/Elements/Elements.tsx @@ -2,16 +2,14 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { ConfPageToolbar } from './ConfPageToolbar'; import { DefaultToolbar } from './DefaultToolbar'; -import { Heading, Paragraph, Accordion } from '@digdir/design-system-react'; +import { Heading, Paragraph } from '@digdir/design-system-react'; import { useText } from '../../hooks'; import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors'; import { useFormLayoutSettingsQuery } from '../../hooks/queries/useFormLayoutSettingsQuery'; import { useLayoutSetsQuery } from '../../hooks/queries/useLayoutSetsQuery'; import { LayoutSetsContainer } from './LayoutSetsContainer'; -import { ConfigureLayoutSetPanel } from './ConfigureLayoutSetPanel'; import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; -import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils'; import classes from './Elements.module.css'; import { useAppContext } from '../../hooks/useAppContext'; @@ -30,35 +28,19 @@ export const Elements = () => { return (
- {shouldDisplayFeature('configureLayoutSet') && layoutSetNames ? ( - + {layoutSetNames && } + + {t('left_menu.components')} + + {hideComponents ? ( + + {t('left_menu.no_components_selected')} + + ) : receiptName === selectedLayout ? ( + ) : ( - + )} - - {shouldDisplayFeature('configureLayoutSet') && ( - 0}> - {t('left_menu.layout_sets')} - - {layoutSetNames ? : } - - - )} - -
- - {t('left_menu.components')} - - {hideComponents ? ( - - {t('left_menu.no_components_selected')} - - ) : receiptName === selectedLayout ? ( - - ) : ( - - )} -
); }; diff --git a/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts b/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts deleted file mode 100644 index cc263f88869..00000000000 --- a/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { queriesMock } from 'app-shared/mocks/queriesMock'; -import { renderHookWithMockStore } from '../../testing/mocks'; -import { useConfigureLayoutSetMutation } from './useConfigureLayoutSetMutation'; -import { waitFor } from '@testing-library/react'; - -// Test data: -const org = 'org'; -const app = 'app'; -const layoutSetName = 'first-layout-set-name'; - -describe('useConfigureLayoutSetMutation', () => { - it('Calls configureLayoutSet with correct arguments and payload', async () => { - const configureLayoutSetResult = renderHookWithMockStore()(() => - useConfigureLayoutSetMutation(org, app), - ).renderHookResult.result; - await configureLayoutSetResult.current.mutateAsync({ layoutSetName }); - await waitFor(() => expect(configureLayoutSetResult.current.isSuccess).toBe(true)); - - expect(queriesMock.configureLayoutSet).toHaveBeenCalledTimes(1); - expect(queriesMock.configureLayoutSet).toHaveBeenCalledWith(org, app, layoutSetName); - }); -}); diff --git a/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.ts b/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.ts deleted file mode 100644 index 7e58874dda1..00000000000 --- a/frontend/packages/ux-editor-v3/src/hooks/mutations/useConfigureLayoutSetMutation.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { useServicesContext } from 'app-shared/contexts/ServicesContext'; -import { QueryKey } from 'app-shared/types/QueryKey'; -import { useAppContext } from '../useAppContext'; - -export interface ConfigureLayoutSetMutationArgs { - layoutSetName: string; -} - -export const useConfigureLayoutSetMutation = (org: string, app: string) => { - const { configureLayoutSet } = useServicesContext(); - const { setSelectedLayoutSet } = useAppContext(); - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: ({ layoutSetName }: ConfigureLayoutSetMutationArgs) => - configureLayoutSet(org, app, layoutSetName).then((layoutSets) => ({ - layoutSetName, - layoutSets, - })), - - onSuccess: ({ layoutSetName, layoutSets }) => { - setSelectedLayoutSet(layoutSetName); - queryClient.setQueryData([QueryKey.LayoutSets, org, app], () => layoutSets); - }, - }); -}; diff --git a/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.module.css b/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.module.css deleted file mode 100644 index 7ed59ccfaa2..00000000000 --- a/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.configureLayoutSetButton { - text-align: left; -} - -.configureLayoutSet { - display: flex; - margin: 10px; -} - -.configureLayoutSetInfo { - max-width: 500px; - border-radius: 20px; - padding: 10px; -} - -.informationButton { - width: 25px; - height: 25px; - margin-top: 5px; -} - -.label { - display: block; - margin-bottom: 8px; -} diff --git a/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.tsx b/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.tsx deleted file mode 100644 index e2862f24360..00000000000 --- a/frontend/packages/ux-editor/src/components/Elements/ConfigureLayoutSetPanel.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import type { ChangeEvent, KeyboardEvent, MouseEvent } from 'react'; -import React, { useEffect, useState, useRef, useCallback, useId } from 'react'; -import { useTranslation, Trans } from 'react-i18next'; -import classes from './ConfigureLayoutSetPanel.module.css'; -import { useConfigureLayoutSetMutation } from '../../hooks/mutations/useConfigureLayoutSetMutation'; -import { Paragraph, Textfield } from '@digdir/design-system-react'; -import { Popover } from '@mui/material'; -import { InformationIcon } from '@navikt/aksel-icons'; -import { altinnDocsUrl } from 'app-shared/ext-urls'; -import { validateLayoutNameAndLayoutSetName } from '../../utils/validationUtils/validateLayoutNameAndLayoutSetName'; -import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; -import { StudioButton } from '@studio/components'; - -export const ConfigureLayoutSetPanel = () => { - const inputLayoutSetNameId = useId(); - const { org, app } = useStudioUrlParams(); - const { t } = useTranslation(); - const configureLayoutSetMutation = useConfigureLayoutSetMutation(org, app); - const [anchorEl, setAnchorEl] = useState(null); - const [popoverOpen, setPopoverOpen] = useState(false); - const [layoutSetName, setLayoutSetName] = useState(''); - const [editLayoutSetName, setEditLayoutSetName] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - const configPanelRef = useRef(null); - - const handleConfigureLayoutSet = async (): Promise => { - if (layoutSetName === '') { - setErrorMessage(t('left_menu.pages_error_empty')); - } else { - await configureLayoutSetMutation.mutateAsync({ layoutSetName }); - } - }; - - const handleTogglePopOver = (event?: MouseEvent): void => { - setAnchorEl(event ? event.currentTarget : null); - setPopoverOpen(!!event); - }; - - const handleKeyPress = (event: KeyboardEvent) => { - const shouldSave = event.key === 'Enter'; - if (shouldSave) { - handleConfigureLayoutSet(); - setEditLayoutSetName(false); - return; - } - - const shouldCancel = event.key === 'Escape'; - if (shouldCancel) { - closePanelAndResetLayoutSetName(); - } - }; - - const handleClickOutside = useCallback((event: Event): void => { - const target = event.target as HTMLElement; - - // If the click is outside the configPanelRef, close the panel and reset the layoutSetName - if (!configPanelRef.current?.contains(target)) { - closePanelAndResetLayoutSetName(); - } - }, []); - - const closePanelAndResetLayoutSetName = (): void => { - setEditLayoutSetName(false); - setLayoutSetName(''); - }; - - useEffect(() => { - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [handleClickOutside]); - - const toggleConfigureLayoutSetName = (): void => { - setEditLayoutSetName((prevEditLayoutSetName) => !prevEditLayoutSetName); - }; - - const handleOnNameChange = (event: ChangeEvent): void => { - // The Regex below replaces all illegal characters with a dash - const newNameCandidate = event.target.value.replace(/[/\\?%*:|"<>]/g, '-').trim(); - - const error = validateLayoutSetName(newNameCandidate); - - if (error) { - setErrorMessage(error); - return; - } - - setErrorMessage(''); - setLayoutSetName(newNameCandidate); - }; - - const validateLayoutSetName = (newLayoutSetName?: string): string | null => { - if (!newLayoutSetName) { - return t('left_menu.pages_error_empty'); - } - - if (newLayoutSetName.length >= 30) { - return t('left_menu.pages_error_length'); - } - - if (!validateLayoutNameAndLayoutSetName(newLayoutSetName)) { - return t('left_menu.pages_error_format'); - } - return null; - }; - - return ( - - ); -}; diff --git a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx index 470ef2f3f0f..86c3c608b59 100644 --- a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx @@ -2,16 +2,13 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { ConfPageToolbar } from './ConfPageToolbar'; import { DefaultToolbar } from './DefaultToolbar'; -import { Heading, Paragraph, Accordion } from '@digdir/design-system-react'; +import { Heading, Paragraph } from '@digdir/design-system-react'; import { useText } from '../../hooks'; import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors'; import { useFormLayoutSettingsQuery } from '../../hooks/queries/useFormLayoutSettingsQuery'; -import { useLayoutSetsQuery } from '../../hooks/queries/useLayoutSetsQuery'; import { LayoutSetsContainer } from './LayoutSetsContainer'; -import { ConfigureLayoutSetPanel } from './ConfigureLayoutSetPanel'; import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; -import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils'; import classes from './Elements.module.css'; import { useAppContext } from '../../hooks/useAppContext'; @@ -19,10 +16,8 @@ export const Elements = () => { const { org, app } = useStudioUrlParams(); const selectedLayout: string = useSelector(selectedLayoutNameSelector); const { selectedLayoutSet } = useAppContext(); - const layoutSetsQuery = useLayoutSetsQuery(org, app); const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet); const receiptName = formLayoutSettings?.receiptLayoutName; - const layoutSetNames = layoutSetsQuery?.data?.sets; const hideComponents = selectedLayout === 'default' || selectedLayout === undefined; @@ -30,21 +25,7 @@ export const Elements = () => { return (
- {shouldDisplayFeature('configureLayoutSet') && layoutSetNames ? ( - - ) : ( - - )} - - {shouldDisplayFeature('configureLayoutSet') && ( - 0}> - {t('left_menu.layout_sets')} - - {layoutSetNames ? : } - - - )} - + {t('left_menu.components')} diff --git a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css index ebe13d456a7..f221821d800 100644 --- a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css +++ b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css @@ -2,3 +2,8 @@ margin: var(--fds-spacing-5); margin-bottom: 5px; } + +.layoutSetsDropDown { + width: 100%; + text-overflow: ellipsis; +} diff --git a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx index 9883442b1a4..a4d5b67bffd 100644 --- a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx @@ -27,6 +27,7 @@ export function LayoutSetsContainer() { label={t('left_menu.layout_dropdown_menu_label')} onChange={(event) => onLayoutSetClick(event.target.value)} value={selectedLayoutSet} + className={classes.layoutSetsDropDown} > {layoutSetNames.map((set: string) => { return ( diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.module.css b/frontend/packages/ux-editor/src/containers/FormDesigner.module.css index d606a86f042..871738b7c49 100644 --- a/frontend/packages/ux-editor/src/containers/FormDesigner.module.css +++ b/frontend/packages/ux-editor/src/containers/FormDesigner.module.css @@ -10,8 +10,8 @@ var(--margin-horizontal) - var(--buttons-width) - var(--buttons-distance) ); --margin-top: 50px; - --elements-width-fraction: 1; - --structure-width-fraction: 2; + --elements-width-fraction: 1.5; + --structure-width-fraction: 1.5; --properties-width-fraction: 2; --preview-width-fraction: 3;