Improve app details UX

ui/package.json

@@ -48,6 +48,7 @@
     "eslint": "^8.57.1",
     "jest": "^29.1.2",
     "typescript": "^4.8.3",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

ui/src/components/GitBranch/GitBranch.tsx

@@ -0,0 +1,6 @@
+import GitBranchSVG from './git-branch.svg?react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export default function GitBranch(props: SvgIconProps) {
+  return <SvgIcon { ...props } component={ GitBranchSVG } inheritViewBox />
+}

ui/src/pages/ApplicationDetailsPage/components/BranchesList/BranchCard.tsx

@@ -0,0 +1,77 @@
+import { Card, CardActionArea, CardContent, Skeleton, Stack, Typography } from '@mui/material'
+import { ArtifactListItemReducedDTO } from '../../../../../autogenerated/client/backend'
+import { useNavigate } from 'react-router-dom'
+import moment from 'moment'
+import { Commit, LayersOutlined, SvgIconComponent, SyncOutlined } from '@mui/icons-material'
+import GitBranch from '../../../../components/GitBranch/GitBranch'
+import InstallDialog from '../InstallDialog'
+import { useState } from 'react'
+import HintIcon, { LoadingHintIcon } from './HintIcon'
+
+export default function BranchCard({ branch, version, artifact }: 
+{ branch: { name: string, pattern: string }, version: string, artifact: ArtifactListItemReducedDTO }) {
+  const [ installDialogOpen, setInstallDialogOpen ] = useState<boolean>(false)
+
+  const navigate = useNavigate()
+
+  function onInstall() {
+    setInstallDialogOpen(false)
+    navigate('/workloads')
+  }
+
+  return (
+    <>
+      <Card 
+        variant='outlined' 
+        sx={ { 
+          maxWidth: 'lg', 
+          '&:hover': { borderColor: 'primary.main', boxShadow: 2 } 
+        } }>
+        <CardActionArea onClick={ () => setInstallDialogOpen(true) }>
+          <CardContent>
+            <Stack direction='row' justifyContent='space-between'>
+              <Stack direction='column' alignItems='start' spacing={ 1 }>
+                <Typography variant='h4'>Version { version }</Typography>
+                <Stack direction='row' justifyContent='start' alignItems='center' spacing={ 2 }>
+                  <HintIcon tooltip='Branch' icon={ GitBranch as SvgIconComponent } text={ branch.name } />
+                  <HintIcon tooltip='Chart version' icon={ LayersOutlined } text={ `${ artifact.version }-${ artifact.revision }` } />
+                  <HintIcon tooltip='Last updated' icon={ SyncOutlined } text={ moment(artifact.registered_at).fromNow() } />
+                  <HintIcon tooltip='Short digest' icon={ Commit } text={ artifact?.digest.value.substring(0, 7) } />
+                </Stack>
+              </Stack>
+            </Stack>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+      <InstallDialog 
+        branch={ branch.name } 
+        artifact={ artifact } 
+        version={ version } 
+        isOpen={ installDialogOpen } 
+        onSubmit={ onInstall } 
+        onDismiss={ () => setInstallDialogOpen(false) }/>
+    </>
+  )
+}
+
+export function LoadingBranchCard() {
+  return (
+    <Card variant='outlined' sx={ { maxWidth: 'lg' } }>
+      <CardActionArea disabled>
+        <CardContent>
+          <Stack direction='row' justifyContent='space-between'>
+            <Stack direction='column' alignItems='start' spacing={ 1 }>
+              <Skeleton variant='text' height={ 24 } width={ 97 }/>
+              <Stack direction='row' justifyContent='start' alignItems='center' spacing={ 2 }>
+                <LoadingHintIcon width={ 39 }/>
+                <LoadingHintIcon width={ 73 }/>
+                <LoadingHintIcon width={ 107 }/>
+                <LoadingHintIcon width={ 74 }/>
+              </Stack>
+            </Stack>
+          </Stack>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}

ui/src/pages/ApplicationDetailsPage/components/BranchesList/HintIcon.tsx

@@ -0,0 +1,28 @@
+import { SvgIconComponent } from '@mui/icons-material'
+import { PopperProps, Tooltip, Stack, SvgIcon, Typography, Skeleton } from '@mui/material'
+
+export default function HintIcon({ tooltip, icon, text }: { tooltip: string, icon: SvgIconComponent, text: string }) {
+  const popperProps: Partial<PopperProps> = {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, -4]
+        }
+      }
+    ]
+  }
+
+  return (
+    <Tooltip title={ tooltip } PopperProps={ popperProps }>
+      <Stack direction='row' justifyContent='start' alignItems='center' spacing={ 0.5 }>
+        <SvgIcon component={ icon } fontSize='small' sx={ { color: 'text.secondary' } } />
+        <Typography color='text.secondary'>{ text }</Typography>
+      </Stack>
+    </Tooltip>
+  )
+}
+
+export function LoadingHintIcon({ width = 70 }: { width?: number }) {
+  return <Skeleton variant='text' height={ 20 } width={ width }/>
+}

ui/src/pages/ApplicationDetailsPage/components/BranchesList/index.tsx

@@ -0,0 +1,61 @@
+import { Stack, Typography } from '@mui/material'
+import { ApplicationDTOPackagingFormatEnum, BranchDTO, VersionDTO } from '../../../../../autogenerated/client/backend'
+import { useEffect } from 'react'
+import { checkKubernetes } from '../../../../clients/kubectl'
+import { createDockerDesktopClient } from '@docker/extension-api-client'
+import { enqueueSnackbar } from 'notistack'
+import { checkDocker } from '../../../../clients/docker'
+import { sortArtifacts } from '../../../../clients/util'
+import BranchCard from './BranchCard'
+
+const ddClient = createDockerDesktopClient()
+
+export default function BranchesList({ branches, packagingFormat }: { branches: BranchDTO[], packagingFormat?: ApplicationDTOPackagingFormatEnum }) {
+  if (!packagingFormat) {
+    return <Typography>This application cannot be deployed yet</Typography>
+  }
+
+  useEffect(() => {
+    switch(packagingFormat) {
+      case 'HELM_CHART':
+        checkKubernetes(ddClient)
+          .catch(e => {
+            console.error(e)
+            enqueueSnackbar('Error with kubernetes, make sure the cluster is up and reachable')
+          })
+        break
+      case 'CONTAINER':
+        checkDocker(ddClient)
+          .catch(e => {
+            console.error(e)
+            enqueueSnackbar('Error with docker engine, make sure it is running')
+          })
+        break
+    }
+  }, [])
+
+  return (
+    <Stack spacing={ 2 }>
+      {
+        branches
+          .filter(branch => branch.versions && branch.versions.length > 0 && branch.versions.find(v => v.artifacts.find(a => a.packaging_format === packagingFormat)))
+          .flatMap(branch => {
+            const version = (branch.versions as VersionDTO[]).find(v => v.artifacts.sort(sortArtifacts).find(a => a.packaging_format === packagingFormat)) as VersionDTO
+            return {
+              branch: { name: branch.branch_name, pattern: branch.branch_pattern },
+              version: version.version_number,
+              artifact: version.artifacts.reverse().find(a => a.packaging_format === packagingFormat)
+            }
+          })
+          .filter(({ artifact }) => artifact !== undefined)
+          .map(({ branch, version, artifact }) => artifact && 
+          <BranchCard 
+            key={ artifact?.name } 
+            branch={ branch } 
+            version={ version } 
+            artifact={ artifact } />
+          )
+      }
+    </Stack>
+  )
+}