allowed us to make pre-build issue templates in the form of markdown files which the person reporting the bug could fill out. This was better than presenting the person reporting the bug with a blank textbox but it could get a bit clumsy at times and many wouldn't follow the format. GitHub now has got an option to build a form that one can fill out as a bug report. Note that Issue forms are in beta currently. GitHub Getting Started GitHub Issue forms are currently only available for public repositories so we need a public repository to work with. Next, we need to create a folder called and then add a file. Let us call this . .github/ISSUE_TEMPLATE yml bug_report.yml Our path will be . .github/ISSUE_TEMPLATE/bug_report.yml Filling out the template file yml We are going to make a simple form to file a bug report so let's get started. First, let us add a name: name: 🐛Bug Report We will also add a description, title, and some labels: description: File a bug report here
title: "[BUG]: "
labels: ["bug"] We can also add an assignee (this is optional): assignees: ["AnishDe12020"] Now that we are done with metadata, let us start with the body of the issue. Let us start with adding a small text: body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!!! We don't want the user to file a bug report if a report for that bug already exists so let us add a checkbox: - type: checkboxes
    id: new-bug
    attributes:
      label: Is there an existing issue for this?
      description: Please search to see if an issue already exists for the bug you encountered.
      options:
      - label: I have searched the existing issues
        required: true Here we have specified the as a checkbox and added the parameter and attributes. We have then added a parameter to the checkbox and made it a required field as we always want it to be checked by the user. type label description label Now let us ask the user for a description of the bug - - type: textarea
    id: bug-description
    attributes:
      label: Description of the bug
      description: Tell us what bug you encountered and what should have happened
    validations:
      required: true Notice how we add an to the field (this is optional) and we have also added a attribute. id description We can also add a attribute but let us leave that for this one. We have also made the field required by setting the parameter to in the section. The attribute is the only required parameter. placeholder required true validations label We can also ask them to tell is the steps to reproduce the bug: - type: textarea
    id: steps-to-reproduce
    attributes:
      label: Steps To Reproduce
      description: Steps to reproduce the behavior.
      placeholder: Please write the steps in a list form
    validations:
      required: true This is similar to the bug-report field but we have added a placeholder this time. Now, let us see how we can add a dropdown. Say we got 5 versions of our apps and want the users to tell us in which version of the app the issue is occurring. We will also give them the option to choose multiple versions in case the issue is occurring on more than 1 version: - type: dropdown
    id: versions
    attributes:
      label: Which version of the app are you using?
      description: If this issue is occurring on more than 1 version of the app, select the appropriate versions.
      multiple: true
      options:
       - 1.0.0
       - 1.1.0
       - 1.2.0
       - 2.0.0
       - 2.1.0
    validations:
      required: true At last, this is how our should look like: bug_report.yml name: 🐛Bug Report
description: File a bug report here
title: "[BUG]: "
labels: ["bug"]
assignees: ["AnishDe12020"]
body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!!!
  - type: checkboxes
    id: new-bug
    attributes:
      label: Is there an existing issue for this?
      description: Please search to see if an issue already exists for the bug you encountered.
      options:
      - label: I have searched the existing issues
        required: true
  - type: textarea
    id: bug-description
    attributes:
      label: Description of the bug
      description: Tell us what bug you encountered and what should have happened
    validations:
      required: true
  - type: textarea
    id: steps-to-reproduce
    attributes:
      label: Steps To Reproduce
      description: Steps to reproduce the behavior.
      placeholder: Please write the steps in a list form
    validations:
      required: true
  - type: dropdown
    id: versions
    attributes:
      label: Which version of the app are you using?
      description: If this issue is occurring on more than 1 version of the app, select the appropriate versions.
      multiple: true
      options:
       - 1.0.0
       - 1.1.0
       - 1.2.0
       - 2.0.0
       - 2.1.0
    validations:
      required: true Now, you should commit the file. If we try to create an issue, we will be presented with this page: We would see multiple options if we made more templates but we have only one right now so let us see if it works. Notice how the label and assignee has been added: On submitting the issue, it will be created like any other issue: You can see the repository for this tutorial here You can also see the schema for GitHub issue forms here

Life is Open Source

React Ink for CLI: A Gentle Introduction

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

Make resilience your competitive advantage

How to Create a Bug Report Form in GitHub

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Intro to Middleware in NextJS 12

Asterisk's Unnoticed Bug: The Double Quote Bug

Casing Can Break Netlify Functions: Here's How

Common Mistakes in Bug Reports and How to Fix Them

Getting Regex Boundaries Right: A How-To Guide

An Intro to Middleware in NextJS 12

Asterisk's Unnoticed Bug: The Double Quote Bug

Casing Can Break Netlify Functions: Here's How

Common Mistakes in Bug Reports and How to Fix Them

Getting Regex Boundaries Right: A How-To Guide

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps