From 94e70e6b447d5c2e4fc2043f2bb6a64b4855c69f Mon Sep 17 00:00:00 2001
From: Rohan Chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Fri, 29 Nov 2024 19:21:45 +0530
Subject: [PATCH] fix: cloud version tag display (#400)

* fix: display basic version tag on cloud

* chore: bump version
---
 backend/version.txt                 |   2 +-
 frontend/components/ReleaseInfo.tsx | 175 ++++++++++++++--------------
 2 files changed, 91 insertions(+), 86 deletions(-)

diff --git a/backend/version.txt b/backend/version.txt
index 873e6cc6..4275974b 100644
--- a/backend/version.txt
+++ b/backend/version.txt
@@ -1 +1 @@
-v2.34.0
+v2.34.2
diff --git a/frontend/components/ReleaseInfo.tsx b/frontend/components/ReleaseInfo.tsx
index e24a2c91..facb7108 100644
--- a/frontend/components/ReleaseInfo.tsx
+++ b/frontend/components/ReleaseInfo.tsx
@@ -2,7 +2,7 @@
 
 import { Fragment, useEffect, useState } from 'react'
 import Link from 'next/link'
-import { getHealth } from '@/utils/appConfig'
+import { getHealth, isCloudHosted } from '@/utils/appConfig'
 import clsx from 'clsx'
 import { relativeTimeFromDates } from '@/utils/time'
 import { Popover, Transition } from '@headlessui/react'
@@ -64,98 +64,103 @@ export const ReleaseInfo = () => {
   return (
     <div className="flex items-center gap-2">
       <span className="font-medium">Console version:</span>
-      <Popover className="relative inline-block text-left">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className="flex items-center gap-2 focus:outline-none"
-              title={
-                isUpdateAvailable
-                  ? 'New version of the Phase Console is available.'
-                  : 'You are running the latest version of the Phase Console'
-              }
-            >
-              <div
-                className={clsx(
-                  'font-mono text-sm font-semibold transition ease',
+
+      {isCloudHosted() ? (
+        <span className="font-mono">{healthData.version}</span>
+      ) : (
+        <Popover className="relative inline-block text-left">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className="flex items-center gap-2 focus:outline-none"
+                title={
                   isUpdateAvailable
-                    ? 'text-amber-500 hover:text-amber-400'
-                    : 'text-emerald-500 hover:text-emerald-400'
+                    ? 'New version of the Phase Console is available.'
+                    : 'You are running the latest version of the Phase Console'
+                }
+              >
+                <div
+                  className={clsx(
+                    'font-mono text-sm font-semibold transition ease',
+                    isUpdateAvailable
+                      ? 'text-amber-500 hover:text-amber-400'
+                      : 'text-emerald-500 hover:text-emerald-400'
+                  )}
+                >
+                  {healthData.version}
+                </div>
+                {isUpdateAvailable && (
+                  <span className="text-xs bg-amber-500 text-black px-2 py-0.5 rounded-full">
+                    Update available
+                  </span>
                 )}
+              </Popover.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
               >
-                {healthData.version}
-              </div>
-              {isUpdateAvailable && (
-                <span className="text-xs bg-amber-500 text-black px-2 py-0.5 rounded-full">
-                  Update available
-                </span>
-              )}
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Popover.Panel className="absolute z-50 left-0 mt-2 w-60 p-4 origin-top-right divide-y divide-neutral-500/20 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
-                <div className="flex flex-col space-y-4 border-l border-neutral-500/40">
-                  {releases.map((release, index) => (
-                    <div key={release.id} className="flex gap-2 items-start">
-                      <div
-                        className={clsx(
-                          'h-2 w-2 rounded-full -ml-1 mt-2',
-                          release.tag_name === healthData.version
-                            ? 'bg-emerald-500'
-                            : index === 0
-                              ? 'bg-amber-500'
-                              : 'bg-neutral-500'
-                        )}
-                      ></div>
-                      <div className="flex flex-col">
-                        <Link
-                          href={release.html_url}
-                          target="_blank"
-                          rel="noreferrer"
+                <Popover.Panel className="absolute z-50 left-0 mt-2 w-60 p-4 origin-top-right divide-y divide-neutral-500/20 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
+                  <div className="flex flex-col space-y-4 border-l border-neutral-500/40">
+                    {releases.map((release, index) => (
+                      <div key={release.id} className="flex gap-2 items-start">
+                        <div
                           className={clsx(
-                            'transition ease text-sm',
+                            'h-2 w-2 rounded-full -ml-1 mt-2',
                             release.tag_name === healthData.version
-                              ? 'text-emerald-500 font-bold'
+                              ? 'bg-emerald-500'
                               : index === 0
-                                ? 'text-amber-500 font-bold'
-                                : 'text-neutral-500 hover:text-neutral-400'
+                                ? 'bg-amber-500'
+                                : 'bg-neutral-500'
                           )}
-                        >
-                          {release.tag_name === healthData.version ? (
-                            <strong>
-                              Current:{' '}
-                              <span className="font-mono">
-                                {release.name} ({release.tag_name})
-                              </span>
-                            </strong>
-                          ) : (
-                            <>
-                              {index === 0 && <strong>Latest:</strong>}{' '}
-                              <span className="font-mono">
-                                {release.name} ({release.tag_name})
-                              </span>
-                            </>
-                          )}
-                        </Link>
-                        <p className="text-neutral-400 text-xs">
-                          {relativeTimeFromDates(new Date(release.published_at))}
-                        </p>
+                        ></div>
+                        <div className="flex flex-col">
+                          <Link
+                            href={release.html_url}
+                            target="_blank"
+                            rel="noreferrer"
+                            className={clsx(
+                              'transition ease text-sm',
+                              release.tag_name === healthData.version
+                                ? 'text-emerald-500 font-bold'
+                                : index === 0
+                                  ? 'text-amber-500 font-bold'
+                                  : 'text-neutral-500 hover:text-neutral-400'
+                            )}
+                          >
+                            {release.tag_name === healthData.version ? (
+                              <strong>
+                                Current:{' '}
+                                <span className="font-mono">
+                                  {release.name} ({release.tag_name})
+                                </span>
+                              </strong>
+                            ) : (
+                              <>
+                                {index === 0 && <strong>Latest:</strong>}{' '}
+                                <span className="font-mono">
+                                  {release.name} ({release.tag_name})
+                                </span>
+                              </>
+                            )}
+                          </Link>
+                          <p className="text-neutral-400 text-xs">
+                            {relativeTimeFromDates(new Date(release.published_at))}
+                          </p>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
+                    ))}
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      )}
     </div>
   )
 }