v1.0.2 (#10)

- Fix restart_policy in Service config.
- Tweaked the upgrade process a bit. REVERTED.
- Refactor and cosmetic surgery here and there.
- Track Service config changes and allow redeploy if it changes.

src/components/Application/Configuration/ActiveTab/General.svelte

@@ -8,8 +8,8 @@
     >
       <label for="buildPack">Build Pack</label>
       <select id="buildPack" bind:value="{$application.build.pack}">
-        <option selected class="font-medium">static</option>
-        <option class="font-medium">nodejs</option>
+        <option selected class="font-bold">Static</option>
+        <option class="font-bold">Node.js</option>
       </select>
     </div>
     <div
@@ -45,62 +45,5 @@
             : '3000'}"
         />
       {/if}
-      <!-- {#if config.buildPack === "static"}
-        <div class="text-base font-bold text-white pt-2">
-          Preview Deploys
-        </div>
-        <button
-          type="button"
-          on:click="{() =>
-            (config.previewDeploy = !config.previewDeploy)}"
-          aria-pressed="false"
-          class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-          class:bg-green-600="{config.previewDeploy}"
-          class:bg-coolgray-300="{!config.previewDeploy}"
-        >
-          <span class="sr-only">Use setting</span>
-          <span
-            class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-            class:translate-x-5="{config.previewDeploy}"
-            class:translate-x-0="{!config.previewDeploy}"
-          >
-            <span
-              class="ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              class:opacity-0="{config.previewDeploy}"
-              class:opacity-100="{!config.previewDeploy}"
-              aria-hidden="true"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-red-600"
-                fill="none"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"></path>
-              </svg>
-            </span>
-            <span
-              class="ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              aria-hidden="true"
-              class:opacity-100="{config.previewDeploy}"
-              class:opacity-0="{!config.previewDeploy}"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-green-600"
-                fill="currentColor"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-                ></path>
-              </svg>
-            </span>
-          </span>
-        </button>
-      {/if} -->
     </div>
   </div>

src/components/Application/Configuration/Branches.svelte

@@ -17,7 +17,7 @@
     <select id="branch" bind:value="{$application.repository.branch}">
       <option disabled selected>Select a branch</option>
       {#each branches as branch}
-        <option value="{branch.name}" class="font-medium">{branch.name}</option>
+        <option value="{branch.name}" class="font-bold">{branch.name}</option>
       {/each}
     </select>
   </div>

src/components/Application/Configuration/Repositories.svelte

@@ -23,7 +23,7 @@
       >
         <option selected disabled>Select a repository</option>
         {#each repositories as repo}
-          <option value="{repo.id}" class="font-medium">
+          <option value="{repo.id}" class="font-bold">
             {repo.owner.login}
             /
             {repo.name}

src/pages/_layout.svelte

@@ -19,8 +19,9 @@
     initConf,
   } from "@store";
   import { toast } from "@zerodevx/svelte-toast";
-  import packageJson from "../../package.json";
   import { onMount } from "svelte";
+  import compareVersions from 'compare-versions';
+  import packageJson from "../../package.json";
 
   let upgradeAvailable = false;
   let upgradeDisabled = false;
@@ -73,18 +74,14 @@
     }
   }
   async function checkUpgrade() {
+    const branch = process.env.NODE_ENV === 'production' && window.location.hostname !== 'test.andrasbacsai.dev' ? 'main' : 'next'
     latest = await window
       .fetch(
-        "https://raw.githubusercontent.com/coollabsio/coolify/main/package.json",
+        `https://raw.githubusercontent.com/coollabsio/coolify/${branch}/package.json`,
         { cache: "no-cache" },
       )
       .then(r => r.json());
-    if (
-      latest.version.split(".").join("") >
-      packageJson.version.split(".").join("")
-    ) {
-      return true;
-    }
+      return compareVersions(latest.version,packageJson.version)
   }
 </script>
 
@@ -214,24 +211,24 @@
         <div
           class="cursor-pointer text-xs font-bold text-warmGray-400 py-2 hover:bg-warmGray-700 w-full text-center"
         >
-          v{packageJson.version}
+          {packageJson.version}
         </div>
       </div>
     </nav>
   {/if}
   {#if upgradeAvailable}
     <footer
-      class="absolute top-0 right-0 p-2 w-auto rounded-tl text-white "
+      class="absolute bottom-0 right-0 p-4 px-6 w-auto rounded-tl text-white "
     >
       <div class="flex items-center">
         <div></div>
         <div class="flex-1"></div>
           {#if !upgradeDisabled}
             <button
-              class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 font-bold text-xs rounded px-2 py-2"
+              class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-xs font-bold rounded px-2 py-2"
               disabled="{upgradeDisabled}"
               on:click="{upgrade}"
-              >New version available. <br>Click here to upgrade!</button
+              >New version available, <br>click here to upgrade!</button
             >
           {:else if upgradeDone}
             <button

src/pages/application/_layout.svelte

@@ -49,6 +49,7 @@
 
   async function deploy() {
     try {
+      $application.build.pack =  $application.build.pack.replace('.','').toLowerCase()
       toast.push("Checking inputs.");
       await $fetch(`/api/v1/application/check`, {
         body: $application,

src/store.js

@@ -125,7 +125,8 @@ export const application = writable({
     },
     container: {
       name: null,
-      tag: null
+      tag: null,
+      baseSHA: null
     }
   },
   publish: {