feat: display release notes card when update is available

src/client/mocks/handlers.ts

@@ -7,7 +7,7 @@ export const handlers = [
   getTRPCMock({
     path: ['system', 'getVersion'],
     type: 'query',
-    response: { current: '1.0.0', latest: '1.0.0' },
+    response: { current: '1.0.0', latest: '1.0.0', body: 'hello' },
   }),
   getTRPCMock({
     path: ['system', 'update'],

src/client/modules/Settings/containers/GeneralActions/GeneralActions.test.tsx

@@ -13,7 +13,7 @@ describe('Test: GeneralActions', () => {
 
   it('should show toast if update mutation fails', async () => {
     // arrange
-    server.use(getTRPCMock({ path: ['system', 'getVersion'], response: { current: '1.0.0', latest: '2.0.0' } }));
+    server.use(getTRPCMock({ path: ['system', 'getVersion'], response: { current: '1.0.0', latest: '2.0.0', body: '' } }));
     server.use(getTRPCMockError({ path: ['system', 'update'], type: 'mutation', status: 500, message: 'Something went wrong' }));
     render(<GeneralActions />);
     await waitFor(() => {
@@ -35,7 +35,7 @@ describe('Test: GeneralActions', () => {
   it('should log user out if update is successful', async () => {
     // arrange
     localStorage.setItem('token', '123');
-    server.use(getTRPCMock({ path: ['system', 'getVersion'], response: { current: '1.0.0', latest: '2.0.0' } }));
+    server.use(getTRPCMock({ path: ['system', 'getVersion'], response: { current: '1.0.0', latest: '2.0.0', body: '' } }));
     server.use(getTRPCMock({ path: ['system', 'update'], response: true }));
     render(<GeneralActions />);
     await waitFor(() => {

src/client/modules/Settings/containers/GeneralActions/GeneralActions.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import semver from 'semver';
 import { toast } from 'react-hot-toast';
+import Markdown from '@/components/Markdown/Markdown';
+import { IconStar } from '@tabler/icons-react';
 import { Button } from '../../../../components/ui/Button';
 import { useDisclosure } from '../../../../hooks/useDisclosure';
 import { RestartModal } from '../../components/RestartModal';
@@ -60,18 +62,31 @@ export const GeneralActions = () => {
 
     return (
       <div>
-        <Button onClick={updateDisclosure.open} className="mr-2 btn-success">
+        {versionQuery.data?.body && (
+          <div className="mt-3 card col-4">
+            <div className="card-stamp">
+              <div className="card-stamp-icon bg-yellow">
+                <IconStar size={80} />
+              </div>
+            </div>
+            <div className="card-body">
+              <Markdown className="">{versionQuery.data.body}</Markdown>
+            </div>
+          </div>
+        )}
+        <Button onClick={updateDisclosure.open} className="mt-3 mr-2 btn-success">
           Update to {versionQuery.data?.latest}
         </Button>
       </div>
     );
   };
+
   return (
     <>
       <div className="card-body">
         <h2 className="mb-4">Actions</h2>
-        <h3 className="card-title mt-4">Version {versionQuery.data?.current}</h3>
-        <p className="card-subtitle">Stay up to date with the latest version of Tipi</p>
+        <h3 className="card-title mt-4">Current version: {versionQuery.data?.current}</h3>
+        <p className="card-subtitle">{isLatest ? 'Stay up to date with the latest version of Tipi' : `A new version (${versionQuery.data?.latest}) of Tipi is available`}</p>
         {renderUpdate()}
         <h3 className="card-title mt-4">Maintenance</h3>
         <p className="card-subtitle">Common actions to perform on your instance</p>