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 [email protected]: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