Merge branch 'develop-main' into feature/database_share

# Conflicts:
#	frontend/src/components/Database/DatabaseCells.tsx
#	frontend/src/pages/Workspace/index.tsx

frontend/package.json

@@ -24,6 +24,7 @@
     "axios": "^0.21.1",
     "colormap": "^2.3.2",
     "flexlayout-react": "^0.5.12",
+    "moment": "^2.29.4",
     "notistack": "^2.0.3",
     "plotly.js": "^2.6.0",
     "qs": "^6.11.2",

frontend/src/api/Workspace/index.ts

@@ -0,0 +1,42 @@
+import axios from 'utils/axios'
+import qs from 'qs'
+import { ItemsWorkspace, WorkspaceDataDTO } from 'store/slice/Workspace/WorkspaceType'
+
+export type WorkspacePostDataDTO = { name: string; id?: number }
+
+export const getWorkspacesApi = async (params: { [key: string]: number }): Promise<WorkspaceDataDTO> => {
+  const paramsNew = qs.stringify(params, { indices: false })
+  const response = await axios.get(`/workspaces?${paramsNew}`)
+  return response.data
+}
+
+export const delWorkspaceApi = async (id: number): Promise<boolean> => {
+  const response = await axios.delete(`/workspace/${id}`)
+  return response.data
+}
+
+export const postWorkspaceApi = async (
+  data: WorkspacePostDataDTO,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.post(`/workspace`, data)
+  return response.data
+}
+
+export const putWorkspaceApi = async (
+  data: WorkspacePostDataDTO,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.put(`/workspace/${data.id}`, { name: data.name })
+  return response.data
+}
+
+export const importWorkspaceApi = async (
+  data: Object,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.post(`/workspace/import`, { todo_dummy: data })
+  return response.data
+}
+
+export const exportWorkspaceApi = async (id: number): Promise<void> => {
+  const response = await axios.get(`/workspace/export/${id}`)
+  return response.data
+}

frontend/src/api/users/UsersApiDTO.ts

@@ -1,4 +1,5 @@
 export type UserDTO = {
+  id: number
   uid: string
   email: string
 }

frontend/src/components/Database/DatabaseCells.tsx

@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import DialogImage from '../common/DialogImage'
 import {
-  GridCallbackDetails,
   GridEnrichedColDef,
   GridFilterModel,
   GridSortDirection,
@@ -94,24 +93,26 @@ const columns = (handleOpenDialog: (value: ImageUrls[], expId?: string) => void)
     width: 160,
     filterable: false,
     sortable: false,
-    renderCell: (params: { row: DatabaseType }) => (
-      <Box
-        sx={{
-          cursor: 'pointer',
-          display: 'flex',
-        }}
-        onClick={() => params.row?.cell_image_url && handleOpenDialog([params.row.cell_image_url])}
-      >
-        {params.row?.cell_image_url?.thumb_url && (
+    renderCell: (params: { row: DatabaseType }) => {
+      const { cell_image_url } = params.row
+      if (!cell_image_url) return null
+      return (
+        <Box
+          sx={{
+            cursor: 'pointer',
+            display: 'flex',
+          }}
+          onClick={() => handleOpenDialog([cell_image_url])}
+        >
           <img
             src={params.row?.cell_image_url?.thumb_url}
             alt={''}
             width={'100%'}
             height={'100%'}
           />
-        )}
-      </Box>
-    ),
+        </Box>
+      )
+    },
   },
 ]
 
@@ -175,7 +176,7 @@ const DatabaseCells = ({ user }: CellProps) => {
 
   const fetchApi = () => {
     const api = !user ? getCellsPublicDatabase : getCellsDatabase
-    dispatch(api({...dataParamsFilter,...dataParams}))
+    dispatch(api({ ...dataParamsFilter, ...dataParams }))
   }
 
   useEffect(() => {
@@ -225,29 +226,19 @@ const DatabaseCells = ({ user }: CellProps) => {
     [pagiFilter, getParamsData],
   )
 
-  const handleFilter = (
-    model: GridFilterModel | any,
-    details: GridCallbackDetails,
-  ) => {
-    let filter: string
+  const handleFilter = (model: GridFilterModel) => {
+    let filter = ''
     if (!!model.items[0]?.value) {
       filter = model.items
-        .filter((item: { [key: string]: string }) => item.value)
+        .filter((item) => item.value)
         .map((item: any) => {
           return `${item.field}=${item?.value}`
         })
         .join('&')
-    } else {
-      filter = ''
-    }
-    if (!model.items[0]) {
-      setParams(
-        `${filter}&sort=${dataParams.sort[0]}&sort=${dataParams.sort[1]}&${pagiFilter()}`,
-      )
-      return
     }
+    const { sort } = dataParams
     setParams(
-      `${filter}&sort=${dataParams.sort[0]}&sort=${dataParams.sort[1]}&${pagiFilter()}`,
+      `${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter()}`,
     )
   }
 

frontend/src/components/Database/DatabaseExperiments.tsx

@@ -11,7 +11,6 @@ import { DataGrid, GridRenderCellParams, GridRowParams } from '@mui/x-data-grid'
 import DialogImage from '../common/DialogImage'
 import SwitchCustom from '../common/SwitchCustom'
 import {
-  GridCallbackDetails,
   GridEnrichedColDef,
   GridFilterModel,
   GridSortDirection,
@@ -452,7 +451,7 @@ const DatabaseExperiments = ({ user, cellPath }: DatabaseProps) => {
   }
 
   const handleChangeAttributes = (event: any) => {
-    setDataDialog(pre => ({...pre, data: event.target.value}))
+    setDataDialog((pre) => ({ ...pre, data: event.target.value }))
   }
 
   const handleOpenShare = () => {
@@ -499,23 +498,20 @@ const DatabaseExperiments = ({ user, cellPath }: DatabaseProps) => {
     [pagiFilter, getParamsData],
   )
 
-  const handleFilter = (
-    model: GridFilterModel | any,
-    details: GridCallbackDetails,
-  ) => {
-    let filter: string
+  const handleFilter = (model: GridFilterModel) => {
+    let filter = ''
     if (!!model.items[0]?.value) {
       filter = model.items
-        .filter((item: { [key: string]: string }) => item.value)
+        .filter((item) => item.value)
         .map((item: any) => {
           return `${item.field}=${item?.value}`
         })
         .join('&')
-    } else {
-      filter = ''
     }
-    const {sort} = dataParams
-    setParams(`${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter()}`)
+    const { sort } = dataParams
+    setParams(
+      `${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter()}`,
+    )
   }
 
   const getColumns = useMemo(() => {

frontend/src/components/Layout/index.tsx

@@ -12,19 +12,18 @@ import { IS_STANDALONE } from 'const/Mode'
 import Loading from 'components/common/Loading'
 
 const authRequiredPathRegex = /^\/console\/?.*/
-const redirectAfterLoginPaths = ['/login', '/reset-password', '/console']
 
 const Layout = ({ children }: { children?: ReactNode }) => {
   const user = useSelector(selectCurrentUser)
   const location = useLocation()
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
-  const [loading, setLoadingAuth] = useState(!IS_STANDALONE && authRequiredPathRegex.test(window.location.pathname))
+  const [loading, setLoadingAuth] = useState(!IS_STANDALONE && authRequiredPathRegex.test(location.pathname))
 
   useEffect(() => {
     !IS_STANDALONE &&
-      authRequiredPathRegex.test(window.location.pathname) &&
+      authRequiredPathRegex.test(location.pathname) &&
       checkAuth()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname, user])
@@ -35,18 +34,17 @@ const Layout = ({ children }: { children?: ReactNode }) => {
       return
     }
     const token = getToken()
-    const willRedirect = redirectAfterLoginPaths.includes(
-        window.location.pathname,
-    )
+    const isLogin = location.pathname === '/login'
+
 
     try {
       if (token) {
         await dispatch(getMe())
-        if (willRedirect) navigate('/console')
+        if (isLogin) navigate('/console')
         return
-      } else if (!willRedirect) throw new Error('fail auth')
+      } else if (!isLogin) throw new Error('fail auth')
     } catch {
-      navigate('/login')
+      navigate('/login', { replace: true })
     } finally {
       if(loading) setLoadingAuth(false)
     }

frontend/src/pages/Login/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack, styled, Typography } from '@mui/material'
 import { useDispatch } from 'react-redux'
-import { getMe, login } from 'store/slice/User/UserActions'
+import { login } from 'store/slice/User/UserActions'
 import { AppDispatch } from 'store/store'
 import { ChangeEvent, FormEvent, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
@@ -28,11 +28,7 @@ const Login = () => {
     dispatch(login(values))
       .unwrap()
       .then((_) => {
-        dispatch(getMe())
-          .unwrap()
-          .then((_) => {
-            navigate('/console')
-          })
+        navigate('/console')
       })
       .catch((_) => {
         setErrors({ email: 'Email or password is wrong', password: '' })

frontend/src/pages/ResetPassword/index.tsx

@@ -25,6 +25,7 @@ const ResetPassword = () => {
             await sendResetPasswordMailApi(values.email)
             setTimeout(()=>{
                 alert(` You'll receive a link to reset your password at ${values.email}. Please check your mail!`)
+                navigate('/login')
             },300)
         }
         catch {