chore: months old version banner (#9352)

https://linear.app/unleash/issue/2-3309/warn-users-of-lagging-versions-3-months-old

Adds a banner warning users in case they are running an outdated Unleash
version (>=3 months old) in case the build date data is present.

When clicking "Changelog" the users are redirected to
https://github.com/Unleash/unleash/releases.


![image](https://github.com/user-attachments/assets/f6b9b361-e780-4558-8b6c-5987b12efe68)

Author: nunogois

frontend/src/component/App.tsx

@@ -23,6 +23,7 @@ import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
 import { Demo } from './demo/Demo';
 import { LoginRedirect } from './common/LoginRedirect/LoginRedirect';
 import { SecurityBanner } from './banners/internalBanners/SecurityBanner';
+import { MonthsOldVersionBanner } from './banners/internalBanners/MonthsOldVersionBanner';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -67,6 +68,7 @@ export const App = () => {
                                 />
                                 <LicenseBanner />
                                 <SecurityBanner />
+                                <MonthsOldVersionBanner />
                                 <ExternalBanners />
                                 <InternalBanners />
                                 <StyledContainer>

frontend/src/component/banners/internalBanners/MonthsOldVersionBanner.tsx

@@ -0,0 +1,33 @@
+import { Banner } from '../Banner/Banner';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { parseValidDate } from 'component/common/util';
+import { differenceInMonths } from 'date-fns';
+
+export const MonthsOldVersionBanner = () => {
+    const {
+        uiConfig: { versionInfo },
+    } = useUiConfig();
+
+    if (!versionInfo?.buildDate) return null;
+
+    const buildDate = parseValidDate(versionInfo.buildDate);
+
+    if (!buildDate) return null;
+
+    const monthsOld = differenceInMonths(new Date(), new Date(buildDate));
+
+    const isOldBuild = monthsOld >= 3;
+
+    if (!isOldBuild) return null;
+
+    return (
+        <Banner
+            banner={{
+                message: `Your Unleash version is ${monthsOld} months old. Please consider upgrading.`,
+                variant: 'warning',
+                link: 'https://github.com/Unleash/unleash/releases',
+                linkText: 'Changelog',
+            }}
+        />
+    );
+};

frontend/src/interfaces/uiConfig.ts

@@ -102,6 +102,7 @@ export interface IVersionInfo {
     isLatest: boolean;
     latest: Partial<IVersion>;
     current: IVersion;
+    buildDate?: string;
 }
 
 export interface IVersion {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -23,6 +23,7 @@ exports[`should create default config 1`] = `
     "initialAdminUser": undefined,
     "type": "open-source",
   },
+  "buildDate": undefined,
   "clientFeatureCaching": {
     "enabled": true,
     "maxAge": 3600000,

src/lib/create-config.ts

@@ -795,6 +795,7 @@ export function createConfig(options: IUnleashOptions): IUnleashConfig {
         dailyMetricsStorageDays,
         openAIAPIKey,
         userInactivityThresholdInDays,
+        buildDate: process.env.BUILD_DATE,
     };
 }
 

src/lib/openapi/spec/version-schema.ts

@@ -56,6 +56,14 @@ export const versionSchema = {
             description: 'The instance identifier of the Unleash instance',
             example: '0d652a82-43db-4144-8e02-864b0b030710',
         },
+        buildDate: {
+            description:
+                'The date and time of when this Unleash instance version was built',
+            type: 'string',
+            format: 'date-time',
+            nullable: true,
+            example: '2023-06-30T11:41:00.123Z',
+        },
     },
     components: {},
 } as const;

src/lib/services/version-service.ts

@@ -15,6 +15,7 @@ export interface IVersionHolder {
     latest: Partial<IVersionInfo>;
     isLatest: boolean;
     instanceId: string;
+    buildDate?: string;
 }
 
 export interface IVersionResponse {
@@ -72,16 +73,23 @@ export default class VersionService {
 
     private timer: NodeJS.Timeout;
 
+    private readonly buildDate?: string;
+
     constructor(
         { settingStore }: Pick<IUnleashStores, 'settingStore'>,
         {
             getLogger,
             versionCheck,
             enterpriseVersion,
             telemetry,
+            buildDate,
         }: Pick<
             IUnleashConfig,
-            'getLogger' | 'versionCheck' | 'enterpriseVersion' | 'telemetry'
+            | 'getLogger'
+            | 'versionCheck'
+            | 'enterpriseVersion'
+            | 'telemetry'
+            | 'buildDate'
         >,
     ) {
         this.logger = getLogger('lib/services/version-service.js');
@@ -94,6 +102,7 @@ export default class VersionService {
         this.telemetryEnabled = telemetry;
         this.versionCheckUrl = versionCheck.url;
         this.isLatest = true;
+        this.buildDate = buildDate;
     }
 
     private async readInstanceId(): Promise<string | undefined> {
@@ -164,6 +173,7 @@ export default class VersionService {
             latest: this.latest || {},
             isLatest: this.isLatest,
             instanceId: instanceId || 'unresolved-instance-id',
+            buildDate: this.buildDate,
         };
     }
 }

src/lib/types/option.ts

@@ -286,4 +286,5 @@ export interface IUnleashConfig {
     feedbackUriPath?: string;
     openAIAPIKey?: string;
     userInactivityThresholdInDays: number;
+    buildDate?: string;
 }