Notification: show "not reading latest version" (#47)

It re-uses the code from `NotificationElement`. However, I'm not happy
with the implementation. It seems that they are pretty much different to
make sense to re-use the class.

It seems that what we want here is create a `NotificationBaseElement`
where `NotificationExternalElement` and `NotificationNonLatestElement`
can extend.

### Example


![Screenshot_2023-04-12_16-40-16](https://user-images.githubusercontent.com/244656/231492831-04a9d617-9430-48d4-b921-321ef06aa2b0.png)

Author: humitos

.prettierignore

@@ -1 +1,2 @@
 *.svg
+*.orig

src/notification.js

@@ -1,7 +1,10 @@
+import semverMaxSatisfying from "semver/ranges/max-satisfying";
+import semverCoerce from "semver/functions/coerce";
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
 import {
   faCircleXmark,
   faCodePullRequest,
+  faLayerGroup,
 } from "@fortawesome/free-solid-svg-icons";
 import { html, nothing, render, LitElement } from "lit";
 
@@ -16,6 +19,7 @@ export class NotificationElement extends LitElement {
   static properties = {
     config: { state: true },
     urls: { state: true },
+    highest_version: { state: true },
   };
 
   /** @static @property {Object} - Lit stylesheets to apply to elements */
@@ -30,21 +34,34 @@ export class NotificationElement extends LitElement {
       build: null,
       external: null,
     };
+    this.highest_version = null;
   }
 
   loadConfig(config) {
     this.config = config;
 
-    // TODO: this URL should come from the backend API.
-    // Doing a simple replacement for now to solve the most common cases.
-    const vcs_external_url = config.project.repository_url
-      .replace(".git", "")
-      .replace("[email protected]:", "https://github.com/");
+    if (
+      config.features.external_version_warning.enabled &&
+      config.version.external
+    ) {
+      // TODO: this URL should come from the backend API.
+      // Doing a simple replacement for now to solve the most common cases.
+      const vcs_external_url = config.project.repository_url
+        .replace(".git", "")
+        .replace("[email protected]:", "https://github.com/");
+
+      this.urls = {
+        build: `${window.location.protocol}//${config.domains.dashboard}/projects/${config.project.slug}/builds/${config.build.id}/`,
+        external: `${vcs_external_url}/pull/${config.version.slug}`,
+      };
+    }
 
-    this.urls = {
-      build: `${window.location.protocol}//${config.domains.dashboard}/projects/${config.project.slug}/builds/${config.build.id}/`,
-      external: `${vcs_external_url}/pull/${config.version.slug}`,
-    };
+    if (
+      config.features.non_latest_version_warning.enabled &&
+      !config.version.external
+    ) {
+      this.calculateHighestVersion();
+    }
   }
 
   render() {
@@ -54,14 +71,66 @@ export class NotificationElement extends LitElement {
       return nothing;
     }
 
-    if (
-      this.config.features.external_version_warning.enabled &&
-      this.config.version.external
+    if (this.config.version.external) {
+      if (this.config.features.external_version_warning.enabled) {
+        return this.renderExternalVersionWarning();
+      }
+    } else if (
+      this.config.features.non_latest_version_warning.enabled &&
+      this.highest_version
     ) {
-      return this.renderExternalVersionWarning();
+      return this.renderNonLatestVersionWarning();
     }
+    return nothing;
+  }
 
-    // TODO support the outdated version warning
+  calculateHighestVersion() {
+    // Convert versions like `v1` into `1.0.0` to be able to compare them
+    const versions = this.config.features.non_latest_version_warning.versions;
+    const coercedVersions = versions.map((v) => semverCoerce(v));
+    const coercedHighest = semverMaxSatisfying(coercedVersions, ">=0.0.0");
+
+    // Get back the original `v1` to generate the URLs and display the correct name
+    const index = coercedVersions.indexOf(coercedHighest);
+    const highest = versions[index];
+
+    if (highest && highest !== this.config.version.slug) {
+      this.highest_version = {
+        name: highest,
+        // TODO: get this URL from the API
+        url: `${window.location.protocol}//${window.location.hostname}/${this.config.project.language}/${highest}/`,
+      };
+    }
+  }
+
+  renderNonLatestVersionWarning() {
+    library.add(faCircleXmark);
+    library.add(faLayerGroup);
+    const xmark = icon(faCircleXmark, {
+      title: "Close notification",
+    });
+    const iconLayerGroup = icon(faLayerGroup, {
+      title: "This version is not the latest one",
+      classes: ["header", "icon"],
+    });
+
+    return html`
+      <div>
+        ${iconLayerGroup.node[0]}
+        <div class="title">
+          This is an <span>old version</span>
+          <a href="#" class="right" @click=${this.closeNotification}>
+            ${xmark.node[0]}
+          </a>
+        </div>
+        <div class="content">
+          You are reading an old version of this documentation. The latest
+          stable version is
+          <a href="${this.highest_version.url}">${this.highest_version.name}</a
+          >.
+        </div>
+      </div>
+    `;
   }
 
   renderExternalVersionWarning() {
@@ -149,11 +218,12 @@ export class NotificationAddon extends AddonBase {
    * @param {Object} config - Addon configuration object
    */
   static isEnabled(config) {
-    // TODO support the outdated version warning feature here too.
     return (
-      config.features &&
-      config.features.external_version_warning.enabled &&
-      config.version.external
+      (config.features &&
+        config.features.external_version_warning.enabled &&
+        config.version.external) ||
+      (config.features.non_latest_version_warning.enabled &&
+        !config.version.external)
     );
   }
 }