From 78762a2beed0b42c6e0d03629a500c8911013cfd Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Thu, 19 Oct 2023 10:37:16 +0200 Subject: [PATCH 1/3] Fjern /mangler-tilgang route. Lag dynamisk. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fjerner egen side for /mangler-tilgang. Hvis bruker ikke har noen som helst tilganger, så rendres mangler-tilgangsiden med en gang det oppdages. Dette var ikke mulig før, siden vi da hadde uinnloggede sider. --- src/App/App.tsx | 13 +---- src/App/HovedBanner/HovedBanner.tsx | 39 ++++++++++----- src/App/Hovedside/Hovedside.tsx | 15 +----- .../ManglerTilgangContainer.css | 40 ---------------- .../ManglerTilgangContainer.tsx | 38 --------------- .../ManglerTilgangLenkePanel.tsx | 33 ------------- src/App/IngenTilganger/IngenTilganger.css | 24 ++++++++++ src/App/IngenTilganger/IngenTilganger.tsx | 41 ++++++++++++++++ src/App/LoginBoundary.tsx | 11 ++--- src/App/OrganisasjonerOgTilgangerProvider.tsx | 47 +++++++++---------- 10 files changed, 119 insertions(+), 182 deletions(-) delete mode 100644 src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.css delete mode 100644 src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.tsx delete mode 100644 src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangLenkePanel/ManglerTilgangLenkePanel.tsx create mode 100644 src/App/IngenTilganger/IngenTilganger.css create mode 100644 src/App/IngenTilganger/IngenTilganger.tsx diff --git a/src/App/App.tsx b/src/App/App.tsx index 9701adfe6..0c61dfc18 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -7,7 +7,7 @@ import { AlertsProvider } from './Alerts/Alerts'; import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider'; import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider'; import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift'; -import { ManglerTilgangContainer } from './Hovedside/ManglerTilgangContainer/ManglerTilgangContainer'; +import { IngenTilganger } from './IngenTilganger/IngenTilganger'; import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging'; import './App.css'; import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget'; @@ -92,17 +92,6 @@ const App: FunctionComponent = () => { } /> - - - - } - /> = ({sidetittel}) => { - const {organisasjoner} = useContext(OrganisasjonerOgTilgangerContext); - const {endreOrganisasjon} = useContext(OrganisasjonsDetaljerContext); - const {pathname} = useLocation() +export const SimpleBanner: FunctionComponent = ({ + sidetittel = 'Min side – arbeidsgiver', +}) => { + return ( + + ); +}; + +const Banner: FunctionComponent = ({ sidetittel }) => { + const { organisasjoner } = useContext(OrganisasjonerOgTilgangerContext); + const { endreOrganisasjon } = useContext(OrganisasjonsDetaljerContext); + const { pathname } = useLocation(); // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions - const orgs = organisasjoner ? Record.mapToArray(organisasjoner, (orgnr, {organisasjon}) => organisasjon) : []; + const orgs = organisasjoner + ? Record.mapToArray(organisasjoner, (orgnr, { organisasjon }) => organisasjon) + : []; return ( { - const { organisasjoner, visFeilmelding, tilgangTilSyfo, visSyfoFeilmelding, harTilganger } = - useContext(OrganisasjonerOgTilgangerContext); - const navigate = useNavigate(); - useEffect(() => { - const skalViseManglerTilgangBoks = !harTilganger && !visFeilmelding && !visSyfoFeilmelding; - - if (skalViseManglerTilgangBoks) { - navigate({ pathname: 'mangler-tilgang' }, { replace: true }); - } - }, [organisasjoner, tilgangTilSyfo, visFeilmelding, visSyfoFeilmelding, harTilganger]); - useOversiktsfilterClearing(); // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions diff --git a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.css b/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.css deleted file mode 100644 index 2ef713e5e..000000000 --- a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.css +++ /dev/null @@ -1,40 +0,0 @@ -.mangler-tilgang-bakgrunn { - display: flex; - flex-direction: column; - background-color: var(--a-gray-100); - align-items: center; - align-self: center; - width: 100%; - padding-top: 2.5rem; -} -.mangler-tilgang-bakgrunn__innholdstittel { - align-self: flex-start; - padding-left: 1rem; -} -.mangler-tilgang-container { - margin-top: 2rem; - display: flex; - flex-direction: column; - width: 100%; - padding: 0 1rem 2rem; -} -.mangler-tilgang-lenkepanel { - width: 100%; -} -@media (min-width: 992px) { - .mangler-tilgang-bakgrunn { - width: 62rem; - } - .mangler-tilgang-bakgrunn__innholdstittel { - align-self: flex-start; - padding-left: 1rem; - } - .mangler-tilgang-container { - flex-direction: row; - width: 100%; - } - .mangler-tilgang-lenkepanel { - flex-grow: 1; - margin-right: 2%; - } -} diff --git a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.tsx b/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.tsx deleted file mode 100644 index 487ae1fc2..000000000 --- a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangContainer.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, {FunctionComponent, useContext} from 'react'; -import {ManglerTilgangLenkePanel} from './ManglerTilgangLenkePanel/ManglerTilgangLenkePanel'; -import { infoOmTilgangsstyringURL, lenkeTilDittNavPerson } from '../../../lenker'; -import {OrganisasjonerOgTilgangerContext} from '../../OrganisasjonerOgTilgangerProvider'; -import Brodsmulesti from '../../Brodsmulesti/Brodsmulesti'; -import './ManglerTilgangContainer.css'; -import {Heading} from "@navikt/ds-react"; - -export const ManglerTilgangContainer: FunctionComponent = () => { - const {harTilganger} = useContext(OrganisasjonerOgTilgangerContext); - - return ( - <> - {harTilganger && ( - - )} -
- - Du mangler tilganger som arbeidsgiver - - - - - -
- - ); -}; diff --git a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangLenkePanel/ManglerTilgangLenkePanel.tsx b/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangLenkePanel/ManglerTilgangLenkePanel.tsx deleted file mode 100644 index a308251ed..000000000 --- a/src/App/Hovedside/ManglerTilgangContainer/ManglerTilgangLenkePanel/ManglerTilgangLenkePanel.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, {FunctionComponent} from 'react'; -import {loggNavigasjon} from '../../../../utils/funksjonerForAmplitudeLogging'; -import {useLocation} from 'react-router-dom'; -import {LinkPanel} from "@navikt/ds-react"; - -interface CustomLenkepanel { - tittel: string; - infoTekst: string; - lenke: string; -} - -export const ManglerTilgangLenkePanel: FunctionComponent = props => { - const {pathname} = useLocation() - - return ( -
- - loggNavigasjon(props.lenke, props.tittel, pathname) - } - > - - {props.tittel} - - - {props.infoTekst} - - -
- ); -} diff --git a/src/App/IngenTilganger/IngenTilganger.css b/src/App/IngenTilganger/IngenTilganger.css new file mode 100644 index 000000000..cd95913d4 --- /dev/null +++ b/src/App/IngenTilganger/IngenTilganger.css @@ -0,0 +1,24 @@ +.ingen-tilgang-bakgrunn { + width: 100%; + max-width: 60rem; + margin: 40px auto; + + display: flex; + flex-direction: column; + gap: 24px; +} + +@media (max-width: 1000px) { + .ingen-tilgang-bakgrunn { + padding: 0 16px; + } +} + +.ingen-tilgang-container { + display: grid; + + /* 200px er litt tilfeldig valgt. */ + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + + gap: 16px; +} diff --git a/src/App/IngenTilganger/IngenTilganger.tsx b/src/App/IngenTilganger/IngenTilganger.tsx new file mode 100644 index 000000000..ae2778d0d --- /dev/null +++ b/src/App/IngenTilganger/IngenTilganger.tsx @@ -0,0 +1,41 @@ +import React, { FunctionComponent } from 'react'; +import { infoOmTilgangsstyringURL, lenkeTilDittNavPerson } from '../../lenker'; +import Brodsmulesti from '../Brodsmulesti/Brodsmulesti'; +import './IngenTilganger.css'; +import { Heading, LinkPanel } from '@navikt/ds-react'; +import { LenkepanelMedLogging } from '../../GeneriskeElementer/LenkepanelMedLogging'; +import { SimpleBanner } from '../HovedBanner/HovedBanner'; + +export const IngenTilganger: FunctionComponent = () => { + return ( + <> + + +
+ + Du mangler tilganger som arbeidsgiver + + + + + Se tjenester som privatperson + Gå til din innloggede side + + + + Hvordan får jeg tilgang? + + Lær om roller og tilganger i Altinn + + + +
+ + ); +}; diff --git a/src/App/LoginBoundary.tsx b/src/App/LoginBoundary.tsx index 0fc8fda24..d3840a802 100644 --- a/src/App/LoginBoundary.tsx +++ b/src/App/LoginBoundary.tsx @@ -4,6 +4,7 @@ import { sjekkInnlogget } from '../api/dnaApi'; import Bedriftsmeny from '@navikt/bedriftsmeny'; import { setBreadcrumbs } from '@navikt/nav-dekoratoren-moduler'; import { Alert } from '@navikt/ds-react'; +import { SimpleBanner } from './HovedBanner/HovedBanner'; export const LoginBoundary: FunctionComponent = (props) => { const [innlogget, setInnlogget] = useState(Innlogget.LASTER); @@ -30,10 +31,7 @@ export const LoginBoundary: FunctionComponent = (props) => { ]).then(() => {}); return ( <> - + ); @@ -46,10 +44,7 @@ export const LoginBoundary: FunctionComponent = (props) => { ]).then(() => {}); return ( <> - + Uventet feil. Prøv å last siden på nytt. ); diff --git a/src/App/OrganisasjonerOgTilgangerProvider.tsx b/src/App/OrganisasjonerOgTilgangerProvider.tsx index 939e43414..ef088bd6a 100644 --- a/src/App/OrganisasjonerOgTilgangerProvider.tsx +++ b/src/App/OrganisasjonerOgTilgangerProvider.tsx @@ -11,6 +11,7 @@ import { byggOrganisasjonstre } from './ByggOrganisasjonstre'; import { useEffectfulAsyncFunction } from './hooks/useValueFromEffect'; import { Map, Set } from 'immutable'; import { DigiSyfoOrganisasjon, RefusjonStatus, useUserInfo } from './useUserInfo'; +import { IngenTilganger } from './IngenTilganger/IngenTilganger'; type orgnr = string; @@ -50,7 +51,6 @@ export type Context = { visFeilmelding: boolean; tilgangTilSyfo: SyfoTilgang; visSyfoFeilmelding: boolean; - harTilganger: boolean; childrenMap: Map>; }; @@ -230,32 +230,31 @@ export const OrganisasjonerOgTilgangerProvider: FunctionComponent = (props) => { [organisasjonstre] ); - if (organisasjoner !== undefined && organisasjonstre !== undefined) { - const detFinnesEnUnderenhetMedParent = () => { - return Record.values(organisasjoner).some( - (org) => org.organisasjon.ParentOrganizationNumber - ); - }; + if (organisasjoner === undefined || organisasjonstre === undefined) { + return ; + } - const harTilganger = detFinnesEnUnderenhetMedParent() && Record.length(organisasjoner) > 0; + const harTilganger = Record.values(organisasjoner).some( + (org) => org.organisasjon.ParentOrganizationNumber + ); - const context: Context = { - organisasjoner, - organisasjonstre, - visFeilmelding, - visSyfoFeilmelding, - tilgangTilSyfo, - harTilganger, - childrenMap, - }; - return ( - - {props.children} - - ); - } else { - return ; + if (!harTilganger) { + return ; } + + const context: Context = { + organisasjoner, + organisasjonstre, + visFeilmelding, + visSyfoFeilmelding, + tilgangTilSyfo, + childrenMap, + }; + return ( + + {props.children} + + ); }; const sjekkTilgangssøknader = ( From 746eca3a3e90b62ac357f2b5fda439e1a3835654 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Thu, 19 Oct 2023 11:08:14 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Legg=20til=20feilmeldinger=20p=C3=A5=20Inge?= =?UTF-8?q?nTilgang-siden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App/IngenTilganger/IngenTilganger.tsx | 3 +++ src/App/OrganisasjonerOgTilgangerProvider.tsx | 8 -------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/App/IngenTilganger/IngenTilganger.tsx b/src/App/IngenTilganger/IngenTilganger.tsx index ae2778d0d..2f05551e5 100644 --- a/src/App/IngenTilganger/IngenTilganger.tsx +++ b/src/App/IngenTilganger/IngenTilganger.tsx @@ -5,6 +5,7 @@ import './IngenTilganger.css'; import { Heading, LinkPanel } from '@navikt/ds-react'; import { LenkepanelMedLogging } from '../../GeneriskeElementer/LenkepanelMedLogging'; import { SimpleBanner } from '../HovedBanner/HovedBanner'; +import { Alerts } from '../Alerts/Alerts'; export const IngenTilganger: FunctionComponent = () => { return ( @@ -12,6 +13,8 @@ export const IngenTilganger: FunctionComponent = () => {
+ + Du mangler tilganger som arbeidsgiver diff --git a/src/App/OrganisasjonerOgTilgangerProvider.tsx b/src/App/OrganisasjonerOgTilgangerProvider.tsx index ef088bd6a..118bba744 100644 --- a/src/App/OrganisasjonerOgTilgangerProvider.tsx +++ b/src/App/OrganisasjonerOgTilgangerProvider.tsx @@ -48,9 +48,7 @@ export type OrganisasjonEnhet = { export type Context = { organisasjoner: Record; organisasjonstre: OrganisasjonEnhet[]; - visFeilmelding: boolean; tilgangTilSyfo: SyfoTilgang; - visSyfoFeilmelding: boolean; childrenMap: Map>; }; @@ -147,8 +145,6 @@ export const OrganisasjonerOgTilgangerProvider: FunctionComponent = (props) => { undefined ); const [tilgangTilSyfo, setTilgangTilSyfo] = useState(SyfoTilgang.LASTER); - const [visSyfoFeilmelding, setVisSyfoFeilmelding] = useState(false); - const [visFeilmelding, setVisFeilmelding] = useState(false); const [alleRefusjonsstatus, setAlleRefusjonsstatus] = useState( undefined ); @@ -177,11 +173,9 @@ export const OrganisasjonerOgTilgangerProvider: FunctionComponent = (props) => { } if (userInfo.altinnError) { addAlert('TilgangerAltinn'); - setVisFeilmelding(true); } if (userInfo.digisyfoError) { addAlert('TilgangerDigiSyfo'); - setVisSyfoFeilmelding(true); } setAltinnorganisasjoner(userInfo.organisasjoner); setAltinntilganger(userInfo.tilganger); @@ -245,8 +239,6 @@ export const OrganisasjonerOgTilgangerProvider: FunctionComponent = (props) => { const context: Context = { organisasjoner, organisasjonstre, - visFeilmelding, - visSyfoFeilmelding, tilgangTilSyfo, childrenMap, }; From ce869d2dfaaf80d3c835495efe69c5e6887f4877 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Thu, 19 Oct 2023 11:21:25 +0200 Subject: [PATCH 3/3] =?UTF-8?q?Rename=20til=20ManglerTilganger,=20siden=20?= =?UTF-8?q?det=20er=20tittelen=20p=C3=A5=20siden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App/App.tsx | 2 +- .../ManglerTilganger.css} | 0 .../ManglerTilganger.tsx} | 4 ++-- src/App/OrganisasjonerOgTilgangerProvider.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) rename src/App/{IngenTilganger/IngenTilganger.css => ManglerTilganger/ManglerTilganger.css} (100%) rename src/App/{IngenTilganger/IngenTilganger.tsx => ManglerTilganger/ManglerTilganger.tsx} (95%) diff --git a/src/App/App.tsx b/src/App/App.tsx index 0c61dfc18..24979f78b 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -7,7 +7,7 @@ import { AlertsProvider } from './Alerts/Alerts'; import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider'; import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider'; import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift'; -import { IngenTilganger } from './IngenTilganger/IngenTilganger'; +import { ManglerTilganger } from './ManglerTilganger/ManglerTilganger'; import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging'; import './App.css'; import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget'; diff --git a/src/App/IngenTilganger/IngenTilganger.css b/src/App/ManglerTilganger/ManglerTilganger.css similarity index 100% rename from src/App/IngenTilganger/IngenTilganger.css rename to src/App/ManglerTilganger/ManglerTilganger.css diff --git a/src/App/IngenTilganger/IngenTilganger.tsx b/src/App/ManglerTilganger/ManglerTilganger.tsx similarity index 95% rename from src/App/IngenTilganger/IngenTilganger.tsx rename to src/App/ManglerTilganger/ManglerTilganger.tsx index 2f05551e5..2bec6637a 100644 --- a/src/App/IngenTilganger/IngenTilganger.tsx +++ b/src/App/ManglerTilganger/ManglerTilganger.tsx @@ -1,13 +1,13 @@ import React, { FunctionComponent } from 'react'; import { infoOmTilgangsstyringURL, lenkeTilDittNavPerson } from '../../lenker'; import Brodsmulesti from '../Brodsmulesti/Brodsmulesti'; -import './IngenTilganger.css'; +import './ManglerTilganger.css'; import { Heading, LinkPanel } from '@navikt/ds-react'; import { LenkepanelMedLogging } from '../../GeneriskeElementer/LenkepanelMedLogging'; import { SimpleBanner } from '../HovedBanner/HovedBanner'; import { Alerts } from '../Alerts/Alerts'; -export const IngenTilganger: FunctionComponent = () => { +export const ManglerTilganger: FunctionComponent = () => { return ( <> diff --git a/src/App/OrganisasjonerOgTilgangerProvider.tsx b/src/App/OrganisasjonerOgTilgangerProvider.tsx index 118bba744..52bc81db6 100644 --- a/src/App/OrganisasjonerOgTilgangerProvider.tsx +++ b/src/App/OrganisasjonerOgTilgangerProvider.tsx @@ -11,7 +11,7 @@ import { byggOrganisasjonstre } from './ByggOrganisasjonstre'; import { useEffectfulAsyncFunction } from './hooks/useValueFromEffect'; import { Map, Set } from 'immutable'; import { DigiSyfoOrganisasjon, RefusjonStatus, useUserInfo } from './useUserInfo'; -import { IngenTilganger } from './IngenTilganger/IngenTilganger'; +import { ManglerTilganger } from './ManglerTilganger/ManglerTilganger'; type orgnr = string; @@ -233,7 +233,7 @@ export const OrganisasjonerOgTilgangerProvider: FunctionComponent = (props) => { ); if (!harTilganger) { - return ; + return ; } const context: Context = {