From ddbbe35c63e452fe1fc1ce452eecd1cb514d049b Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Tue, 28 May 2024 19:16:43 -0400
Subject: [PATCH] add: show latest version of app (#40)

* add: version

* fix: add version

* fix: improve css
---
 .../AppListing/CookbookListing.module.scss    | 144 +++++++++++++-----
 .../apps/AppListing/CookbookListing.tsx       |  25 ++-
 2 files changed, 119 insertions(+), 50 deletions(-)

diff --git a/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss b/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
index a1f0345..3679ee1 100644
--- a/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
+++ b/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
@@ -19,18 +19,22 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 47%;
+      width: 37%;
     }
-    /* owner */
+    /* version */
     tr > *:nth-child(3) {
+      width: 10%;
+    }
+    /* owner */
+    tr > *:nth-child(4) {
       width: 15%;
     }
     /* visibility */
-    tr > *:nth-child(4) {
+    tr > *:nth-child(5) {
       width: 15%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 20%;
     }
   }
@@ -43,18 +47,22 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 47%;
+      width: 37%;
     }
-    /* owner */
+    /* version */
     tr > *:nth-child(3) {
+      width: 10%;
+    }
+    /* owner */
+    tr > *:nth-child(4) {
       width: 15%;
     }
     /* visibility */
-    tr > *:nth-child(4) {
+    tr > *:nth-child(5) {
       width: 15%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 20%;
     }
   }
@@ -67,15 +75,23 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 57%;
+      width: 48%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(3) {
-      width: 17.5%;
+      width: 10%;
     }
-    /* lastModified */
+    /* owner */
     tr > *:nth-child(4) {
-      width: 19.5%;
+      width: 15%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
+      width: 10%;
+    }
+    /* lastModified */
+    tr > *:nth-child(6) {
+      width: 13%;
     }
   }
 }
@@ -87,15 +103,51 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 62%;
+      width: 50%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(3) {
-      width: 15.5%;
+      width: 10%;
+    }
+    /* owner */
+    tr > *:nth-child(4) {
+      width: 15%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
+      width: 10%;
     }
     /* lastModified */
+    tr > *:nth-child(6) {
+      width: 10%;
+    }
+  }
+}
+@media only screen and (max-width: 780px) {
+  .app-list {
+    /* icon */
+    tr > *:nth-child(1) {
+      width: 5%;
+    }
+    /* name */
+    tr > *:nth-child(2) {
+      width: 40%;
+    }
+    /* version */
+    tr > *:nth-child(3) {
+      width: 10%;
+    }
+    /* owner */
     tr > *:nth-child(4) {
-      width: 17.5%;
+      width: 15%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
+      width: 10%;
+    }
+    /* lastModified */
+    tr > *:nth-child(6) {
+      width: 20%;
     }
   }
 }
@@ -113,14 +165,18 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 40%;
+      width: 35%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(4) {
+      width: 10%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
       width: 20%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 14%;
     }
   }
@@ -137,14 +193,18 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 40%;
+      width: 35%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(4) {
+      width: 10%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
       width: 20%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 14%;
     }
   }
@@ -161,14 +221,18 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 30%;
+      width: 27%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(4) {
+      width: 10%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
       width: 16.5%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 18.5%;
     }
   }
@@ -185,14 +249,18 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 59%;
+      width: 49%;
     }
-    /* visibility */
+    /* version */
     tr > *:nth-child(4) {
+      width: 10%;
+    }
+    /* visibility */
+    tr > *:nth-child(5) {
       width: 14.5%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
+    tr > *:nth-child(6) {
       width: 16.5%;
     }
   }
@@ -209,19 +277,23 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 45.5%;
+      width: 40%;
     }
-    /* owner */
+    /* version */
     tr > *:nth-child(4) {
-      width: 14.5%;
+      width: 10%;
+    }
+    /* owner */
+    tr > *:nth-child(5) {
+      width: 15%;
     }
     /* visibility */
-    tr > *:nth-child(4) {
-      width: 14.5%;
+    tr > *:nth-child(6) {
+      width: 10%;
     }
     /* lastModified */
-    tr > *:nth-child(5) {
-      width: 16.5%;
+    tr > *:nth-child(7) {
+      width: 15%;
     }
   }
 }
diff --git a/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx b/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
index 395f4eb..9c39126 100644
--- a/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
+++ b/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
@@ -105,7 +105,7 @@ type AppListingTableProps = {
   location?: string;
   className?: string;
   selectMode?: SelectMode;
-  fields?: Array<'updated' | 'isPublic' | 'owner'>;
+  fields?: Array<'version' | 'updated' | 'isPublic' | 'owner'>;
 };
 
 export const AppListingTable: React.FC<AppListingTableProps> = React.memo(
@@ -144,6 +144,13 @@ export const AppListingTable: React.FC<AppListingTableProps> = React.memo(
       },
     ];
 
+    if (fields?.some((field) => field === 'version')) {
+      tableColumns.push({
+        Header: 'Version',
+        accessor: 'version',
+      });
+    }
+
     if (fields?.some((field) => field === 'owner')) {
       tableColumns.push({
         Header: 'Owner',
@@ -229,7 +236,7 @@ interface AppListingProps {
   onUnselect?: OnSelectCallback;
   onNavigate?: OnNavigateCallback;
   className?: string;
-  fields?: Array<'updated' | 'isPublic' | 'owner'>;
+  fields?: Array<'updated' | 'isPublic' | 'owner' | 'version'>;
   selectedApps?: Array<Apps.TapisApp>;
   selectMode?: SelectMode;
 }
@@ -239,7 +246,7 @@ const AppListing: React.FC<AppListingProps> = ({
   onUnselect = undefined,
   onNavigate = undefined,
   className,
-  fields = ['updated', 'isPublic', 'owner'],
+  fields = ['updated', 'isPublic', 'owner', 'version'],
   selectedApps = [],
   selectMode,
 }) => {
@@ -249,17 +256,7 @@ const AppListing: React.FC<AppListingProps> = ({
   const username = claims['tapis/username'];
 
   // sort the apps by the owner
-  const apps = data?.result
-    ? data?.result.sort((a, b) => {
-        if (a.owner === username) {
-          return -1;
-        }
-        if (b.owner === username) {
-          return 1;
-        }
-        return 0;
-      })
-    : [];
+  const apps = data?.result || [];
 
   const selectedAppDict: SelectAppDictType = React.useMemo(() => {
     const result: SelectAppDictType = {};