@oslokommune/origo-feedback

feedback

feedback er en tjeneste som kan benyttes av alle Origos frontend applikasjoner for å ta i mot tilbakemeldinger fra Tim og sende disse inn til et sett Google regneark. Det kan konfigureres opp hvilket regneark tilbakemeldingene skal havne i slik at f.eks kan ha ulike regneark til ulike applikasjoner og miljøer.

Dette spesifikke repoet er frontend tjenesten til feedback komponenten. Det er mulig å kjøre denne standalone, men det er ment som et bibliotek som kan linkes inn i en annen applikasjon.

Hvis du ønsker å se på backend ligger det her: https://github.oslo.kommune.no/digiskjema/feedback-api

Bruke biblioteket fra en frontend applikasjon

Se mer informasjon her om hvordan tilbakemeldingsløsningen ser ut og hvordan man tar den i bruk: https://confluence.oslo.kommune.no/display/ORIGO/feedback

Importere det i din applikasjon (Endringer fra Angular til Vue)

BREAKING CHANGE: Fra versjon 2.0 så er html-tagen endret fra <custom-feedback> til <ok-feedback>

Etter omskriving av komponenten fra Angular til Vue, så er det planlagt at det skal fungere som før. Det er bare en endring som må gjøres i prosjektet ditt hvor du importerer komponentent. Css-filen er nå bundlet sammen med .js fila så du trenger ikke å importere den lenger.

Props

Navn	Type	Default	Required	Eksempel	Beskrivelse
origin	String		true	dvd-runtime	Backend sender ikke noe til regneark hvis ikke denne har en verdi.
env	String	prod	false	test,systest,prod	Dersom ikke env spesifiseres så velges prod som default. Verdien her styrer hvilken backend komponenten skal gå mot. Backend for feedback ligger i kubernetes i alle tre miljøer.
label	String	Tilbakemelding	false	Feedback	Dersom ikke label spesifiseres så vil Tilbakemelding være default verdi. Denne teksten settes på knappen som vises nederst til høyre.
metadata	String		true	{"id":2, "title":"Test"}	Json med flat struktur (dvs liste med name/value). NB: Denne MÅ være en Streng og ikke Object
gid	String		true	1ULsDGYIidw0PH5WZQ84bCwq5EXh-fkMmO78-BhwMGiA	google sheet id til regneark som tilbakemeldingen skal havne i
url	String	``	false	https://feedback-backend-test.api-test.oslo.kommune.no/feedback	I stedet for å spesifisere miljø, så kan du bare sende ned hele urlen
showSubmit	Boolean	false	false		Hvis du vil overskrive håndteringen av submit-knappen. By default så vises den ikke hvis du ikke skriver inn feedback, men hvis du sender med true så blir den vist uansett
titleLabel	String	Hei	false		Overskriften på modalen
subtitleLabel	String	Hvor fornøyd er du med denne tjenesten	false		Undertittelen på modalen
firstSmileyLabel	String	Veldig fornøyd	false		Tekst på smilefjes som er positivt
secondSmileyLabel	String	Passe fornøyd	false		Tekst på smilefjes som er nøytral
thirdSmileyLabel	String	Lite fornøyd	false		Tekst på smilefjes som er negativ
goodPlaceholderLabel	String	Har du forslag til forbedringer? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den.	false		Placeholdertekst hvis du velger positiv/nøytral smilefjes
badPlaceholderLabel	String	Hvorfor er du misfornøyd? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den.	false		Placeholdertekst hvis du velger negativ smilefjes
submitLabel	String	Send inn	false		Tekst på submit-knappen

Styles

Feedback-komponenten har default styles på form og farge, men det er mulig å endre designet fra hovedapplikasjonen som importerer feedback-komponenten. Under har du css-styles som treffer de viktigste delene av applikasjonen:

navn	beskrivelse
ok-feedback__header--h2	Overskrift
ok-feedback__header--h3	Underskrift
ok-feedback__feedback--textarea	Input-feltet for å skrive inn tilbakemeldingen
ok-feedback__feedback--submit-btn	Submit-knappen for å sende inn tilbakemeldingen
ok-feedback__btn	Tilbakemeldings-knappen for å åpne modalen

Installere prosjektet

Denne tjenesten er utviklet i Vue2 og har krav om:

• >= Node 12

git clone [e-mail]:digiskjema/feedback.git
cd feedback
npm install
npm run build:lib

Kjør prosjektet lokalt

Starte frontend

npm run serve

Frontend tjenesten er da tilgjengelig på http://localhost:8080 (hvis 8080 er brukt, så går den videre til 8081 osv)

Rutiner ved koding

Linter og fikser filer

npm run lint

Kjør enhetstester

npm run test:unit

Bygge release til repo

Foreløpig er det ikke lagt inn støtte for Jenkins i dette prosjektet som trigger på merging av branch til master. Du må derfor selv sørge for at ny versjon i master havner i artifact repo.

• Opprett PR på det du har gjort i branchen din og få denne godkjent
• Merge branch inn i master (gjerne via github)
• Sørg for at du ikke har noen utestående endringer og at lokal master branch er i sync med origin/master før du går videre.

For å bygge og deploye ny versjon av feedback til repo gjør du dette:

# Merk at du MÅ ha med slash på slutten av URLen for at login skal virke
# PS. Dersom du ikke får autentisert deg så kan du også prøve å slette inneholdet av ~/.npmrc
# Brukernavn/passord finner du i kryptert dok (under nexus: # artifacts.oslo.kommune.no)
npm login --scope=oslokommune --registry https://registry.npmjs.org/

npm run deploy

Deploy utfører følgende oppgaver:

• Kjører linting
• Bygger tjenesten
• Obfuskerer koden
• Minimaliserer css/less og javascript filer
• Samler alle filer i to filer som kan benyttes av applikasjon som vil dra inn feedback
• Patcher versjonsnummer i package.json
• Publiserer npm release i artifact repo
• Pusher ny tag i git