Merge pull request #60 from HSLdevcom/DT-6515

Update GraphiQL to use new API path

Author: optionsome

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

.eslintrc.js

@@ -0,0 +1,71 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+  extends: [
+    'plugin:compat/recommended',
+    'plugin:jsx-a11y/recommended',
+    'airbnb',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    curly: ['error', 'all'],
+    'lines-between-class-members': 'warn',
+    'no-else-return': 'warn',
+    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
+    'no-console': 'error',
+    'no-restricted-exports': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/no-named-default': 'off',
+    'import/extensions': 'off',
+    // react
+    'react/button-has-type': 'warn',
+    'react/destructuring-assignment': 'off',
+    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
+    'react/jsx-fragments': 'off',
+    'react/jsx-key': 'error',
+    'react/jsx-props-no-spreading': 'off',
+    'react/forbid-prop-types': ['warn', { forbid: ['any', 'array', 'object'] }],
+    'react/require-default-props': 'warn',
+    'react/sort-comp': 'off',
+    'react/state-in-constructor': 'off',
+    'react/static-property-placement': 'off',
+    'react/function-component-definition': 'off',
+    'react/prop-types': 'off',
+
+    // jsx-a11y
+    'jsx-a11y/anchor-is-valid': [
+      'error',
+      {
+        components: ['Link'],
+        specialLink: ['to'],
+        aspects: ['noHref', 'invalidHref', 'preferButton'],
+      },
+    ],
+    'jsx-a11y/label-has-associated-control': 'off', // this has a bug with FormattedMessage
+    'jsx-a11y/label-has-for': 'off', // deprecated in 6.1.0, does not support select tags
+    'jsx-a11y/control-has-associated-label': 'off', // this has a bug with FormattedMessage
+
+    // compat
+    'compat/compat': 'warn',
+
+    // prettier
+    'prettier/prettier': [
+      'error',
+      {
+        arrowParens: 'avoid',
+        endOfLine: 'auto',
+        singleQuote: true,
+        trailingComma: 'all',
+      },
+    ],
+
+    'no-shadow': 'off',
+  },
+  env: {
+    browser: true,
+    jest: true,
+  },
+  plugins: ['react', 'compat', 'prettier', 'jsx-a11y'],
+  settings: {
+    polyfills: ['fetch', 'promises'],
+  },
+};

.github/workflows/dev-pipeline.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -53,3 +53,5 @@ jobs:
         env:
           DOCKER_USER: ${{ secrets.DOCKER_USER }}
           DOCKER_AUTH: ${{ secrets.DOCKER_AUTH }}
+          REACT_APP_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_API_SUBSCRIPTION_KEY }}
+          REACT_APP_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_DEV_API_SUBSCRIPTION_KEY }}

.github/workflows/prod-pipeline.yml

@@ -23,3 +23,5 @@ jobs:
         env:
           DOCKER_USER: ${{ secrets.DOCKER_USER }}
           DOCKER_AUTH: ${{ secrets.DOCKER_AUTH }}
+          REACT_APP_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_API_SUBSCRIPTION_KEY }}
+          REACT_APP_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_DEV_API_SUBSCRIPTION_KEY }}

.gitignore

@@ -18,8 +18,19 @@ node_modules/
 .env.development.local
 .env.test.local
 .env.production.local
+
+# VSCode
 .vscode
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -0,0 +1 @@
+v20

.yarn/releases/yarn-4.5.1.cjs

@@ -0,0 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

.yarnrc.yml

@@ -1,11 +1,31 @@
-FROM node:16-alpine3.16
+FROM node:20-alpine AS builder
 LABEL maintainer="Digitransit <digitransit@HSL.fi>"
 
 WORKDIR /opt/digitransit-graphql
 
-COPY . ./
-RUN yarn
+# Copy files to build container, install dependencies, and build application.
+COPY . .
+
+# None of these are secrets, the env parameter can be visible in public.
+# These are for more configurability (as opposed to having keys directly in code).
+ARG REACT_APP_DEV_API_SUBSCRIPTION_KEY=""
+ARG REACT_APP_API_SUBSCRIPTION_KEY=""
+ARG REACT_APP_API_SUBSCRIPTION_KEY_PARAM=""
+ENV REACT_APP_API_SUBSCRIPTION_KEY_PARAM=$REACT_APP_API_SUBSCRIPTION_KEY_PARAM
+ENV REACT_APP_DEV_API_SUBSCRIPTION_KEY=$REACT_APP_DEV_API_SUBSCRIPTION_KEY
+ENV REACT_APP_API_SUBSCRIPTION_KEY=$REACT_APP_API_SUBSCRIPTION_KEY
+
+RUN yarn install
+RUN yarn build
+
+
+FROM nginx:1.27.2-alpine
+WORKDIR /usr/share/nginx/html
+
+# Remove default nginx files, copy built files, and copy nginx configuration.
+RUN rm -rf ./*
+COPY --from=builder /opt/digitransit-graphql/build .
+COPY --from=builder /opt/digitransit-graphql/nginx/nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 8080
-ENV REACT_APP_DISABLE_LIVE_RELOAD=true
-ENTRYPOINT ["yarn", "start"]
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

Dockerfile

@@ -8,24 +8,25 @@ Deployment for HSL version of [GraphiQL](https://github.com/graphql/graphiql). P
 REACT_APP_DEV_API_SUBSCRIPTION_KEY=key REACT_APP_API_SUBSCRIPTION_KEY=key REACT_APP_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key yarn start
 ```
 
-Environment variables `REACT_APP_DEV_API_SUBSCRIPTION_KEY`, `REACT_APP_API_SUBSCRIPTION_KEY` and `REACT_APP_API_SUBSCRIPTION_KEY_PARAM` are set to GraphQL request query string for authorization gateway service.
+Environment variables `REACT_APP_DEV_API_SUBSCRIPTION_KEY`, `REACT_APP_API_SUBSCRIPTION_KEY`, and `REACT_APP_API_SUBSCRIPTION_KEY_PARAM` are set in the GraphQL request query string for the authorization gateway service.
 
-## Run in docker
+## Docker
 
+### Build
 ```sh
-docker build -t graphiql .
-docker run -it \
-    -p 8099:8080 \
-    -e REACT_APP_DEV_API_SUBSCRIPTION_KEY=key \
-    -e REACT_APP_API_SUBSCRIPTION_KEY=key \
-    -e REACT_APP_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key \
-     graphiql
+docker build \
+    --build-arg REACT_APP_DEV_API_SUBSCRIPTION_KEY=key \
+    --build-arg REACT_APP_API_SUBSCRIPTION_KEY=key \
+    --build-arg REACT_APP_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key \
+    -t graphiql .
 ```
 
-## Code formatting
-
-Format source codebase:
+### Run
+```sh
+docker run -it -p 8099:8080 graphiql
+```
 
+## Code formatting
 ```sh
-yarn format
+yarn lint
 ```

README.md

@@ -0,0 +1,21 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+          browsers: [],
+        },
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    'dynamic-import-node',
+    'relay',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-transform-class-properties',
+    '@babel/plugin-transform-json-strings',
+  ],
+};

babel.config.js

@@ -0,0 +1,8 @@
+server {
+    listen 8080;
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html =404;
+    }
+}

nginx/nginx.conf

@@ -2,26 +2,28 @@
   "name": "graphiql-deployment",
   "version": "1.0.0",
   "engines": {
-    "node": ">=16.16.0 <17.0.0"
+    "node": ">=16.17",
+    "npm": ">=3.0"
   },
+  "packageManager": "yarn@4.5.1",
   "private": true,
-  "homepage": "/graphiql",
   "dependencies": {
-    "graphiql": "^1.11.4",
-    "graphql": "^16.5.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.0",
-    "react-scripts": "^5.0.0"
+    "graphiql": "^3.7.1",
+    "graphql": "^16.9.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "PORT=8080 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --watchAll=false --coverage",
     "test:watch": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.js",
-    "lint:fix": "eslint --fix src/**/*.js"
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,8 +41,20 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^8.19.0",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.26.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-relay": "^18.1.0",
+    "eslint": "8.56.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "graphql-ws": "^5.9.1"
+    "eslint-plugin-compat": "^6.0.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "graphql-ws": "^5.16.0",
+    "prettier": "^3.3.3"
   }
 }

package.json

@@ -2,25 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>GraphiQL</title>
-    <% if (process.env.REACT_APP_DISABLE_LIVE_RELOAD === "true") { %>
     <!--
-      Disable devserver Live Reload it by starting the app with REACT_APP_DISABLE_LIVE_RELOAD=true
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <script>
-      var WS = window.WebSocket;
-      function DevWebSocket(s) {
-        if (s === 'ws://localhost:8080/ws') {
-          return {};
-        } else {
-          // Pass through other usage of sockets
-          return new WS(s);
-        }
-      }
-      window.WebSocket = DevWebSocket;
-    </script>
-    <% } %>
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.png" or "favicon.png", "%PUBLIC_URL%/favicon.png" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>GraphiQL deployment</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/favicon.png

@@ -0,0 +1,15 @@
+{
+  "short_name": "graphiql-deployment",
+  "name": "GraphiQL deployment",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": " 96x96 64x64 32x32 24x24 16x16",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}