[P_UI] Added django settings for p_ui (#5343)

* Added django settings for pui

* Fix: server version is not loaded on initial load

* Moved server version out of server selector icon

* Use polling only for WSL

* Added comment and extracted to constant instead of function

* Default show server selector to false if not in dev mode

* Refactored hostList settings

* Move json serialization into global scope

* Show server selector in netlify builds

* Use demo server for netlify

* Renamed netilfy mode to dev or demo mode

* Translate for netlify

* Dont use translation in main as the are not working there

src/frontend/netlify.toml

@@ -2,9 +2,12 @@
 # https://www.netlify.com/docs/netlify-toml-reference/
 
 [build]
-  command = "yarn run build --outDir dist"
+  command = "yarn run extract && yarn run compile && yarn run build --outDir dist"
   publish = "dist"
 
+[build.environment]
+  VITE_DEMO = "true"
+
 # Send requests to subpath
 
 [[redirects]]

src/frontend/src/components/forms/AuthFormOptions.tsx

@@ -19,9 +19,11 @@ export function AuthFormOptions({
       <Group>
         <ColorToggle />
         <LanguageToggle />
-        <Tooltip label={hostname}>
-          <IconServer onClick={toggleHostEdit} />
-        </Tooltip>
+        {window.INVENTREE_SETTINGS.show_server_selector && (
+          <Tooltip label={hostname}>
+            <IconServer onClick={toggleHostEdit} />
+          </Tooltip>
+        )}
         <Text c={'dimmed'}>
           {server.version} | {server.apiVersion}
         </Text>

src/frontend/src/defaults/defaultHostList.tsx

@@ -2,18 +2,5 @@ import { t } from '@lingui/macro';
 
 import { HostList } from '../states/states';
 
-export const defaultHostList: HostList = {
-  'mantine-u56l5jt85': {
-    host: 'https://demo.inventree.org/api/',
-    name: t`InvenTree Demo`
-  },
-  'mantine-g8t1zrj50': {
-    host: 'https://sample.app.invenhost.com/api/',
-    name: 'InvenHost: Sample'
-  },
-  'mantine-cqj63coxn': {
-    host: 'http://localhost:8000/api/',
-    name: t`Local Server`
-  }
-};
-export const defaultHostKey = 'mantine-cqj63coxn';
+export const defaultHostList: HostList = window.INVENTREE_SETTINGS.server_list;
+export const defaultHostKey = window.INVENTREE_SETTINGS.default_server;

src/frontend/src/main.tsx

@@ -4,6 +4,44 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 import App from './App';
+import { HostList } from './states/states';
+
+// define settings
+declare global {
+  interface Window {
+    INVENTREE_SETTINGS: {
+      server_list: HostList;
+      default_server: string;
+      show_server_selector: boolean;
+    };
+  }
+}
+
+export const IS_DEV = import.meta.env.DEV;
+export const IS_DEMO = import.meta.env.VITE_DEMO === 'true';
+export const IS_DEV_OR_DEMO = IS_DEV || IS_DEMO;
+
+window.INVENTREE_SETTINGS = {
+  server_list: {
+    'mantine-cqj63coxn': {
+      host: `${window.location.origin}/api/`,
+      name: 'Current Server'
+    },
+    ...(IS_DEV_OR_DEMO
+      ? {
+          'mantine-u56l5jt85': {
+            host: 'https://demo.inventree.org/api/',
+            name: 'InvenTree Demo'
+          }
+        }
+      : {})
+  },
+  default_server: IS_DEMO ? 'mantine-u56l5jt85' : 'mantine-cqj63coxn', // use demo server for demo mode
+  show_server_selector: IS_DEV_OR_DEMO,
+
+  // merge in settings that are already set via django's spa_view or for development
+  ...((window.INVENTREE_SETTINGS || {}) as any)
+};
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

src/frontend/src/pages/Auth/Login.tsx

@@ -3,6 +3,7 @@ import { Center, Container } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import { useEffect } from 'react';
 
+import { setApiDefaults } from '../../App';
 import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
 import { AuthenticationForm } from '../../components/forms/AuthenticationForm';
 import { InstanceOptions } from '../../components/forms/InstanceOptions';
@@ -27,6 +28,7 @@ export default function Login() {
   // Data manipulation functions
   function ChangeHost(newHost: string): void {
     setHost(hostList[newHost].host, newHost);
+    setApiDefaults();
     fetchServerApiState();
   }
 

src/frontend/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DEMO: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/frontend/vite.config.ts

@@ -1,6 +1,9 @@
 import react from '@vitejs/plugin-react';
+import { platform } from 'node:os';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 
+const IS_IN_WSL = platform().includes('WSL');
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -16,8 +19,17 @@ export default defineConfig({
     outDir: '../../InvenTree/web/static/web'
   },
   server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        secure: true
+      }
+    },
     watch: {
-      usePolling: true
+      // use polling only for WSL as the file system doesn't trigger notifications for Linux apps
+      // ref: https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
+      usePolling: IS_IN_WSL
     }
   }
 });