From c7b2c20603e08255f10c4d8c02f951b54b155a9a Mon Sep 17 00:00:00 2001
From: CHEYNE <contact@ch3yne.com>
Date: Thu, 22 Feb 2024 20:40:16 +0800
Subject: [PATCH] [#1735] fix(web): fix sorting and filtering of the metalakes
 table (#2309)

### What changes were proposed in this pull request?

Fix sorting and filtering of the metalakes table.
<img width="1023" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/3ade8070-c24d-45f5-a43b-fd693c7d0234">


### Why are the changes needed?

Fix: #1735
Fix: #2072

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A
---
 web/app/ui/MetalakeList.js | 96 ++++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/web/app/ui/MetalakeList.js b/web/app/ui/MetalakeList.js
index 01535ce08f0..3db054b1ce3 100644
--- a/web/app/ui/MetalakeList.js
+++ b/web/app/ui/MetalakeList.js
@@ -7,8 +7,8 @@ import { useEffect, useCallback, useState, Fragment } from 'react'
 
 import Link from 'next/link'
 
-import { Box, Grid, Card, IconButton, Typography, Portal, Tooltip } from '@mui/material'
-import { DataGrid, GridToolbar } from '@mui/x-data-grid'
+import { Box, Grid, Card, Typography, Portal, Tooltip } from '@mui/material'
+import { DataGrid, GridActionsCellItem, GridToolbar } from '@mui/x-data-grid'
 
 import Icon from '@/components/Icon'
 
@@ -26,7 +26,7 @@ function TableToolbar(props) {
     <>
       <Fragment>
         <Portal container={() => document.getElementById('filter-panel')}>
-          <Box className={`twc-w-full twc-justify-between twc-hidden`}>
+          <Box className={`twc-flex twc-w-full twc-justify-between`}>
             <GridToolbar {...props} />
           </Box>
         </Portal>
@@ -49,7 +49,7 @@ const MetalakeList = () => {
   const [openConfirmDelete, setOpenConfirmDelete] = useState(false)
   const [confirmCacheData, setConfirmCacheData] = useState(null)
 
-  const handleDeleteMetalake = name => {
+  const handleDeleteMetalake = name => () => {
     setOpenConfirmDelete(true)
     setConfirmCacheData(name)
   }
@@ -66,7 +66,7 @@ const MetalakeList = () => {
     setConfirmCacheData(null)
   }
 
-  const handleShowEditDialog = data => {
+  const handleShowEditDialog = data => () => {
     setDialogType('update')
     setOpenDialog(true)
     setDialogData(data)
@@ -76,7 +76,7 @@ const MetalakeList = () => {
     setValue(val)
   }, [])
 
-  const handleShowDetails = row => {
+  const handleShowDetails = row => () => {
     setDrawerData(row)
     setOpenDrawer(true)
   }
@@ -108,6 +108,7 @@ const MetalakeList = () => {
       minWidth: 230,
       disableColumnMenu: true,
       filterable: true,
+      type: 'string',
       field: 'name',
       headerName: 'Name',
       renderCell: ({ row }) => {
@@ -142,7 +143,9 @@ const MetalakeList = () => {
       flex: 0.15,
       minWidth: 150,
       disableColumnMenu: true,
+      type: 'string',
       field: 'createdBy',
+      valueGetter: params => `${params.row.audit?.creator}`,
       headerName: 'Created by',
       renderCell: ({ row }) => {
         return (
@@ -156,12 +159,13 @@ const MetalakeList = () => {
       flex: 0.15,
       minWidth: 150,
       disableColumnMenu: true,
-      valueGetter: params => `${params.row.audit?.createTime}`,
+      type: 'dateTime',
       field: 'createdAt',
+      valueGetter: params => new Date(params.row.audit?.createTime),
       headerName: 'Created at',
       renderCell: ({ row }) => {
         return (
-          <Typography noWrap sx={{ color: 'text.secondary' }}>
+          <Typography title={row.audit?.createTime} noWrap sx={{ color: 'text.secondary' }}>
             {formatToDateTime(row.audit?.createTime)}
           </Typography>
         )
@@ -170,40 +174,48 @@ const MetalakeList = () => {
     {
       flex: 0.1,
       minWidth: 90,
-      sortable: false,
-      disableColumnMenu: true,
-      field: 'actions',
+      type: 'actions',
       headerName: 'Actions',
-      renderCell: ({ row }) => (
-        <>
-          <IconButton
-            title='Details'
-            size='small'
-            sx={{ color: theme => theme.palette.text.secondary }}
-            onClick={() => handleShowDetails(row)}
-          >
-            <Icon icon='bx:show-alt' />
-          </IconButton>
-
-          <IconButton
-            title='Edit'
-            size='small'
-            sx={{ color: theme => theme.palette.text.secondary }}
-            onClick={() => handleShowEditDialog(row)}
-          >
-            <Icon icon='mdi:square-edit-outline' />
-          </IconButton>
-
-          <IconButton
-            title='Delete'
-            size='small'
-            sx={{ color: theme => theme.palette.error.light }}
-            onClick={() => handleDeleteMetalake(row.name)}
-          >
-            <Icon icon='mdi:delete-outline' />
-          </IconButton>
-        </>
-      )
+      field: 'actions',
+      getActions: ({ row }) => [
+        <GridActionsCellItem
+          key='details'
+          label='Details'
+          title='Details'
+          icon={<Icon icon='bx:show-alt' />}
+          onClick={handleShowDetails(row)}
+          sx={{
+            '& svg': {
+              fontSize: '24px'
+            }
+          }}
+        />,
+        <GridActionsCellItem
+          key='edit'
+          label='Edit'
+          title='Edit'
+          icon={<Icon icon='mdi:square-edit-outline' />}
+          onClick={handleShowEditDialog(row)}
+          sx={{
+            '& svg': {
+              fontSize: '24px'
+            }
+          }}
+        />,
+        <GridActionsCellItem
+          key='delete'
+          icon={<Icon icon='mdi:delete-outline' />}
+          label='Delete'
+          title='Delete'
+          onClick={handleDeleteMetalake(row.name)}
+          sx={{
+            '& svg': {
+              fontSize: '24px',
+              color: theme => theme.palette.error.light
+            }
+          }}
+        />
+      ]
     }
   ]
 
@@ -238,6 +250,8 @@ const MetalakeList = () => {
             rows={store.filteredMetalakes}
             columns={columns}
             disableRowSelectionOnClick
+            onCellClick={(params, event) => event.stopPropagation()}
+            onRowClick={(params, event) => event.stopPropagation()}
             pageSizeOptions={[10, 25, 50]}
             paginationModel={paginationModel}
             onPaginationModelChange={setPaginationModel}