diff --git a/frontend/src/components/ActionBar/ActionBarContent.module.css b/frontend/src/components/ActionBar/ActionBarContent.module.css index fff1d12b..44952e63 100644 --- a/frontend/src/components/ActionBar/ActionBarContent.module.css +++ b/frontend/src/components/ActionBar/ActionBarContent.module.css @@ -6,7 +6,7 @@ border-bottom-right-radius: 6px; border-width: 1px; border-color: var(--border-color); - padding: var(--fds-spacing-6); + padding: var(--fds-spacing-10); display: flex; flex-direction: column; gap: var(--fds-spacing-1); diff --git a/frontend/src/components/ActionBar/ActionBarIcon.tsx b/frontend/src/components/ActionBar/ActionBarIcon.tsx index 8ca7aa97..f25ada0e 100644 --- a/frontend/src/components/ActionBar/ActionBarIcon.tsx +++ b/frontend/src/components/ActionBar/ActionBarIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; import cn from 'classnames'; -import { ChevronDownIcon as Chevron, ChevronDownCircleFillIcon } from '@navikt/aksel-icons'; +import { ChevronDownIcon as Chevron } from '@navikt/aksel-icons'; import classes from './ActionBarIcon.module.css'; import { useActionBarContext } from './Context'; @@ -18,15 +18,5 @@ export const ActionBarIcon = () => { 'data-testid': 'action-bar-icon', }; - const isLarge = size === 'large'; - - return ( - <> - {isLarge ? ( - - ) : ( - - )} - - ); + return ; }; diff --git a/frontend/src/components/SystemUserActionBar/SystemUserActionBar.module.css b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.module.css new file mode 100644 index 00000000..f11da308 --- /dev/null +++ b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.module.css @@ -0,0 +1,7 @@ +.rightsHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} diff --git a/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx new file mode 100644 index 00000000..12636971 --- /dev/null +++ b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Link as RouterLink } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { Heading, Link } from '@digdir/designsystemet-react'; +import { ActionBar } from '../ActionBar'; +import classes from './SystemUserActionBar.module.css'; +import { PencilIcon } from '@navikt/aksel-icons'; +import { useGetVendorsQuery } from '@/rtk/features/systemUserApi'; +import { SystemUser } from '@/types'; +import { AuthenticationRoute } from '@/routes/paths'; +import { url } from '@/utils/urlUtils'; + +interface SystemUserActionBarProps { + systemUser: SystemUser; + defaultOpen?: boolean; +} + +export const SystemUserActionBar = ({ + systemUser, + defaultOpen, +}: SystemUserActionBarProps): React.JSX.Element => { + const { t } = useTranslation(); + + const { data: vendors } = useGetVendorsQuery(); + + const vendor = vendors?.find((vendor) => vendor.systemTypeId === systemUser.productName); + + return ( + +
+
+ + {!vendor?.defaultRights.length + ? t('authent_overviewpage.system_user_no_rights') + : t('authent_overviewpage.system_rights_header')} + + + + + {t('authent_overviewpage.edit_system_user')} + + +
+ {vendor?.defaultRights?.map((right) => { + return ( + + ); + })} +
+
+ ); +}; diff --git a/frontend/src/components/SystemUserActionBar/index.ts b/frontend/src/components/SystemUserActionBar/index.ts new file mode 100644 index 00000000..eecac1b4 --- /dev/null +++ b/frontend/src/components/SystemUserActionBar/index.ts @@ -0,0 +1 @@ +export { SystemUserActionBar } from './SystemUserActionBar'; diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx index c3da9e6f..702b4da1 100644 --- a/frontend/src/features/creationpage/CreationPageContent.tsx +++ b/frontend/src/features/creationpage/CreationPageContent.tsx @@ -54,8 +54,8 @@ export const CreationPageContent = () => { label={
{t('authent_creationpage.input_field_label')}
- - Hjelpetekst for systembrukar + + Hjelpetekst for systemtilgang
} @@ -70,13 +70,11 @@ export const CreationPageContent = () => { {t('authent_creationpage.content_text1')} - - {t('authent_creationpage.content_text2')} -
{ if (newValue?.length) { setSelectedSystemType(newValue[0]); diff --git a/frontend/src/features/detailpage/DetailPage.module.css b/frontend/src/features/detailpage/DetailPage.module.css index 23f5b99d..462f05d7 100644 --- a/frontend/src/features/detailpage/DetailPage.module.css +++ b/frontend/src/features/detailpage/DetailPage.module.css @@ -1,14 +1,12 @@ -.rightsHeader { +.detailPageContent { display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: var(--fds-spacing-4); - margin-top: var(--fds-spacing-8); + flex-direction: column; + gap: var(--fds-spacing-8); } .buttonContainer { display: flex; + align-items: flex-start; margin-top: var(--fds-spacing-12); margin-bottom: var(--fds-spacing-4); gap: var(--fds-spacing-4); @@ -18,10 +16,6 @@ max-width: 30rem; } -.backLink { - margin-bottom: var(--fds-spacing-8); -} - .rightsList { flex-wrap: wrap; } diff --git a/frontend/src/features/detailpage/DetailPage.tsx b/frontend/src/features/detailpage/DetailPage.tsx index c0038154..c90816ad 100644 --- a/frontend/src/features/detailpage/DetailPage.tsx +++ b/frontend/src/features/detailpage/DetailPage.tsx @@ -4,20 +4,18 @@ import { Alert } from '@digdir/designsystemet-react'; import { Page, PageContainer } from '@/components'; import { DetailPageContent } from './DetailPageContent'; import ApiIcon from '@/assets/Api.svg?react'; -import { useGetRightsQuery, useGetSystemUserQuery } from '@/rtk/features/systemUserApi'; +import { useGetSystemUserQuery } from '@/rtk/features/systemUserApi'; export const DetailPage = (): React.ReactNode => { const { id } = useParams(); const { data: systemUser, isError: isLoadSystemUserError } = useGetSystemUserQuery(id || ''); - const { data: rights, isError: isLoadRightsError } = useGetRightsQuery(); return ( - } title={'Rediger systembruker'}> - {isLoadSystemUserError && Kunne ikke laste systembruker} - {isLoadRightsError && Kunne ikke laste rettigheter} - {systemUser && rights && } + } title={'Rediger systemtilgang'}> + {isLoadSystemUserError && Kunne ikke laste systemtilgang} + {systemUser && } ); diff --git a/frontend/src/features/detailpage/DetailPageContent.tsx b/frontend/src/features/detailpage/DetailPageContent.tsx index eed58dd8..8a9fabdc 100644 --- a/frontend/src/features/detailpage/DetailPageContent.tsx +++ b/frontend/src/features/detailpage/DetailPageContent.tsx @@ -10,65 +10,49 @@ import { Textfield, Alert, } from '@digdir/designsystemet-react'; -import { - MinusCircleIcon, - PlusCircleIcon, - TrashIcon, - ArrowLeftIcon, - ArrowUndoIcon, -} from '@navikt/aksel-icons'; +import { TrashIcon, ArrowLeftIcon } from '@navikt/aksel-icons'; import classes from './DetailPage.module.css'; import { ActionBar } from '@/components'; import { AuthenticationRoute } from '@/routes/paths'; import { useDeleteSystemuserMutation, + useGetVendorsQuery, useUpdateSystemuserMutation, } from '@/rtk/features/systemUserApi'; -import { SystemRight, SystemUser } from '@/types'; +import { SystemUser } from '@/types'; + +const mockRightsActionsArray = [ + { name: 'Lese', on: true }, + { name: 'Skrive', on: true }, + { name: 'Signere', on: true }, + { name: 'Les arkiv', on: true }, + { name: 'Slett arkiv', on: true }, +]; interface DetailPageContentProps { systemUser: SystemUser; - rights: SystemRight[]; } -export const DetailPageContent = ({ systemUser, rights }: DetailPageContentProps) => { +export const DetailPageContent = ({ systemUser }: DetailPageContentProps) => { const deleteModalRef = useRef(null); const navigate = useNavigate(); const [deleteSystemUser, { isError: isDeleteError }] = useDeleteSystemuserMutation(); const [updateSystemUser, { isError: isUpdateError }] = useUpdateSystemuserMutation(); + const { data: vendors } = useGetVendorsQuery(); - const [selectedRights, setSelectedRights] = - useState<(SystemRight & { deleted?: boolean })[]>(rights); - const [name, setName] = useState(systemUser.integrationTitle); + const vendor = vendors?.find((x) => systemUser.productName === x.systemTypeId); - const toggleAction = ( - right: SystemRight & { deleted?: boolean }, - action: { name: string; on: boolean }, - ): void => { - setSelectedRights((oldRights) => { - return oldRights.map((oldRight) => { - if (oldRight.right === right.right) { - return { - ...oldRight, - actions: oldRight.actions?.map((y) => - y.name === action.name ? { ...y, on: !y.on } : y, - ), - }; - } - return oldRight; - }); - }); - }; + const [name, setName] = useState(systemUser.integrationTitle); return ( -
+
- Sletting av systembruker + Sletting av systemtilgang - {`Er du sikker på at du vil slette systembrukeren "${systemUser.integrationTitle}"?`} + {`Er du sikker på at du vil slette systemtilgang "${systemUser.integrationTitle}"?`} - {isDeleteError && Kunne ikke slette systembruker} + {isDeleteError && Kunne ikke slette systemtilgang} -
- {selectedRights.length === 0 &&
Systembrukeren har ingen rettigheter
} - {selectedRights.map((right) => { - return ( - { - setSelectedRights((old) => - old.map((selectedRight) => - selectedRight.right == right.right - ? { ...selectedRight, deleted: !selectedRight.deleted } - : selectedRight, - ), - ); - }} - > - {right.deleted ? ( - <> - Angre fjerning - - - ) : ( - <> - Fjern rettighet - - - )} - - } - > - {right.actions && ( + {!vendor?.defaultRights.length &&
Systemtilgangen har ingen rettigheter
} + {vendor?.defaultRights.map((right) => { + return ( +
Eventuell tekst om rettighetene kommer her. - - Dersom du ønsker å begrense tilgangen som blir gitt, kan du klikke på knappene - nedenfor for å fjerne de. - - {right.actions.map((action) => { + {mockRightsActionsArray.map((action) => { return ( - toggleAction(right, action)} - > + {action.name} ); })}
- )} -
- ); - })} - {isUpdateError && Kunne ikke oppdatere systembruker} -
+ + ); + })} +
+ {isUpdateError && Kunne ikke oppdatere systemtilgang} +
+
+ + +
-
-
); }; diff --git a/frontend/src/features/directconsentpage/DirectConsentPageContent.tsx b/frontend/src/features/directconsentpage/DirectConsentPageContent.tsx index e76db69e..e5eeaf5c 100644 --- a/frontend/src/features/directconsentpage/DirectConsentPageContent.tsx +++ b/frontend/src/features/directconsentpage/DirectConsentPageContent.tsx @@ -5,14 +5,14 @@ import { Alert, Button, Heading } from '@digdir/designsystemet-react'; import { AuthenticationRoute } from '@/routes/paths'; import classes from './DirectConsentPageContent.module.css'; import { ActionBar } from '@/components'; -import { useCreateSystemUserMutation, useGetRightsQuery } from '@/rtk/features/systemUserApi'; +import { useCreateSystemUserMutation } from '@/rtk/features/systemUserApi'; +import { SystemRight } from '@/types'; export const DirectConsentPageContent = () => { const { t } = useTranslation(); const navigate = useNavigate(); const [postNewSystemUser, { isError: isCreateSystemUserError }] = useCreateSystemUserMutation(); - const { data: rights, isError: isGetRightsError } = useGetRightsQuery(); // for now, return to OverviewPage: design not ready const handleReject = () => { @@ -43,9 +43,8 @@ export const DirectConsentPageContent = () => { {t('authent_includedrightspage.sub_title')}

{t('authent_includedrightspage.content_text')}

- {isGetRightsError && Kunne ikke laste rettigheter}
- {rights?.map((productRight) => ( + {[].map((productRight: SystemRight) => ( { ))}
{isCreateSystemUserError && ( - Kunne ikke opprette systembruker + + {t('authent_includedrightspage.create_systemuser_error')} + )}
- - {t('authent_overviewpage.existing_system_users_title')} - - {isLoadingSystemUsers && } - {isLoadSystemUsersError && Kunne ikke laste systembrukere} - {isLoadRightsError && Kunne ikke laste rettigheter} - {systemUsers?.map((systemUser) => ( - -
-
- - Systembrukeren har disse rettighetene: - - - - - Rediger systembruker - - -
- {rights?.map((right) => { - return ( - - ); - })} -
-
- ))} + {isLoadingSystemUsers && } + {isLoadSystemUsersError && ( + {t('authent_overviewpage.systemusers_load_error')} + )} + {newlyCreatedItem && ( +
+ + {t('authent_overviewpage.created_system_user_title')} + + +
+ )} + {systemUsersWithoutCreatedItem && systemUsersWithoutCreatedItem.length > 0 && ( + <> + + {newlyCreatedItem + ? t('authent_overviewpage.existing_earlier_system_users_title') + : t('authent_overviewpage.existing_system_users_title')} + + {systemUsersWithoutCreatedItem.map((systemUser) => ( + + ))} + + )}
); }; diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx index ac35b340..49a0cac5 100644 --- a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx +++ b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Alert, Button, Heading, Paragraph } from '@digdir/designsystemet-react'; +import { Alert, Button, Heading, Paragraph, Spinner } from '@digdir/designsystemet-react'; import { AuthenticationRoute } from '@/routes/paths'; import classes from './RightsIncludedPageContent.module.css'; import { ActionBar } from '@/components'; -import { useCreateSystemUserMutation, useGetRightsQuery } from '@/rtk/features/systemUserApi'; -import { useAppSelector } from '@/rtk/app/hooks'; +import { useCreateSystemUserMutation, useGetVendorsQuery } from '@/rtk/features/systemUserApi'; +import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks'; import { useFirstRenderEffect } from '@/resources/hooks'; +import { setCreatedId } from '@/rtk/features/createSystemUserSlice'; export const RightsIncludedPageContent = () => { // Dette er en ny side fra "Design av 5/12" (se Repo Wiki, med senere endringer tror jeg) @@ -16,17 +17,21 @@ export const RightsIncludedPageContent = () => { // og ikke CreationPageContent som tidligere (men den kjører foreløpig fortsatt POST) const { t } = useTranslation(); - const [postNewSystemUser, { isError: isCreateSystemUserError }] = useCreateSystemUserMutation(); - const { data: rights, isError: isLoadRightsError } = useGetRightsQuery(); + const [postNewSystemUser, { isError: isCreateSystemUserError, isLoading: isCreatingSystemUser }] = + useCreateSystemUserMutation(); const integrationTitle = useAppSelector((state) => state.createSystemUser.integrationTitle); - const selectedSystemType = useAppSelector((state) => state.createSystemUser.selectedSystemType); + const selectedSystemVendor = useAppSelector((state) => state.createSystemUser.selectedSystemType); + const { data: vendors } = useGetVendorsQuery(); + + const vendor = vendors?.find((x) => x.systemTypeId === selectedSystemVendor); const navigate = useNavigate(); + const dispatch = useAppDispatch(); useFirstRenderEffect(() => { - // if integrationTitle or selectedSystemType is not set (if user goes directly to /rightsincluded url), navigate back to creation - if (!integrationTitle || !selectedSystemType) { + // if integrationTitle or selectedSystemVendor is not set (if user goes directly to /rightsincluded url), navigate back to creation + if (!integrationTitle || !selectedSystemVendor) { navigate(AuthenticationRoute.Creation); } }); @@ -41,10 +46,15 @@ export const RightsIncludedPageContent = () => { // key:value pairs are needed const postObjekt = { integrationTitle: integrationTitle, - selectedSystemType: selectedSystemType, + selectedSystemType: selectedSystemVendor, }; - postNewSystemUser(postObjekt).unwrap().then(navigateToOverview); + postNewSystemUser(postObjekt) + .unwrap() + .then((payload) => { + dispatch(setCreatedId(payload.id)); + navigateToOverview(); + }); }; const handleReject = () => { @@ -62,8 +72,7 @@ export const RightsIncludedPageContent = () => { {t('authent_includedrightspage.content_text')}
- {isLoadRightsError && Kunne ikke laste rettigheter} - {rights?.map((productRight) => ( + {vendor?.defaultRights?.map((productRight) => ( { /> ))} {isCreateSystemUserError && ( - Kunne ikke opprette systembruker + Kunne ikke opprette systemtilgang )}
-