adding version banner to check if a new version of fredy is available

ui/src/App.jsx

@@ -18,11 +18,13 @@ import Jobs from './views/jobs/Jobs';
 import './App.less';
 import TrackingModal from './components/tracking/TrackingModal.jsx';
 import { Banner } from '@douyinfe/semi-ui';
+import VersionBanner from './components/version/VersionBanner.jsx';
 
 export default function FredyApp() {
   const actions = useActions();
   const [loading, setLoading] = React.useState(true);
   const currentUser = useSelector((state) => state.user.currentUser);
+  const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   const settings = useSelector((state) => state.generalSettings.settings);
 
   useEffect(() => {
@@ -34,6 +36,7 @@ export default function FredyApp() {
         await actions.jobs.getProcessingTimes();
         await actions.notificationAdapter.getAdapter();
         await actions.generalSettings.getGeneralSettings();
+        await actions.versionUpdate.getVersionUpdate();
       }
       setLoading(false);
     }
@@ -53,7 +56,6 @@ export default function FredyApp() {
       <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
   );
-
   return loading ? null : needsLogin() ? (
     login()
   ) : (
@@ -62,7 +64,7 @@ export default function FredyApp() {
         <Logout />
         <Logo width={190} white />
         <Menu isAdmin={isAdmin()} />
-
+        {versionUpdate?.newVersion && <VersionBanner />}
         {settings.demoMode && (
           <>
             <Banner

ui/src/components/version/VersionBanner.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Banner, Descriptions } from '@douyinfe/semi-ui';
+import { useSelector } from '../../services/state/store.js';
+
+import './VersionBanner.less';
+
+export default function VersionBanner() {
+  const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
+  return (
+    <Banner
+      className="versionBanner"
+      type="success"
+      icon={null}
+      description={
+        <div>
+          <p>A new version of Fredy is available. Update now to take advantage of the latest features and bug fixes.</p>
+          <Descriptions row size="small">
+            <Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
+            <Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item>
+            <Descriptions.Item itemKey="Github Release">
+              <a href={versionUpdate.url} target="_blank" rel="noreferrer">
+                {versionUpdate.url}
+              </a>{' '}
+            </Descriptions.Item>
+          </Descriptions>
+          <p>
+            <b>
+              <small>Release Notes</small>
+            </b>
+          </p>
+          <pre>{stripFullChangelog(versionUpdate.body)}</pre>
+        </div>
+      }
+    />
+  );
+
+  function stripFullChangelog(text) {
+    if (text == null) {
+      return '';
+    }
+    return text.replace(/(?:\r?\n)\*\*Full Changelog\*\*[\s\S]*$/u, '');
+  }
+}

ui/src/components/version/VersionBanner.less

@@ -0,0 +1,3 @@
+.versionBanner {
+  margin-bottom: 1rem;
+}

ui/src/services/state/store.js

@@ -118,6 +118,18 @@ export const useFredyState = create(
             }
           },
         },
+        versionUpdate: {
+          async getVersionUpdate() {
+            try {
+              const response = await xhrGet('/api/version');
+              set((state) => ({
+                versionUpdate: { ...state.versionUpdate, versionUpdate: response.json },
+              }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/version. Error:', Exception);
+            }
+          },
+        },
       };
 
       // Initial state
@@ -125,6 +137,7 @@ export const useFredyState = create(
         notificationAdapter: [],
         generalSettings: { settings: {} },
         demoMode: { demoMode: false },
+        versionUpdate: {},
         provider: [],
         jobs: { jobs: [], insights: {}, processingTimes: {} },
         user: { users: [], currentUser: null },
@@ -135,6 +148,7 @@ export const useFredyState = create(
         notificationAdapter: { ...effects.notificationAdapter },
         generalSettings: { ...effects.generalSettings },
         demoMode: { ...effects.demoMode },
+        versionUpdate: { ...effects.versionUpdate },
         provider: { ...effects.provider },
         jobs: { ...effects.jobs },
         user: { ...effects.user },