13060 replace legacy components with new ones from design system (#13129

) * Change `AppPreviewBar` LegacySelect to StudioNativeSelect * Change `SecurityLevelSelect` LegacySelect to StudioNativeSelect * Change `LangSelector` LegacySelect to StudioNativeSelect * Remove selected property from <option> * Change `SchemaInspector` LegacySelect to StudioNativeSelect * Change `PolicyCardRules` LegacySelect to StudioNativeSelect * Use defaultValue instead of selected on <option> * Change `TextResourceEditor` LegacySelect to StudioNativeSelect * Change `componentSpecificContent` LegacySelect to StudioNativeSelect * Delete unused code * Change `componentconfig` LegacySelect to StudioNativeSelect Remove unused import * Fix some tests broken after LegacySelect->StudioNativeSelect swap Fix some tests broken after LegacySelect->StudioNativeSelect swap * Fix failing `each()` tests * Replace LegacyTextField with StudioTextfield in schemainspector * Fix css after replacing legacy components * Replace LegacyTextField and fix possible bug with saving float numbers Bug: saving float numbers for min/max restrictions on number components * Fix formatting * Replace LegacyTextField for ux-editor, delete unused code * Fix tests after replacing LegacyTextField * Fix interesting test failure, new component allows exponents like 1e2 "1test 2" becomes "1e2" = 1*10^2=100 * Fix tests using wrong role for number input * Widen test for coverage * Add tests for combobox enum with multiple selection Remove unused code Fix accidental deletion of test value * Fix formatting, prettier * Merge main test fixes * Fix playwright test failing after legacy component replacement * fixed overfloee in datamodellknytninger accordion * fixes overflow in datamodel bilnding in featureFlag * Replace LegacyPopover for ReleaseContainer * Replace LegacyPopover for datamodel deletion button * Replace LegacyPopover for AltinnConfirmationDialog * Change AltinnConfirmationDialogProps to use StudioPopoverProps * Replace LegacyPopover for ThreeDotsMenu * Replace LegacyPopover in PreviewLimitationsInfo * Replace LegacyTable for TextList * Fix click-and-hold scrolling in designer (#13194) * Fix dashboard URL in Playwright (#13203) * eid logger deploy env setup (#13205) * Update dependency org.springframework.boot:spring-boot-starter-parent to v3.3.2 (#13198) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * change helm repository (#13208) * pass bools as strings in helm chart(#13209) * Add missing ids to nativeselect, required for label `for` * Fix playwright tests failing after LegacySelect replacement Also change value assertion to follow playwright best practices: **NOTE** If you need to assert input value, prefer [expect(locator).toHaveValue(value[, options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value) to avoid flakiness. See [assertions guide](https://playwright.dev/docs/test-assertions) for more details. Fix typo * Make sure ids for tablerowtype is unique in a multi type list * Replace LegacyToggleButtonGroup on the preview page * Fix app preview tests for togglegroup button -> radio * Replace legacyfieldset for mapcomponent * Replace LegacyTextArea in ItemDataComponent * Update import from storybook entry for resizablelayout * Replace legacy components for ux-editorv3 * Remove design-system-react dependency Squash: Also commit `yarn.lock` * Fix linting issues * Update SelectDataModelComponent.test.tsx * Fix informative message variant validation issue * Fix some event handling collisions between new and old components * Remove commented unused css * Merge main * Use `useId` hook to generate unique fallback id for StudioNativeSelect * Revert change to button disabled property check in langselector test * Add name option back to getRole query --------- Co-authored-by: JamalAlabdullah <[email protected]> Co-authored-by: Erling Hauan <[email protected]> Co-authored-by: Tomas Engebretsen <[email protected]> Co-authored-by: Mirko Sekulic <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Altinn · Jul 29, 2024 · acdd7bc · acdd7bc
1 parent 685f755
commit acdd7bc
Show file tree

Hide file tree

Showing 107 changed files with 1,053 additions and 1,067 deletions.
diff --git a/frontend/app-development/features/appPublish/containers/ReleaseContainer.module.css b/frontend/app-development/features/appPublish/containers/ReleaseContainer.module.css
@@ -41,10 +41,6 @@
   color: #1eaef7;
 }
 
-.popover {
-  pointer-events: none;
-}
-
 .cannotCreateReleaseContainer {
   background-color: #f9cad3;
   height: 100%;

diff --git a/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx b/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx
@@ -3,12 +3,11 @@ import classes from './ReleaseContainer.module.css';
 import type { AppRelease as AppReleaseType } from 'app-shared/types/AppRelease';
 import type { KeyboardEvent, MouseEvent } from 'react';
 import { BuildResult, BuildStatus } from 'app-shared/types/Build';
-import { LegacyPopover } from '@digdir/design-system-react';
 import { CreateRelease } from '../components/CreateRelease';
 import { Release } from '../components/Release';
 import { UploadIcon, CheckmarkIcon, XMarkOctagonFillIcon } from '@studio/icons';
 import { gitCommitPath } from 'app-shared/api/paths';
-import { useMediaQuery, StudioButton, StudioSpinner } from '@studio/components';
+import { useMediaQuery, StudioSpinner, StudioPopover } from '@studio/components';
 import { useBranchStatusQuery, useAppReleasesQuery } from '../../../hooks/queries';
 import { Trans, useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
@@ -205,25 +204,21 @@ export function ReleaseContainer() {
       </div>
       <div className={classes.versionSubHeader}>
         <div className={classes.appCreateReleaseTitle}>{renderCreateReleaseTitle()}</div>
-        <LegacyPopover
-          className={classes.popover}
-          open={popoverOpenClick || popoverOpenHover}
-          trigger={
-            <StudioButton
-              title={t('app_create_release.status_popover')}
-              className={classes.appCreateReleaseStatusButton}
-              onClick={handlePopoverOpenClicked}
-              onMouseOver={handlePopoverOpenHover}
-              onMouseLeave={handlePopoverClose}
-              tabIndex={0}
-              onKeyUp={handlePopoverKeyPress}
-              icon={renderStatusIcon()}
-              variant='tertiary'
-            />
-          }
-        >
-          {renderStatusMessage()}
-        </LegacyPopover>
+        <StudioPopover open={popoverOpenClick || popoverOpenHover}>
+          <StudioPopover.Trigger
+            title={t('app_create_release.status_popover')}
+            className={classes.appCreateReleaseStatusButton}
+            onClick={handlePopoverOpenClicked}
+            onMouseOver={handlePopoverOpenHover}
+            onMouseLeave={handlePopoverClose}
+            tabIndex={0}
+            onKeyUp={handlePopoverKeyPress}
+            variant='tertiary'
+          >
+            {renderStatusIcon()}
+          </StudioPopover.Trigger>
+          <StudioPopover.Content>{renderStatusMessage()}</StudioPopover.Content>
+        </StudioPopover>
       </div>
       <div className={classes.appReleaseCreateRelease}>{renderCreateRelease()}</div>
       <div className={classes.appReleaseHistoryTitle}>{t('app_release.earlier_releases')}</div>

diff --git a/...evelopment/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/CreateNewWrapper.tsx b/...evelopment/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/CreateNewWrapper.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { ErrorMessage, Textfield } from '@digdir/designsystemet-react';
-import { LegacyPopover } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
 import { PlusIcon } from '@studio/icons';
 import { extractModelNamesFromMetadataList } from '../../../../utils/metadataUtils';
 import type { DataModelMetadata } from 'app-shared/types/DataModelMetadata';
-import { StudioButton } from '@studio/components';
+import { StudioButton, StudioPopover } from '@studio/components';
 
 export interface CreateNewWrapperProps {
   disabled: boolean;
@@ -77,37 +76,36 @@ export function CreateNewWrapper({
   };
 
   return (
-    <LegacyPopover
-      open={createNewOpen}
-      onOpenChange={setCreateNewOpen}
-      trigger={
+    <StudioPopover open={createNewOpen} onOpenChange={setCreateNewOpen}>
+      <StudioPopover.Trigger
+        id='create-new-data-model-button'
+        disabled={disabled}
+        variant='tertiary'
+        onClick={() => setCreateNewOpen(!createNewOpen)}
+        size='small'
+      >
+        {<PlusIcon />}
+        {t('general.create_new')}
+      </StudioPopover.Trigger>
+      <StudioPopover.Content>
+        <Textfield
+          id='newModelInput'
+          label={t('schema_editor.create_model_description')}
+          onChange={onNameChange}
+          onBlur={onInputBlur}
+          onKeyUp={onKeyUp}
+          error={nameError && <ErrorMessage>{nameError}</ErrorMessage>}
+        />
         <StudioButton
-          id='create-new-data-model-button'
-          disabled={disabled}
-          icon={<PlusIcon />}
-          variant='tertiary'
-          onClick={() => setCreateNewOpen(!createNewOpen)}
+          color='second'
+          onClick={onCreateConfirmClick}
+          style={{ marginTop: 22 }}
+          variant='secondary'
+          size='small'
         >
-          {t('general.create_new')}
+          {t('schema_editor.create_model_confirm_button')}
         </StudioButton>
-      }
-    >
-      <Textfield
-        id='newModelInput'
-        label={t('schema_editor.create_model_description')}
-        onChange={onNameChange}
-        onBlur={onInputBlur}
-        onKeyUp={onKeyUp}
-        error={nameError && <ErrorMessage>{nameError}</ErrorMessage>}
-      />
-      <StudioButton
-        color='second'
-        onClick={onCreateConfirmClick}
-        style={{ marginTop: 22 }}
-        variant='secondary'
-      >
-        {t('schema_editor.create_model_confirm_button')}
-      </StudioButton>
-    </LegacyPopover>
+      </StudioPopover.Content>
+    </StudioPopover>
   );
 }
diff --git a/frontend/app-development/features/textEditor/TextEditor.test.tsx b/frontend/app-development/features/textEditor/TextEditor.test.tsx
@@ -143,8 +143,7 @@ describe('TextEditor', () => {
     expect(addBtn).toBeDisabled();
     const select = screen.getByRole('combobox');
 
-    await user.type(select, 'nordsamisk');
-    await user.click(screen.getByText('nordsamisk'));
+    await user.selectOptions(select, screen.getByRole('option', { name: 'nordsamisk' }));
 
     expect(addBtn).not.toBeDisabled();
     await user.click(addBtn);

diff --git a/frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.tsx b/frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LegacySelect, LegacyToggleButtonGroup } from '@digdir/design-system-react';
 import type { AltinnButtonActionItem } from 'app-shared/components/altinnHeader/types';
 import classes from '../AppPreviewSubMenu.module.css';
 import { ArrowCirclepathIcon, EyeIcon, LinkIcon } from '@studio/icons';
@@ -9,7 +8,8 @@ import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { TopBarMenu } from 'app-shared/enums/TopBarMenu';
 import { PackagesRouter } from 'app-shared/navigation/PackagesRouter';
-import { StudioButton } from '@studio/components';
+import { StudioButton, StudioNativeSelect } from '@studio/components';
+import { ToggleGroup } from '@digdir/designsystemet-react';
 
 export const SubPreviewMenuLeftContent = ({
   viewSize,
@@ -24,31 +24,27 @@ export const SubPreviewMenuLeftContent = ({
   return (
     <div className={classes.leftSubHeaderComponents}>
       <div className={classes.viewSizeButtons}>
-        <LegacyToggleButtonGroup
-          items={[
-            {
-              label: t('preview.view_size_desktop'),
-              value: 'desktop',
-            },
-            {
-              label: t('preview.view_size_mobile'),
-              value: 'mobile',
-            },
-          ]}
+        <ToggleGroup
           onChange={setViewSize}
-          selectedValue={viewSize === 'desktop' ? 'desktop' : 'mobile'}
-        />
+          value={viewSize === 'desktop' ? 'desktop' : 'mobile'}
+          size='sm'
+        >
+          <ToggleGroup.Item value='desktop'>{t('preview.view_size_desktop')}</ToggleGroup.Item>
+          <ToggleGroup.Item value='mobile'>{t('preview.view_size_mobile')}</ToggleGroup.Item>
+        </ToggleGroup>
       </div>
       {layoutSets && (
         <div className={classes.layoutSetSelector}>
-          <LegacySelect
+          <StudioNativeSelect
             onChange={(layoutSet) => handleChangeLayoutSet(layoutSet)}
-            options={layoutSets.sets.map((layoutSet) => ({
-              label: layoutSet.id,
-              value: layoutSet.id,
-            }))}
             value={selectedLayoutSet}
-          />
+          >
+            {layoutSets.sets.map((layoutSet) => (
+              <option key={layoutSet.id} value={layoutSet.id}>
+                {layoutSet.id}
+              </option>
+            ))}
+          </StudioNativeSelect>
         </div>
       )}
     </div>

diff --git a/frontend/app-preview/src/components/AppPreviewSubMenu.module.css b/frontend/app-preview/src/components/AppPreviewSubMenu.module.css
@@ -41,7 +41,6 @@
 }
 
 .layoutSetSelector {
-  padding-top: 5px;
   width: 200px;
 }
 

diff --git a/frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx b/frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx
@@ -26,23 +26,23 @@ describe('AppPreviewSubMenu', () => {
   it('renders the component with desktop viewSize', () => {
     setQueryData(null);
     renderWithProviders(<AppPreviewSubMenu {...props} />);
-    const desktopButton = screen.getByRole('button', {
+    const desktopButton = screen.getByRole('radio', {
       name: textMock('preview.view_size_desktop'),
     });
-    const mobileButton = screen.getByRole('button', { name: textMock('preview.view_size_mobile') });
-    expect(desktopButton).toHaveAttribute('aria-pressed', 'true');
-    expect(mobileButton).toHaveAttribute('aria-pressed', 'false');
+    const mobileButton = screen.getByRole('radio', { name: textMock('preview.view_size_mobile') });
+    expect(desktopButton).toHaveAttribute('aria-checked', 'true');
+    expect(mobileButton).toHaveAttribute('aria-checked', 'false');
   });
 
   it('renders the component with mobile viewSize', () => {
     setQueryData(null);
     renderWithProviders(<AppPreviewSubMenu {...props} viewSize='mobile' />);
-    const desktopButton = screen.getByRole('button', {
+    const desktopButton = screen.getByRole('radio', {
       name: textMock('preview.view_size_desktop'),
     });
-    const mobileButton = screen.getByRole('button', { name: textMock('preview.view_size_mobile') });
-    expect(desktopButton).toHaveAttribute('aria-pressed', 'false');
-    expect(mobileButton).toHaveAttribute('aria-pressed', 'true');
+    const mobileButton = screen.getByRole('radio', { name: textMock('preview.view_size_mobile') });
+    expect(mobileButton).toHaveAttribute('aria-checked', 'true');
+    expect(desktopButton).toHaveAttribute('aria-checked', 'false');
   });
 
   it('renders the component with layout sets in select list', async () => {

diff --git a/...essionEditor/SubExpression/SubExpressionValueSelector/SubexpressionValueSelector.test.tsx b/...essionEditor/SubExpression/SubExpressionValueSelector/SubexpressionValueSelector.test.tsx
@@ -244,7 +244,7 @@ describe('SubexpressionValueSelector', () => {
         onChange,
       });
       const newKey = GatewayActionContext.Sign;
-      const select = screen.getByRole('combobox', { name: texts.gatewayActionKey });
+      const select = screen.getByLabelText(texts.gatewayActionKey);
       await user.selectOptions(select, newKey);
       expect(onChange).toHaveBeenCalledWith({ ...gatewayContextValue, key: newKey });
     });

diff --git a/frontend/libs/studio-components/src/components/StudioNativeSelect/StudioNativeSelect.tsx b/frontend/libs/studio-components/src/components/StudioNativeSelect/StudioNativeSelect.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import classes from './StudioNativeSelect.module.css';
 import {
   Label,
@@ -14,11 +14,15 @@ export type StudioNativeSelectProps = {
 //TODO - Add label and description to NativeSelect when this issue is solved in the design system: https://github.com/Altinn/altinn-studio/issues/12725
 export const StudioNativeSelect = forwardRef<HTMLSelectElement, StudioNativeSelectProps>(
   ({ children, description, label, id, size, ...rest }, ref): React.JSX.Element => {
+    const defaultId = useId();
+    id = id ?? defaultId;
     return (
       <div className={classes.wrapper}>
-        <Label size={size} spacing htmlFor={id}>
-          {label}
-        </Label>
+        {label && (
+          <Label size={size} spacing htmlFor={id}>
+            {label}
+          </Label>
+        )}
         {description && (
           <Paragraph
             className={classes.studioNativeSelectDescription}
@@ -30,7 +34,6 @@ export const StudioNativeSelect = forwardRef<HTMLSelectElement, StudioNativeSele
         )}
         <NativeSelect
           ref={ref}
-          label={label}
           hideLabel
           size={size}
           id={id}

diff --git a/frontend/libs/studio-components/src/components/StudioPopover/index.ts b/frontend/libs/studio-components/src/components/StudioPopover/index.ts
@@ -1 +1,2 @@
 export { StudioPopover } from './StudioPopover';
+export type { StudioPopoverProps } from './StudioPopover';
diff --git a/...tudio-components/src/components/StudioResizableLayout/StudioResizableLayout.mdx b/...tudio-components/src/components/StudioResizableLayout/StudioResizableLayout.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Heading, Paragraph } from '@digdir/design-system-react';
+import { Heading, Paragraph } from '@digdir/designsystemet-react';
 import * as StudioResizableLayoutStories from './StudioResizableLayout.stories';
 
 <Meta of={StudioResizableLayoutStories} />

diff --git a/frontend/packages/policy-editor/src/PolicyEditor.test.tsx b/frontend/packages/policy-editor/src/PolicyEditor.test.tsx
@@ -11,7 +11,6 @@ import { mockPolicyRules } from '../test/mocks/policyRuleMocks';
 import { mockResourecId1 } from '../test/mocks/policySubResourceMocks';
 
 const mockRequiredAuthLevel: RequiredAuthLevel = '3';
-const mockRequiredAuthLevelLabel: string = textMock(authlevelOptions[3].label);
 
 const mockPolicy: Policy = {
   rules: mockPolicyRules,
@@ -43,17 +42,17 @@ describe('PolicyEditor', () => {
     const [selectElement] = screen.getAllByLabelText(
       textMock('policy_editor.select_auth_level_label'),
     );
-    expect(selectElement).toHaveValue(mockRequiredAuthLevelLabel);
+    expect(selectElement).toHaveValue(mockRequiredAuthLevel);
 
-    await user.click(selectElement);
-
-    const mockOption2 = textMock(authlevelOptions[2].label);
-    await user.click(screen.getByRole('option', { name: mockOption2 }));
-
-    const [selectElementAfter] = screen.getAllByLabelText(
-      textMock('policy_editor.select_auth_level_label'),
+    await user.selectOptions(
+      selectElement,
+      screen.getByRole('option', { name: textMock(authlevelOptions[3].label) }),
     );
-    expect(selectElementAfter).toHaveValue(mockOption2);
+
+    expect(
+      screen.getByRole<HTMLOptionElement>('option', { name: textMock(authlevelOptions[3].label) })
+        .selected,
+    ).toBe(true);
   });
 
   it('calls "onSave" when the auth level changes', async () => {
@@ -66,7 +65,7 @@ describe('PolicyEditor', () => {
     await user.click(selectElement);
 
     const mockOption2 = textMock(authlevelOptions[2].label);
-    await user.click(screen.getByRole('option', { name: mockOption2 }));
+    await user.selectOptions(selectElement, screen.getByRole('option', { name: mockOption2 }));
     await user.tab();
 
     expect(mockOnSave).toHaveBeenCalledTimes(1);

diff --git a/...icy-editor/src/components/PolicyCardRules/PolicyRule/PolicyActions/PolicyActions.test.tsx b/...icy-editor/src/components/PolicyCardRules/PolicyRule/PolicyActions/PolicyActions.test.tsx
@@ -58,7 +58,7 @@ describe('PolicyActions', () => {
     expect(optionAction3).toBeInTheDocument();
     expect(optionAction4).not.toBeInTheDocument();
 
-    await user.click(screen.getByRole('option', { name: mockActionOption3 }));
+    await user.selectOptions(actionSelect, mockActionOption3);
 
     expect(mockPolicyEditorContextValue.setPolicyRules).toHaveBeenCalledTimes(1);
     expect(
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,6 @@ @@
     }
     .layoutSetSelector {
-      padding-top: 5px;
       width: 200px;
     }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { StudioPopover } from './StudioPopover';
		export type { StudioPopoverProps } from './StudioPopover';