new project modal

.firebaserc

@@ -1,6 +1,7 @@
 {
   "projects": {
-    "roundaround": "roundaround"
+    "roundaround": "roundaround",
+    "default": "roundaround"
   },
   "targets": {
     "roundaround": {
@@ -17,4 +18,4 @@
       }
     }
   }
-}
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,22 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: |
+          yarn install
+          yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ROUNDAROUND }}'
+          channelId: live
+          projectId: roundaround

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,19 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: |
+          yarn install
+          yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ROUNDAROUND }}'
+          projectId: roundaround

.github/workflows/main.yml

@@ -0,0 +1,26 @@
+name: End-to-end tests
+on: [push, pull_request]
+jobs:
+  cypress-eslint-run:
+    runs-on: ubuntu-20.04
+    # env:
+    #   CYPRESS_BASE_URL: https://roundaround-stage.web.app/
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      # Install NPM dependencies, cache them correctlyand run all Cypress tests
+      - name: set master url
+        if: github.ref == 'refs/heads/master'
+        run: CYPRESS_BASE_URL=http://rounds.studio
+      - name: set stage url
+        if: github.ref == 'refs/heads/stage'
+        run: CYPRESS_BASE_URL=https://roundaround-stage.web.app/
+      - name: set dev url
+        if: github.ref != 'refs/heads/stage' && github.ref != 'refs/heads/master'
+        run: CYPRESS_BASE_URL=https://roundaround-dev.web.app/
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        #uses: actions/download-artifact@v2
+      # Run Eslint checks
+      - name: Eslint run
+        run: ./node_modules/.bin/eslint --ext js,jsx src

.gitignore

@@ -17,4 +17,13 @@ ref
 
 functions/node_modules
 
-.eslintcache
+.eslintcache
+
+# Ignore IntelliJ generated files
+.idea
+
+# Cypress test results
+cypress/screenshots
+cypress/videos
+cypress/results
+cypress/fixtures/example.json

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+./node_modules/.bin/eslint --ext js,jsx src

README.md

@@ -17,23 +17,86 @@ Reference:
 - Simple radial multi-layer simple sequencer: https://tylerbisson.com/Groove-Pizzeria/
 - Another simple implementation: https://github.com/NYUMusEdLab/Accessible-Groove-Pizza
 
-## Musical Concepts
-![Step Sequencers: Traditional (Linear) and Radial Metaphors](/docs/images/RoundAround_StepSequencers.jpeg)
 
-## Data Concepts
-![Key Data Concepts for RoundAround](/docs/images/RoundAround_Concepts.jpeg)
+# Development
 
+## Set Node Version
+Please use node v14.17.6 - the latest stable version of node, [nvm](https://tecadmin.net/install-nvm-macos-with-homebrew/) is an easy way to do this
 
-## Local Development
-- `yarn`  
-- `yarn start`  
+On OX, install Homebrew if you don't have it:
+```
+ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+```
+
+Install and select said version of Node:
+```
+nvm install 14.17.6
+nvm use v14.17.6
+node -v // should be 14.17.6
+```
+
+### (Optional) Clean Install Modules
+```
+yarn install --frozen-lockfile`
+```
+
+## Local development
+- Go to your local branch
+- `yarn` - To install packages that may have changed since your last branch
+- `yarn build` - To do a clean build of js
+- `yarn start` - To start the local server
 - navigate to [http://localhost:3000](http://localhost:3000)
 
+## Dev workflow
+We use [git flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow#:~:text=The%20overall%20flow%20of%20Gitflow,branch%20is%20created%20from%20main&text=When%20a%20feature%20is%20complete%20it%20is%20merged%20into%20the,branch%20is%20created%20from%20main)
+
+### Summary
+- Make sure master is always production ready
+- Create feature/bug branches for every issue; put issue ID brance name, e.g. "bug/163-fix-step-count" for [Issue #163](https://github.com/irllabs/roundaround/issues/163) 
+- Merge `feature` branches into `stage` as soon as it's ready to minimize merge conflicts and lack of transparency in what the code will look like once it's deployed to `prod`.
+
+### Branchines
+- `master` - always runs, is deployed to `prod` (http://rounds.studio and http:/rounds.irl.studio)
+- `stage` - always runs, features are merged to it; is deployed to `stage` (http://roundaround-stage.web.app) when testing integration of features
+- `feature/<GitHub-issue-number>-<Feature-Description>` - one for each issue labeled as `enhancement` in github, deployed to `dev` (http://roundaround-dev.web.app) when testing a feature is useful
+- `bug//<GitHub-issue-number>-<Bug-Description>` - one for each issue labeled as `bug`, deployed to `dev` (http://roundaround-dev.web.app) when testing a bug is useful
+
+### How is new work added?
+- checkout `stage` and create a new feature/bug branch
+- If you want feedback deploy that branch out to `roundaround-dev.web.app`. It's fine if its buggy at the point of feedback
+- When you are confident the new feature is completed make a PR and do a [full regression test](https://docs.google.com/spreadsheets/d/1fn3mY7sy1YfqoeCXUstYxEqKOidWj6KFN_negDrXKeQ/edit#gid=116044031). 
+
+    Deploy to `roundaround-dev.web.app`. Ask product to test the added functionality. They will _not_ do a regression
+- If the tests pass, the PR is approved, and we're happy with the added functionality, merge that branch to stage. 
+
+    Deploy to `https://roundaround-stage.web.app/`
+- When we want to merge into master, deploy that (or those) features to the stage server if they aren't already, and _everyone_ does a full regression before we make a PR for stage to master
+- If the tests pass we merge to master. 
+
+    Deploy to `roundaround-dev.web.app`
+
+Summary - we never make a branch off master, only stage, and we only ever merge into master after stage is fully regression tested. We try to get feature branches into stage as soon as possible, so we can be confident we're always moving forward building on tested and verified work.
+
+
+
+## Testing
+- As of now there's a git hook to make sure any code committed is linted and doesn't add malformed js
+- As of now there's a smoke test that runs locally to make sure the site still loads when pushing
+
+If the smoke test fails you can debug it with:
+`yarn run cypress:open`
+
+make sure the site is running locally.
+
 ## Deploy frontend
 -  `yarn build`
 -  `firebase deploy --only hosting:production`
+    Should update `https://roundaround.web.app/`, this should always be master
 -  `firebase deploy --only hosting:stage`
-
+    Should update `https://roundaround-stage.web.app/`, this should always be develop and be in a stablish state
+-  `firebase deploy --only hosting:dev`
+    Should update `https://roundaround-dev.web.app/`, this can be any branch off develop, it's fine if it's buggy
+
 ## Deploy functions (generates Jitsi tokens)
 - Make sure you have the jaasauth.pk private key file in the root of the functions folder (not kept in git)
-- `firebase deploy --only functions`
+- `firebase deploy --only functions`

cypress.json

@@ -0,0 +1,12 @@
+{
+
+	"chromeWebSecurity": false,
+	"baseUrl": "https://roundaround-dev.web.app/",
+	"defaultCommandTimeout": 20000,
+	"viewportWidth": 1300,
+	"reporter": "junit",
+	"reporterOptions": {
+		"mochaFile": "cypress/results/cypress-report-[hash].xml"
+	},
+	"projectId": "miag47"
+}

cypress/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "plugin:cypress/recommended"
+  ]
+}

cypress/integration/smoke/see-a-round.spec.js

@@ -0,0 +1,60 @@
+const crypto = require('crypto');
+
+describe("Can see a round", () => {
+	let hash;
+
+	beforeEach(() => {
+		hash = crypto.randomBytes(3).toString('hex');
+		cy.clearLocalStorage();
+		cy.clearCookies();
+	});
+
+	it("As a guest", () => {
+		cy.logout();
+
+		cy.get("[data-test=button-get-started]").click();
+		cy.get("[data-test=app]").should("be.visible");
+
+		cy.get("[data-test=button-guest]").click();
+		cy.get("[data-test=app]").should("be.visible");
+
+		cy.get("[data-test=input-name]").type(`test-${hash}`);
+		cy.get("[data-test=button-name]").click();
+
+		cy.get("[data-test=app]").should("be.visible");
+		cy.get(".round").should("be.visible");
+
+		cy.logout();
+
+		cy.get("[data-test=app]").should("be.visible");
+	});
+
+	it("As a registered user", () => {
+		cy.login();
+
+		cy.get('html').then(($html) => {
+			if ($html.find("[data-test=list-item-round]").length) {
+				cy.get("[data-test=list-item-round]").first().click();
+				cy.get("[data-test=app]").should("be.visible");
+				cy.get(".round").should("be.visible");
+				cy.logout();
+				cy.get("[data-test=app]").should("be.visible");
+			} else if ($html.find("[data-test=button-new-round]").length) {
+				cy.get("[data-test=button-new-round]").click();
+				cy.get("[data-test=app]").should("be.visible");
+				cy.get(".round").should("be.visible");
+				cy.logout();
+				cy.get("[data-test=app]").should("be.visible");
+			}
+			else {
+				cy.get("[data-test=button-back-to-rounds]").click();
+				cy.get("[data-test=button-new-round]").should("be.visible");
+				cy.get("[data-test=button-new-round]").click();
+				cy.get("[data-test=app]").should("be.visible");
+				cy.get(".round").should("be.visible");
+				cy.logout();
+				cy.get("[data-test=app]").should("be.visible");
+			}
+		})
+	});
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,50 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import { users } from "./users";
+
+Cypress.Commands.add("logout", () => {
+	cy.visit("/");
+	cy.get("[data-test=button-sign-in-out]").then(($btn) => {
+		if($btn.hasClass("signed-in")) {
+			cy.get("[data-test=button-sign-in-out]").click();
+			cy.get("[data-test=button-sign-out]").click();
+			cy.visit("/");
+		}
+	});
+});
+
+Cypress.Commands.add("login", () => {
+	cy.logout();
+
+	cy.get("[data-test=button-sign-in-out]").click();
+	cy.get("[data-test=button-email]").click();
+	cy.get("[data-test=input-email]").type(users.EMAIL_USER.username);
+	cy.get("[data-test=input-password]").type(users.EMAIL_USER.password);
+	cy.get("[data-test=button-sign-in]").click();
+	cy.wait(1000);
+	cy.get("[data-test=button-get-started]").click();
+});

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/support/users.js

@@ -0,0 +1,7 @@
+export const users = {
+	EMAIL_USER: {
+		"description": "default persistent test user",
+		"username": "roundabout-test@protonmail.com",
+		"password": "542cE_d974b5!3ae"
+	}
+}