Notify Administrators when there is a new version of Praise out

docker-compose.development.yml

@@ -50,12 +50,6 @@ services:
     links:
       - api
 
-  watchtower:
-    image: containrrr/watchtower
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock      
-    command: --interval 1800
-
 volumes:
   mongodb_data:
   caddy_data:

docker-compose.production.yml

@@ -50,12 +50,6 @@ services:
     links:
       - api
 
-  watchtower:
-    image: containrrr/watchtower
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock      
-    command: --interval 43200
-
 volumes:
   mongodb_data:
   caddy_data:

packages/frontend/.env.template

@@ -10,3 +10,10 @@ REACT_APP_SERVER_URL=https://localhost
 
 # Port number used when running frontend for development, outside of Docker
 PORT=3000
+
+# App version from package.json
+REACT_APP_VERSION=$npm_package_version
+
+# Github repo info
+REACT_APP_GITHUB_REPO_OWNER=commons-stack
+REACT_APP_GITHUB_REPO_NAME=praise

packages/frontend/src/layouts/AuthenticatedLayout.tsx

@@ -7,14 +7,18 @@ import { useRecoilValue } from 'recoil';
 import { SingleSetting, useAllSettingsQuery } from '@/model/settings';
 import { useAllPeriodsQuery } from '@/model/periods';
 import { useAllUsersQuery } from '@/model/users';
-import { ActiveUserRoles } from '@/model/auth';
+import { ActiveUserRoles, HasRole, ROLE_ADMIN } from '@/model/auth';
 import { Nav } from '@/navigation/Nav';
 import { AuthenticatedRoutes } from '@/navigation/AuthenticatedRoutes';
+import { usePraiseAppVersion } from '@/model/app';
 
 export const AuthenticatedLayout = (): JSX.Element | null => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const siteNameSetting = useRecoilValue(SingleSetting('NAME'));
   const activeUserRoles = useRecoilValue(ActiveUserRoles);
+  const isAdmin = useRecoilValue(HasRole(ROLE_ADMIN));
+  const appVersion = usePraiseAppVersion();
+
   useAllPeriodsQuery();
   useAllSettingsQuery();
   useAllUsersQuery();
@@ -83,6 +87,27 @@ export const AuthenticatedLayout = (): JSX.Element | null => {
         </Dialog>
       </Transition.Root>
 
+      {isAdmin && appVersion.newVersionAvailable && (
+        <div className="sticky top-0 p-3 text-center bg-opacity-50 bg-warm-gray-100 lg:pl-64">
+          <p>
+            🎉 There is a new version of the Praise out! You are running{' '}
+            {appVersion.current}, latest version is {appVersion.latest}.{' '}
+            <a
+              href="https://github.com/commons-stack/praise/releases"
+              className="font-bold"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Release notes
+            </a>
+          </p>
+        </div>
+      )}
+
+      <div className="fixed bottom-0 right-0 invisible p-1 text-xs text-right lg:visible">
+        {appVersion.current}
+      </div>
+
       {/* Static sidebar for desktop */}
       <div className="hidden w-64 lg:flex lg:flex-col lg:fixed lg:inset-y-0">
         {/* Sidebar component, swap this element with another sidebar if you like */}

packages/frontend/src/model/api.ts

@@ -8,7 +8,7 @@ import {
 } from 'recoil';
 import { makeApiAuthClient } from '../utils/api';
 
-type RequestParams = {
+export type RequestParams = {
   [key: string]: SerializableParam;
   url: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/frontend/src/model/app.ts

@@ -0,0 +1,44 @@
+import { AxiosResponse } from 'axios';
+import { selector, useRecoilValue } from 'recoil';
+import { isResponseOk } from './api';
+import { ExternalGet } from './axios';
+
+export interface GithubResponse {
+  name: string;
+}
+
+export const GithubVersionQuery = selector({
+  key: 'GithubVersionQuery',
+  get: ({ get }): AxiosResponse<GithubResponse> => {
+    const repoOwner = process.env.REACT_APP_GITHUB_REPO_OWNER;
+    const repoName = process.env.REACT_APP_GITHUB_REPO_NAME;
+
+    return get(
+      ExternalGet({
+        url: `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`,
+      })
+    ) as AxiosResponse<GithubResponse>;
+  },
+});
+
+interface PraiseAppVersion {
+  current: string | undefined;
+  latest: string | undefined;
+  newVersionAvailable: boolean;
+}
+
+export const usePraiseAppVersion = (): PraiseAppVersion => {
+  const appVersion: PraiseAppVersion = {
+    current: process.env.REACT_APP_VERSION,
+    latest: undefined,
+    newVersionAvailable: false,
+  };
+
+  const response = useRecoilValue(GithubVersionQuery);
+  if (isResponseOk(response)) {
+    appVersion.latest = (response.data as GithubResponse).name.substring(1);
+    appVersion.newVersionAvailable = appVersion.latest !== appVersion.current;
+  }
+
+  return appVersion;
+};

packages/frontend/src/model/axios.ts

@@ -0,0 +1,22 @@
+import { AxiosResponse } from 'axios';
+import { selectorFamily } from 'recoil';
+import { makeClient } from '@/utils/axios';
+import { RequestParams } from './api';
+
+/**
+ * External GET request
+ */
+export const ExternalGet = selectorFamily<
+  AxiosResponse<unknown>,
+  RequestParams
+>({
+  key: 'ExternalGet',
+  get: (params: RequestParams) => async (): Promise<AxiosResponse<unknown>> => {
+    const { config, url } = params;
+
+    const client = makeClient();
+    const response = await client.get(url, config);
+
+    return response;
+  },
+});

packages/frontend/src/styles/globals.css

@@ -11,7 +11,7 @@
     @apply dark:border-slate-700;
   }
   #root {
-    @apply min-h-screen text-sm text-warm-gray-800 dark:bg-slate-800 dark:text-white bg-warm-gray-300;
+    @apply min-h-screen text-sm text-warm-gray-800 dark:bg-slate-800 dark:text-white bg-warm-gray-200;
   }
 
   h2 {

packages/frontend/src/utils/api.ts

@@ -1,9 +1,9 @@
 import axios, { AxiosError, AxiosInstance } from 'axios';
 import createAuthRefreshInterceptor from 'axios-auth-refresh';
-import { toast } from 'react-hot-toast';
 import { getRecoil } from 'recoil-nexus';
 import { ActiveTokenSet } from '@/model/auth';
 import { requestApiAuthRefresh } from './auth';
+import { handleErrors } from './axios';
 
 /**
  * Attempt to refresh auth token and retry request
@@ -19,32 +19,6 @@ const refreshAuthTokenSet = async (err: AxiosError): Promise<void> => {
   ] = `Bearer ${tokenSet.accessToken}`;
 };
 
-/**
- * Handle error responses (excluding initial 401 response)
- *
- * @param err
- */
-const handleErrors = (err: AxiosError): void => {
-  // Any HTTP Code which is not 2xx will be considered as error
-  const statusCode = err?.response?.status;
-
-  if (err?.request && !err?.response) {
-    toast.error('Server did not respond');
-  } else if (statusCode === 404) {
-    window.location.href = '/404';
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-  } else if ([403, 400].includes(statusCode) && err?.response?.data?.message) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    toast.error(err.response.data.message);
-  } else if (statusCode === 401) {
-    window.location.href = '/';
-  } else {
-    toast.error('Unknown Error');
-  }
-};
-
 /**
  * We assume the API to be running on the same domain in production currently.
  * Why? The frontend is built as a static website and cannot easily accept

packages/frontend/src/utils/axios.ts

@@ -0,0 +1,44 @@
+import axios, { AxiosError, AxiosInstance } from 'axios';
+import { toast } from 'react-hot-toast';
+
+/**
+ * Handle error responses (excluding initial 401 response)
+ *
+ * @param err
+ */
+export const handleErrors = (err: AxiosError): void => {
+  // Any HTTP Code which is not 2xx will be considered as error
+  const statusCode = err?.response?.status;
+
+  if (err?.request && !err?.response) {
+    toast.error('Server did not respond');
+  } else if (statusCode === 404) {
+    window.location.href = '/404';
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+  } else if ([403, 400].includes(statusCode) && err?.response?.data?.message) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    toast.error(err.response.data.message);
+  } else if (statusCode === 401) {
+    window.location.href = '/';
+  } else {
+    toast.error('Unknown Error');
+  }
+};
+
+/**
+ * Client for external requests.
+ * @returns
+ */
+export const makeClient = (): AxiosInstance => {
+  const client = axios.create();
+
+  client.interceptors.response.use(
+    (res) => res,
+    (err) => {
+      return handleErrors(err);
+    }
+  );
+  return client;
+};