From ef08d8e538b53603a4291fca1a9a5d0f93d3c44b Mon Sep 17 00:00:00 2001
From: Evan Song <52982404+ferothefox@users.noreply.github.com>
Date: Sun, 22 Dec 2024 19:38:50 -0700
Subject: [PATCH] Handle server upgrades (suspensions) in frontend (#3049)

* chore: make serverlisting handle upgrading server state

Signed-off-by: Evan Song <theevansong@gmail.com>

* feat: more prominent suspension status bar in server listing

Signed-off-by: Evan Song <theevansong@gmail.com>

* feat: handle upgrading in root server page

Signed-off-by: Evan Song <theevansong@gmail.com>

---------

Signed-off-by: Evan Song <theevansong@gmail.com>
---
 .../components/ui/servers/ServerListing.vue   | 21 +++++++++++++++--
 .../src/pages/servers/manage/[id].vue         | 23 ++++++++++++++++---
 .../src/pages/servers/manage/index.vue        |  2 +-
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index 96021cca..9d97e4d3 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -6,11 +6,13 @@
     <div
       v-tooltip="
         status === 'suspended'
-          ? `This server is suspended visit the billing page to learn more`
+          ? suspension_reason === 'upgrading'
+            ? 'This server is being transferred to a new node. It will be unavailable until this process finishes.'
+            : 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
           : ''
       "
       class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
-      :class="status === 'suspended' ? 'opacity-50' : 'active:scale-95'"
+      :class="status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
       data-pyro-server-listing
       :data-pyro-server-listing-id="server_id"
     >
@@ -51,6 +53,21 @@
         />
       </div>
     </div>
+    <div
+      v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+      class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
+    >
+      <UiServersPanelSpinner />
+      Your server's hardware is currently being upgraded and will be back online shortly.
+    </div>
+    <div
+      v-else-if="status === 'suspended'"
+      class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+    >
+      <UiServersIconsPanelErrorIcon class="!size-5" />
+      Your server has been suspended due to a billing issue. Please visit your billing settings or
+      contact Modrinth Support for more information.
+    </div>
   </NuxtLink>
 </template>
 
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 1f888474..c163d1b4 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -1,7 +1,25 @@
 <template>
   <div class="contents">
     <div
-      v-if="serverData?.status === 'suspended'"
+      v-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
+      class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+    >
+      <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+        <div class="flex flex-col items-center text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="grid place-content-center rounded-full bg-bg-blue p-4">
+              <TransferIcon class="size-12 text-blue" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server Upgrading</h1>
+          </div>
+          <p class="text-lg text-secondary">
+            Your server's hardware is currently being upgraded and will be back online shortly.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else-if="serverData?.status === 'suspended'"
       class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
     >
       <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -24,7 +42,7 @@
           </p>
         </div>
         <ButtonStyled size="large" color="brand" @click="() => router.push('/settings/billing')">
-          <button class="mt-6 !w-full">Go to billing</button>
+          <button class="mt-6 !w-full">Go to billing settings</button>
         </ButtonStyled>
       </div>
     </div>
@@ -86,7 +104,6 @@
         </ButtonStyled>
       </div>
     </div>
-
     <!-- SERVER START -->
     <div
       v-else-if="serverData"
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
index 995b5757..8281d918 100644
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-pyro-server-list-root
-    class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-3"
+    class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-6"
   >
     <div
       v-if="serverList.length > 0 || isPollingForNewServers"