[85, 126] fix endpoints, layouts

ReiHashimoto · ReiHashimoto · commit a09f5ad80a53 · 2023-09-22T18:37:44.000+09:00
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -30,15 +30,17 @@ const App: React.FC = () => {
             </Routes>
           ) : (
             <Routes>
-              <Route path="/" element={<Dashboard />} />
-              <Route path="/account" element={<Account />} />
+              <Route path="/" element={<Navigate replace to="/console" />} />
               <Route path="/account-deleted" element={<AccountDelete />} />
               <Route path="/login" element={<Login />} />
               <Route path="/reset-password" element={<ResetPassword />} />
-              <Route path="/workspaces">
+              <Route path="/console" element={<Dashboard />} />
+              <Route path="/console/account" element={<Account />} />
+              <Route path="/console/workspaces">
                 <Route path="" element={<Workspaces />} />
                 <Route path=":workspaceId" element={<Workspace />} />
               </Route>
+              <Route path="/console/*" element={<Navigate replace to="/console" />} />
               <Route path="*" element={<Navigate replace to="/" />} />
             </Routes>
           )}
diff --git a/frontend/src/components/Layout/Header.tsx b/frontend/src/components/Layout/Header.tsx
@@ -12,6 +12,7 @@ import Tooltips from 'components/Layout/Tooltips'
 import WorkspaceTabs from 'components/Workspace/WorkspaceTabs'
 import { IS_STANDALONE } from 'const/Mode'
 import Profile from './Profile'
+import { APP_BAR_HEIGHT } from 'const/Layout'
 
 const Header: FC<{
   handleDrawerOpen: () => void
@@ -40,7 +41,7 @@ const StandaloneHeader: FC = () => {
 const MultiUserHeader: FC<{ handleDrawerOpen: () => void }> = ({
   handleDrawerOpen,
 }) => {
-  const showTabsRegex = /^\/workspaces\/.+$/
+  const showTabsRegex = /^\/console\/workspaces\/.+$/
   const location = useLocation()
 
   return (
@@ -68,6 +69,7 @@ const StyledAppBar = styled(MuiAppBar)({
   position: 'fixed',
   backgroundColor: '#E1DEDB',
   color: '#000000',
+  height: APP_BAR_HEIGHT,
 })
 
 const TitleLogo = styled(Typography)({
diff --git a/frontend/src/components/Layout/LeftMenu.tsx b/frontend/src/components/Layout/LeftMenu.tsx
@@ -6,8 +6,8 @@ import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
-import HomeIcon from '@mui/icons-material/Home'
-import SourceIcon from '@mui/icons-material/Source'
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import AnalyticsIcon from '@mui/icons-material/Analytics'
 import { DRAWER_WIDTH } from 'const/Layout'
 import { Box } from '@mui/material'
 
@@ -19,12 +19,12 @@ const LeftMenu: FC<{ open: boolean; handleDrawerClose: () => void }> = ({
 
   const onClickDashboard = () => {
     handleDrawerClose()
-    navigate('/')
+    navigate('/console')
   }
 
   const onClickWorkspaces = () => {
     handleDrawerClose()
-    navigate('/workspaces')
+    navigate('/console/workspaces')
   }
 
   return (
@@ -35,15 +35,15 @@ const LeftMenu: FC<{ open: boolean; handleDrawerClose: () => void }> = ({
             <ListItem key="dashboard" disablePadding>
               <ListItemButton onClick={onClickDashboard}>
                 <ListItemIcon>
-                  <HomeIcon />
+                  <DashboardIcon />
                 </ListItemIcon>
                 <ListItemText primary="Dashboard" />
               </ListItemButton>
             </ListItem>
             <ListItem key="workspaces" disablePadding>
               <ListItemButton onClick={onClickWorkspaces}>
                 <ListItemIcon>
-                  <SourceIcon />
+                  <AnalyticsIcon />
                 </ListItemIcon>
                 <ListItemText primary="Workspaces" />
               </ListItemButton>
diff --git a/frontend/src/components/Layout/Profile.tsx b/frontend/src/components/Layout/Profile.tsx
@@ -28,7 +28,7 @@ const Profile: FC = () => {
 
   const onClickAccount = () => {
     setAnchorEl(null)
-    navigate('/account')
+    navigate('/console/account')
   }
 
   return (
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, ReactNode, useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Box } from '@mui/material'
@@ -9,58 +9,83 @@ import { getMe } from 'store/slice/User/UserActions'
 import Header from './Header'
 import LeftMenu from './LeftMenu'
 import { IS_STANDALONE } from 'const/Mode'
+import Loading from 'components/common/Loading'
+import { APP_BAR_HEIGHT } from 'const/Layout'
 
-const ignorePaths = ['/login', '/account-delete', '/reset-password']
-const loginPaths = ['/login', '/reset-password']
+const authRequiredPathRegex = /^\/console\/?.*/
 
-const Layout: FC = ({ children }) => {
+const Layout = ({ children }: { children?: ReactNode }) => {
   const user = useSelector(selectCurrentUser)
   const location = useLocation()
-  const [open, setOpen] = useState(false)
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
-  const handleDrawerOpen = () => {
-    setOpen(true)
-  }
-
-  const handleDrawerClose = () => {
-    setOpen(false)
-  }
+  const [loading, setLoadingAuth] = useState(
+    !IS_STANDALONE && authRequiredPathRegex.test(location.pathname),
+  )
 
   useEffect(() => {
-    !IS_STANDALONE && checkAuth()
+    !IS_STANDALONE &&
+      authRequiredPathRegex.test(location.pathname) &&
+      checkAuth()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname, user])
 
   const checkAuth = async () => {
-    if (user) return
+    if (user) {
+      if (loading) setLoadingAuth(false)
+      return
+    }
     const token = getToken()
-    const isPageLogin = loginPaths.includes(window.location.pathname)
+    const isLogin = location.pathname === '/login'
 
     try {
       if (token) {
-        dispatch(getMe())
-        if (isPageLogin) navigate('/')
+        await dispatch(getMe())
+        if (isLogin) navigate('/console')
         return
-      } else if (!isPageLogin) 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)
     }
   }
 
+  if (loading) return <Loading />
+
+  return IS_STANDALONE || authRequiredPathRegex.test(location.pathname) ? (
+    <AuthedLayout>{children}</AuthedLayout>
+  ) : (
+    <UnauthedLayout>{children}</UnauthedLayout>
+  )
+}
+
+const AuthedLayout: FC = ({ children }) => {
+  const [open, setOpen] = useState(false)
+  const handleDrawerOpen = () => {
+    setOpen(true)
+  }
+
+  const handleDrawerClose = () => {
+    setOpen(false)
+  }
+  return (
+    <LayoutWrapper>
+      <Header handleDrawerOpen={handleDrawerOpen} />
+      <ContentBodyWrapper>
+        <LeftMenu open={open} handleDrawerClose={handleDrawerClose} />
+        <ChildrenWrapper>{children}</ChildrenWrapper>
+      </ContentBodyWrapper>
+    </LayoutWrapper>
+  )
+}
+
+const UnauthedLayout: FC = ({ children }) => {
   return (
     <LayoutWrapper>
-      {ignorePaths.includes(location.pathname) ? null : (
-        <Header handleDrawerOpen={handleDrawerOpen} />
-      )}
       <ContentBodyWrapper>
-        {ignorePaths.includes(location.pathname) ? null : (
-          <LeftMenu open={open} handleDrawerClose={handleDrawerClose} />
-        )}
-        <ChildrenWrapper open={open}>
-          {children}
-        </ChildrenWrapper>
+        <ChildrenWrapper>{children}</ChildrenWrapper>
       </ContentBodyWrapper>
     </LayoutWrapper>
   )
@@ -74,28 +99,21 @@ const LayoutWrapper = styled(Box)({
 const ContentBodyWrapper = styled(Box)(() => ({
   backgroundColor: '#ffffff',
   display: 'flex',
-  paddingTop: 48,
-  height: 'calc(100% - 48px)',
+  paddingTop: APP_BAR_HEIGHT,
+  height: `calc(100% - ${APP_BAR_HEIGHT}px)`,
   paddingRight: 10,
-  overflow: 'hidden',
+  overflow: 'auto',
 }))
 
-const ChildrenWrapper = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
-  open?: boolean;
-}>(({ theme, open }) => ({
+const ChildrenWrapper = styled('main', {
+  shouldForwardProp: (prop) => prop !== 'open',
+})<{}>(({ theme }) => ({
   flexGrow: 1,
   padding: theme.spacing(3),
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
-  ...(open && {
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    marginLeft: 0,
-  }),
-}));
+}))
 
 export default Layout
diff --git a/frontend/src/components/Workspace/Experiment/Experiment.tsx b/frontend/src/components/Workspace/Experiment/Experiment.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { ExperimentTable } from './ExperimentTable'
+import { CONTENT_HEIGHT } from 'const/Layout'
 
 const Experiment = React.memo(() => {
   return (
@@ -9,8 +10,7 @@ const Experiment = React.memo(() => {
           display: 'flex',
           flexDirection: 'column',
           flexGrow: 1,
-          height: '100vh',
-          padding: 16,
+          minHeight: CONTENT_HEIGHT,
         }}
       >
         <ExperimentTable />
diff --git a/frontend/src/components/Workspace/FlowChart/FlowChart.tsx b/frontend/src/components/Workspace/FlowChart/FlowChart.tsx
@@ -10,7 +10,7 @@ import RightDrawer from './RightDrawer'
 import { selectRightDrawerIsOpen } from 'store/slice/RightDrawer/RightDrawerSelectors'
 import { UseRunPipelineReturnType } from 'store/slice/Pipeline/PipelineHook'
 import { CurrentPipelineInfo } from 'components/common/CurrentPipelineInfo'
-import { DRAWER_WIDTH, RIGHT_DRAWER_WIDTH } from 'const/Layout'
+import { CONTENT_HEIGHT, DRAWER_WIDTH, RIGHT_DRAWER_WIDTH } from 'const/Layout'
 import { Box } from '@mui/material'
 import { grey } from '@mui/material/colors'
 
@@ -53,7 +53,7 @@ const MainContents = styled('main')<{ open: boolean }>(
   ({ theme }) => ({
     flexDirection: 'column',
     flexGrow: 1,
-    height: '90vh',
+    minHeight: CONTENT_HEIGHT,
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
diff --git a/frontend/src/components/Workspace/ToolBar.tsx b/frontend/src/components/Workspace/ToolBar.tsx
@@ -5,23 +5,39 @@ import { UseRunPipelineReturnType } from 'store/slice/Pipeline/PipelineHook'
 import { NWBSettingButton } from './FlowChart/NWB'
 import { SnakemakeButton } from './FlowChart/Snakemake'
 import { RunButtons } from './RunButtons'
+import { Button } from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import { useNavigate } from 'react-router-dom'
+import { IS_STANDALONE } from 'const/Mode'
 import { ImportWorkflowConfigButton } from './FlowChart/ImportWorkflowConfigButton'
 
-export const ToolBar = React.memo<UseRunPipelineReturnType>((props) => (
-  <Box
-    style={{
-      position: 'absolute',
-      float: 'right',
-      textAlign: 'right',
-      top: -7,
-      right: 10,
-      zIndex: 4,
-      textTransform: 'none',
-    }}
-  >
-    <ImportWorkflowConfigButton />
-    <SnakemakeButton />
-    <NWBSettingButton />
-    <RunButtons {...props} />
-  </Box>
-))
+export const ToolBar = React.memo<UseRunPipelineReturnType>((props) => {
+  const navigate = useNavigate()
+  return (
+    <Box
+      style={{
+        position: 'absolute',
+        float: 'right',
+        textAlign: 'right',
+        top: -7,
+        right: 10,
+        zIndex: 4,
+        textTransform: 'none',
+        fontSize: '1rem',
+      }}
+    >
+      { !IS_STANDALONE &&
+        (
+          <Button onClick={() => navigate('/console/workspaces')}>
+            <ArrowBackIosIcon />
+            Workspaces
+          </Button>
+        )
+      }
+      <ImportWorkflowConfigButton />
+      <SnakemakeButton />
+      <NWBSettingButton />
+      <RunButtons {...props} />
+    </Box>
+  )
+})
diff --git a/frontend/src/components/Workspace/Visualize/Visualize.tsx b/frontend/src/components/Workspace/Visualize/Visualize.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles'
 import { FlexItemList } from './FlexItemList'
 import { VisualizeItemEditor } from './VisualizeItemEditor'
 import { CurrentPipelineInfo } from 'components/common/CurrentPipelineInfo'
-import { DRAWER_WIDTH } from 'const/Layout'
+import { CONTENT_HEIGHT, DRAWER_WIDTH } from 'const/Layout'
 import { Box } from '@mui/material'
 import { grey } from '@mui/material/colors'
 
@@ -42,7 +42,7 @@ const MainContents = styled('main')({
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
-  height: '100vh',
+  minHeight: CONTENT_HEIGHT
 })
 
 export default Visualize
diff --git a/frontend/src/const/Layout.ts b/frontend/src/const/Layout.ts
@@ -1,2 +1,4 @@
+export const APP_BAR_HEIGHT = 60
+export const CONTENT_HEIGHT = `calc(100vh - 48px - ${APP_BAR_HEIGHT}px)` // 48px: spacing(3)
 export const DRAWER_WIDTH = 240
 export const RIGHT_DRAWER_WIDTH = 320
diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
diff --git a/frontend/src/pages/Workspace/index.tsx b/frontend/src/pages/Workspace/index.tsx
diff --git a/studio/app/common/core/auth/auth_dependencies.py b/studio/app/common/core/auth/auth_dependencies.py

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ const Profile: FC = () => {`
`28`	`28`
`29`	`29`	`const onClickAccount = () => {`
`30`	`30`	`setAnchorEl(null)`
`31`		`- navigate('/account')`
	`31`	`+ navigate('/console/account')`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`return (`