update envd version desing, add compatibility warning

Author: dobrac

src/features/dashboard/templates/table-cells.tsx

@@ -7,6 +7,7 @@ import {
   useToast,
 } from '@/lib/hooks/use-toast'
 import { cn } from '@/lib/utils'
+import { isVersionCompatible } from '@/lib/utils/version'
 import {
   deleteTemplateAction,
   updateTemplateAction,
@@ -285,14 +286,37 @@ export function VisibilityCell({
   )
 }
 
+const INVALID_ENVD_VERSION = '0.0.1'
+const SDK_V2_MINIMAL_ENVD_VERSION = '0.2.0'
+
 export function EnvdVersionCell({
   getValue,
 }: CellContext<Template | DefaultTemplate, unknown>) {
-  const versionValue = getValue() as string
+  const valueString = getValue() as string
+  const versionValue =
+    valueString && valueString !== INVALID_ENVD_VERSION ? valueString : null
 
+  const isNotV2Compatible =
+    isVersionCompatible(
+      versionValue ?? INVALID_ENVD_VERSION,
+      SDK_V2_MINIMAL_ENVD_VERSION
+    ) === false
   return (
-    <span className={cn('text-fg-tertiary whitespace-nowrap font-mono')}>
-      {versionValue}
-    </span>
+    <div
+      className={cn(
+        'text-fg-tertiary whitespace-nowrap font-mono flex flex-row gap-1.5',
+        {
+          'text-accent-error-highlight': isNotV2Compatible,
+        }
+      )}
+    >
+      {versionValue ?? 'N/A'}
+      {isNotV2Compatible && (
+        <HelpTooltip>
+          The envd version is not compatible with the SDK v2. To update the envd
+          version, you need to rebuild the template.
+        </HelpTooltip>
+      )}
+    </div>
   )
 }

src/features/dashboard/templates/table-config.tsx

@@ -142,8 +142,8 @@ export const useColumns = (deps: unknown[]) => {
       {
         accessorKey: 'envdVersion',
         header: 'Envd Version',
-        size: 140,
-        minSize: 100,
+        size: 125,
+        minSize: 70,
         cell: EnvdVersionCell,
         enableSorting: false,
       },