HTML/CSS MVP (#479)

Closes #462

---------

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: loiswells97 <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: magdalenajadach <[email protected]>
Co-authored-by: Magdalena Jadach <[email protected]>
Co-authored-by: Dan Halson <[email protected]>
Co-authored-by: sra405 <[email protected]>

Author: 6 people

.devcontainer/devcontainer.json

@@ -6,7 +6,7 @@
   // Update the 'dockerComposeFile' list if you have more compose files or use different names.
   // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
   "dockerComposeFile": [
-    "../docker-compose.yml",
+    "../docker-compose.yml"
   ],
 
   // The 'service' property is the name of the service for the container that VS Code should
@@ -20,7 +20,6 @@
 
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
-    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
     "ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {
       "omzPlugins": "git docker-compose macos zsh-autosuggestions yarn fzf-zsh-plugin asdf zsh-nvm"
     }
@@ -59,13 +58,13 @@
         "ivangabriele.vscode-heroku",
         "pkosta2005.heroku-command",
         "yzhang.markdown-all-in-one",
-        "dzannotti.vscode-babel-coloring",
         "mikestead.dotenv",
         "wingrunr21.vscode-ruby",
         "ms-vscode.remote-repositories",
         "github.remotehub",
         "circleci.circleci",
-        "stylelint.vscode-stylelint"
+        "stylelint.vscode-stylelint",
+        "Orta.vscode-jest"
       ],
       "settings": {
         "terminal.integrated.defaultProfile.linux": "zsh"

.github/workflows/ci-cd.yml

@@ -70,14 +70,15 @@ jobs:
       run: yarn install --frozen-lock-file
 
     - name: Cypress run
-      uses: cypress-io/github-action@v4
+      uses: cypress-io/github-action@v5
       with:
         install: false
         start: |
           yarn start
           yarn start:wc
         wait-on: 'http://localhost:3000, http://localhost:3001'
       env:
+        REACT_APP_API_ENDPOINT: "https://staging-editor-api.raspberrypi.org"
         PUBLIC_URL: 'http://localhost:3000'
 
     - name: Archive cypress artifacts
@@ -87,7 +88,6 @@ jobs:
         name: cypress-artifacts
         path: |
           cypress/screenshots
-          cypress/videos
 
 
   deploy-tag:

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

CHANGELOG.md

@@ -10,25 +10,36 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - New colors (#474)
 - New typography (#475, #513)
+- Ability to create `HTML` and `CSS` files in a `HTML` project (#478)
+- Help text in the new file modal (#478)
 - Add dev-container support (#489)
+- Add input/output responsiveness (#473)
+- Ability to drag and drop input panel tabs (#438)
+- Distinguish icon type (#470)
 - Custom callback when Enter pressed in modals (#491)
-- `GeneralModal` and `InputModal` to encapsulate the common modal behaviour (#491)
+- `GeneralModal` and `InputModal` to encapsulate the common modal behaviour (#491, #517)
 
 ### Changed
 
 - Updated spacing variables to match the new design system (#460)
+- Position run button in separate bar (#471)
 - Color usage (#474)
+- Handling of internal/external links for HTML/CSS projects (#483)
 - Existing modals to use `GeneralModal` or `InputModal` (#491)
 - Refactored login logic to make this available outside of the login button (#491)
+- Turned off HTML autorun (#515)
 
 ### Fixed
 
 - Modal button alignment support (#460)
 - Storybook setup and dev deployment (#461)
+- HTML auto-run functionality (#481)
 - Updating Sentry to fix compile-time error (#487)
 - Fix local package build process (#488)
 - Color naming convention (#474)
 - Fix Web App Manifest logos, colors, and titles (#446)
+- Ability to run HTML projects by clicking run button (#481)
+- Internal/external HTML project links (#521)
 
 ## [0.15.0] - 2023-04-27
 

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:16.13.1
 
-RUN apt-get update && apt-get install -y curl wget git zsh
+RUN apt-get update && apt-get install -y sudo curl wget vim git zsh docker.io
 
 RUN sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"
 

cypress.config.mjs

@@ -1,9 +1,24 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
+    chromeWebSecurity: false,
     supportFile: false,
     defaultCommandTimeout: 10000,
-    screenshotOnRunFailure: (process.env.CI !== 'true')
-  }
-})
+    screenshotOnRunFailure: process.env.CI !== "true",
+    video: false,
+    setupNodeEvents(on, config) {
+      on("task", {
+        log(message) {
+          console.log(message);
+
+          return null;
+        },
+      });
+    },
+    retries: {
+      runMode: 3,
+      openMode: 0,
+    },
+  },
+});

cypress/e2e/spec-html.cy.js

@@ -0,0 +1,73 @@
+const baseUrl = "localhost:3000/en/projects/blank-html-starter";
+
+const getIframeDocument = () => {
+  return cy
+    .get("iframe[class=htmlrunner-iframe]")
+    .its("0.contentDocument")
+    .should("exist");
+};
+
+const getIframeBody = () => {
+  return getIframeDocument()
+    .its("body")
+    .should("not.be.undefined")
+    .then(cy.wrap);
+};
+
+const makeNewFile = (filename = "new.html") => {
+  cy.get("div[class=file-pane]").contains("Add file").click();
+  cy.get("div[class=modal-content__input]").find("input").type(filename);
+  cy.get("div[class=modal-content__buttons]").contains("Add file").click();
+};
+
+it("renders the html runner", () => {
+  cy.visit(baseUrl);
+  cy.get(".htmlrunner-container").should("be.visible");
+});
+
+it("can make a new file", () => {
+  cy.visit(baseUrl);
+  cy.get(".htmlrunner-container").should("be.visible");
+});
+
+it("updates the preview after a change when you click run", () => {
+  localStorage.clear();
+  cy.visit(baseUrl);
+  cy.get(".btn--run").click();
+  getIframeBody().should("not.include.text", "hello world");
+  cy.get("div[class=cm-content]").invoke("text", "<p>hello world</p>");
+  cy.get(".btn--run").click();
+  getIframeBody().find("p").should("include.text", "hello world");
+});
+
+it("blocks external links", () => {
+  localStorage.clear();
+  cy.visit(baseUrl);
+  cy.get("div[class=cm-content]").invoke(
+    "text",
+    '<a href="https://raspberrypi.org/en/">some external link</a>'
+  );
+  cy.get(".btn--run").click();
+  getIframeBody().find("a").click();
+  cy.get("div[class=modal-content__header]")
+    .find("h2")
+    .should("include.text", "An error has occurred");
+});
+
+it("allows internal links", () => {
+  localStorage.clear();
+  cy.visit(baseUrl);
+  cy.get("div[class=cm-content]").invoke("text", "<p>hello world</p>");
+  cy.get(".btn--run").click();
+  makeNewFile();
+  cy.get("div[class=cm-content]").invoke(
+    "text",
+    '<a href="index.html">some internal link</a>'
+  );
+  cy.get(".btn--run").click();
+
+  const internalLink = getIframeBody().find("a");
+  internalLink.click();
+  const content = getIframeBody().find("p");
+  content.should("include.text", "hello world");
+});

docker-compose.yml

@@ -9,6 +9,7 @@ services:
     stdin_open: true
     volumes:
       - .:/app
+      - /var/run/docker.sock:/var/run/docker.sock
       - node_modules:/app/node_modules # ensures we retain node_modules from docker build
   react-ui-wc:
     build: .

package.json

@@ -12,6 +12,7 @@
     "@codemirror/lang-python": "^6.0.2",
     "@codemirror/language": "^6.2.1",
     "@codemirror/view": "^6.3.0",
+    "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
     "@react-three/drei": "^9.65.5",
@@ -24,6 +25,7 @@
     "@szhsin/react-menu": "^3.2.0",
     "apollo-link-sentry": "^3.2.3",
     "axios": "^0.24.0",
+    "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
     "container-query-polyfill": "^1.0.2",
     "date-fns": "^2.29.3",
@@ -39,12 +41,17 @@
     "js-convert-case": "^4.2.0",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
+    "node-html-parser": "^6.1.5",
     "oidc-client": "^1.11.5",
     "parse-link-header": "^2.0.0",
     "prompts": "2.4.0",
+    "prop-types": "^15.8.1",
+    "rc-resize-observer": "^1.3.1",
+    "re-resizable": "6.9.9",
     "react": "^18.1.0",
     "react-app-polyfill": "^2.0.0",
     "react-confirm-alert": "^2.8.0",
+    "react-container-query": "^0.12.1",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.1.0",
     "react-dropzone": "^12.0.4",
@@ -57,7 +64,6 @@
     "react-timer-hook": "^3.0.5",
     "react-toastify": "^8.1.0",
     "react-toggle": "^4.1.3",
-    "re-resizable": "6.9.9",
     "redux-oidc": "^4.0.0-beta1",
     "skulpt": "^1.2.0",
     "three": "^0.140.0",
@@ -119,7 +125,7 @@
     "copy-webpack-plugin": "^6.4.0",
     "css-loader": "4.3.0",
     "curl": "^0.1.4",
-    "cypress": "^10.1.0",
+    "cypress": "12.12.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "dotenv-webpack": "^7.1.0",
@@ -197,6 +203,9 @@
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
+    "testEnvironmentOptions": {
+      "resources": "usable"
+    },
     "testRunner": "jest-circus/runner",
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",

src/Icons.js

@@ -432,7 +432,7 @@ export const RunIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M0 14V0L11 7L0 14ZM2 10.35L7.25 7L2 3.65V10.35Z" />
+      <path d="M0 14V0L11 7L0 14Z"/>
     </svg>
   );
 };
@@ -480,7 +480,7 @@ export const StopIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M2 2V10V2ZM0 12V0H12V12H0ZM2 10H10V2H2V10Z" />
+      <path d="M0 12V0H12V12H0Z"/>
     </svg>
   );
 };