Staging

.github/workflows/prod_cicd.yml

@@ -98,6 +98,7 @@ jobs:
           echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-frontend.production.env
           echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-redesign-frontend.production.env
           echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-frontend.production.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-redesign-frontend.production.env
 
       - name: Build - Prep
         run: |
@@ -113,6 +114,41 @@ jobs:
           name: build-public-redesign
           path: ./nginx-prod/build/public-redesign.tgz
 
+  build-admin-redesign:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Setup Env Vars
+        run: |
+          mkdir secrets
+          mkdir secrets/prod/
+          mkdir secrets/dev/
+          echo "${{secrets.SAUSAGE_WEB_PRODUCTION_ENV }}" > secrets/prod/sausage-web.production.env
+          echo "${{secrets.SAUSAGE_WEB_DB_DEV_ENV }}" > secrets/dev/sausage-web-db.dev.env
+          echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-frontend.production.env
+          echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-redesign-frontend.production.env
+          echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-frontend.production.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-redesign-frontend.production.env
+
+      - name: Build - Prep
+        run: |
+          mkdir ./build
+          mkdir ./nginx-prod/build
+
+      - name: Admin Redesign Frontend - Build
+        run: docker compose --file build_production.yml run admin_redesign
+
+      - name: Upload artifact for container build jobs
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-admin-redesign
+          path: ./nginx-prod/build/admin-redesign.tgz
+
   build-django-static:
     runs-on: ubuntu-latest
     steps:
@@ -132,6 +168,7 @@ jobs:
           echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-frontend.production.env
           echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-public-redesign-frontend.production.env
           echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-frontend.production.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_PRODUCTION_ENV }}" > secrets/prod/sausage-admin-redesign-frontend.production.env
 
       - name: Build - Prep
         run: |
@@ -149,8 +186,7 @@ jobs:
 
   build-nginx:
     runs-on: ubuntu-latest
-    # needs: [build-public, build-admin, build-public-redesign, build-django-static]
-    needs: [build-public-redesign, build-django-static]
+    needs: [build-public-redesign, build-admin-redesign, build-django-static]
     steps:
       - uses: actions/checkout@v4
 
@@ -175,6 +211,7 @@ jobs:
           cp -r ./public-legacy/prod/ ./nginx-prod/build/public-legacy/
           cp -r ./admin-legacy/prod/ ./nginx-prod/build/admin-legacy/
           mv ./build/build-public-redesign/public-redesign.tgz ./nginx-prod/build/public-redesign.tgz
+          mv ./build/build-admin-redesign/admin-redesign.tgz ./nginx-prod/build/admin-redesign.tgz
           mv ./build/build-django/django.tgz ./nginx-prod/build/django.tgz
 
       - name: Containers - Build Nginx

.github/workflows/staging_cicd.yml

@@ -98,6 +98,7 @@ jobs:
           echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-frontend.staging.env
           echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-redesign-frontend.staging.env
           echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-frontend.staging.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-redesign-frontend.staging.env
 
       - name: Build - Prep
         run: |
@@ -116,6 +117,41 @@ jobs:
           name: build-public-redesign
           path: ./nginx-prod/build/public-redesign.tgz
 
+  build-admin-redesign:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Setup Env Vars
+        run: |
+          mkdir secrets
+          mkdir secrets/staging/
+          mkdir secrets/dev/
+          echo "${{secrets.SAUSAGE_WEB_STAGING_ENV }}" > secrets/staging/sausage-web.staging.env
+          echo "${{secrets.SAUSAGE_WEB_DB_DEV_ENV }}" > secrets/dev/sausage-web-db.dev.env
+          echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-frontend.staging.env
+          echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-redesign-frontend.staging.env
+          echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-frontend.staging.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-redesign-frontend.staging.env
+
+      - name: Build - Prep
+        run: |
+          mkdir ./build
+          mkdir ./nginx-prod/build
+
+      - name: Admin Redesign Frontend - Build
+        run: docker compose --file build_staging.yml run admin_redesign
+
+      - name: Upload artifact for container build jobs
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-admin-redesign
+          path: ./nginx-prod/build/admin-redesign.tgz
+
   build-django-static:
     runs-on: ubuntu-latest
     steps:
@@ -135,6 +171,7 @@ jobs:
           echo "${{secrets.SAUSAGE_PUBLIC_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-frontend.staging.env
           echo "${{secrets.SAUSAGE_PUBLIC_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-public-redesign-frontend.staging.env
           echo "${{secrets.SAUSAGE_ADMIN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-frontend.staging.env
+          echo "${{secrets.SAUSAGE_ADMIN_REDESIGN_FRONTEND_STAGING_ENV }}" > secrets/staging/sausage-admin-redesign-frontend.staging.env
 
       - name: Build - Prep
         run: |
@@ -152,8 +189,7 @@ jobs:
 
   build-nginx:
     runs-on: ubuntu-latest
-    # needs: [build-public, build-admin, build-public-redesign, build-django-static]
-    needs: [build-public-redesign, build-django-static]
+    needs: [build-public-redesign, build-admin-redesign, build-django-static]
     steps:
       - uses: actions/checkout@v4
 
@@ -178,6 +214,7 @@ jobs:
           cp -r ./public-legacy/staging/ ./nginx-prod/build/public-legacy/
           cp -r ./admin-legacy/staging/ ./nginx-prod/build/admin-legacy/
           mv ./build/build-public-redesign/public-redesign.tgz ./nginx-prod/build/public-redesign.tgz
+          mv ./build/build-admin-redesign/admin-redesign.tgz ./nginx-prod/build/admin-redesign.tgz
           mv ./build/build-django/django.tgz ./nginx-prod/build/django.tgz
 
       - name: Containers - Build Nginx

admin-redesign/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+.yarn/
+build/
+.prettierrc.json
+.eslintrc.js

admin-redesign/.eslintrc.json

@@ -0,0 +1,92 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
+  ],
+  // Specifying Parser
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": [
+      "./tsconfig.json"
+    ]
+  },
+  // Configuring third-party plugins
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
+  // Resolve imports
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "18.x"
+    }
+  },
+  "rules": {
+    "linebreak-style": "off",
+    // Configure prettier
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 120,
+        "endOfLine": "lf",
+        "singleQuote": true,
+        "tabWidth": 2,
+        "indentStyle": "space",
+        "useTabs": true,
+        "trailingComma": "all"
+      }
+    ],
+    // Disallow the `any` type.
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ],
+    "react-hooks/exhaustive-deps": 2,
+    // Enforce the use of the shorthand syntax.
+    "object-shorthand": "error",
+    "no-console": "warn",
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variable",
+        "format": [
+          "camelCase",
+          "snake_case",
+          "StrictPascalCase"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-misused-promises": "off"
+  }
+}

admin-redesign/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.yarn
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+.eslintcache
+
+browserstack.ts
+
+.yarnrc.yml
+.pnp*

admin-redesign/.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+.yarn/
+build/
+.prettierrc.json

admin-redesign/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "indentStyle": "space",
+  "useTabs": true,
+  "trailingComma": "all"
+}

admin-redesign/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

admin-redesign/build.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+rm -rf ./build
+mkdir -p ./build
+
+# For GitHub actions
+if [ ! -d "node_modules" ]; then
+    yarn
+fi
+
+# Avoid JavaScript heap out of memory errors from Vite
+# https://github.com/vitejs/vite/issues/2433
+export NODE_OPTIONS=--max-old-space-size=8192
+yarn run build
+cd ./build && tar czvf /build/admin-redesign.tgz .

admin-redesign/docker-entrypoint.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+
+command="$1"
+cd /app
+
+# Presence of the "packageManager" field indicates that the project is meant to be used with Corepack, a tool included by default with all official Node.js distributions starting from 16.9 and 14.19.
+# Corepack must currently be enabled by running corepack enable in your terminal. For more information, check out https://yarnpkg.com/corepack.
+corepack enable
+
+# Ensure we upgrade from v1 to v3 internally because
+# we usually install from outside the container
+# Note: Sometimes you'll have to add `nodeLinker: node-modules` back into .yarnrc.yml after this runs
+yarn set version stable
+
+if [ ! -d ".yarn" ]; then
+  rm -f .yarn*
+  yarn set version stable
+  yarn install
+else
+  yarn install
+fi
+
+if [ "$VITE_ENVIRONMENT" = "DEVELOPMENT" ]; then
+  yarn run start
+  exit
+fi
+
+if [ x"$command" = x"build" ]; then
+    . /app/build.sh
+    exit
+fi