Skip to content

Commit 66b704a

Browse files
PrebenAasMalazAlkoj
PrebenAas
authored and
MalazAlkoj
committed
tag-887-innfore-ny-status-design (#183)
* Påbegynt nytt informasjonskort til parter. Noe hardkodet, noe dynamisk. In progress :-) * Riktig statusikon-logikk er laget for gjeldende innlogget bruker * Legge til tekstinnholdet i en annen fil * under arbeid * under arbeid * under arbeid * bruke tekster fra api * under arbeid * merging med master forte til error i AvtaleOversikt, All files must be modules when the '--isolatedModules' flag is provided. TS1208 * merging med master * la med avtale status i avtale side for låste avtaler * fjerne unødvendig kode * fjerne ukomplette /unødvendige tester for svg filer * før merge med master * fiks render etter godkjenning * tatt bort informasjon til deltaker om peronvern fordi det ligger i ny infoboks * fjere unødvendige alerter, bruke statusikon, fjerne unødvendige. * merge med master * fikse test navigasjonsbar * fjerne unødvendige tester * fjerne ubrukt import * Update naiserator.yaml
1 parent b2b364a commit 66b704a

File tree

82 files changed

+423
-443
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+423
-443
lines changed

‎.circleci/config.yml

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ jobs:
1313
- node-v1-{{ .Branch }}-
1414
- node-v1-
1515
- run:
16-
name: Intallerer
17-
command: npm i --no-optional
16+
name: Intallerer
17+
command: npm i --no-optional
1818
- run:
19-
name: Tester React app
20-
command: npm test
19+
name: Tester React app
20+
command: npm test
2121
- run:
2222
name: Bygger React app
2323
command: npm run build
@@ -26,7 +26,7 @@ jobs:
2626
- ~/usr/local/lib/node_modules # location depends on npm version
2727
key: node-v1-{{ .Branch }}-{{ checksum "package-lock.json" }}
2828
- setup_remote_docker:
29-
docker_layer_caching: true
29+
docker_layer_caching: true
3030
- run:
3131
name: Bygger Docker image
3232
command: docker build -t "navikt/tiltaksgjennomforing:$CIRCLE_SHA1" .

‎README.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ Kjør container
2323

2424
CircleCI bygger og pusher Docker image. For å deploye må man sette opp Kubernetes/kubectl konfigurasjon lokalt (se: https://github.com/navikt/kubeconfigs/), finne versjonsnummer på image i Docker hub, og så kjøre kommandoen: `kubectl apply -f nais-[miljø].yaml`
2525

26-
2726
### Testing
27+
2828
Vi bruker jest for å teste. `npm test` kjører testene og setter dem i watch modus.
2929

3030
Enkle regler for testing her:
31-
* Alle `.tsx`-filer skal ha en tilsvarende `spec.tsx`-fil. Disse filene skal inneholde en komponent
32-
som default export. Andre funksjoner exporteres utenom for å testes i egen tester.
33-
* Kun lag en rendertest per `spec.tsx`-fil om du har behov for å teste at variasjoner rendrer riktig
34-
kan det godt være at du har lagt deg på feil abstraksonsnivå. Logikk bør wrappes i funksjoner og testes
35-
i egne tester i `spec.tsx`-fila.
31+
32+
- Alle `.tsx`-filer skal ha en tilsvarende `spec.tsx`-fil. Disse filene skal inneholde en komponent
33+
som default export. Andre funksjoner exporteres utenom for å testes i egen tester.
34+
- Kun lag en rendertest per `spec.tsx`-fil om du har behov for å teste at variasjoner rendrer riktig
35+
kan det godt være at du har lagt deg på feil abstraksonsnivå. Logikk bør wrappes i funksjoner og testes
36+
i egne tester i `spec.tsx`-fila.

‎_scripts/generate-tests.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const glob = require('glob');
22
const path = require('path');
33
const fs = require('fs');
4-
const createSimpleTest = (componentName) => {
4+
const createSimpleTest = componentName => {
55
return `
66
import React from 'react';
77
import { shallow } from 'enzyme';
@@ -12,13 +12,13 @@ test('Test that <${componentName}> renders correctly', () => {
1212
expect(wrapper).toHaveLength(1);
1313
});`;
1414
};
15-
const ensureFileExists = (filePath) => {
15+
const ensureFileExists = filePath => {
1616
if (!fs.existsSync(filePath)) {
1717
console.log('Creating an new file: ' + relativeFilePath(filePath));
1818
fs.closeSync(fs.openSync(filePath, 'w'));
1919
}
2020
};
21-
const relativeFilePath = (absFilePath) => {
21+
const relativeFilePath = absFilePath => {
2222
const rootDir = path.join(__dirname, '..');
2323
return absFilePath.replace(rootDir, '');
2424
};
@@ -37,7 +37,7 @@ glob(pathToTest, function(er, files) {
3737
const fileSizeInBytes = stats['size'];
3838
const componentName = path.basename(filePath, '.tsx');
3939
if (fileSizeInBytes === 0) {
40-
console.log("Created a simple test for component <" + componentName + "/>");
40+
console.log('Created a simple test for component <' + componentName + '/>');
4141
const simpleTest = createSimpleTest(componentName);
4242
fs.writeFileSync(specFilePath, simpleTest);
4343
}

‎docker-compose.yml

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
version: '3'
22
services:
3-
frontend:
4-
build: .
5-
ports:
6-
- 3090:3000
7-
environment:
8-
- APIGW_URL=http://host.docker.internal:8080
9-
- LOGOUT_URL=http://localhost:3000
10-
- SELVBETJENING_LOGIN_URL=http://localhost:3000
11-
- ISSO_LOGIN_URL=http://localhost:3000
12-
13-
3+
frontend:
4+
build: .
5+
ports:
6+
- 3090:3000
7+
environment:
8+
- APIGW_URL=http://host.docker.internal:8080
9+
- LOGOUT_URL=http://localhost:3000
10+
- SELVBETJENING_LOGIN_URL=http://localhost:3000
11+
- ISSO_LOGIN_URL=http://localhost:3000

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import App from './App';
44
import InnloggingBoundary from './InnloggingBoundary/InnloggingBoundary';
55

66
test('Test that <App> renders correctly', () => {
7-
const wrapper = shallow(<App/>);
7+
const wrapper = shallow(<App />);
88
expect(wrapper).toHaveLength(1);
99
const innloggingBoundary = wrapper.find(InnloggingBoundary);
1010
expect(innloggingBoundary).toHaveLength(1);

‎src/App.tsx

+5-22
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,19 @@ class App extends React.Component {
3030
<IntlProvider locale="nb">
3131
<BrowserRouter basename={basename}>
3232
<Switch>
33-
<Route
34-
path={pathTilInformasjonssideUinnlogget}
35-
exact={true}
36-
component={Informasjonsside}
37-
/>
33+
<Route path={pathTilInformasjonssideUinnlogget} exact={true} component={Informasjonsside} />
3834
<InnloggingBoundary>
3935
<RedirectEtterLogin>
4036
<FeatureToggleProvider>
41-
<Route
42-
path="/"
43-
exact={true}
44-
component={AvtaleOversikt}
45-
/>
37+
<Route path="/" exact={true} component={AvtaleOversikt} />
4638
<Route
4739
path={pathTilInformasjonssideInnlogget}
4840
exact={true}
4941
component={Informasjonsside}
5042
/>
43+
<Route path={pathTilOpprettAvtale} exact={true} component={OpprettAvtale} />
5144
<Route
52-
path={pathTilOpprettAvtale}
53-
exact={true}
54-
component={OpprettAvtale}
55-
/>
56-
<Route
57-
path={pathTilOpprettAvtaleFullfort(
58-
':avtaleId'
59-
)}
45+
path={pathTilOpprettAvtaleFullfort(':avtaleId')}
6046
exact={true}
6147
component={OpprettelseFullfort}
6248
/>
@@ -67,10 +53,7 @@ class App extends React.Component {
6753
component={LandingsSide}
6854
/>
6955
<Route
70-
path={pathTilStegIAvtale(
71-
':avtaleId',
72-
':stegPath'
73-
)}
56+
path={pathTilStegIAvtale(':avtaleId', ':stegPath')}
7457
exact={true}
7558
component={AvtaleSide}
7659
/>

‎src/AvtaleContext.spec.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
22
import { shallow } from 'enzyme';
3-
import {AvtaleProvider} from './AvtaleContext';
4-
3+
import { AvtaleProvider } from './AvtaleContext';
54

65
test('Test at AvtaleContext ', () => {
7-
const wrapper = shallow(<AvtaleProvider/>);
6+
const wrapper = shallow(<AvtaleProvider />);
87
expect(wrapper).toHaveLength(1);
98
});

‎src/AvtaleOversikt/AvtaleTabell.spec.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import AvtaleTabell from '@/AvtaleOversikt/AvtaleTabell';
55

66
test('Test that <AvtaleOversikt> renders correctly', () => {
77
const wrapper = shallow(
8-
<AvtaleTabell
9-
innloggetBruker={{ erNavAnsatt: false, identifikator: '' }}
10-
avtaler={[]}
11-
varsler={[]}
12-
/>
8+
<AvtaleTabell innloggetBruker={{ erNavAnsatt: false, identifikator: '' }} avtaler={[]} varsler={[]} />
139
);
1410
expect(wrapper).toHaveLength(1);
1511
});

‎src/AvtaleSide/AvbryteAvtalen/AvbryteAvtalen.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import AvbryteAvtalen from './AvbryteAvtalen';
44

55
test('Test that <AvbryteAvtalen> renders correctly', () => {
66
const stub = jest.fn();
7-
const wrapper = shallow(<AvbryteAvtalen avbrytOnclick={stub}/>);
7+
const wrapper = shallow(<AvbryteAvtalen avbrytOnclick={stub} />);
88
expect(wrapper).toHaveLength(1);
99
});

‎src/AvtaleSide/AvtaleFetcher.spec.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
21
import React from 'react';
32
import { shallow } from 'enzyme';
43
import AvtaleFetcher from './AvtaleFetcher';
54

65
test('Test that <AvtaleFetcher> renders correctly', () => {
7-
const wrapper = shallow(<AvtaleFetcher/>);
6+
const wrapper = shallow(<AvtaleFetcher />);
87
expect(wrapper).toHaveLength(1);
9-
});
8+
});

‎src/AvtaleSide/AvtaleFetcher.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type Props = {
1010

1111
const AvtaleFetcher: FunctionComponent<Props> = props => {
1212
const [lastetOk, setLastetOk] = useState<boolean>(false);
13-
const avtaleId = props.avtaleId || "dummy";
13+
const avtaleId = props.avtaleId || 'dummy';
1414
useEffect(() => {
1515
props.hentVarsler(avtaleId);
1616
Promise.all([props.hentAvtale(avtaleId), props.hentRolle(avtaleId)])

‎src/AvtaleSide/AvtaleSide.less

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242

4343
&__varsel {
4444
margin-top: 1rem;
45+
margin-bottom: 1rem;
4546
}
4647

4748
&__svak {

‎src/AvtaleSide/AvtaleSide.tsx

+3-13
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { ApiError } from '@/types/errors';
66
import BEMHelper from '@/utils/bem';
77
import hentAvtaleSteg from '@/utils/stegUtils';
88
import moment from 'moment';
9-
import AlertStripe from 'nav-frontend-alertstriper';
109
import * as React from 'react';
1110
import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
1211
import { RouteComponentProps } from 'react-router';
@@ -20,6 +19,7 @@ import DeltakerInstruks from './steg/GodkjenningSteg/Oppsummering/instruks/Delta
2019
import VeilederInstruks from './steg/GodkjenningSteg/Oppsummering/instruks/VeilederInstruks';
2120
import OppsummeringArbeidstrening from './steg/GodkjenningSteg/Oppsummering/OppsummeringArbeidstrening/OppsummeringArbeidstrening';
2221
import TilbakeTilOversiktLenke from './TilbakeTilOversiktLenke/TilbakeTilOversiktLenke';
22+
import AvtaleStatus from './AvtaleStatus/AvtaleStatus';
2323

2424
interface MatchProps {
2525
avtaleId: string;
@@ -42,9 +42,9 @@ const AvtaleSide: FunctionComponent<Props> = props => {
4242
const handleWindowSize = () => {
4343
setWindowSize(window.innerWidth);
4444
};
45-
4645
useEffect(() => {
4746
window.addEventListener('resize', handleWindowSize);
47+
4848
return () => window.removeEventListener('resize', handleWindowSize);
4949
});
5050

@@ -114,13 +114,7 @@ const AvtaleSide: FunctionComponent<Props> = props => {
114114
<TilbakeTilOversiktLenke />
115115
</div>
116116
{varsler}
117-
<AlertStripe
118-
className={cls.element('banner')}
119-
type={props.avtale.erLaast ? 'suksess' : 'advarsel'}
120-
>
121-
{props.avtale.erLaast && 'Avtalen er godkjent av alle parter og låst.'}
122-
{props.avtale.avbrutt && 'Avtalen er avbrutt av veileder og låst.'}
123-
</AlertStripe>
117+
<AvtaleStatus avtale={props.avtale} rolle={props.rolle} />
124118
<OppsummeringArbeidstrening avtale={props.avtale} rolle={props.rolle} />
125119
<Innholdsboks className={cls.element('infoboks')}>{instruks(props.rolle)}</Innholdsboks>
126120
</div>
@@ -132,10 +126,6 @@ const AvtaleSide: FunctionComponent<Props> = props => {
132126
<TilbakeTilOversiktLenke />
133127
</div>
134128
{varsler}
135-
<AlertStripe className={cls.element('banner')} type="info">
136-
Du kan ikke redigere teksten i avtalen på grunn av hensyn til personvern. Ta kontakt med
137-
din veileder hvis du har spørsmål til innholdet i avtalen.
138-
</AlertStripe>
139129
<GodkjenningSteg oppsummering={<OppsummeringArbeidstrening />} />
140130
</div>
141131
);

‎src/AvtaleSide/AvtaleStatus/AvtaleStatus.less

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import '~nav-frontend-core/less/_variabler';
2+
3+
.avtalestatus {
4+
display: flex;
5+
6+
&__innholdsboks {
7+
margin-bottom: 0.5rem;
8+
}
9+
10+
&__hovedIkon {
11+
display: flex;
12+
justify-content: center;
13+
margin-top: -3.5rem;
14+
15+
&__justerStorrelse {
16+
width: 3.125rem;
17+
height: 3.125rem;
18+
}
19+
}
20+
21+
&__parterIkon {
22+
margin-bottom: 1rem;
23+
}
24+
25+
&__header {
26+
margin-top: 1rem !important;
27+
margin-bottom: 1rem;
28+
}
29+
30+
&__infotekst {
31+
border-bottom: 1px solid #c6c2bf;
32+
}
33+
34+
&__andreParter {
35+
margin-top: 1rem;
36+
display: flex;
37+
justify-content: space-between;
38+
39+
&__ikon {
40+
margin-left: 2rem;
41+
}
42+
&__begge {
43+
display: flex;
44+
}
45+
}
46+
}

‎src/AvtaleSide/AvtaleStatus/AvtaleStatus.spec.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import AvtaleStatus from './AvtaleStatus';
4+
import avtaleMock from '@/mocking/avtale-mock';
5+
6+
test('Test that <AvtaleStatus> renders correctly', () => {
7+
const rolle = {};
8+
// @ts-ignore
9+
const wrapper = shallow(<AvtaleStatus avtale={avtaleMock} rolle={rolle} />);
10+
expect(wrapper).toHaveLength(1);
11+
});

0 commit comments

Comments
 (0)