P UI: Show server version on auth (#5314)

* added language toggle component

* added language and theme controls onto start page

* moved host selection out of auth

* optimized rendering

* make server option less obvious

* changed EditButton save symbol

* longer welcome text

* removed ColorToggle color schema

* reduced code

* disabled host selection when options are changing

* fix type error

* use GH reporter

* fix tests?

* compile frontend

* fix assertation

* revert unneeded change

* split up into more components

* add server version info

* fix merge

* fix merge

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

@@ -1,6 +1,7 @@
-import { Center, Group, Tooltip } from '@mantine/core';
+import { Center, Group, Text, Tooltip } from '@mantine/core';
 import { IconServer } from '@tabler/icons-react';
 
+import { useServerApiState } from '../../states/ApiState';
 import { ColorToggle } from '../items/ColorToggle';
 import { LanguageToggle } from '../items/LanguageToggle';
 
@@ -11,6 +12,8 @@ export function AuthFormOptions({
   hostname: string;
   toggleHostEdit: () => void;
 }) {
+  const [server] = useServerApiState((state) => [state.server]);
+
   return (
     <Center mx={'md'}>
       <Group>
@@ -19,6 +22,9 @@ export function AuthFormOptions({
         <Tooltip label={hostname}>
           <IconServer onClick={toggleHostEdit} />
         </Tooltip>
+        <Text c={'dimmed'}>
+          {server.version} | {server.apiVersion}
+        </Text>
       </Group>
     </Center>
   );

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -3,6 +3,7 @@ import { Divider, Group, Select, Text, Title } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import { IconCheck } from '@tabler/icons-react';
 
+import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { HostList } from '../../states/states';
 import { EditButton } from '../items/EditButton';
@@ -23,7 +24,6 @@ export function InstanceOptions({
     state.setHostList,
     state.hostList
   ]);
-
   const hostListData = Object.keys(hostList).map((key) => ({
     value: key,
     label: hostList[key].name
@@ -63,7 +63,8 @@ export function InstanceOptions({
           saveIcon={<IconCheck />}
         />
       </Group>
-      {HostListEdit && (
+
+      {HostListEdit ? (
         <>
           <Divider my={'sm'} />
           <Text>
@@ -71,7 +72,46 @@ export function InstanceOptions({
           </Text>
           <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
         </>
+      ) : (
+        <>
+          <Divider my={'sm'} />
+          <ServerInfo hostList={hostList} hostKey={hostKey} />
+        </>
       )}
     </>
   );
 }
+
+function ServerInfo({
+  hostList,
+  hostKey
+}: {
+  hostList: HostList;
+  hostKey: string;
+}) {
+  const [server] = useServerApiState((state) => [state.server]);
+
+  return (
+    <Text>
+      {hostList[hostKey].host}
+      <br />
+      <Trans>Version: {server.version}</Trans>
+      <br />
+      <Trans>API:{server.apiVersion}</Trans>
+      <br />
+      <Trans>Name: {server.instance}</Trans>
+      <br />
+      <Trans>
+        State:{' '}
+        <Text span c={server.worker_running ? 'green' : 'red'}>
+          worker
+        </Text>{' '}
+        ({server.worker_pending_tasks}),{' '}
+        <Text span c={server.plugins_enabled ? 'green' : 'red'}>
+          plugins
+        </Text>
+        {server.plugins_enabled ? ` (${server.active_plugins.length})` : null}
+      </Trans>
+    </Text>
+  );
+}

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -14,7 +14,7 @@ import { useEffect, useState } from 'react';
 
 import { menuItems } from '../../defaults/menuItems';
 import { InvenTreeStyle } from '../../globalStyle';
-import { useApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { MenuLinks } from '../items/MenuLinks';
@@ -29,7 +29,7 @@ export function NavHoverMenu({
     state.hostKey,
     state.hostList
   ]);
-  const [servername] = useApiState((state) => [state.server.instance]);
+  const [servername] = useServerApiState((state) => [state.server.instance]);
   const [instanceName, setInstanceName] = useState<string>();
 
   useEffect(() => {

src/frontend/src/functions/auth.tsx

@@ -4,7 +4,12 @@ import { IconCheck } from '@tabler/icons-react';
 import axios from 'axios';
 
 import { api } from '../App';
-import { ApiPaths, url, useApiState } from '../states/ApiState';
+import {
+  ApiPaths,
+  url,
+  useApiState,
+  useServerApiState
+} from '../states/ApiState';
 import { useLocalState } from '../states/LocalState';
 import { useSessionState } from '../states/SessionState';
 
@@ -58,9 +63,11 @@ export const doSimpleLogin = async (email: string) => {
 export const doTokenLogin = (token: string) => {
   const { setToken } = useSessionState.getState();
   const { fetchApiState } = useApiState.getState();
+  const { fetchServerApiState } = useServerApiState.getState();
 
   setToken(token);
   fetchApiState();
+  fetchServerApiState();
 };
 
 export function handleReset(navigate: any, values: { email: string }) {

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

@@ -7,6 +7,7 @@ import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
 import { AuthenticationForm } from '../../components/forms/AuthenticationForm';
 import { InstanceOptions } from '../../components/forms/InstanceOptions';
 import { defaultHostKey } from '../../defaults/defaultHostList';
+import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 
 export default function Login() {
@@ -15,6 +16,10 @@ export default function Login() {
     state.setHost,
     state.hostList
   ]);
+  const [server, fetchServerApiState] = useServerApiState((state) => [
+    state.server,
+    state.fetchServerApiState
+  ]);
   const hostname =
     hostList[hostKey] === undefined ? t`No selection` : hostList[hostKey].name;
   const [hostEdit, setHostEdit] = useToggle([false, true] as const);
@@ -22,6 +27,7 @@ export default function Login() {
   // Data manipulation functions
   function ChangeHost(newHost: string): void {
     setHost(hostList[newHost].host, newHost);
+    fetchServerApiState();
   }
 
   // Set default host to localhost if no host is selected
@@ -30,6 +36,12 @@ export default function Login() {
       ChangeHost(defaultHostKey);
     }
   }, []);
+  // Fetch server data on mount if no server data is present
+  useEffect(() => {
+    if (server.server === null) {
+      fetchServerApiState();
+    }
+  }, [server]);
 
   // Main rendering block
   return (

src/frontend/src/states/ApiState.tsx

@@ -7,16 +7,12 @@ import { ServerAPIProps, UserProps } from './states';
 interface ApiStateProps {
   user: UserProps | undefined;
   setUser: (newUser: UserProps) => void;
-  server: ServerAPIProps;
-  setServer: (newServer: ServerAPIProps) => void;
   fetchApiState: () => void;
 }
 
 export const useApiState = create<ApiStateProps>((set, get) => ({
   user: undefined,
   setUser: (newUser: UserProps) => set({ user: newUser }),
-  server: emptyServerAPI,
-  setServer: (newServer: ServerAPIProps) => set({ server: newServer }),
   fetchApiState: async () => {
     // Fetch user data
     await api.get(url(ApiPaths.user_me)).then((response) => {
@@ -27,6 +23,19 @@ export const useApiState = create<ApiStateProps>((set, get) => ({
       };
       set({ user: user });
     });
+  }
+}));
+
+interface ServerApiStateProps {
+  server: ServerAPIProps;
+  setServer: (newServer: ServerAPIProps) => void;
+  fetchServerApiState: () => void;
+}
+
+export const useServerApiState = create<ServerApiStateProps>((set, get) => ({
+  server: emptyServerAPI,
+  setServer: (newServer: ServerAPIProps) => set({ server: newServer }),
+  fetchServerApiState: async () => {
     // Fetch server data
     await api.get('/').then((response) => {
       set({ server: response.data });