Add semver compatibility checking

ext/src/_locales/en/messages.json

@@ -24,6 +24,9 @@
   , "optionsBridgeFoundStatusText": {
         "message": "Bridge found"
     }
+  , "optionsBridgeIssueStatusText": {
+        "message": "Bridge issue"
+    }
   , "optionsBridgeNotFoundStatusText": {
         "message": "Bridge not found. Try downloading and installing the latest version."
     }
@@ -45,6 +48,9 @@
   , "optionsBridgeCompatible": {
         "message": "COMPATIBLE"
     }
+  , "optionsBridgeMaybeCompatible": {
+        "message": "MAYBE COMPATIBLE"
+    }
   , "optionsBridgeIncompatible": {
         "message": "INCOMPATIBLE"
     }

ext/src/lib/getBridgeInfo.js

@@ -14,24 +14,36 @@ export default async function getBridgeInfo () {
     }
 
     /**
-     * Compare installed bridge version to the version the
-     * extension was built alongside and is known to be
-     * compatible with.
-     *
-     * TODO: Determine compatibility with semver and enforce/notify
-     * user.
+     * If the target version is above 0.x.x range, API is stable
+     * and versions with minor or patch level changes should be
+     * compatible.
      */
-    if (applicationVersion !== APPLICATION_VERSION) {
+    const isVersionCompatible =
+            semver.eq(applicationVersion, APPLICATION_VERSION)
+         || semver.diff(applicationVersion, APPLICATION_VERSION) !== "major"
+         && semver.major(APPLICATION_VERSION) !== 0;
+
+    const isVersionExact = semver.eq(applicationVersion, APPLICATION_VERSION);
+    const isVersionOlder = semver.lt(applicationVersion, APPLICATION_VERSION);
+    const isVersionNewer = semver.gt(applicationVersion, APPLICATION_VERSION);
+
+    // Print compatibility info to console
+    if (!isVersionCompatible) {
         console.error(`Expecting ${APPLICATION_NAME} v${APPLICATION_VERSION}, found v${applicationVersion}.`
-              , semver.lt(applicationVersion, APPLICATION_VERSION)
+              , isVersionOlder
                     ? "Try updating the native app to the latest version."
                     : "Try updating the extension to the latest version");
     }
 
     return {
-        version: applicationVersion
-      , isVersionCompatible: applicationVersion === APPLICATION_VERSION
-      , isVersionOlder: semver.lt(applicationVersion, APPLICATION_VERSION)
-      , isVersionNewer: semver.gt(applicationVersion, APPLICATION_VERSION)
+        name: APPLICATION_NAME
+      , version: applicationVersion
+      , expectedVersion: APPLICATION_VERSION
+
+        // Version info
+      , isVersionExact
+      , isVersionCompatible
+      , isVersionOlder
+      , isVersionNewer
     };
 }

ext/src/options/index.jsx

@@ -180,18 +180,29 @@ class App extends Component {
                                 ? "bridge__info--found"
                                 : "bridge__info--not-found"}`;
 
+                            const [ statusIcon, statusText ] = do {
+                                if (!bridgeInfo) {
+                                    [ "assets/icons8-cancel-120.png"
+                                      , _("optionsBridgeNotFoundStatusText") ]
+                                } else {
+                                    if (bridgeInfo.isVersionExact) {
+                                        [ "assets/icons8-ok-120.png"
+                                          , _("optionsBridgeFoundStatusText") ]
+                                    } else {
+                                        [ "assets/icons8-warn-120.png"
+                                          , _("optionsBridgeIssueStatusText") ]
+                                    }
+                                }
+                            };
+
                             <div className={bridgeInfoClasses}>
                                 <div className="bridge__status">
                                     <img className="bridge__status-icon"
                                          width="60" height="60"
-                                         src={ bridgeInfo
-                                                ? "assets/icons8-ok-120.png"
-                                                : "assets/icons8-cancel-120.png" } />
+                                         src={ statusIcon } />
 
                                     <h2 className="bridge__status-text">
-                                        { bridgeInfo
-                                            ? _("optionsBridgeFoundStatusText")
-                                            : _("optionsBridgeNotFoundStatusText") }
+                                        { statusText }
                                     </h2>
                                 </div>
 
@@ -203,14 +214,22 @@ class App extends Component {
                                         </tr>
                                         <tr>
                                             <th>{ _("optionsBridgeStatsExpectedVersion") }</th>
-                                            <td>{ APPLICATION_VERSION }</td>
+                                            <td>{ bridgeInfo.expectedVersion }</td>
                                         </tr>
                                         <tr>
                                             <th>{ _("optionsBridgeStatsCompatibility") }</th>
                                             <td>
-                                                { bridgeInfo.isVersionCompatible
-                                                    ? _("optionsBridgeCompatible")
-                                                    : _("optionsBridgeIncompatible") }
+                                                { do {
+                                                    if (bridgeInfo.isVersionCompatible) {
+                                                        if (bridgeInfo.isVersionExact) {
+                                                            _("optionsBridgeCompatible")
+                                                        } else {
+                                                            _("optionsBridgeMaybeCompatible")
+                                                        }
+                                                    } else {
+                                                        _("optionsBridgeIncompatible")
+                                                    }
+                                                }}
                                             </td>
                                         </tr>
                                         <tr>

ext/src/options/styles/index.css

@@ -50,14 +50,6 @@
     width: 100%;
 }
 
-.bridge__missing {
-    background-color: #d70022;
-    border-radius: 5px;
-    color: white;
-    padding: 5px;
-    margin-top: 5px;
-}
-
 .bridge__info {
     display: flex;
 }