diff --git a/frontend/resourceadm/components/AccessListDetails/AccessListDetail.tsx b/frontend/resourceadm/components/AccessListDetails/AccessListDetail.tsx index ab34d00e33a..da1e516909f 100644 --- a/frontend/resourceadm/components/AccessListDetails/AccessListDetail.tsx +++ b/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')} - + {t('resourceadm.listadmin_list_detail_header')} - - + - - - + - setListName(event.target.value)} - onBlur={(event) => handleSave({ ...list, name: event.target.value })} - /> - - setListName(event.target.value)} + onBlur={(event) => handleSave({ ...list, name: event.target.value })} + /> + - setListDescription(event.target.value)} - onBlur={(event) => handleSave({ ...list, description: event.target.value })} - /> - + value={listDescription} + onChange={(event) => setListDescription(event.target.value)} + onBlur={(event) => handleSave({ ...list, description: event.target.value })} + /> { {publishStatusData && ( <> {envPublishStatus.some((env) => !env.isResourcePublished) && ( - - + + {t('resourceadm.about_resource_rrr_publish_warning')} - - - + + + {envPublishStatus .filter((env) => !env.isResourcePublished) .map((env) => ( - {t(env.label)} + {t(env.label)} ))} - - - + + + )} {envPublishStatus .filter((env) => env.isResourcePublished) diff --git a/frontend/resourceadm/components/AccessListErrorMessage/AccessListErrorMessage.tsx b/frontend/resourceadm/components/AccessListErrorMessage/AccessListErrorMessage.tsx index 950f0097261..b827cfdbabe 100644 --- a/frontend/resourceadm/components/AccessListErrorMessage/AccessListErrorMessage.tsx +++ b/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 {errorMessage}; + return {errorMessage}; }; diff --git a/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx b/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx index 6aa0341c26f..b04b345bb35 100644 --- a/frontend/resourceadm/components/AccessListMembers/AccessListMembers.tsx +++ b/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 ( - +
+ + {t('resourceadm.listadmin_list_organizations')} + + + + {t('resourceadm.listadmin_list_organizations_description')} + )} {!!members && members.pages?.length === 0 && ( - {t('resourceadm.listadmin_empty_list')} + {t('resourceadm.listadmin_empty_list')} )} {isAddMode && ( <>
- - { - debounce(() => setDebouncedSearchText(event.target.value)); - setSearchText(event.target.value); - }} - /> -
- {resultData?.parties?.length === 0 && ( -
- {isSubPartySearch - ? t('resourceadm.listadmin_search_no_sub_parties') - : t('resourceadm.listadmin_search_no_parties')} -
- )} -
- - { + debounce(() => setDebouncedSearchText(event.target.value)); + setSearchText(event.target.value); + }} + /> +
+ {resultData?.parties?.length === 0 && ( +
+ {isSubPartySearch + ? t('resourceadm.listadmin_search_no_sub_parties') + : t('resourceadm.listadmin_search_no_parties')} +
+ )} +
+ setIsSubPartySearch((old) => !old)} value={isSubPartySearch ? SUBPARTY_SEARCH_TYPE : PARTY_SEARCH_TYPE} inline legend={t('resourceadm.listadmin_search_party_type')} > - {t('resourceadm.listadmin_parties')} - {t('resourceadm.listadmin_sub_parties')} - + + {t('resourceadm.listadmin_parties')} + + + {t('resourceadm.listadmin_sub_parties')} + +
)} - + ); }; diff --git a/frontend/resourceadm/components/AccessListMembers/AccessListMembersTable.tsx b/frontend/resourceadm/components/AccessListMembers/AccessListMembersTable.tsx index 4eada8c7c20..8d9241b14ab 100644 --- a/frontend/resourceadm/components/AccessListMembers/AccessListMembersTable.tsx +++ b/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 {t('resourceadm.listadmin_invalid_org')}; + return ( + + {t('resourceadm.listadmin_invalid_org')} + + ); } const orgAriaString = `${item.orgName} ${stringNumberToAriaLabel(item.orgNr)}`; if (isAdd) { diff --git a/frontend/resourceadm/components/ErrorMessage/ErrorMessage.tsx b/frontend/resourceadm/components/ErrorMessage/ErrorMessage.tsx index 69d34d461f4..da7e129ec47 100644 --- a/frontend/resourceadm/components/ErrorMessage/ErrorMessage.tsx +++ b/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 (
- + {title} - - {message} - {t('resourceadm.dashboard_error_message_info')} + + {message} + + {t('resourceadm.dashboard_error_message_info')} + {children}
); diff --git a/frontend/resourceadm/components/FieldWrapper/FieldWrapper.tsx b/frontend/resourceadm/components/FieldWrapper/FieldWrapper.tsx deleted file mode 100644 index 3de274bf15d..00000000000 --- a/frontend/resourceadm/components/FieldWrapper/FieldWrapper.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { ReactNode } from 'react'; -import React from 'react'; -import { Label, Paragraph } from '@digdir/designsystemet-react'; - -interface FieldWrapperProps { - label: string; - description?: string; - children: ReactNode; - fieldId?: string; - ariaDescriptionId?: string; -} - -export const FieldWrapper = ({ - label, - description, - fieldId, - ariaDescriptionId, - children, -}: FieldWrapperProps): React.JSX.Element => { - return ( -
- - {description && ( - - {description} - - )} - {children} -
- ); -}; diff --git a/frontend/resourceadm/components/FieldWrapper/index.ts b/frontend/resourceadm/components/FieldWrapper/index.ts deleted file mode 100644 index 1ec6cd660f3..00000000000 --- a/frontend/resourceadm/components/FieldWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FieldWrapper } from './FieldWrapper'; diff --git a/frontend/resourceadm/components/ImportAltinn3ResourceModal/ImportAltinn3ResourceModal.tsx b/frontend/resourceadm/components/ImportAltinn3ResourceModal/ImportAltinn3ResourceModal.tsx index abddb13aa02..ff3f6ecfff4 100644 --- a/frontend/resourceadm/components/ImportAltinn3ResourceModal/ImportAltinn3ResourceModal.tsx +++ b/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< } > - setSelectedEnv(newEnv as EnvId)} > {availableEnvs.map((env) => ( - + {t(getEnvLabel(env))} - + ))} - + ); diff --git a/frontend/resourceadm/components/ImportResourceModal/ImportResourceModal.tsx b/frontend/resourceadm/components/ImportResourceModal/ImportResourceModal.tsx index 7addfec82e7..74e4f5eb181 100644 --- a/frontend/resourceadm/components/ImportResourceModal/ImportResourceModal.tsx +++ b/frontend/resourceadm/components/ImportResourceModal/ImportResourceModal.tsx @@ -1,7 +1,6 @@ import React, { forwardRef, useState } from 'react'; import { toast } from 'react-toastify'; import classes from './ImportResourceModal.module.css'; -import { Combobox, Paragraph, Textfield } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; import type { EnvironmentType } from '../../types/EnvironmentType'; import { useNavigate } from 'react-router-dom'; @@ -12,7 +11,13 @@ import type { Resource, ResourceError } from 'app-shared/types/ResourceAdm'; import { getResourcePageURL } from '../../utils/urlUtils'; import { ServerCodes } from 'app-shared/enums/ServerCodes'; import { useUrlParams } from '../../hooks/useUrlParams'; -import { StudioButton, StudioModal } from '@studio/components'; +import { + StudioButton, + StudioCombobox, + StudioModal, + StudioParagraph, + StudioTextfield, +} from '@studio/components'; import { formatIdString } from '../../utils/stringUtils'; import { getAvailableEnvironments, @@ -119,7 +124,7 @@ export const ImportResourceModal = forwardRef } > - {environmentOptions.map((env) => ( - + {t(env.label)} - + ))} - + {selectedEnv && (
- + {t('resourceadm.dashboard_import_modal_resource_name_and_id_text')} - - + { diff --git a/frontend/resourceadm/components/ImportResourceModal/ServiceContent/ServiceContent.tsx b/frontend/resourceadm/components/ImportResourceModal/ServiceContent/ServiceContent.tsx index f7aa012ddf9..917a21c2de5 100644 --- a/frontend/resourceadm/components/ImportResourceModal/ServiceContent/ServiceContent.tsx +++ b/frontend/resourceadm/components/ImportResourceModal/ServiceContent/ServiceContent.tsx @@ -1,8 +1,14 @@ import type { ReactNode } from 'react'; import React from 'react'; import classes from './ServiceContent.module.css'; -import { Alert, ErrorMessage, Combobox, Paragraph, Spinner } from '@digdir/designsystemet-react'; -import { StudioCenter } from '@studio/components'; +import { + StudioAlert, + StudioCenter, + StudioCombobox, + StudioErrorMessage, + StudioParagraph, + StudioSpinner, +} from '@studio/components'; import { useTranslation } from 'react-i18next'; import { useGetAltinn2LinkServicesQuery } from '../../../hooks/queries'; import type { Altinn2LinkService } from 'app-shared/types/Altinn2LinkService'; @@ -58,10 +64,10 @@ export const ServiceContent = ({ case 'pending': { return ( - ); @@ -69,26 +75,28 @@ export const ServiceContent = ({ case 'error': { return ( - - {t('general.fetch_error_message')} - {t('general.error_message_with_colon')} + + {t('general.fetch_error_message')} + {t('general.error_message_with_colon')} {altinn2LinkServicesError && ( - {altinn2LinkServicesError.message} + + {altinn2LinkServicesError.message} + )} - + ); } case 'success': { if (altinn2LinkServices.length === 0) { return ( - + {t('resourceadm.import_resource_empty_list', { env: env })} - + ); } return ( - -1 } > - + {t('resourceadm.dashboard_import_modal_no_services_found')} - + {altinn2LinkServices.map(mapAltinn2LinkServiceToSelectOption).map((ls) => ( - + {ls.label} - + ))} - + ); } } diff --git a/frontend/resourceadm/components/MergeConflict/MergeConflict.module.css b/frontend/resourceadm/components/MergeConflict/MergeConflict.module.css new file mode 100644 index 00000000000..cbcf429c337 --- /dev/null +++ b/frontend/resourceadm/components/MergeConflict/MergeConflict.module.css @@ -0,0 +1,15 @@ +.downloadWrapper { + display: flex; + gap: var(--fds-spacing-2); + flex-direction: column; +} + +.mergeConflictWrapper { + display: flex; + flex-direction: column; + gap: var(--fds-spacing-2); + margin: auto auto; + padding: var(--fds-spacing-18); + width: 660px; + border: 1px solid #c9c9c9; +} diff --git a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.test.tsx b/frontend/resourceadm/components/MergeConflict/MergeConflict.test.tsx similarity index 60% rename from frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.test.tsx rename to frontend/resourceadm/components/MergeConflict/MergeConflict.test.tsx index 4c5e4cc093b..159b66486fc 100644 --- a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.test.tsx +++ b/frontend/resourceadm/components/MergeConflict/MergeConflict.test.tsx @@ -1,19 +1,18 @@ -import React, { useRef } from 'react'; +import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { render, screen } from '@testing-library/react'; -import type { UserEvent } from '@testing-library/user-event'; import userEvent from '@testing-library/user-event'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { queriesMock } from 'app-shared/mocks/queriesMock'; import { ServicesContextProvider } from 'app-shared/contexts/ServicesContext'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; -import { MergeConflictModal } from './MergeConflictModal'; +import { MergeConflict } from './MergeConflict'; const repoName = 'ttd-resources'; -const mockButtonText: string = 'Mock Button'; + const originalWindowLocation = window.location; -describe('MergeConflictModal', () => { +describe('MergeConflict', () => { beforeEach(() => { delete window.location; window.location = { @@ -28,7 +27,7 @@ describe('MergeConflictModal', () => { it('should reset changes when reset button is clicked', async () => { const user = userEvent.setup(); - await renderAndOpenModal(user); + renderMergeConflict(); const resetChangesButton = await screen.findByRole('button', { name: textMock('merge_conflict.remove_my_changes'), @@ -39,30 +38,12 @@ describe('MergeConflictModal', () => { }); }); -const renderMergeConflictModal = () => { +const renderMergeConflict = () => { return render( - + , ); }; - -const renderAndOpenModal = async (user: UserEvent) => { - renderMergeConflictModal(); - - const openModalButton = screen.getByRole('button', { name: mockButtonText }); - await user.click(openModalButton); -}; - -const TestComponentWithButton = () => { - const modalRef = useRef(null); - - return ( - <> - - - - ); -}; diff --git a/frontend/resourceadm/components/MergeConflict/MergeConflict.tsx b/frontend/resourceadm/components/MergeConflict/MergeConflict.tsx new file mode 100644 index 00000000000..55cb5279f30 --- /dev/null +++ b/frontend/resourceadm/components/MergeConflict/MergeConflict.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import classes from './MergeConflict.module.css'; +import { useTranslation } from 'react-i18next'; +import { repoDownloadPath } from 'app-shared/api/paths'; +import { + StudioButton, + StudioHeading, + StudioLabelAsParagraph, + StudioLink, + StudioParagraph, +} from '@studio/components'; +import { useResetRepositoryMutation } from '../../hooks/mutations'; + +type MergeConflictProps = { + /** + * The name of the organisation + */ + org: string; + /** + * The name of the repo + */ + repo: string; +}; + +/** + * @component + * Displays the a message telling the user that there is a merge conflict + * + * @property {string}[org] - The name of the organisation + * @property {string}[repo] - The name of the repo + * + * @returns {React.JSX.Element} - The rendered component + */ +export const MergeConflict = ({ org, repo }: MergeConflictProps): React.JSX.Element => { + const { t } = useTranslation(); + + const { mutate: resetRepo, isPending: isRemovingChanges } = useResetRepositoryMutation(org, repo); + + /** + * Function that resets the repo + */ + const handleClickResetRepo = () => { + if (!isRemovingChanges) { + resetRepo(undefined, { + onSuccess: () => window.location.reload(), + }); + } + }; + + return ( +
+ {t('resourceadm.merge_conflict_header')} + + {t('resourceadm.merge_conflict_body')} + +
+ + {t('merge_conflict.download')} + + + {t('merge_conflict.download_edited_files')} + + + {t('merge_conflict.download_entire_repo')} + + + {t('resourceadm.merge_conflict_footer')} + +
+
+ + {t('merge_conflict.remove_my_changes')} + +
+
+ ); +}; diff --git a/frontend/resourceadm/components/MergeConflict/index.ts b/frontend/resourceadm/components/MergeConflict/index.ts new file mode 100644 index 00000000000..7bcd36dde6b --- /dev/null +++ b/frontend/resourceadm/components/MergeConflict/index.ts @@ -0,0 +1 @@ +export { MergeConflict } from './MergeConflict'; diff --git a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.module.css b/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.module.css deleted file mode 100644 index 6fef1f6027a..00000000000 --- a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.downloadWrapper { - display: flex; - gap: var(--fds-spacing-2); - flex-direction: column; -} diff --git a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.tsx b/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.tsx deleted file mode 100644 index 38a33fbcbfb..00000000000 --- a/frontend/resourceadm/components/MergeConflictModal/MergeConflictModal.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { forwardRef } from 'react'; -import classes from './MergeConflictModal.module.css'; -import { useTranslation } from 'react-i18next'; -import { Link, Paragraph, Label, Modal } from '@digdir/designsystemet-react'; -import { repoDownloadPath } from 'app-shared/api/paths'; -import { StudioButton } from '@studio/components'; -import { useResetRepositoryMutation } from '../../hooks/mutations'; - -type MergeConflictModalProps = { - /** - * The name of the organisation - */ - org: string; - /** - * The name of the repo - */ - repo: string; -}; - -/** - * @component - * Displays the modal telling the user that there is a merge conflict - * - * @property {string}[org] - The name of the organisation - * @property {string}[repo] - The name of the repo - * - * @returns {React.JSX.Element} - The rendered component - */ -export const MergeConflictModal = forwardRef( - ({ org, repo }, ref): React.JSX.Element => { - const { t } = useTranslation(); - - const { mutate: resetRepo, isPending: isRemovingChanges } = useResetRepositoryMutation( - org, - repo, - ); - - /** - * Function that resets the repo - */ - const handleClickResetRepo = () => { - resetRepo(undefined, { - onSuccess: () => { - window.location.reload(); - }, - }); - }; - - return ( - - {t('resourceadm.merge_conflict_header')} - - - {t('resourceadm.merge_conflict_body')} - -
- - - {t('merge_conflict.download_edited_files')} - - - {t('merge_conflict.download_entire_repo')} - -
- - - { - if (!isRemovingChanges) { - handleClickResetRepo(); - } - }} - > - {t('merge_conflict.remove_my_changes')} - - - - ); - }, -); - -MergeConflictModal.displayName = 'MergeConflictModal'; diff --git a/frontend/resourceadm/components/MergeConflictModal/index.ts b/frontend/resourceadm/components/MergeConflictModal/index.ts deleted file mode 100644 index 372a78fd4af..00000000000 --- a/frontend/resourceadm/components/MergeConflictModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { MergeConflictModal } from './MergeConflictModal'; diff --git a/frontend/resourceadm/components/MigrationPanel/MigrationPanel.tsx b/frontend/resourceadm/components/MigrationPanel/MigrationPanel.tsx index 82f66e2fb6c..28e1a5d4bb0 100644 --- a/frontend/resourceadm/components/MigrationPanel/MigrationPanel.tsx +++ b/frontend/resourceadm/components/MigrationPanel/MigrationPanel.tsx @@ -1,8 +1,13 @@ import React, { useRef, useState } from 'react'; import { toast } from 'react-toastify'; -import { Alert, Checkbox, Heading } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; -import { StudioButton, StudioModal } from '@studio/components'; +import { + StudioAlert, + StudioButton, + StudioCheckbox, + StudioHeading, + StudioModal, +} from '@studio/components'; import classes from './MigrationPanel.module.css'; import { getMigrationErrorMessage, type Environment } from '../../utils/resourceUtils'; import { useGetAltinn2DelegationsCount } from '../../hooks/queries/useGetAltinn2DelegationCount'; @@ -92,18 +97,22 @@ export const MigrationPanel = ({ } > - {t('resourceadm.migration_disable_service_modal_body')} - + {t('resourceadm.migration_disable_service_modal_body')} + + setIsMigrateCheckboxChecked((old) => !old)} value={isMigrateCheckboxChecked ? ['checked'] : []} > - {t('resourceadm.migration_confirm_migration')} - + + {t('resourceadm.migration_confirm_migration')} + +
- {t(env.label)} + {t(env.label)}
{t('resourceadm.migration_altinn2_delegations')}{' '} {!isLoadingDelegationCount && ( @@ -114,12 +123,14 @@ export const MigrationPanel = ({ {t('resourceadm.migration_altinn3_delegations')} N/A
{isPublishedInEnv && numberOfA2Delegations?.numberOfDelegations === 0 && ( - + {t('resourceadm.migration_not_needed')} - + )} {errorMessage && ( - {t(errorMessage.errorMessage)} + + {t(errorMessage.errorMessage)} + )}
void; @@ -42,7 +41,9 @@ export const NavigationModal = forwardRef } > - {t('resourceadm.resource_navigation_modal_text')} + + {t('resourceadm.resource_navigation_modal_text')} + ); diff --git a/frontend/resourceadm/components/NewAccessListModal/NewAccessListModal.tsx b/frontend/resourceadm/components/NewAccessListModal/NewAccessListModal.tsx index 4c30ad45f78..3de1b74bf36 100644 --- a/frontend/resourceadm/components/NewAccessListModal/NewAccessListModal.tsx +++ b/frontend/resourceadm/components/NewAccessListModal/NewAccessListModal.tsx @@ -3,10 +3,9 @@ import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; import { useCreateAccessListMutation } from '../../hooks/mutations/useCreateAccessListMutation'; -import { Paragraph } from '@digdir/designsystemet-react'; import { ResourceNameAndId } from '../../components/ResourceNameAndId'; import { ServerCodes } from 'app-shared/enums/ServerCodes'; -import { StudioButton, StudioModal } from '@studio/components'; +import { StudioButton, StudioModal, StudioParagraph } from '@studio/components'; import { getEnvLabel } from '../../utils/resourceUtils'; import type { EnvId } from '../../utils/resourceUtils'; import type { ResourceError } from 'app-shared/types/ResourceAdm'; @@ -92,7 +91,9 @@ export const NewAccessListModal = forwardRef } > - {t('resourceadm.listadmin_create_list_description')} + + {t('resourceadm.listadmin_create_list_description')} + } > - + {t('resourceadm.dashboard_create_modal_resource_name_and_id_text')} - + {t('general.back')} - + {t('resourceadm.listadmin_resource_header', { resourceTitle: resourceData.title.nb, env: env.toUpperCase(), })} - - + + {t('resourceadm.listadmin_resource_list_checkbox_header')} - +
{accessLists?.pages.map((list) => { return (
- -1} onChange={(event) => { @@ -129,7 +134,7 @@ export const ResourceAccessLists = ({ }} > {list.name} - + } diff --git a/frontend/resourceadm/components/ResourceContactPointFields/ResourceContactPointFieldset.tsx b/frontend/resourceadm/components/ResourceContactPointFields/ResourceContactPointFieldset.tsx index d0cedf01283..0ab33514826 100644 --- a/frontend/resourceadm/components/ResourceContactPointFields/ResourceContactPointFieldset.tsx +++ b/frontend/resourceadm/components/ResourceContactPointFields/ResourceContactPointFieldset.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import type { ResourceContactPoint, ResourceFormError } from 'app-shared/types/ResourceAdm'; -import { Fieldset, HelpText, Textfield } from '@digdir/designsystemet-react'; +import { HelpText } from '@digdir/designsystemet-react'; +import { StudioFieldset, StudioTextfield } from '@studio/components'; import { useTranslation } from 'react-i18next'; import { InputFieldErrorMessage } from '../ResourcePageInputs/InputFieldErrorMessage'; import { ResourceFieldHeader } from '../ResourcePageInputs/ResourceFieldHeader'; @@ -69,7 +70,7 @@ export const ResourceContactPointFieldset = ({ return ( <> -
- @@ -98,7 +99,7 @@ export const ResourceContactPointFieldset = ({ onBlur={() => onLeaveTextFields({ ...contactPoint, category })} error={hasError} /> - setEmail(e.target.value)} @@ -106,7 +107,7 @@ export const ResourceContactPointFieldset = ({ onBlur={() => onLeaveTextFields({ ...contactPoint, email })} error={hasError} /> - setTelephone(e.target.value)} @@ -114,7 +115,7 @@ export const ResourceContactPointFieldset = ({ onBlur={() => onLeaveTextFields({ ...contactPoint, telephone })} error={hasError} /> - setContactPage(e.target.value)} @@ -122,7 +123,7 @@ export const ResourceContactPointFieldset = ({ onBlur={() => onLeaveTextFields({ ...contactPoint, contactPage })} error={hasError} /> -
+ {fieldErrors.map((error) => { return ( {publisingResourcePending ? ( - + ) : ( <> - + {t(env.label)} - - {t('resourceadm.deploy_version_number_text')} + + + {t('resourceadm.deploy_version_number_text')} +
- + {currentEnvVersion} - + {newEnvVersion && ( <> - + {newEnvVersion} - + )}
@@ -87,11 +94,11 @@ export const ResourceDeployEnvCard = ({ {t('resourceadm.deploy_card_publish', { env: t(env.label) })} {hasNoPublishAccess && ( - - + + {t('resourceadm.resource_publish_no_access', { envName: t(env.label) })} - - + + )} )} diff --git a/frontend/resourceadm/components/ResourceDeployStatus/ResourceDeployStatus.tsx b/frontend/resourceadm/components/ResourceDeployStatus/ResourceDeployStatus.tsx index 871392559b1..8e79d153f11 100644 --- a/frontend/resourceadm/components/ResourceDeployStatus/ResourceDeployStatus.tsx +++ b/frontend/resourceadm/components/ResourceDeployStatus/ResourceDeployStatus.tsx @@ -4,9 +4,8 @@ import classes from './ResourceDeployStatus.module.css'; import { ArrowRightIcon } from '@studio/icons'; import type { NavigationBarPage } from '../../types/NavigationBarPage'; import type { DeployError } from '../../types/DeployError'; -import { Alert, Paragraph } from '@digdir/designsystemet-react'; import { LinkButton } from '../LinkButton'; -import { StudioLabelAsParagraph } from '@studio/components'; +import { StudioAlert, StudioLabelAsParagraph, StudioParagraph } from '@studio/components'; export type ResourceDeployStatusProps = { /** @@ -53,7 +52,7 @@ export const ResourceDeployStatus = ({ resourceId, }: ResourceDeployStatusProps): React.JSX.Element => { return ( - + {title} @@ -61,14 +60,14 @@ export const ResourceDeployStatus = ({ return (
- + - +
); })} - + ); }; diff --git a/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.module.css b/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.module.css index b867cb1be3b..1d8b083ad77 100644 --- a/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.module.css +++ b/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.module.css @@ -34,6 +34,6 @@ .buttonWrapper { display: flex; - align-self: flex-start; + align-self: flex-end; margin-left: 0.5rem; } diff --git a/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.tsx b/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.tsx index 60172fb62c0..263c72e17c1 100644 --- a/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.tsx +++ b/frontend/resourceadm/components/ResourceNameAndId/ResourceNameAndId.tsx @@ -1,10 +1,8 @@ -import { Paragraph, Textfield } from '@digdir/designsystemet-react'; -import { StudioButton } from '@studio/components'; +import { StudioButton, StudioParagraph, StudioTextfield } from '@studio/components'; import { CheckmarkIcon, MultiplyIcon, PencilWritingIcon } from '@studio/icons'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import classes from './ResourceNameAndId.module.css'; -import { FieldWrapper } from '../../components/FieldWrapper'; import { formatIdString } from '../../utils/stringUtils'; export type ResourceNameAndIdProps = { @@ -98,15 +96,15 @@ export const ResourceNameAndId = ({ */ const displayIdTextOrInput = () => { return ( - + <> {editIdFieldOpen ? (
- handleEditId(e.target.value)} - id='resourceIdInputId' + label={idLabel} error={conflictErrorMessage} />
@@ -135,9 +133,9 @@ export const ResourceNameAndId = ({

id

- + {formatIdString(id)} - +
handleClickEditButton(false)} @@ -154,21 +152,19 @@ export const ResourceNameAndId = ({
)} - + ); }; return (
- - handleEditTitle(e.target.value)} - id='resourceNameInputId' - size='small' - /> - + handleEditTitle(e.target.value)} + label={titleLabel} + size='sm' + />
{displayIdTextOrInput()}
diff --git a/frontend/resourceadm/components/ResourcePageInputs/InputFieldErrorMessage.tsx b/frontend/resourceadm/components/ResourcePageInputs/InputFieldErrorMessage.tsx index b1012d16a9e..9b2da6effb6 100644 --- a/frontend/resourceadm/components/ResourcePageInputs/InputFieldErrorMessage.tsx +++ b/frontend/resourceadm/components/ResourcePageInputs/InputFieldErrorMessage.tsx @@ -1,4 +1,4 @@ -import { ErrorMessage } from '@digdir/designsystemet-react'; +import { StudioErrorMessage } from '@studio/components'; import classes from './ResourcePageInputs.module.css'; import React from 'react'; @@ -22,7 +22,7 @@ export const InputFieldErrorMessage = ({ }: InputFieldErrorMessageProps): React.JSX.Element => { return (
- {message} + {message}
); }; diff --git a/frontend/resourceadm/components/ResourcePageInputs/ResourceCheckboxGroup.tsx b/frontend/resourceadm/components/ResourcePageInputs/ResourceCheckboxGroup.tsx index e6a3d1035fb..ce24d4f7af0 100644 --- a/frontend/resourceadm/components/ResourcePageInputs/ResourceCheckboxGroup.tsx +++ b/frontend/resourceadm/components/ResourcePageInputs/ResourceCheckboxGroup.tsx @@ -1,6 +1,6 @@ import React from 'react'; import classes from './ResourcePageInputs.module.css'; -import { Checkbox } from '@digdir/designsystemet-react'; +import { StudioCheckbox } from '@studio/components'; import { useTranslation } from 'react-i18next'; import { InputFieldErrorMessage } from './InputFieldErrorMessage'; import { ResourceFieldHeader } from './ResourceFieldHeader'; @@ -79,9 +79,9 @@ export const ResourceCheckboxGroup = ({ const displayAvailableForCheckboxes = () => { return options.map((option) => ( - + {t(option.label)} - + )); }; @@ -91,7 +91,7 @@ export const ResourceCheckboxGroup = ({ return (
- } description={description} @@ -102,7 +102,7 @@ export const ResourceCheckboxGroup = ({ value={value} > {displayAvailableForCheckboxes()} - +
); }; diff --git a/frontend/resourceadm/components/ResourcePageInputs/ResourceFieldHeader.tsx b/frontend/resourceadm/components/ResourcePageInputs/ResourceFieldHeader.tsx index 6efc3c64476..5aaa2fefd48 100644 --- a/frontend/resourceadm/components/ResourcePageInputs/ResourceFieldHeader.tsx +++ b/frontend/resourceadm/components/ResourcePageInputs/ResourceFieldHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Tag } from '@digdir/designsystemet-react'; +import { StudioTag } from '@studio/components'; import classes from './ResourcePageInputs.module.css'; interface ResourceFieldHeaderProps { @@ -17,9 +17,9 @@ export const ResourceFieldHeader = ({
{label} {required && ( - + {t('resourceadm.about_resource_required_field')} - + )}
); diff --git a/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextField.tsx b/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextField.tsx index 0f075c68429..00e8ac0dfc2 100644 --- a/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextField.tsx +++ b/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextField.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import classes from './ResourcePageInputs.module.css'; -import { Textarea, Textfield } from '@digdir/designsystemet-react'; +import { StudioTextarea, StudioTextfield } from '@studio/components'; import { RightTranslationBar } from '../RightTranslationBar'; import type { ResourceFormError, SupportedLanguage } from 'app-shared/types/ResourceAdm'; import { ResourceFieldHeader } from './ResourceFieldHeader'; @@ -105,9 +105,17 @@ export const ResourceLanguageTextField = ({ onBlur(getTrimmedTranslations()); }; - const onChangeNbField = (event: React.ChangeEvent) => { + const onChangeNbTextField = (event: React.ChangeEvent) => { + onNbFieldValueChanged(event.target.value); + }; + + const onChangeNbTextArea = (event: React.ChangeEvent) => { + onNbFieldValueChanged(event.target.value); + }; + + const onNbFieldValueChanged = (newValue: string) => { setTranslations((oldTranslations) => { - return { ...oldTranslations, nb: event.target.value }; + return { ...oldTranslations, nb: newValue }; }); }; @@ -119,13 +127,13 @@ export const ResourceLanguageTextField = ({ <>
{useTextArea ? ( -