[cluster-admin] Highlighted list items for better UX (#120)

* [cluster-admin] miniwidth col-0, close panel on Listitemclick

* [cluster-admin] added hover / active highlighting.

* [cluster-admin] restructure to unselect items

* [cluster-admin] useStore not mock

* [cluster-admin] fix AppContent

* [cluster-admin] iterate version

* [cluster-admin] changed showClusterDetails to boolean

* [cluster-admin] fixed wrong value

* [cluster-admin] fix reopen closed active item

ui/cluster-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "greenhouse-cluster-admin",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "author": "Services-Team",
   "contributors": [
     "Uwe Mayer"
@@ -95,4 +95,4 @@
   "appDependencies": {
     "auth": "latest"
   }
-}
+}

ui/cluster-admin/src/components/ClusterList.tsx

@@ -20,7 +20,7 @@ interface ClusterListProps {
 const ClusterList: React.FC<ClusterListProps> = (props: ClusterListProps) => {
   return (
     <>
-      <DataGrid columns={5}>
+      <DataGrid columns={5} minContentColumns={[0]} className="clusters">
         <DataGridRow>
           <DataGridHeadCell>
             <Icon icon="monitorHeart" />

ui/cluster-admin/src/components/ClusterListItem.tsx

@@ -19,13 +19,16 @@ const ClusterListItem: React.FC<ClusterListItemProps> = (
   props: ClusterListItemProps
 ) => {
   const setClusterDetails = useStore((state) => state.setClusterDetails)
+  const clusterDetails = useStore((state) => state.clusterDetails)
+
   const setClusterDetailPlugins = useStore(
     (state) => state.setClusterDetailPlugins
   )
   const setShowOnBoardCluster = useStore((state) => state.setShowOnBoardCluster)
   const { getPluginsforCluster: getPluginsforCluster } = useGetPlugins()
 
   const setShowClusterDetails = useStore((state) => state.setShowClusterDetails)
+  const showClusterDetails = useStore((state) => state.showClusterDetails)
 
   let clusterStatus = getResourceStatusFromKubernetesConditions(
     props.cluster.status?.statusConditions?.conditions ?? []
@@ -35,7 +38,13 @@ const ClusterListItem: React.FC<ClusterListItemProps> = (
 
   const openDetails = () => {
     setClusterDetails(props.cluster)
-    setShowClusterDetails(true)
+
+    // set showClusterDetails to false if the same cluster is clicked again.
+    clusterDetails?.cluster?.metadata?.name ===
+      props?.cluster?.metadata?.name && showClusterDetails
+      ? setShowClusterDetails(false)
+      : setShowClusterDetails(true)
+
     setShowOnBoardCluster(false)
 
     // only get plugin configs on click
@@ -46,7 +55,15 @@ const ClusterListItem: React.FC<ClusterListItemProps> = (
   }
 
   return (
-    <DataGridRow style={{ cursor: "pointer" }} onClick={() => openDetails()}>
+    <DataGridRow
+      className={`cursor-pointer ${
+        clusterDetails?.cluster?.metadata?.name ===
+          props?.cluster?.metadata?.name && showClusterDetails
+          ? "active"
+          : ""
+      }`}
+      onClick={() => openDetails()}
+    >
       <DataGridCell>
         <ResourceStatusIcon status={clusterStatus} />
       </DataGridCell>

ui/cluster-admin/src/styles.scss

@@ -8,4 +8,16 @@
 
 /* If necessary, app styles can be added below */
 
+.clusters {
+  .juno-datagrid-row:hover {
+    .juno-datagrid-cell {
+      @apply bg-theme-background-lvl-1;
+    }
+  }
 
+  .juno-datagrid-row.active {
+    .juno-datagrid-cell {
+      @apply bg-theme-background-lvl-2;
+    }
+  }
+}