Feature #774: Show message if Central version is too old

src/components/app.vue

@@ -14,6 +14,7 @@ except according to the terms contained in the LICENSE file.
     <!-- If the user's session is restored during the initial navigation, that
     will affect how the navbar is rendered. -->
     <navbar v-if="!$route.meta.standalone" v-show="routerReady"/>
+    <outdated-version/>
     <alert id="app-alert"/>
     <feedback-button v-if="showsFeedbackButton"/>
     <!-- Specifying .capture so that an alert is not hidden immediately if it
@@ -48,7 +49,12 @@ import { loadAsync } from '../util/load-async';
 
 export default {
   name: 'App',
-  components: { Alert, Navbar, FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton')) },
+  components: {
+    Alert,
+    Navbar,
+    FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton')),
+    OutdatedVersion: defineAsyncComponent(loadAsync('OutdatedVersion'))
+  },
   inject: ['alert', 'config'],
   setup() {
     const { visiblyLoggedIn } = useSessions();
@@ -87,14 +93,14 @@ export default {
   },
   methods: {
     checkVersion() {
-      const previousVersion = this.centralVersion.data;
+      const previousVersion = this.centralVersion.versionText;
       return this.centralVersion.request({
         url: '/version.txt',
         clear: false,
         alert: false
       })
         .then(() => {
-          if (previousVersion == null || this.centralVersion.data === previousVersion)
+          if (previousVersion == null || this.centralVersion.versionText === previousVersion)
             return false;
 
           // Alert the user about the version change, then keep alerting them.

src/components/home/news.vue

@@ -15,17 +15,29 @@ except according to the terms contained in the LICENSE file.
       <span>{{ $t('title') }}</span>
     </template>
     <template #body>
-      <iframe src="https://getodk.github.io/central/news.html" :title="$t('title')"></iframe>
+      <iframe :src="iframeSrc" :title="$t('title')"></iframe>
     </template>
   </page-section>
 </template>
 
 <script setup>
+import { computed, inject } from 'vue';
+import { useRequestData } from '../../request-data';
 import PageSection from '../page/section.vue';
 
 defineOptions({
   name: 'HomeNews'
 });
+
+const { centralVersion } = useRequestData();
+
+
+const container = inject('container');
+const { i18n: globalI18n } = container;
+const languageSubtag = computed(() => new Intl.Locale(globalI18n.locale).language);
+
+const iframeSrc = computed(() => `https://getodk.github.io/central/news.html?version=${centralVersion.data?.currentVersion}&lang=${languageSubtag.value}`);
+
 </script>
 
 <style lang="scss">

src/components/outdated-version-banner.vue

@@ -0,0 +1,114 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<template>
+  <div v-if="showBanner" class="outdated-version-banner">
+    <iframe :src="iframeSrc" :title="$t('title')"></iframe>
+
+    <a class="btn btn-primary"
+      href="https://docs.getodk.org/central-upgrade/"
+      target="_blank" rel="noopener"
+      v-tooltip.aria-describedby="$t('instructionsToUpgradeTooltip')">
+        {{ $t('instructionsToUpgrade') }}
+    </a>
+
+    <button class="btn btn-danger"
+      type="button"
+      v-tooltip.aria-describedby="$t('dismissTooltip')"
+      @click="dismiss">
+        {{ $t('dismiss') }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import { useRequestData } from '../request-data';
+import { useSessions } from '../util/session';
+
+const { visiblyLoggedIn } = useSessions();
+
+const { centralVersion, currentUser } = useRequestData();
+
+defineOptions({
+  name: 'OutdatedVersionBanner'
+});
+
+const container = inject('container');
+const { i18n: globalI18n } = container;
+const languageSubtag = computed(() => new Intl.Locale(globalI18n.locale).language);
+
+const iframeSrc = computed(() => `https://sadiqkhoja.com/central/outdated-version.html?version=${centralVersion.data?.currentVersion}&lang=${languageSubtag.value}`);
+
+const showBanner = computed(() => {
+  // user is not logged in or doesn't have ability to set config (implying not an admin)
+  if (!currentUser.dataExists || !visiblyLoggedIn || !currentUser.can('config.set')) return false;
+  if (!centralVersion.dataExists) return false;
+
+  // User has seen the warning in the last 30 days, so don't show it again
+  // 864E5 is the number of milliseconds in a day
+  const dismissDate = currentUser.preferences?.site?.outdatedVersionWarningDismissDate;
+  if (dismissDate && centralVersion.currentDate.getTime() < (dismissDate.getTime() + (864E5 * 30))) return false;
+
+  // Difference between current year and Central version year is less than 2
+  const centralVersionYear = Number(centralVersion.currentVersion.match(/^(\d{4})/)[1]);
+  const currentYear = centralVersion.currentDate.getFullYear();
+  if (currentYear - centralVersionYear < 2) return false;
+
+  return true;
+});
+
+const dismiss = () => {
+  currentUser.preferences.site.outdatedVersionWarningDismissDate = centralVersion.currentDate;
+};
+</script>
+
+<style lang="scss">
+@import '../assets/scss/variables';
+
+.outdated-version-banner {
+  background-color: $color-danger-light;
+  border: 1px solid $color-danger;
+  border-radius: 8px;
+  padding: 0 20px 20px 20px;
+  text-align: center;
+  width: 700px;
+  margin: 20px auto;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+  iframe {
+    border-width: 0;
+    height: 250px;
+    width: 600px;
+    margin: 0 auto;
+  }
+
+  .btn {
+    margin: 0 5px;
+    min-width: 100px;
+  }
+}
+
+</style>
+
+<i18n lang="json5">
+  {
+    "en": {
+      // This is a title for the outdated version banner shown for the screenreaders only
+      "title": "Outdate Version",
+      "instructionsToUpgrade": "Instructions to upgrade",
+      "instructionsToUpgradeTooltip": "Click here to see the instructions to upgrade the Central",
+      "dismiss": "Dismiss for 30 days",
+      "dismissTooltip": "Click here to dismiss this warning for 30 days."
+    }
+  }
+  </i18n>

src/request-data/resources.js

@@ -40,7 +40,14 @@ export default ({ i18n, http }, createResource) => {
       : configDefaults),
     loaded: computed(() => config.dataExists && config.loadError == null)
   }));
-  createResource('centralVersion');
+  createResource('centralVersion', () => ({
+    transformResponse: ({ data, headers }) =>
+      shallowReactive({
+        versionText: data,
+        currentVersion: data.match(/\(v(\d{4}[^-]*)/)[1],
+        currentDate: new Date(headers.get('date'))
+      })
+  }));
   createResource('analyticsConfig', noargs(setupOption));
   createResource('roles', (roles) => ({
     bySystem: computeIfExists(() => {

src/request-data/user-preferences/normalizers.js

@@ -33,6 +33,21 @@ export class SitePreferenceNormalizer extends PreferenceNormalizer {
   static projectSortMode(val) {
     return ['alphabetical', 'latest', 'newest'].includes(val) ? val : 'latest';
   }
+
+  static outdatedVersionWarningDismissDate(val) {
+    // Frontend to Backend
+    if (val instanceof Date) {
+      return val.toISOString();
+    }
+
+    // Backend to Frontend
+    const isoDateRegex = /^\d{4}-\d{2}-\d{2}([T](\d{2}:\d{2}:\d{2}(\.\d+)?Z)?)?$/;
+    if (typeof (val) === 'string' && isoDateRegex.test(val)) {
+      return new Date(val);
+    }
+
+    return null;
+  }
 }
 
 export class ProjectPreferenceNormalizer extends PreferenceNormalizer {

src/util/load-async.js

@@ -151,6 +151,10 @@ const loaders = new Map()
     /* webpackChunkName: "component-not-found" */
     '../components/not-found.vue'
   )))
+  .set('OutdatedVersion', loader(() => import(
+    /* webpackChunkName: "component-not-found" */
+    '../components/outdated-version-banner.vue'
+  )))
   .set('ProjectFormAccess', loader(() => import(
     /* webpackChunkName: "component-project-form-access" */
     '../components/project/form-access.vue'

transifex/strings_en.json

@@ -3620,6 +3620,24 @@
         }
       }
     },
+    "OutdatedVersionBanner": {
+      "title": {
+        "string": "Outdate Version",
+        "developer_comment": "This is a title for the outdated version banner shown for the screenreaders only"
+      },
+      "instructionsToUpgrade": {
+        "string": "Instructions to upgrade"
+      },
+      "instructionsToUpgradeTooltip": {
+        "string": "Click here to see the instructions to upgrade the Central"
+      },
+      "dismiss": {
+        "string": "Dismiss for 30 days"
+      },
+      "dismissTooltip": {
+        "string": "Click here to dismiss this warning for 30 days."
+      }
+    },
     "Pagination": {
       "action": {
         "first": {