chore: Cleanup update banner with localstorage updates (#5209)

Co-authored-by: Aswin Dev P.S <aswindevps@gmail.com>

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -12,33 +12,26 @@
 </template>
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
-import LocalStorage from '../../helper/localStorage';
+import { LocalStorage, LOCAL_STORAGE_KEYS } from '../../helper/localStorage';
 import { mapGetters } from 'vuex';
 import adminMixin from 'dashboard/mixins/isAdmin';
-
-const semver = require('semver');
-const dismissedUpdates = new LocalStorage('dismissedUpdates');
+import { hasAnUpdateAvailable } from './versionCheckHelper';
 
 export default {
-  components: {
-    Banner,
-  },
+  components: { Banner },
   mixins: [adminMixin],
   props: {
-    latestChatwootVersion: {
-      type: String,
-      default: '',
-    },
+    latestChatwootVersion: { type: String, default: '' },
+  },
+  data() {
+    return { userDismissedBanner: false };
   },
   computed: {
     ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    hasAnUpdateAvailable() {
-      if (!semver.valid(this.latestChatwootVersion)) {
-        return false;
-      }
-      return semver.lt(
-        this.globalConfig.appVersion,
-        this.latestChatwootVersion
+    updateAvailable() {
+      return hasAnUpdateAvailable(
+        this.latestChatwootVersion,
+        this.globalConfig.appVersion
       );
     },
     bannerMessage() {
@@ -48,8 +41,9 @@ export default {
     },
     shouldShowBanner() {
       return (
+        !this.userDismissedBanner &&
         this.globalConfig.displayManifest &&
-        this.hasAnUpdateAvailable &&
+        this.updateAvailable &&
         !this.isVersionNotificationDismissed(this.latestChatwootVersion) &&
         this.isAdmin
       );
@@ -57,17 +51,23 @@ export default {
   },
   methods: {
     isVersionNotificationDismissed(version) {
-      return dismissedUpdates.get().includes(version);
+      const dismissedVersions =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_UPDATES) || [];
+      return dismissedVersions.includes(version);
     },
     dismissUpdateBanner() {
-      let updatedDismissedItems = dismissedUpdates.get();
+      let updatedDismissedItems =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_UPDATES) || [];
       if (updatedDismissedItems instanceof Array) {
         updatedDismissedItems.push(this.latestChatwootVersion);
       } else {
         updatedDismissedItems = [this.latestChatwootVersion];
       }
-      dismissedUpdates.store(updatedDismissedItems);
-      this.latestChatwootVersion = this.globalConfig.appVersion;
+      LocalStorage.set(
+        LOCAL_STORAGE_KEYS.DISMISSED_UPDATES,
+        updatedDismissedItems
+      );
+      this.userDismissedBanner = true;
     },
   },
 };

app/javascript/dashboard/components/app/specs/versionCheckHelper.spec.js

@@ -0,0 +1,15 @@
+import { hasAnUpdateAvailable } from '../versionCheckHelper';
+
+describe('#hasAnUpdateAvailable', () => {
+  it('return false if latest version is invalid', () => {
+    expect(hasAnUpdateAvailable('invalid', '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable(null, '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable(undefined, '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable('', '1.0.0')).toBe(false);
+  });
+
+  it('return correct value if latest version is valid', () => {
+    expect(hasAnUpdateAvailable('1.1.0', '1.0.0')).toBe(true);
+    expect(hasAnUpdateAvailable('0.1.0', '1.0.0')).toBe(false);
+  });
+});

app/javascript/dashboard/components/app/versionCheckHelper.js

@@ -0,0 +1,8 @@
+const semver = require('semver');
+
+export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
+  if (!semver.valid(latestVersion)) {
+    return false;
+  }
+  return semver.lt(currentVersion, latestVersion);
+};