Improve template rendering and reopen a template via url.

tobiashochguertel · Oct 30, 2023 · 3a151cc · 3a151cc
1 parent 5478c01
commit 3a151cc
Show file tree

Hide file tree

Showing 10 changed files with 3,387 additions and 798 deletions.
diff --git a/BAK/package.json b/BAK/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "helm-playground",
+  "private": true,
+  "version": "1.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview --host"
+  },
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "feather-icons": "^4.29.0",
+    "js-yaml": "^4.1.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
+    "bootstrap": "^5.3.1",
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
+    "react-monaco-editor": "^0.52.0",
+    "react-router-dom": "^6.10.0",
+    "react-split": "^2.0.14"
+  },
+  "devDependencies": {
+    "@geist-ui/core": "^2.3.8",
+    "@monaco-editor/react": "^4.5.1",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query-devtools": "^4.29.6",
+    "@types/golang-wasm-exec": "^1.15.0",
+    "@types/js-yaml": "^4.0.5",
+    "@types/node": "^20.1.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@uiw/react-monacoeditor": "^3.5.8",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-top-level-await": "^1.3.0",
+    "vite-plugin-wasm": "^3.2.2"
+  }
+}
diff --git a/BAK/yarn.lock b/BAK/yarn.lock
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -7,12 +7,14 @@ services:
       - ./gitlab-project:/app/public
     environment:
       - PORT=3001
+    restart: always
   template:
     image: localhost/th-helm-playground-template:latest
     ports:
       - '3002:3002'
     environment:
       - PORT=3002
+    restart: always
   webapp:
     image: localhost/th-helm-playground-webapp:latest
     ports:
@@ -22,3 +24,4 @@ services:
       - BACKEND_HOSTNAME=backend
       - BACKEND_TEMPLATE_HOSTNAME=template
       - BACKEND_TEMPLATE_PORT=3002
+    restart: always
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,20 +1,23 @@
 services:
-    backend:
-        image: docker.io/tobiashochguertel/th-helm-playground-backend:latest
-        volumes:
-            - /Users/tobiashochgurtel/work-dev/helm-playground/frontend:/app/public
-        environment:
-            - PORT=3001
-    template:
-        image: docker.io/tobiashochguertel/th-helm-playground-template:latest
-        environment:
-            - PORT=3002
-    frontend:
-        image: docker.io/tobiashochguertel/th-helm-playground-frontend:latest
-        ports:
-            - 4173:80
-        environment:
-            - BACKEND_PORT=3001
-            - BACKEND_HOSTNAME=backend
-            - BACKEND_TEMPLATE_HOSTNAME=template
-            - BACKEND_TEMPLATE_PORT=3002
+  backend:
+    image: docker.io/tobiashochguertel/th-helm-playground-backend:latest
+    volumes:
+      - /Users/tobiashochgurtel/work-dev/quiz/helm-chart/quiz:/app/public
+    environment:
+      - PORT=3001
+    restart: always
+  template:
+    image: docker.io/tobiashochguertel/th-helm-playground-template:latest
+    environment:
+      - PORT=3002
+    restart: always
+  frontend:
+    image: docker.io/tobiashochguertel/th-helm-playground-frontend:latest
+    ports:
+      - 4173:80
+    environment:
+      - BACKEND_PORT=3001
+      - BACKEND_HOSTNAME=backend
+      - BACKEND_TEMPLATE_PORT=3002
+      - BACKEND_TEMPLATE_HOSTNAME=template
+    restart: always
diff --git a/package.json b/package.json
@@ -10,13 +10,13 @@
     "preview": "vite preview --host"
   },
   "dependencies": {
+    "bootstrap": "^5.3.1",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "feather-icons": "^4.29.0",
     "js-yaml": "^4.1.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
-    "bootstrap": "^5.3.1",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-monaco-editor": "^0.52.0",
@@ -44,6 +44,7 @@
     "vite": "^4.3.2",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-top-level-await": "^1.3.0",
-    "vite-plugin-wasm": "^3.2.2"
+    "vite-plugin-wasm": "^3.2.2",
+    "vite-plugin-rewrite-all": "^1.0.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,13 +8,20 @@ import Editor from './components/Editor/Editor';
 import replaceSlash from './components/utils/replaceSlash';
 import Split from 'react-split'
 import './assets/split.css'
+import { useNavigate, useParams } from 'react-router-dom';
 
 function isEmpty(array: Array<unknown> | Map<unknown, unknown>) {
     if (array instanceof Map) return array.size === 0;
     return array.length === 0;
 }
 
+
+
 function App() {
+    const navigate = useNavigate();
+    const params = useParams();
+    const { "*": splat } = params;
+
     const { setToast } = useToasts()
 
     const [output, setOutput] = useState<string>("");
@@ -30,7 +37,7 @@ function App() {
 
     useEffect(() => {
         if (isEmpty(chart)) {
-            fetch(`/api/chart`).then(response => response.json()).then((data) => {
+            fetch(`/api/backend/chart`).then(response => response.json()).then((data) => {
                 // https://www.cloudhadoop.com/2018/09/typescript-how-to-convert-map-tofrom.html
                 const map = new Map<string, Content>();
                 for (const value in data) {
@@ -41,7 +48,7 @@ function App() {
             });
         }
         if (isEmpty(filesTree)) {
-            fetch(`/api/tree`).then(response => response.json()).then((data) => {
+            fetch(`/api/backend/tree`).then(response => response.json()).then((data) => {
                 setFilesTree(data);
             });
         }
@@ -75,7 +82,7 @@ function App() {
         };
 
         if (isFileChange === false) {
-            fetch(`/api/file/${replaceSlash(selectedFile)}`, requestOptions)
+            fetch(`/api/backend/file/${replaceSlash(selectedFile)}`, requestOptions)
                 .then(response => response.text())
                 .then(() => {
                     const currentValue: Content = chart.get(selectedFile) || { filename: selectedFile, content: "", type: "file" } as Content;
@@ -85,14 +92,19 @@ function App() {
         }
     }
 
-    const handler = (path: string) => {
-        setToast({ text: path })
+    function fileSelectionChange(path) {
         if (selectedFile !== path) {
             setIsFileChange(true);
             setSelectedFile(path);
         }
     }
 
+    const handler = (path: string) => {
+        setToast({ text: path })
+        navigate(`/${path}`);
+        fileSelectionChange(path);
+    }
+
     const myConfigurationChangeHandler = (newValue: string) => {
         setMyConfig(newValue);
         TemplateOutput(chart, code, newValue)
@@ -102,6 +114,10 @@ function App() {
     if (chart.size === 0) return (<>'No Files available... or backend not available?'</>)
     if (chartLoaded === false) return (<>'Files Content not yet loaded...'</>)
 
+    if (splat != undefined) {
+        fileSelectionChange(splat);
+    }
+
     return (
         <>
             <header className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">

diff --git a/src/TemplateOutput.ts b/src/TemplateOutput.ts
@@ -20,7 +20,7 @@ export default async function helmChartTemplateOutput(
         valuesYaml = jsYaml.dump(mergedConfig)
     }
 
-    const result = await fetch(`/template`, {
+    const result = await fetch(`/api/template`, {
         method: 'POST',
         cache: "no-cache",
         headers: {

diff --git a/src/main.tsx b/src/main.tsx
@@ -16,7 +16,13 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
-    errorElement: <ErrorPage />
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: '/*',
+        element: <App />,
+      }
+    ]
   }
 ]);
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,5 @@
 import dotenv from 'dotenv';
+import pluginRewriteAll from 'vite-plugin-rewrite-all';
 dotenv.config();
 
 import { defineConfig } from 'vite'
@@ -18,21 +19,22 @@ export default defineConfig({
     react(),
     // https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
     monacoEditorPlugin.default({}),
+    // Vite plugin that fix dev server not rewriting the path includes a dot vite#2190
+    pluginRewriteAll()
   ],
   server: {
     proxy: {
-      // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
-      '/api': {
+      '/api/backend': {
         target: `http://${BACKEND_HOSTNAME}:${BACKEND_PORT}/`,
         changeOrigin: false,
         autoRewrite: true,
-        // rewrite: (path) => path.replace(/^\/api/, ''),
+        rewrite: (path) => path.replace(/^\/api\/backend/, '/api'),
       },
-      '/template': {
+      '/api/template': {
         target: `http://${BACKEND_TEMPLATE_HOSTNAME}:${BACKEND_TEMPLATE_PORT}/`,
         changeOrigin: false,
         autoRewrite: true,
-        // rewrite: (path) => path.replace(/^\/api/, ''),
+        rewrite: (path) => path.replace(/^\/api\/template/, '/template'),
       }
     },
   },