Slik lager du en tilbakemeldingsknapp med GitHub issues

… sammen med kontekst fra komponentsiden du var på:

I denne bloggposten deler jeg med deg hvordan du kan implementere en slik tilbakemeldingsknapp, og også hvordan du kan utvide den.

Før jeg forklarer hvordan knappen fungerer, utfordrer jeg deg til å finne det ut selv, med lenken under (du må være innlogget i GitHub):

SEND INNSPILL

… hint: Ta en titt på URL-en.

Hvordan det fungerer

Trikset hviler på at GitHub lar deg sende med kontekst i URL-parameterne.

URL-en du nettopp trykka på lenket til å lage ny oppgave, og med title-parameteret kan du definere oppgavetittel:

https://github.com/haalmarc/innspill/issues/new?title=Button

Du kan bruke title-parameteret til å sende med kontekst for oppgaven, for eksempel hvilken side brukeren er på idet hen sender innspill.

Her er et eksempel med JSX:

<a href={`${GITHUB_REPO}/{nameOfPage}`}>Send innspill</a>

I mange tilfeller er title-parameteret tilstrekkelig, men det er også andre parametere du kan inkludere, som labels:

[repo]/issues/new?title=Button&labels=enhancement

Test ut lenken her: SEND INNSPILL.

Titler og merkelapper er nyttige, men for en enda mer fancy tilbakemeldingsprosess, må vi ty til templater.

GitHub-template

Med GitHub-templater, kan du skreddersy hvordan GitHub-oppgavene blir utformet. Bare ta en titt på denne, hvor vi har definert beskrivelse og eget inputfelt:

Du kan teste selv med denne lenken: SEND INNSPILL.

For å ta i bruk templater, bruker vi parameteren template, hvor vi peker på en fil vi har lagd:

[repo]/issues/new?title=Button&labels=enhancement&template=feedback.yml

Vi må også sørge for at templat-filen eksisterer i mappa .github/ISSUE_TEMPLATE.

Slik ser min minimale feedback.yml ut:

name: Innspill til komponent
description: Send inn innspill til komponenten
title: "[Innspill til komponent]: "
body:
  - type: markdown
    attributes:
      value: |
        Takk for bidraget!
  - type: textarea
    attributes:
      label: Innspill
      description: Beskriv funksjonaliten du ønsker eller feilen du har oppdaget.

Når jeg oppretter GitHub-oppgaven med denne templaten, får jeg ut markdown utifra body-en:

### Innspill

Her er tekst fra textarea

Her har jeg vist et templat med textarea, men du kan også legge inn assignees, valideringer og dropdowns. Bare sjekk ut GitHubs dokumentasjon: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#creating-issue-forms

Konklusjon

Å senke terskelen for tilbakemeldinger er et viktig steg for å forbedre et produkt. Her har jeg vist hvordan det kan gjøres i kontekst av et designsystem, men jeg er sikker på at det er overførbart til andre settinger også. Prøv det ut!

Takk til NAVs åpne designsystem. Sjekk ut et eksempel på tilbakemelding fra NAVs designsystem her: https://aksel.nav.no/komponenter/core/combobox