Feature/bai 669 add reusable tab page component

frontend/cypress/e2e/pages/index.cy.ts

@@ -9,11 +9,11 @@ describe('Home page', () => {
 
   it('Should toggle dark mode when switch is toggled', () => {
     cy.get('[data-test=userMenuButton]').click()
-    cy.get('[data-test=appBar]').should('have.css', 'background-color', 'rgb(39, 89, 142)')
+    cy.get('[data-test=appBar]').should('not.have.css', 'background-color', 'rgb(36, 36, 36)')
     cy.get('[data-test=toggleDarkMode]').click()
     cy.get('[data-test=appBar]').should('have.css', 'background-color', 'rgb(36, 36, 36)')
     cy.get('[data-test=toggleDarkMode]').click()
-    cy.get('[data-test=appBar]').should('have.css', 'background-color', 'rgb(39, 89, 142)')
+    cy.get('[data-test=appBar]').should('not.have.css', 'background-color', 'rgb(36, 36, 36)')
   })
 })
 

frontend/pages/beta/index.tsx

@@ -8,9 +8,8 @@ import { ListModelType, useListModels } from '../../data/model'
 import ChipSelector from '../../src/common/ChipSelector'
 import EmptyBlob from '../../src/common/EmptyBlob'
 import MultipleErrorWrapper from '../../src/errors/MultipleErrorWrapper'
-import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../src/types'
-import Wrapper from '../../src/Wrapper'
-import { Model, Version } from '../../types/types'
+import Wrapper from '../../src/Wrapper.beta'
+import { MarketPlaceModelGroup, MarketPlaceModelSelectType, Model, Version } from '../../types/types'
 import useDebounce from '../../utils/hooks/useDebounce'
 
 export default function ExploreModels() {
@@ -121,10 +120,10 @@ export default function ExploreModels() {
                   const latestVersion = model.latestVersion as Version
                   return (
                     <Fragment key={model.uuid}>
-                      <Link style={{ textDecoration: 'none' }} href={`/model/${model.uuid}`} passHref>
+                      <Link style={{ textDecoration: 'none' }} href={`beta/model/${model.uuid}`} passHref>
                         <MuiLink
                           variant='h5'
-                          sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.secondary.main }}
+                          sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}
                         >
                           {latestVersion.metadata.highLevelDetails.name}
                         </MuiLink>
@@ -134,7 +133,7 @@ export default function ExploreModels() {
                       </Typography>
                       <Stack direction='row' spacing={1} sx={{ marginBottom: 2 }}>
                         {latestVersion.metadata.highLevelDetails.tags.map((tag: string) => (
-                          <Chip color='primary' key={`chip-${tag}`} label={tag} size='small' variant='outlined' />
+                          <Chip color='secondary' key={`chip-${tag}`} label={tag} size='small' variant='outlined' />
                         ))}
                       </Stack>
                       {index !== models.length - 1 && (

frontend/pages/beta/model/[uuid].tsx

@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router'
+import { ReactElement } from 'react'
+import PageWithTabs from 'src/common/PageWithTabs'
+import Wrapper from 'src/Wrapper.beta'
+
+export default function Model() {
+  const router = useRouter()
+  const { uuid }: { uuid?: string } = router.query
+
+  function myFunction() {
+    console.log('Button clicked!')
+  }
+  return (
+    <Wrapper title='Model' page='marketplace' fullWidth>
+      <PageWithTabs
+        title={uuid}
+        tabs={[{ title: 'Overview', view: OverviewTab }]}
+        actionButtonOnClick={myFunction}
+        actionButtonTitle='Deploy'
+        displayActionButton
+      />
+    </Wrapper>
+  )
+}
+
+const OverviewTab: ReactElement = <>This is the overview for the model</>

frontend/pages/beta/model/new.tsx

@@ -0,0 +1,123 @@
+import { Lock, LockOpen } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { NewModelData } from 'types/types'
+
+import Wrapper from '../../../src/Wrapper.beta'
+
+export default function NewModel() {
+  const [teamName, setTeamName] = useState('')
+  const [modelName, setModelName] = useState('')
+  const [description, setDescription] = useState('')
+  const [accessibility, setAccessibility] = useState<NewModelData['accessibility']>('public')
+
+  const formValid = teamName && modelName && description
+
+  function onSubmit(event) {
+    event.preventDefault()
+    const formData: NewModelData = {
+      teamName,
+      modelName,
+      description,
+      accessibility,
+    }
+    // TODO - after new model page is implemented, forward this data
+    console.log(formData)
+  }
+
+  const privateLabel = () => {
+    return (
+      <Stack direction='row' justifyContent='center' alignItems='center' spacing={1}>
+        <Lock />
+        <Stack sx={{ my: 1 }}>
+          <Typography sx={{ fontWeight: 'bold' }}>Private</Typography>
+          <Typography variant='caption'>You choose who can access this model</Typography>
+        </Stack>
+      </Stack>
+    )
+  }
+
+  const publicLabel = () => {
+    return (
+      <Stack direction='row' justifyContent='center' alignItems='center' spacing={1}>
+        <LockOpen />
+        <Stack sx={{ my: 1 }}>
+          <Typography sx={{ fontWeight: 'bold' }}>Public</Typography>
+          <Typography variant='caption'>You choose who can access this model</Typography>
+        </Stack>
+      </Stack>
+    )
+  }
+
+  return (
+    <Wrapper title='Create a new Model' page='marketplace'>
+      <Card sx={{ p: 4, maxWidth: 500, m: 'auto' }}>
+        <Typography variant='h4' sx={{ fontWeight: 'bold' }} color='primary'>
+          Create a new model
+        </Typography>
+        <Typography>A model repository contains all files, history and information related to a model.</Typography>
+        <Box component='form' sx={{ mt: 4 }} onSubmit={onSubmit}>
+          <Stack divider={<Divider orientation='vertical' flexItem />} spacing={2}>
+            <>
+              <Typography variant='h6'>Overview</Typography>
+              <Stack direction='row' spacing={2}>
+                <Stack>
+                  <Typography sx={{ fontWeight: 'bold' }}>
+                    Team <span style={{ color: 'red' }}>*</span>
+                  </Typography>
+                  <TextField required size='small' value={teamName} onChange={(e) => setTeamName(e.target.value)} />
+                </Stack>
+                <Stack>
+                  <Typography sx={{ fontWeight: 'bold' }}>
+                    Model name <span style={{ color: 'red' }}>*</span>
+                  </Typography>
+                  <TextField required size='small' value={modelName} onChange={(e) => setModelName(e.target.value)} />
+                </Stack>
+              </Stack>
+              <Stack>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                  Description <span style={{ color: 'red' }}>*</span>
+                </Typography>
+                <TextField required size='small' value={description} onChange={(e) => setDescription(e.target.value)} />
+              </Stack>
+            </>
+            <Divider />
+            <>
+              <Typography variant='h6'>Access control</Typography>
+              <RadioGroup
+                defaultValue='public'
+                value={accessibility}
+                onChange={(e) => setAccessibility(e.target.value as NewModelData['accessibility'])}
+              >
+                <FormControlLabel value='public' control={<Radio />} label={publicLabel()} />
+                <FormControlLabel value='private' control={<Radio />} label={privateLabel()} />
+              </RadioGroup>
+            </>
+            <Divider />
+            <Box sx={{ textAlign: 'right' }}>
+              <Tooltip title={!formValid ? 'Please make sure all required fields are filled out' : ''}>
+                <span>
+                  <Button variant='contained' disabled={!formValid} type='submit'>
+                    Create Model
+                  </Button>
+                </span>
+              </Tooltip>
+            </Box>
+          </Stack>
+        </Box>
+      </Card>
+    </Wrapper>
+  )
+}

frontend/pages/index.tsx

@@ -86,7 +86,7 @@ export default function ExploreModels() {
                     <Link href={`/model/${model.uuid}`} passHref legacyBehavior>
                       <MuiLink
                         variant='h5'
-                        sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.secondary.main }}
+                        sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}
                       >
                         {latestVersion.metadata.highLevelDetails.name}
                       </MuiLink>