chore(resource-adm): Remove imports of designsystemet react components

frontend/resourceadm/components/AccessListDetails/AccessListDetail.tsx

@@ -2,15 +2,19 @@ import React, { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { Textfield, Heading } from '@digdir/designsystemet-react';
 import classes from './AccessListDetail.module.css';
 import type { AccessList, ResourceError } from 'app-shared/types/ResourceAdm';
-import { FieldWrapper } from '../FieldWrapper';
 import { useEditAccessListMutation } from '../../hooks/mutations/useEditAccessListMutation';
 import { useDeleteAccessListMutation } from '../../hooks/mutations/useDeleteAccessListMutation';
 import { AccessListMembers } from '../AccessListMembers';
 import { TrashIcon } from '@studio/icons';
-import { StudioButton, StudioLink, StudioModal } from '@studio/components';
+import {
+  StudioButton,
+  StudioHeading,
+  StudioLink,
+  StudioModal,
+  StudioTextfield,
+} from '@studio/components';
 import { ServerCodes } from 'app-shared/enums/ServerCodes';
 import { AccessListPreconditionFailedToast } from '../AccessListPreconditionFailedToast';
 
@@ -113,43 +117,32 @@ export const AccessListDetail = ({
           {t('general.back')}
         </StudioLink>
       </div>
-      <Heading level={1} size='large'>
+      <StudioHeading level={1} size='large'>
         {t('resourceadm.listadmin_list_detail_header')}
-      </Heading>
-      <FieldWrapper
+      </StudioHeading>
+      <StudioTextfield
+        size='sm'
         label={t('resourceadm.listadmin_list_id')}
         description={t('resourceadm.listadmin_list_id_description')}
-      >
-        <Textfield value={list.identifier} readOnly />
-      </FieldWrapper>
-      <FieldWrapper
-        fieldId='listname'
+        readOnly
+        value={list.identifier}
+      />
+      <StudioTextfield
+        size='sm'
         label={t('resourceadm.listadmin_list_name')}
         description={t('resourceadm.listadmin_list_name_description')}
-        ariaDescriptionId='listname-description'
-      >
-        <Textfield
-          id='listname'
-          aria-describedby='listname-description'
-          value={listName}
-          onChange={(event) => setListName(event.target.value)}
-          onBlur={(event) => handleSave({ ...list, name: event.target.value })}
-        />
-      </FieldWrapper>
-      <FieldWrapper
-        fieldId='listdescription'
+        value={listName}
+        onChange={(event) => setListName(event.target.value)}
+        onBlur={(event) => handleSave({ ...list, name: event.target.value })}
+      />
+      <StudioTextfield
+        size='sm'
         label={t('resourceadm.listadmin_list_description')}
         description={t('resourceadm.listadmin_list_description_description')}
-        ariaDescriptionId='listdescription-description'
-      >
-        <Textfield
-          id='listdescription'
-          aria-describedby='listdescription-description'
-          value={listDescription}
-          onChange={(event) => setListDescription(event.target.value)}
-          onBlur={(event) => handleSave({ ...list, description: event.target.value })}
-        />
-      </FieldWrapper>
+        value={listDescription}
+        onChange={(event) => setListDescription(event.target.value)}
+        onBlur={(event) => handleSave({ ...list, description: event.target.value })}
+      />
       <AccessListMembers
         org={org}
         env={env}

frontend/resourceadm/components/AccessListEnvLinks/AccessListEnvLinks.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, List, Paragraph } from '@digdir/designsystemet-react';
 import { getResourcePageURL } from '../../utils/urlUtils';
 import { useUrlParams } from '../../hooks/useUrlParams';
 import { getAvailableEnvironments } from '../../utils/resourceUtils';
 import { useResourcePolicyPublishStatusQuery } from '../../hooks/queries';
-import { StudioSpinner } from '@studio/components';
+import { StudioSpinner, StudioAlert, StudioList, StudioParagraph } from '@studio/components';
 import { ArrowForwardIcon } from '@studio/icons';
 import classes from './AccessListEnvLinks.module.css';
 import { ButtonRouterLink } from 'app-shared/components/ButtonRouterLink';
@@ -35,20 +34,20 @@ export const AccessListEnvLinks = (): React.JSX.Element => {
       {publishStatusData && (
         <>
           {envPublishStatus.some((env) => !env.isResourcePublished) && (
-            <Alert severity='warning'>
-              <Paragraph size='small' spacing>
+            <StudioAlert severity='warning'>
+              <StudioParagraph size='small' spacing>
                 {t('resourceadm.about_resource_rrr_publish_warning')}
-              </Paragraph>
-              <List.Root size='small'>
-                <List.Unordered>
+              </StudioParagraph>
+              <StudioList.Root size='small'>
+                <StudioList.Unordered>
                   {envPublishStatus
                     .filter((env) => !env.isResourcePublished)
                     .map((env) => (
-                      <List.Item key={env.id}>{t(env.label)}</List.Item>
+                      <StudioList.Item key={env.id}>{t(env.label)}</StudioList.Item>
                     ))}
-                </List.Unordered>
-              </List.Root>
-            </Alert>
+                </StudioList.Unordered>
+              </StudioList.Root>
+            </StudioAlert>
           )}
           {envPublishStatus
             .filter((env) => env.isResourcePublished)

frontend/resourceadm/components/AccessListErrorMessage/AccessListErrorMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@digdir/designsystemet-react';
+import { StudioAlert } from '@studio/components';
 import { getEnvLabel } from '../../utils/resourceUtils';
 import { type EnvId } from '../../utils/resourceUtils';
 import type { ResourceError } from 'app-shared/types/ResourceAdm';
@@ -22,5 +22,5 @@ export const AccessListErrorMessage = ({
       envName: t(getEnvLabel(env)),
     });
 
-  return <Alert severity='danger'>{errorMessage}</Alert>;
+  return <StudioAlert severity='danger'>{errorMessage}</StudioAlert>;
 };

frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx

@@ -1,16 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { Alert, Textfield, Radio } from '@digdir/designsystemet-react';
 import classes from './AccessListMembers.module.css';
 import type { AccessList, AccessListMember, ResourceError } from 'app-shared/types/ResourceAdm';
-import { FieldWrapper } from '../FieldWrapper';
 import { useRemoveAccessListMemberMutation } from '../../hooks/mutations/useRemoveAccessListMemberMutation';
 import { useAddAccessListMemberMutation } from '../../hooks/mutations/useAddAccessListMemberMutation';
 import { usePartiesRegistryQuery } from '../../hooks/queries/usePartiesRegistryQuery';
 import { useSubPartiesRegistryQuery } from '../../hooks/queries/useSubPartiesRegistryQuery';
 import { getPartiesQueryUrl } from '../../utils/urlUtils';
-import { StudioButton } from '@studio/components';
+import {
+  StudioAlert,
+  StudioButton,
+  StudioLabelAsParagraph,
+  StudioParagraph,
+  StudioRadio,
+  StudioTextfield,
+} from '@studio/components';
 import { useDebounce } from '@studio/hooks';
 import { PlusIcon } from '@studio/icons';
 import { AccessListMembersPaging } from './AccessListMembersPaging';
@@ -162,10 +167,14 @@ export const AccessListMembers = ({
   const resultData = getResultData();
 
   return (
-    <FieldWrapper
-      label={t('resourceadm.listadmin_list_organizations')}
-      description={t('resourceadm.listadmin_list_organizations_description')}
-    >
+    <div>
+      <StudioLabelAsParagraph size='small' spacing>
+        {t('resourceadm.listadmin_list_organizations')}
+      </StudioLabelAsParagraph>
+
+      <StudioParagraph variant='short' size='small'>
+        {t('resourceadm.listadmin_list_organizations_description')}
+      </StudioParagraph>
       <AccessListMembersTable
         listItems={getMergedMembersData()}
         isLoading={isRemovingMember}
@@ -183,40 +192,43 @@ export const AccessListMembers = ({
         </StudioButton>
       )}
       {!!members && members.pages?.length === 0 && (
-        <Alert severity='info'>{t('resourceadm.listadmin_empty_list')}</Alert>
+        <StudioAlert severity='info'>{t('resourceadm.listadmin_empty_list')}</StudioAlert>
       )}
       {isAddMode && (
         <>
           <div className={classes.searchWrapper}>
-            <FieldWrapper label={t('resourceadm.listadmin_search')} fieldId='party-search'>
-              <Textfield
-                id='party-search'
-                value={searchText}
-                onChange={(event) => {
-                  debounce(() => setDebouncedSearchText(event.target.value));
-                  setSearchText(event.target.value);
-                }}
-              />
-              <div className={classes.noSearchResults} aria-live='polite'>
-                {resultData?.parties?.length === 0 && (
-                  <div>
-                    {isSubPartySearch
-                      ? t('resourceadm.listadmin_search_no_sub_parties')
-                      : t('resourceadm.listadmin_search_no_parties')}
-                  </div>
-                )}
-              </div>
-            </FieldWrapper>
-            <Radio.Group
+            <StudioTextfield
+              size='sm'
+              label={t('resourceadm.listadmin_search')}
+              value={searchText}
+              onChange={(event) => {
+                debounce(() => setDebouncedSearchText(event.target.value));
+                setSearchText(event.target.value);
+              }}
+            />
+            <div className={classes.noSearchResults} aria-live='polite'>
+              {resultData?.parties?.length === 0 && (
+                <div>
+                  {isSubPartySearch
+                    ? t('resourceadm.listadmin_search_no_sub_parties')
+                    : t('resourceadm.listadmin_search_no_parties')}
+                </div>
+              )}
+            </div>
+            <StudioRadio.Group
               hideLegend
               onChange={() => setIsSubPartySearch((old) => !old)}
               value={isSubPartySearch ? SUBPARTY_SEARCH_TYPE : PARTY_SEARCH_TYPE}
               inline
               legend={t('resourceadm.listadmin_search_party_type')}
             >
-              <Radio value={PARTY_SEARCH_TYPE}>{t('resourceadm.listadmin_parties')}</Radio>
-              <Radio value={SUBPARTY_SEARCH_TYPE}>{t('resourceadm.listadmin_sub_parties')}</Radio>
-            </Radio.Group>
+              <StudioRadio value={PARTY_SEARCH_TYPE}>
+                {t('resourceadm.listadmin_parties')}
+              </StudioRadio>
+              <StudioRadio value={SUBPARTY_SEARCH_TYPE}>
+                {t('resourceadm.listadmin_sub_parties')}
+              </StudioRadio>
+            </StudioRadio.Group>
           </div>
           <AccessListMembersTable
             isHeaderHidden
@@ -243,6 +255,6 @@ export const AccessListMembers = ({
           </StudioButton>
         </div>
       )}
-    </FieldWrapper>
+    </div>
   );
 };

frontend/resourceadm/components/AccessListMembers/AccessListMembersTable.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import cn from 'classnames';
-import { ErrorMessage } from '@digdir/designsystemet-react';
 import type { AccessListMember } from 'app-shared/types/ResourceAdm';
-import { StudioButton, StudioTableLocalPagination } from '@studio/components';
+import { StudioButton, StudioErrorMessage, StudioTableLocalPagination } from '@studio/components';
 import type { Columns } from '@studio/components';
 import classes from './AccessListMembers.module.css';
 import { PlusCircleIcon, MinusCircleIcon } from '@studio/icons';
@@ -35,7 +34,11 @@ export const AccessListMembersTable = ({
     let buttonIcon: React.JSX.Element;
     let buttonText: string;
     if (invalidItems?.indexOf(item.orgNr) > -1) {
-      return <ErrorMessage size='small'>{t('resourceadm.listadmin_invalid_org')}</ErrorMessage>;
+      return (
+        <StudioErrorMessage size='small'>
+          {t('resourceadm.listadmin_invalid_org')}
+        </StudioErrorMessage>
+      );
     }
     const orgAriaString = `${item.orgName} ${stringNumberToAriaLabel(item.orgNr)}`;
     if (isAdd) {

frontend/resourceadm/components/ErrorMessage/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import classes from './errorMessage.module.css';
-import { Heading, Paragraph } from '@digdir/designsystemet-react';
+import { StudioHeading, StudioParagraph } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 
 type ErrorMessageProps = {
@@ -18,11 +18,13 @@ export const ErrorMessage = ({
   const { t } = useTranslation();
   return (
     <div className={classes.errorMessage}>
-      <Heading size='medium' level={1}>
+      <StudioHeading size='medium' level={1}>
         {title}
-      </Heading>
-      <Paragraph size='small'>{message}</Paragraph>
-      <Paragraph size='small'>{t('resourceadm.dashboard_error_message_info')}</Paragraph>
+      </StudioHeading>
+      <StudioParagraph size='small'>{message}</StudioParagraph>
+      <StudioParagraph size='small'>
+        {t('resourceadm.dashboard_error_message_info')}
+      </StudioParagraph>
       {children}
     </div>
   );

frontend/resourceadm/components/ImportAltinn3ResourceModal/ImportAltinn3ResourceModal.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Radio } from '@digdir/designsystemet-react';
-import { StudioButton, StudioModal } from '@studio/components';
+import { StudioButton, StudioModal, StudioRadio } from '@studio/components';
 import { getEnvLabel } from '../../utils/resourceUtils';
 import type { EnvId } from '../../utils/resourceUtils';
 
@@ -47,17 +46,17 @@ export const ImportAltinn3ResourceModal = forwardRef<
           </>
         }
       >
-        <Radio.Group
+        <StudioRadio.Group
           legend={t('resourceadm.dashboard_import_environment_radio_header')}
           value={selectedEnv ?? '-'} // bug: default value of radio cannot be null or undefined; that will cause the component to be uncontrolled until a value is set
           onChange={(newEnv: string) => setSelectedEnv(newEnv as EnvId)}
         >
           {availableEnvs.map((env) => (
-            <Radio key={env} value={env}>
+            <StudioRadio key={env} value={env}>
               {t(getEnvLabel(env))}
-            </Radio>
+            </StudioRadio>
           ))}
-        </Radio.Group>
+        </StudioRadio.Group>
       </StudioModal.Dialog>
     </StudioModal.Root>
   );