Merge pull request #486 from appwrite/check-new-version

Check for new version on Appwrite console

app/controllers/web/console.php

@@ -374,4 +374,24 @@ App::get('/console/functions/function')
         $layout
             ->setParam('title', APP_NAME.' - Function')
             ->setParam('body', $page);
-    }, ['layout']);
+    }, ['layout']);
+
+App::get('/console/version')
+    ->groups(['web', 'console'])
+    ->desc('Check for new version')
+    ->label('permission', 'public')
+    ->label('scope', 'console')
+    ->action(function ($response) {
+        try {
+            $version = \json_decode(@\file_get_contents(App::getEnv('_APP_HOME', 'http://localhost').'/v1/health/version'), true);
+            
+            if($version && isset($version['version'])) {
+                return $response->json(['version' => $version['version']]);
+            }
+            else {
+                throw new Exception('Failed to check for a newer version', 500);
+            }
+        } catch (\Throwable $th) {
+            throw new Exception('Failed to check for a newer version', 500);
+        }
+    }, ['response']);

app/views/console/comps/header.phtml

@@ -1,4 +1,4 @@
-<header class="clear">
+<header class="clear" data-version>
     <a href="/console" class="logo pull-start">
         <img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" loading="lazy" />
         <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" loading="lazy" />

app/views/console/index.phtml

@@ -1,6 +1,7 @@
 <?php
 $home = $this->getParam('home', '');
 ?>
+
 <div class="cover">
     <div class="zone xl">
 

app/views/layouts/default.phtml

@@ -68,7 +68,8 @@ if(!empty($platforms)) {
 
         var APP_ENV = {
             NAME: '<?php echo APP_NAME; ?>',
-            VERSION: '<?php echo $version; ?>/<?php echo APP_CACHE_BUSTER; ?>',
+            VERSION: '<?php echo $version; ?>',
+            CACHEBUSTER: '<?php echo $version; ?>/<?php echo APP_CACHE_BUSTER; ?>',
             PROTOCOL: '<?php echo $protocol; ?>',
             DOMAIN: '<?php echo $domain; ?>',
             HOME: '<?php echo $this->escape($this->getParam('home')); ?>',
@@ -130,7 +131,7 @@ if(!empty($platforms)) {
                     <span data-ls-bind="{{alert.text}}"></span>
 
                     <span data-ls-if="undefined !== {{alert.link}}">
-                        <a data-ls-attrs="href={{alert.link}}" data-remove>Learn more</a>
+                        <a data-ls-attrs="href={{alert.link}}" data-ls-bind="{{alert.label}}" data-remove></a>
                     </span>
                 </div>
             </li>

gulpfile.js

@@ -69,6 +69,7 @@ const configApp  = {
         'public/scripts/views/general/setup.js',
         'public/scripts/views/general/switch.js',
         'public/scripts/views/general/theme.js',
+        'public/scripts/views/general/version.js',
         
         'public/scripts/views/paging/back.js',
         'public/scripts/views/paging/next.js',

public/scripts/routes.js

@@ -1,191 +1,191 @@
 window.ls.router
   .add("/auth/signin", {
-    template: "/auth/signin?version=" + APP_ENV.VERSION,
+    template: "/auth/signin?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/auth/signup", {
-    template: "/auth/signup?version=" + APP_ENV.VERSION,
+    template: "/auth/signup?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/auth/recovery", {
-    template: "/auth/recovery?version=" + APP_ENV.VERSION,
+    template: "/auth/recovery?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/auth/recovery/reset", {
-    template: "/auth/recovery/reset?version=" + APP_ENV.VERSION,
+    template: "/auth/recovery/reset?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/auth/confirm", {
-    template: "/auth/confirm?version=" + APP_ENV.VERSION,
+    template: "/auth/confirm?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/auth/join", {
-    template: "/auth/join?version=" + APP_ENV.VERSION,
+    template: "/auth/join?version=" + APP_ENV.CACHEBUSTER,
     scope: "home"
   })
   .add("/console", {
-    template: "/console?version=" + APP_ENV.VERSION,
+    template: "/console?version=" + APP_ENV.CACHEBUSTER,
     scope: "console"
   })
   .add("/console/account", {
-    template: "/console/account?version=" + APP_ENV.VERSION,
+    template: "/console/account?version=" + APP_ENV.CACHEBUSTER,
     scope: "console"
   })
   .add("/console/account/:tab", {
-    template: "/console/account?version=" + APP_ENV.VERSION,
+    template: "/console/account?version=" + APP_ENV.CACHEBUSTER,
     scope: "console"
   })
   .add("/console/home", {
-    template: "/console/home?version=" + APP_ENV.VERSION,
+    template: "/console/home?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/home/:tab", {
-    template: "/console/home?version=" + APP_ENV.VERSION,
+    template: "/console/home?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/platforms/:platform", {
     template: function(window) {
-      return window.location.pathname + "?version=" + APP_ENV.VERSION;
+      return window.location.pathname + "?version=" + APP_ENV.CACHEBUSTER;
     },
     scope: "console",
     project: true
   })
   .add("/console/notifications", {
-    template: "/console/notifications?version=" + APP_ENV.VERSION,
+    template: "/console/notifications?version=" + APP_ENV.CACHEBUSTER,
     scope: "console"
   })
   .add("/console/settings", {
-    template: "/console/settings?version=" + APP_ENV.VERSION,
+    template: "/console/settings?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/settings/:tab", {
-    template: "/console/settings?version=" + APP_ENV.VERSION,
+    template: "/console/settings?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/webhooks", {
-    template: "/console/webhooks?version=" + APP_ENV.VERSION,
+    template: "/console/webhooks?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/webhooks/:tab", {
-    template: "/console/webhooks?version=" + APP_ENV.VERSION,
+    template: "/console/webhooks?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/keys", {
-    template: "/console/keys?version=" + APP_ENV.VERSION,
+    template: "/console/keys?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/keys/:tab", {
-    template: "/console/keys?version=" + APP_ENV.VERSION,
+    template: "/console/keys?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/tasks", {
-    template: "/console/tasks?version=" + APP_ENV.VERSION,
+    template: "/console/tasks?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/tasks/:tab", {
-    template: "/console/tasks?version=" + APP_ENV.VERSION,
+    template: "/console/tasks?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/database", {
-    template: "/console/database?version=" + APP_ENV.VERSION,
+    template: "/console/database?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/database/collection", {
     template: function(window) {
-      return window.location.pathname + window.location.search + '&version=' + APP_ENV.VERSION;
+      return window.location.pathname + window.location.search + '&version=' + APP_ENV.CACHEBUSTER;
     },
     scope: "console",
     project: true
   })
   .add("/console/database/collection/:tab", {
     template: function(window) {
-      return window.location.pathname + window.location.search + '&version=' + APP_ENV.VERSION;
+      return window.location.pathname + window.location.search + '&version=' + APP_ENV.CACHEBUSTER;
     },
     scope: "console",
     project: true
   })
   .add("/console/database/document", {
     template: function(window) {
-      return window.location.pathname + window.location.search + '&version=' + APP_ENV.VERSION;
+      return window.location.pathname + window.location.search + '&version=' + APP_ENV.CACHEBUSTER;
     },
     scope: "console",
     project: true
   })
   .add("/console/database/document/:tab", {
     template: function(window) {
-      return window.location.pathname + window.location.search + '&version=' + APP_ENV.VERSION;
+      return window.location.pathname + window.location.search + '&version=' + APP_ENV.CACHEBUSTER;
     },
     scope: "console",
     project: true
   })
   .add("/console/storage", {
-    template: "/console/storage?version=" + APP_ENV.VERSION,
+    template: "/console/storage?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/storage/:tab", {
-    template: "/console/storage?version=" + APP_ENV.VERSION,
+    template: "/console/storage?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users", {
-    template: "/console/users?version=" + APP_ENV.VERSION,
+    template: "/console/users?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users/user", {
-    template: "/console/users/user?version=" + APP_ENV.VERSION,
+    template: "/console/users/user?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users/user/:tab", {
-    template: "/console/users/user?version=" + APP_ENV.VERSION,
+    template: "/console/users/user?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users/teams/team", {
-    template: "/console/users/teams/team?version=" + APP_ENV.VERSION,
+    template: "/console/users/teams/team?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users/teams/team/:tab", {
-    template: "/console/users/teams/team?version=" + APP_ENV.VERSION,
+    template: "/console/users/teams/team?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/users/:tab", {
-    template: "/console/users?version=" + APP_ENV.VERSION,
+    template: "/console/users?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/functions", {
-    template: "/console/functions?version=" + APP_ENV.VERSION,
+    template: "/console/functions?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/functions/function", {
-    template: "/console/functions/function?version=" + APP_ENV.VERSION,
+    template: "/console/functions/function?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/functions/function/:tab", {
-    template: "/console/functions/function?version=" + APP_ENV.VERSION,
+    template: "/console/functions/function?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })
   .add("/console/functions/:tab", {
-    template: "/console/functions?version=" + APP_ENV.VERSION,
+    template: "/console/functions?version=" + APP_ENV.CACHEBUSTER,
     scope: "console",
     project: true
   })

public/scripts/views/general/cookies.js

@@ -10,6 +10,7 @@
                 text: text,
                 class: "cookie-alert",
                 link: env.HOME + "/policy/cookies",
+                label: 'Learn More',
                 callback: function() {
                   cookie.set("cookie-alert", "true", 365 * 10); // 10 years
                 }

public/scripts/views/general/version.js

@@ -0,0 +1,47 @@
+(function(window) {
+    window.ls.container.get("view").add({
+        selector: "data-version",
+        controller: function(alerts, env, cookie) {
+          let cookieName = "version-update-" + env.VERSION.replace(/\./g, "_");
+
+          if (!cookie.get(cookieName)) {
+            var xhr = new XMLHttpRequest();
+
+            xhr.open('GET', '/console/version', true);
+
+            xhr.onload = function () {
+              if (this.readyState == 4 && this.status == 200) {
+                let data = JSON.parse(this.responseText);
+                let text = 'Appwrite version ' + data.version + ' is avaliable, check the';
+
+                if(isNewerVersion(env.VERSION, data.version)) {
+                  alerts.add({
+                    text: text,
+                    class: "success",
+                    link: "https://github.com/appwrite/appwrite/releases",
+                    label: 'release notes',
+                    callback: function() {
+                        cookie.set(cookieName, "true", 365 * 10); // 10 years
+                    }
+                  }, 0);
+                }
+              }
+            };
+
+            xhr.send(null);
+
+            function isNewerVersion (oldVer, newVer) {
+                const oldParts = oldVer.split('.')
+                const newParts = newVer.split('.')
+                for (var i = 0; i < newParts.length; i++) {
+                  const a = parseInt(newParts[i]) || 0
+                  const b = parseInt(oldParts[i]) || 0
+                  if (a > b) return true
+                  if (a < b) return false
+                }
+                return false
+              }
+          }
+        }
+      });
+  })(window);  

public/styles/comps/alerts.less

@@ -46,16 +46,31 @@
         &.error {
           color: #ffffff;
           background: var(--config-color-danger);
+
+          a {
+            color: #ffffff;
+            border-bottom: dotted 1px #ffffff;
+          }
         }
 
         &.success {
           color: #ffffff;
           background: var(--config-color-success);
+          
+          a {
+            color: #ffffff;
+            border-bottom: dotted 1px #ffffff;
+          }
         }
 
         &.warning {
           color: #ffffff;
           background: var(--config-color-success);
+
+          a {
+            color: #ffffff;
+            border-bottom: dotted 1px #ffffff;
+          }
         }
 
         &.open {

public/styles/scopes/console.less

@@ -979,7 +979,6 @@
 }
 
 .search {
-
   opacity: 1!important;
 
   @media @phones, @tablets {
@@ -987,4 +986,4 @@
       margin-top: 20px;
     }
   }
-}
+}