Update to read app version from package.json and display an alert if …

…new version available

Signed-off-by: Vanessa Fotso <vfotso@mitre.org>

app/javascript/components/navbar/App.vue

@@ -3,9 +3,8 @@
  <b-navbar toggleable="lg" type="dark" variant="dark">
  <b-navbar-brand id="heading" href="/">
  <i class="mdi mdi-radar" aria-hidden="true" />
- VULCAN <span class="latest-release">{{ latestRelease }}</span>
+ VULCAN <span class="latest-release">{{ currentVersion }}</span>
  </b-navbar-brand>
-
  <b-navbar-toggle target="nav-collapse" />
 
  <b-collapse id="nav-collapse" is-nav>
@@ -34,12 +33,22 @@
  </div>
  </b-collapse>
  </b-navbar>
+ <b-alert
+ dismissible
+ fade
+ :show="updateAvailable"
+ class="text-center"
+ @dismissed="updateAvailable = false"
+ >
+ New version: Vulcan {{ latestRelease }} is now available!!
+ </b-alert>
  </div>
 </template>
 
 <script>
 import NavbarItem from "./NavbarItem.vue";
 import SrgIdSearch from "./SrgIdSearch.vue";
+import { version } from "../../../../package.json";
 
 export default {
  name: "Navbar",
@@ -69,6 +78,8 @@ export default {
  data() {
  return {
  latestRelease: "",
+ currentVersion: version,
+ updateAvailable: false,
  };
  },
  mounted() {
@@ -78,18 +89,20 @@ export default {
  fetchLatestRelease() {
  const owner = "mitre";
  const repo = "vulcan";
-
  // Make the API request to fetch the latest release
  fetch(`https://api.github.com/repos/${owner}/${repo}/releases/latest`)
  .then((response) => response.json())
  .then((data) => {
- this.latestRelease = data.tag_name;
+ this.latestRelease = data.tag_name.substring(1);
+ this.updateAvailable = this.checkUpdateAvailable();
  })
  .catch((error) => {
- // console.error("Error fetching latest release:", error);
  this.latestRelease = "";
  });
  },
+ checkUpdateAvailable() {
+ return this.latestRelease.trim() !== "" && this.latestRelease !== this.currentVersion;
+ },
  },
 };
 </script>

package.json

@@ -22,7 +22,7 @@
  "vue-template-compiler": "^2.6.11",
  "vue-turbolinks": "^2.1.0"
  },
- "version": "0.1.0",
+ "version": "2.1.1",
  "devDependencies": {
  "eslint": "^8.25.0",
  "eslint-config-prettier": "^8.3.0",