chore: remove/move upgrade component (#2125)

Moves the upgrade markup to `ApplicationShell` and removes the old `UpgradeCheck` component. The old component was a single use component and no longer had any sort of logic/JS in it, i.e. it was essentially a glorified single-use partial. Seeing as `ApplicationShell` is also single-use it probably better to just add the necessary markup there. Signed-off-by: John Cowen <john.cowen@konghq.com>
kumahq · Feb 1, 2024 · 3198921 · 3198921
1 parent 2cd1405
commit 3198921
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 56 deletions.
diff --git a/src/app/common/UpgradeCheck.vue b/src/app/common/UpgradeCheck.vue
diff --git a/src/app/kuma/components/ApplicationShell.vue b/src/app/kuma/components/ApplicationShell.vue
@@ -22,7 +22,32 @@
           </GithubButton>
 
           <div class="upgrade-check-wrapper">
-            <UpgradeCheck />
+            <DataSource
+              v-slot="{ data }"
+              :src="`/control-plane/version/latest`"
+            >
+              <KAlert
+                v-if="env('KUMA_VERSION') !== data?.version"
+                data-testid="upgrade-check"
+                appearance="info"
+                size="small"
+              >
+                <template #alertMessage>
+                  <div class="alert-content">
+                    <p>
+                      {{ t('common.product.name') }} update available
+                    </p>
+
+                    <KButton
+                      appearance="primary"
+                      :to="t('common.product.href.install')"
+                    >
+                      Update
+                    </KButton>
+                  </div>
+                </template>
+              </KAlert>
+            </DataSource>
           </div>
         </slot>
       </div>
@@ -163,7 +188,6 @@ import { CogIcon, HelpIcon } from '@kong/icons'
 import GithubButton from 'vue-github-button'
 
 import { useEnv, useI18n, useCan } from '@/app/application'
-import UpgradeCheck from '@/app/common/UpgradeCheck.vue'
 
 const env = useEnv()
 const can = useCan()
@@ -290,5 +314,16 @@ nav :deep(.app-navigator) > a {
   @media screen and (max-width: 800px) {
     display: none;
   }
+  .k-alert.small {
+    // Uses smaller paddings for this particular alert.
+    padding: $kui-space-20 $kui-space-40;
+  }
+
+  .alert-content {
+    display: flex;
+    align-items: center;
+    font-size: $kui-font-size-30;
+    gap: $kui-space-50;
+  }
 }
 </style>