Set up Codespaces for bug replication (#1200)

* Add instructions for replicating bugs and failures

* Update changelog

* Create basic devcontainer

* Use same branch as repo, add gem name

* Exit early if folder already exists

* Update changelog

* Add documentation for GitHub Codespaces

* Remove templated comments in dev container Dockerfile

Co-authored-by: Joel Hawksley <[email protected]>

* Apply copy change suggestions

Co-authored-by: Joel Hawksley <[email protected]>

* Remove trailing whitespace, add trailing newlines

* Decrement header

* Use contraction

* Take ownership of associated files

* Fix trailing whitespace issues in devcontainer Dockerfile

Co-authored-by: Joel Hawksley <[email protected]>

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+# [Choice] Ruby version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.0, 2, 2.7, 2.6, 3-bullseye, 3.0-bullseye, 2-bullseye, 2.7-bullseye, 2.6-bullseye, 3-buster, 3.0-buster, 2-buster, 2.7-buster, 2.6-buster
+ARG VARIANT=2-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/ruby:0-${VARIANT}
+
+# Install Rails
+RUN gem install rails webdrivers
+
+# Default value to allow debug server to serve content over GitHub Codespace's port forwarding service
+# The value is a comma-separated list of allowed domains
+ENV RAILS_DEVELOPMENT_HOSTS=".githubpreview.dev"
+
+# [Choice] Node.js version: lts/*, 16, 14, 12, 10
+ARG NODE_VERSION="lts/*"
+RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"

.devcontainer/create-db-user.sql

@@ -0,0 +1,2 @@
+CREATE USER vscode CREATEDB;
+CREATE DATABASE vscode WITH OWNER vscode;

.devcontainer/devcontainer.json

@@ -0,0 +1,53 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.208.0/containers/ruby-rails-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Ruby version
+{
+	"name": "Ruby on Rails & Postgres",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspace",
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {
+		"sqltools.connections": [
+			{
+				"name": "Rails Development Database",
+				"driver": "PostgreSQL",
+				"previewLimit": 50,
+				"server": "localhost",
+				"port": 5432,
+
+				// update this to match config/database.yml
+				"database": "app_development",
+				"username": "vscode"
+			},
+			{
+				"name": "Rails Test Database",
+				"driver": "PostgreSQL",
+				"previewLimit": 50,
+				"server": "localhost",
+				"port": 5432,
+
+				// update this to match config/database.yml
+				"database": "app_test",
+				"username": "vscode"
+			}
+		]
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"rebornix.Ruby",
+		"mtxr.sqltools",
+		"mtxr.sqltools-driver-pg"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [3000, 5432],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "script/replicate-bug",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "vscode"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,44 @@
+version: '3'
+
+services:
+  app:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile
+      args:
+        # Update 'VARIANT' to pick a version of Ruby: 3, 3.0, 2, 2.7, 2.6
+        # Append -bullseye or -buster to pin to an OS version.
+        # Use -bullseye variants on local arm64/Apple Silicon.
+        VARIANT: "3"
+        # Optional Node.js version to install
+        NODE_VERSION: "lts/*"
+
+    volumes:
+      - ..:/workspace:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: vscode
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+      - ./create-db-user.sql:/docker-entrypoint-initdb.d/create-db-user.sql
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_DB: postgres
+      POSTGRES_PASSWORD: postgres
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+volumes:
+  postgres-data: null

.github/CODEOWNERS

@@ -39,3 +39,6 @@
 /test/sandbox/app/components/translatable_component.yml @elia
 /test/sandbox/app/components/translations_component.html.erb @elia
 /test/sandbox/app/components/translations_component.rb @elia
+
+/.devcontainer/**/* @boardfish
+/script/replicate-bug @boardfish

.github/ISSUE_TEMPLATE/bug-report.md

@@ -3,7 +3,9 @@ name: ViewComponent bug report
 about: Create a report to help us improve ViewComponent
 ---
 
-<!-- If possible, please provide a PR with a failing test for bugs instead of filing an issue. -->
+<!--
+When opening an issue to describe a bug, it's helpful to provide steps to reproduce it, either with failing tests in a pull request, or by sharing a repository that demonstrates the issue. See CONTRIBUTING.md for more details.
+-->
 
 ### Steps to reproduce
 <!-- Provide a series of steps or, better yet, a link to a repo to demonstrate the bug you've identified. -->

.gitignore

@@ -58,3 +58,6 @@ build-iPhoneSimulator/
 
 # unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
 .rvmrc
+
+# Sample bug replication repo
+/replicate-bug

docs/CHANGELOG.md

@@ -15,6 +15,14 @@ title: Changelog
 
     *Simon Fish*
 
+* Set up Codespaces for bug replication.
+
+    *Simon Fish*
+
+* Add instructions for replicating bugs and failures.
+
+    *Simon Fish*
+
 * Make @boardfish a committer.
 
     *Joel Hawksley*

docs/CONTRIBUTING.md

@@ -15,6 +15,29 @@ GitHub engineers tend to focus on areas of the project that are useful to GitHub
 
 Contributions to this project are [released](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license) to the public under the [project's open source license](https://github.com/github/view_component/blob/main/LICENSE.txt).
 
+## Reporting bugs
+
+When opening an issue to describe a bug, it's helpful to provide steps to reproduce it, either with failing tests in a pull request, or by sharing a repository that demonstrates the issue.
+
+### Creating a Rails application to demonstrate a ViewComponent bug
+
+1. Run `rails new --minimal view_component-bug-replica` in the console.
+2. Run `bundle add view_component` in the console. If testing against a previous version of ViewComponent, update the `Gemfile` to that version and run `bundle install`.
+3. Run `rails generate controller Home index`.
+4. Add `root to: 'home#index'`.
+5. Add as little code as possible that's necessary to reproduce the issue. If possible, use the original code that caused the issue in your application.
+6. Publish the repository and add a link to the bug report issue.
+
+### GitHub Codespaces
+
+This repository includes configuration for GitHub Codespaces, making it easy to set up a cloud-based development environment. Follow [GitHub's guide](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace) to get started.
+
+The codespace environment includes a minimal Rails app with ViewComponent installed in the `replicate-bug` directory. To run the application:
+
+1. Start the Rails server from the codespace's terminal with `rails s`.
+2. Expose the port when prompted by the Visual Studio Code Web Editor.
+3. Add the external URL to the config block in `config/application.rb` as prompted by the error.
+
 ## Submitting a pull request
 
 1. [Fork](https://github.com/github/view_component/fork) and clone the repository.

script/replicate-bug

@@ -0,0 +1,21 @@
+#!/bin/bash
+# Exit if repo already exists
+[ -d "replicate-bug" ] && echo "Sample repo exists. Rename or remove it to begin." && exit
+branch_name=$(git rev-parse --abbrev-ref HEAD)
+# Ensure that when we install view_component in the repo, we install this copy.
+bundle config local.view_component $(pwd)
+# Create and enter a minimal example repo
+rails new --minimal replicate-bug
+cd replicate-bug
+# Add our local copy of ViewComponent
+bundle add view_component --git https://github.com/github/view_component --branch $branch_name
+# Generate a controller
+rails g controller Home index
+# Generate ApplicationComponent, assuming most folks use it.
+rails g component ApplicationComponent --template_engine=no_template
+# Root to the index action on HomeController
+cat << 'ROUTES' > 'config/routes.rb'
+Rails.application.routes.draw do
+  root to: 'home#index'
+end
+ROUTES