From 7fb1e4593f2a2d08d5f61e415a58d0fe82903fbc Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:08:20 +0000
Subject: [PATCH 01/11] added a new create model wizard view

---
 frontend/pages/beta/create-new-model.tsx | 97 ++++++++++++++++++++++++
 frontend/pages/beta/index.tsx            |  4 +-
 frontend/src/types.ts                    | 11 ---
 frontend/types/types.ts                  | 11 +++
 4 files changed, 110 insertions(+), 13 deletions(-)
 create mode 100644 frontend/pages/beta/create-new-model.tsx

diff --git a/frontend/pages/beta/create-new-model.tsx b/frontend/pages/beta/create-new-model.tsx
new file mode 100644
index 000000000..c0f0e3981
--- /dev/null
+++ b/frontend/pages/beta/create-new-model.tsx
@@ -0,0 +1,97 @@
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import Divider from '@mui/material/Divider'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useState } from 'react'
+
+import Wrapper from '../../src/Wrapper'
+
+type NewModelData = {
+  teamName: string
+  modelName: string
+  description: string
+  accessibility: 'public' | 'private'
+}
+
+export default function CreateNewModelWizard() {
+  const [teamName, setTeamName] = useState('')
+  const [modelName, setModelName] = useState('')
+  const [description, setDescription] = useState('')
+  const [accessibility, setAccessibility] = useState<NewModelData['accessibility']>('public')
+
+  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)
+  }
+  return (
+    <Wrapper title='Create a new Model' page='marketplace'>
+      <Card sx={{ p: 4 }}>
+        <Typography variant='h4' color='primary'>
+          Create a new Model
+        </Typography>
+        <Typography variant='h6' color='secondary'>
+          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}>
+            <>
+              <Stack direction='row' divider={<Divider orientation='vertical' flexItem />} spacing={2}>
+                <TextField required label='Team' value={teamName} onChange={(e) => setTeamName(e.target.value)} />
+                <TextField
+                  required
+                  label='Model name'
+                  value={modelName}
+                  onChange={(e) => setModelName(e.target.value)}
+                />
+              </Stack>
+              <TextField
+                required
+                label='Description'
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </>
+            <Divider />
+            <>
+              <RadioGroup
+                defaultValue='public'
+                value={accessibility}
+                onChange={(e) => setAccessibility(e.target.value as NewModelData['accessibility'])}
+              >
+                <FormControlLabel
+                  value='public'
+                  control={<Radio />}
+                  label='Public - Anyone on this instance can see this model'
+                />
+                <FormControlLabel
+                  value='private'
+                  control={<Radio />}
+                  label='Private - You choose who can access this model'
+                />
+              </RadioGroup>
+            </>
+            <Divider />
+            <Box sx={{ textAlign: 'right' }}>
+              <Button variant='contained' type='submit'>
+                Create Model
+              </Button>
+            </Box>
+          </Stack>
+        </Box>
+      </Card>
+    </Wrapper>
+  )
+}
diff --git a/frontend/pages/beta/index.tsx b/frontend/pages/beta/index.tsx
index a2bdc548b..d257f3f5f 100644
--- a/frontend/pages/beta/index.tsx
+++ b/frontend/pages/beta/index.tsx
@@ -13,14 +13,14 @@ import Tabs from '@mui/material/Tabs'
 import Typography from '@mui/material/Typography'
 import Link from 'next/link'
 import React, { Fragment, useState } from 'react'
-import TagSelector from 'src/common/TagSelector'
-import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from 'src/types'
 
 import { ListModelType, useListModels } from '../../data/model'
 import EmptyBlob from '../../src/common/EmptyBlob'
+import TagSelector from '../../src/common/TagSelector'
 import MultipleErrorWrapper from '../../src/errors/MultipleErrorWrapper'
 import Wrapper from '../../src/Wrapper'
 import { Model, Version } from '../../types/types'
+import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../types/types'
 import useDebounce from '../../utils/hooks/useDebounce'
 
 export default function ExploreModels() {
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index f98f214df..c35986aed 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,14 +1,3 @@
 export interface ExtendedSelectDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
   'data-test'?: string
 }
-
-export enum MarketPlaceModelSelectType {
-  MY_MODELS = 'My Models',
-  FAVOURITES = 'Favourites',
-}
-
-export enum MarketPlaceModelGroup {
-  MY_MODELS = 'user',
-  FAVOURITES = 'favourites',
-  ALL = 'all',
-}
diff --git a/frontend/types/types.ts b/frontend/types/types.ts
index 3146af7df..38a2d5081 100644
--- a/frontend/types/types.ts
+++ b/frontend/types/types.ts
@@ -342,3 +342,14 @@ export interface Version {
 }
 
 export type VersionDoc = Version & Document<any, any, Version>
+
+export enum MarketPlaceModelSelectType {
+  MY_MODELS = 'My Models',
+  FAVOURITES = 'Favourites',
+}
+
+export enum MarketPlaceModelGroup {
+  MY_MODELS = 'user',
+  FAVOURITES = 'favourites',
+  ALL = 'all',
+}

From 6c34025ace679fe26a2f6454551c0ce3624753ac Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Mon, 3 Jul 2023 15:56:39 +0000
Subject: [PATCH 02/11] added a new beta wrapper component

---
 frontend/pages/beta/create-new-model.tsx |   2 +-
 frontend/pages/beta/index.tsx            |   4 +-
 frontend/src/Wrapper.beta.tsx            | 433 +++++++++++++++++++++++
 frontend/src/Wrapper.tsx                 |  10 -
 4 files changed, 435 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/Wrapper.beta.tsx

diff --git a/frontend/pages/beta/create-new-model.tsx b/frontend/pages/beta/create-new-model.tsx
index c0f0e3981..0e7ebc635 100644
--- a/frontend/pages/beta/create-new-model.tsx
+++ b/frontend/pages/beta/create-new-model.tsx
@@ -10,7 +10,7 @@ import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useState } from 'react'
 
-import Wrapper from '../../src/Wrapper'
+import Wrapper from '../../src/Wrapper.beta'
 
 type NewModelData = {
   teamName: string
diff --git a/frontend/pages/beta/index.tsx b/frontend/pages/beta/index.tsx
index 5325924fe..cd2a89bd1 100644
--- a/frontend/pages/beta/index.tsx
+++ b/frontend/pages/beta/index.tsx
@@ -17,10 +17,8 @@ import React, { Fragment, useState } from 'react'
 import { ListModelType, useListModels } from '../../data/model'
 import ChipSelector from '../../src/common/ChipSelector'
 import EmptyBlob from '../../src/common/EmptyBlob'
-import TagSelector from '../../src/common/TagSelector'
 import MultipleErrorWrapper from '../../src/errors/MultipleErrorWrapper'
-import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../src/types'
-import Wrapper from '../../src/Wrapper'
+import Wrapper from '../../src/Wrapper.beta'
 import { Model, Version } from '../../types/types'
 import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../types/types'
 import useDebounce from '../../utils/hooks/useDebounce'
diff --git a/frontend/src/Wrapper.beta.tsx b/frontend/src/Wrapper.beta.tsx
new file mode 100644
index 000000000..8f69154f0
--- /dev/null
+++ b/frontend/src/Wrapper.beta.tsx
@@ -0,0 +1,433 @@
+import AdminIcon from '@mui/icons-material/AdminPanelSettingsTwoTone'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeftTwoTone'
+import ContactSupportIcon from '@mui/icons-material/ContactSupportTwoTone'
+import DarkModeIcon from '@mui/icons-material/DarkModeTwoTone'
+import DashboardIcon from '@mui/icons-material/DashboardTwoTone'
+import FileUploadIcon from '@mui/icons-material/FileUploadTwoTone'
+import LinkIcon from '@mui/icons-material/LinkTwoTone'
+import ListAltIcon from '@mui/icons-material/ListAlt'
+import LogoutIcon from '@mui/icons-material/LogoutTwoTone'
+import MenuIcon from '@mui/icons-material/MenuTwoTone'
+import SchemaIcon from '@mui/icons-material/SchemaTwoTone'
+import Settings from '@mui/icons-material/SettingsTwoTone'
+import ViewList from '@mui/icons-material/ViewListTwoTone'
+import { ListItemButton } from '@mui/material'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import Badge from '@mui/material/Badge'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import MuiDrawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import MenuList from '@mui/material/MenuList'
+import { styled, ThemeProvider, useTheme } from '@mui/material/styles'
+import Switch from '@mui/material/Switch'
+import Toolbar from '@mui/material/Toolbar'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+import Head from 'next/head'
+import Image from 'next/legacy/image'
+import React, { MouseEvent, ReactElement, ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+
+import { useGetNumApprovals } from '../data/approvals'
+import { useGetUiConfig } from '../data/uiConfig'
+import { useGetCurrentUser } from '../data/user'
+import { EntityKind } from '../types/types'
+import Banner from './Banner'
+import UserAvatar from './common/UserAvatar'
+import ThemeModeContext from './contexts/themeModeContext'
+import Copyright from './Copyright'
+import Link from './Link'
+
+const drawerWidth = 240
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== 'open',
+})<AppBarProps>(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(['width', 'margin-left'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin-left'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}))
+
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+  '& .MuiDrawer-paper': {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    boxSizing: 'border-box',
+    ...(!open && {
+      overflowX: 'hidden',
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      width: theme.spacing(7),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(9),
+      },
+    }),
+  },
+}))
+
+type WrapperProps = {
+  title: string
+  page: string
+  children?: ReactNode
+}
+
+export default function Wrapper({ title, page, children }: WrapperProps): ReactElement {
+  const isDocsPage = useMemo(() => page.startsWith('docs'), [page])
+
+  const [open, setOpen] = useState(false)
+  const toggleDrawer = (): void => {
+    setOpen(!open)
+  }
+
+  const theme = useTheme()
+  const { toggleDarkMode } = useContext(ThemeModeContext)
+
+  const { uiConfig, isUiConfigLoading, isUiConfigError } = useGetUiConfig()
+  const { numApprovals, isNumApprovalsLoading } = useGetNumApprovals()
+  const { currentUser } = useGetCurrentUser()
+
+  const [pageTopStyling, setPageTopStyling] = useState({})
+  const [contentTopStyling, setContentTopStyling] = useState({})
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+
+  const actionOpen = anchorEl !== null
+
+  useEffect(() => {
+    if (!isUiConfigLoading) {
+      if (uiConfig && uiConfig.banner.enabled) {
+        setPageTopStyling({
+          mt: 4,
+        })
+        setContentTopStyling({
+          mt: isDocsPage ? 4 : 8,
+        })
+      }
+    }
+  }, [isUiConfigLoading, uiConfig, isDocsPage])
+
+  if (isUiConfigError) {
+    if (isUiConfigError.status === 403) {
+      return <p>Error authenticating user.</p>
+    }
+
+    return <p>Error loading UI Config: {isUiConfigError.info?.message}</p>
+  }
+
+  const handleUserMenuClicked = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  const headerTitle =
+    typeof title === 'string' ? (
+      <Typography
+        noWrap
+        component='h1'
+        variant='h6'
+        color='inherit'
+        data-test='headerTitle'
+        sx={{ mr: '55px', flexGrow: 1 }}
+      >
+        {title}
+      </Typography>
+    ) : (
+      title
+    )
+
+  const StyledList = styled(List)({
+    paddingTop: 0,
+    paddingBottom: 0,
+    '&& .Mui-selected, && .Mui-selected:hover': {
+      '&, & .MuiListItemIcon-root': {
+        color: theme.palette.secondary.main,
+      },
+    },
+  })
+
+  const betaAdornment = (
+    <Box component='span' sx={{ marginLeft: 1, color: '#cecece', fontSize: 15 }}>
+      beta
+    </Box>
+  )
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Head>
+        <title>{`${title} :: Bailo`}</title>
+      </Head>
+      <Banner />
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        {!isUiConfigLoading && uiConfig && uiConfig.banner.enabled && <Box sx={{ mt: 20 }} />}
+        <AppBar open={open} position='absolute' data-test='appBar' sx={{ ...pageTopStyling, top: 'unset' }}>
+          <Toolbar
+            sx={{
+              pr: '24px', // keep right padding when drawer closed
+            }}
+          >
+            <IconButton
+              edge='start'
+              color='inherit'
+              aria-label='open drawer'
+              onClick={toggleDrawer}
+              sx={{
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
+              }}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Box sx={{ display: { xs: 'flex', cursor: 'pointer' } }}>
+              <Link href='/beta' color='inherit' underline='none'>
+                <Image src='/bailo-logo.png' alt='Logo' width={35} height={45} priority />
+              </Link>
+            </Box>
+            <Box sx={{ flexGrow: 1, ml: 2, display: { xs: 'none', md: 'flex', cursor: 'pointer' } }}>
+              <Link
+                href='/beta'
+                color='inherit'
+                underline='none'
+                style={{ color: 'inherit', textDecoration: 'inherit', fontSize: '1.25rem', fontWeight: 500 }}
+              >
+                Bailo
+                {betaAdornment}
+              </Link>
+            </Box>
+            {headerTitle}
+            {currentUser ? (
+              <>
+                <IconButton onClick={handleUserMenuClicked} data-test='userMenuButton'>
+                  <UserAvatar entity={{ kind: EntityKind.USER, id: currentUser.id }} size='chip' />
+                </IconButton>
+                <Menu sx={{ mt: '10px', right: 0 }} anchorEl={anchorEl} open={actionOpen} onClose={handleMenuClose}>
+                  <MenuList>
+                    <MenuItem data-test='toggleDarkMode'>
+                      <ListItemIcon>
+                        <DarkModeIcon fontSize='small' />
+                      </ListItemIcon>
+                      <Switch
+                        size='small'
+                        checked={localStorage.getItem('dark_mode_enabled') === 'true'}
+                        onChange={toggleDarkMode}
+                        inputProps={{ 'aria-label': 'controlled' }}
+                      />
+                    </MenuItem>
+                    <Link href='/settings' color='inherit' underline='none'>
+                      <MenuItem data-test='settingsLink'>
+                        <ListItemIcon>
+                          <Settings fontSize='small' />
+                        </ListItemIcon>
+                        <ListItemText>Settings</ListItemText>
+                      </MenuItem>
+                    </Link>
+                    <Link href='/api/logout' color='inherit' underline='none'>
+                      <MenuItem data-test='logoutLink'>
+                        <ListItemIcon>
+                          <LogoutIcon fontSize='small' />
+                        </ListItemIcon>
+                        <ListItemText>Sign Out</ListItemText>
+                      </MenuItem>
+                    </Link>
+                  </MenuList>
+                </Menu>
+              </>
+            ) : (
+              <Typography variant='caption'>Loading...</Typography>
+            )}
+          </Toolbar>
+        </AppBar>
+        <Drawer sx={pageTopStyling} variant='permanent' open={open}>
+          <Toolbar
+            sx={{
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
+              borderBottom: `1px solid ${theme.palette.divider}`,
+            }}
+          >
+            <IconButton aria-label='close drawer' onClick={toggleDrawer}>
+              <ChevronLeftIcon />
+            </IconButton>
+          </Toolbar>
+          <StyledList>
+            <Link href='/beta' color='inherit' underline='none'>
+              <ListItemButton selected={page === 'marketplace' || page === 'model' || page === 'deployment'}>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='Marketplace' arrow placement='right'>
+                      <DashboardIcon />
+                    </Tooltip>
+                  ) : (
+                    <DashboardIcon />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='Marketplace' />
+              </ListItemButton>
+            </Link>
+            <Link href='/deployments' color='inherit' underline='none'>
+              <ListItemButton selected={page === 'deployments'}>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='My Deployments' arrow placement='right'>
+                      <ViewList />
+                    </Tooltip>
+                  ) : (
+                    <ViewList />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='Deployments' />
+              </ListItemButton>
+            </Link>
+            <Link href='/beta/create-new-model' color='inherit' underline='none'>
+              <ListItemButton selected={page === 'upload'} data-test='uploadModelLink'>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='Upload Model' arrow placement='right'>
+                      <FileUploadIcon />
+                    </Tooltip>
+                  ) : (
+                    <FileUploadIcon />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='Upload' />
+              </ListItemButton>
+            </Link>
+            <Link href='/review' color='inherit' underline='none'>
+              <ListItemButton selected={page === 'review'} data-test='reviewLink'>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='Review' arrow placement='right'>
+                      <Badge badgeContent={isNumApprovalsLoading ? 0 : numApprovals} color='secondary'>
+                        <ListAltIcon />
+                      </Badge>
+                    </Tooltip>
+                  ) : (
+                    <ListAltIcon />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='Reviews' />
+              </ListItemButton>
+            </Link>
+            <Divider />
+            <Link href='/docs/api'>
+              <ListItemButton selected={page === 'api'} data-test='apiDocsLink'>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='API' arrow placement='right'>
+                      <LinkIcon />
+                    </Tooltip>
+                  ) : (
+                    <LinkIcon />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='API' />
+              </ListItemButton>
+            </Link>
+            <Link href='/help'>
+              <ListItemButton selected={page === 'help'} data-test='supportLink'>
+                <ListItemIcon>
+                  {!open ? (
+                    <Tooltip title='Help & Support' arrow placement='right'>
+                      <ContactSupportIcon />
+                    </Tooltip>
+                  ) : (
+                    <ContactSupportIcon />
+                  )}
+                </ListItemIcon>
+                <ListItemText primary='Support' />
+              </ListItemButton>
+            </Link>
+            {currentUser && currentUser.roles.includes('admin') && (
+              <>
+                <Divider />
+                <Link href='/admin'>
+                  <ListItemButton selected={page === 'admin'}>
+                    <ListItemIcon data-test='adminLink'>
+                      {!open ? (
+                        <Tooltip arrow title='Admin' placement='right'>
+                          <AdminIcon />
+                        </Tooltip>
+                      ) : (
+                        <AdminIcon />
+                      )}
+                    </ListItemIcon>
+                    <ListItemText primary='Admin' />
+                  </ListItemButton>
+                </Link>
+                <Link href='/schemas'>
+                  <ListItemButton selected={page === 'schemas'}>
+                    <ListItemIcon data-test='designSchemaLink'>
+                      {!open ? (
+                        <Tooltip arrow title='Schemas' placement='right'>
+                          <SchemaIcon />
+                        </Tooltip>
+                      ) : (
+                        <SchemaIcon />
+                      )}
+                    </ListItemIcon>
+                    <ListItemText primary='Schemas' />
+                  </ListItemButton>
+                </Link>
+              </>
+            )}
+          </StyledList>
+          <Divider />
+        </Drawer>
+        <Box
+          component='main'
+          sx={{
+            backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+            flexGrow: 1,
+            height: '100vh',
+            overflow: 'auto',
+          }}
+        >
+          <Toolbar />
+          <Box sx={contentTopStyling}>
+            {isDocsPage ? (
+              children
+            ) : (
+              <>
+                <Container maxWidth='xl' sx={{ mt: 4, mb: 4 }}>
+                  {children}
+                </Container>
+                <Copyright sx={{ mb: 2 }} />
+              </>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </ThemeProvider>
+  )
+}
diff --git a/frontend/src/Wrapper.tsx b/frontend/src/Wrapper.tsx
index 13b0a760b..789864b7e 100644
--- a/frontend/src/Wrapper.tsx
+++ b/frontend/src/Wrapper.tsx
@@ -33,7 +33,6 @@ import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import Head from 'next/head'
 import Image from 'next/legacy/image'
-import { useRouter } from 'next/router'
 import React, { MouseEvent, ReactElement, ReactNode, useContext, useEffect, useMemo, useState } from 'react'
 
 import { useGetNumApprovals } from '../data/approvals'
@@ -101,8 +100,6 @@ type WrapperProps = {
 }
 
 export default function Wrapper({ title, page, children }: WrapperProps): ReactElement {
-  const router = useRouter()
-
   const isDocsPage = useMemo(() => page.startsWith('docs'), [page])
 
   const [open, setOpen] = useState(false)
@@ -178,12 +175,6 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
     },
   })
 
-  const betaAdornment = (
-    <Box component='span' sx={{ marginLeft: 1, color: '#cecece', fontSize: 15 }}>
-      beta
-    </Box>
-  )
-
   return (
     <ThemeProvider theme={theme}>
       <Head>
@@ -224,7 +215,6 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
                 style={{ color: 'inherit', textDecoration: 'inherit', fontSize: '1.25rem', fontWeight: 500 }}
               >
                 Bailo
-                {router.asPath.includes('/beta') && betaAdornment}
               </Link>
             </Box>
             {headerTitle}

From 2bc84a61963a27c3c5c2b7dffa454d64cbbf125a Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Mon, 3 Jul 2023 16:18:55 +0000
Subject: [PATCH 03/11] various pr comments

---
 frontend/pages/beta/create-new-model.tsx | 97 ------------------------
 frontend/types/types.ts                  |  7 ++
 2 files changed, 7 insertions(+), 97 deletions(-)
 delete mode 100644 frontend/pages/beta/create-new-model.tsx

diff --git a/frontend/pages/beta/create-new-model.tsx b/frontend/pages/beta/create-new-model.tsx
deleted file mode 100644
index c0f0e3981..000000000
--- a/frontend/pages/beta/create-new-model.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Card from '@mui/material/Card'
-import Divider from '@mui/material/Divider'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Radio from '@mui/material/Radio'
-import RadioGroup from '@mui/material/RadioGroup'
-import Stack from '@mui/material/Stack'
-import TextField from '@mui/material/TextField'
-import Typography from '@mui/material/Typography'
-import { useState } from 'react'
-
-import Wrapper from '../../src/Wrapper'
-
-type NewModelData = {
-  teamName: string
-  modelName: string
-  description: string
-  accessibility: 'public' | 'private'
-}
-
-export default function CreateNewModelWizard() {
-  const [teamName, setTeamName] = useState('')
-  const [modelName, setModelName] = useState('')
-  const [description, setDescription] = useState('')
-  const [accessibility, setAccessibility] = useState<NewModelData['accessibility']>('public')
-
-  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)
-  }
-  return (
-    <Wrapper title='Create a new Model' page='marketplace'>
-      <Card sx={{ p: 4 }}>
-        <Typography variant='h4' color='primary'>
-          Create a new Model
-        </Typography>
-        <Typography variant='h6' color='secondary'>
-          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}>
-            <>
-              <Stack direction='row' divider={<Divider orientation='vertical' flexItem />} spacing={2}>
-                <TextField required label='Team' value={teamName} onChange={(e) => setTeamName(e.target.value)} />
-                <TextField
-                  required
-                  label='Model name'
-                  value={modelName}
-                  onChange={(e) => setModelName(e.target.value)}
-                />
-              </Stack>
-              <TextField
-                required
-                label='Description'
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-              />
-            </>
-            <Divider />
-            <>
-              <RadioGroup
-                defaultValue='public'
-                value={accessibility}
-                onChange={(e) => setAccessibility(e.target.value as NewModelData['accessibility'])}
-              >
-                <FormControlLabel
-                  value='public'
-                  control={<Radio />}
-                  label='Public - Anyone on this instance can see this model'
-                />
-                <FormControlLabel
-                  value='private'
-                  control={<Radio />}
-                  label='Private - You choose who can access this model'
-                />
-              </RadioGroup>
-            </>
-            <Divider />
-            <Box sx={{ textAlign: 'right' }}>
-              <Button variant='contained' type='submit'>
-                Create Model
-              </Button>
-            </Box>
-          </Stack>
-        </Box>
-      </Card>
-    </Wrapper>
-  )
-}
diff --git a/frontend/types/types.ts b/frontend/types/types.ts
index 38a2d5081..64fbc6c0c 100644
--- a/frontend/types/types.ts
+++ b/frontend/types/types.ts
@@ -353,3 +353,10 @@ export enum MarketPlaceModelGroup {
   FAVOURITES = 'favourites',
   ALL = 'all',
 }
+
+export type NewModelData = {
+  teamName: string
+  modelName: string
+  description: string
+  accessibility: 'public' | 'private'
+}

From b9d7a5d65169aa2fdabd8d30ff620509d539f886 Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:53:00 +0000
Subject: [PATCH 04/11] changed stying and path of new model page

---
 frontend/pages/beta/model/new.tsx | 110 ++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 frontend/pages/beta/model/new.tsx

diff --git a/frontend/pages/beta/model/new.tsx b/frontend/pages/beta/model/new.tsx
new file mode 100644
index 000000000..bd948cabe
--- /dev/null
+++ b/frontend/pages/beta/model/new.tsx
@@ -0,0 +1,110 @@
+import { Lock, LockOpen } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { NewModelData } from 'types/types'
+
+import Wrapper from '../../../src/Wrapper'
+
+export default function NewModel() {
+  const [teamName, setTeamName] = useState('')
+  const [modelName, setModelName] = useState('')
+  const [description, setDescription] = useState('')
+  const [accessibility, setAccessibility] = useState<NewModelData['accessibility']>('public')
+
+  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' 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</Typography>
+                  <TextField required size='small' value={teamName} onChange={(e) => setTeamName(e.target.value)} />
+                </Stack>
+                <Stack>
+                  <Typography sx={{ fontWeight: 'bold' }}>Model name</Typography>
+                  <TextField required size='small' value={modelName} onChange={(e) => setModelName(e.target.value)} />
+                </Stack>
+              </Stack>
+              <Stack>
+                <Typography sx={{ fontWeight: 'bold' }}>Description</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' }}>
+              <Button variant='contained' type='submit'>
+                Create Model
+              </Button>
+            </Box>
+          </Stack>
+        </Box>
+      </Card>
+    </Wrapper>
+  )
+}

From 564c1bbd209b9480e2c21b7675a92458d0e7706e Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:13:05 +0000
Subject: [PATCH 05/11] changed theme colours

---
 frontend/pages/beta/index.tsx     |  9 +++------
 frontend/pages/beta/model/new.tsx | 27 ++++++++++++++++++++-------
 frontend/src/Wrapper.tsx          | 14 +++++++++++++-
 frontend/src/theme.ts             |  4 ++--
 frontend/styles/theme.ts          |  4 ++--
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/frontend/pages/beta/index.tsx b/frontend/pages/beta/index.tsx
index f7b9d57e4..b90530480 100644
--- a/frontend/pages/beta/index.tsx
+++ b/frontend/pages/beta/index.tsx
@@ -7,12 +7,9 @@ import React, { Fragment, useState } from 'react'
 import { ListModelType, useListModels } from '../../data/model'
 import ChipSelector from '../../src/common/ChipSelector'
 import EmptyBlob from '../../src/common/EmptyBlob'
-import TagSelector from '../../src/common/TagSelector'
 import MultipleErrorWrapper from '../../src/errors/MultipleErrorWrapper'
-import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../src/types'
 import Wrapper from '../../src/Wrapper'
-import { Model, Version } from '../../types/types'
-import { MarketPlaceModelGroup, MarketPlaceModelSelectType } from '../../types/types'
+import { MarketPlaceModelGroup, MarketPlaceModelSelectType, Model, Version } from '../../types/types'
 import useDebounce from '../../utils/hooks/useDebounce'
 
 export default function ExploreModels() {
@@ -126,7 +123,7 @@ export default function ExploreModels() {
                       <Link style={{ textDecoration: 'none' }} href={`/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>
@@ -136,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 && (
diff --git a/frontend/pages/beta/model/new.tsx b/frontend/pages/beta/model/new.tsx
index bd948cabe..621e9e2b9 100644
--- a/frontend/pages/beta/model/new.tsx
+++ b/frontend/pages/beta/model/new.tsx
@@ -9,6 +9,7 @@ import {
   RadioGroup,
   Stack,
   TextField,
+  Tooltip,
   Typography,
 } from '@mui/material'
 import { useState } from 'react'
@@ -22,6 +23,8 @@ export default function NewModel() {
   const [description, setDescription] = useState('')
   const [accessibility, setAccessibility] = useState<NewModelData['accessibility']>('public')
 
+  const formValid = teamName && modelName && description
+
   function onSubmit(event) {
     event.preventDefault()
     const formData: NewModelData = {
@@ -61,7 +64,7 @@ export default function NewModel() {
   return (
     <Wrapper title='Create a new Model' page='marketplace'>
       <Card sx={{ p: 4, maxWidth: 500, m: 'auto' }}>
-        <Typography variant='h4' color='primary'>
+        <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>
@@ -71,16 +74,22 @@ export default function NewModel() {
               <Typography variant='h6'>Overview</Typography>
               <Stack direction='row' spacing={2}>
                 <Stack>
-                  <Typography sx={{ fontWeight: 'bold' }}>Team</Typography>
+                  <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</Typography>
+                  <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</Typography>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                  Description <span style={{ color: 'red' }}>*</span>
+                </Typography>
                 <TextField required size='small' value={description} onChange={(e) => setDescription(e.target.value)} />
               </Stack>
             </>
@@ -98,9 +107,13 @@ export default function NewModel() {
             </>
             <Divider />
             <Box sx={{ textAlign: 'right' }}>
-              <Button variant='contained' type='submit'>
-                Create Model
-              </Button>
+              <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>
diff --git a/frontend/src/Wrapper.tsx b/frontend/src/Wrapper.tsx
index 6b1ad6c23..26c516dbb 100644
--- a/frontend/src/Wrapper.tsx
+++ b/frontend/src/Wrapper.tsx
@@ -192,7 +192,19 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
         {!isUiConfigLoading && uiConfig && uiConfig.banner.enabled && <Box sx={{ mt: 20 }} />}
-        <AppBar open={open} position='absolute' data-test='appBar' sx={{ ...pageTopStyling, top: 'unset' }}>
+        <AppBar
+          open={open}
+          position='absolute'
+          data-test='appBar'
+          sx={{
+            ...pageTopStyling,
+            top: 'unset',
+            background:
+              theme.palette.mode === 'light'
+                ? 'linear-gradient(276deg, rgba(223,71,156,1) 0%, rgba(84,39,142,1) 100%)'
+                : '#242424',
+          }}
+        >
           <Toolbar
             sx={{
               pr: '24px', // keep right padding when drawer closed
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index 8734c79a9..3abd67202 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -35,10 +35,10 @@ export const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#27598e',
+      main: '#54278e',
     },
     secondary: {
-      main: '#f37f58',
+      main: '#d62560',
     },
     error: {
       main: red.A400,
diff --git a/frontend/styles/theme.ts b/frontend/styles/theme.ts
index 4ce2a2070..6d2fba4cf 100644
--- a/frontend/styles/theme.ts
+++ b/frontend/styles/theme.ts
@@ -14,10 +14,10 @@ export const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#27598e',
+      main: '#54278e',
     },
     secondary: {
-      main: '#f37f58',
+      main: '#d62560',
     },
     error: {
       main: red.A400,

From a7bdb594e36f1675364ce1afd0c88daa7839a895 Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Wed, 5 Jul 2023 16:42:31 +0000
Subject: [PATCH 06/11] added a beta wrapper component

---
 frontend/pages/beta/index.tsx     |  2 +-
 frontend/pages/beta/model/new.tsx |  2 +-
 frontend/src/Wrapper.beta.tsx     | 13 +++++++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/beta/index.tsx b/frontend/pages/beta/index.tsx
index b90530480..9d3b667f1 100644
--- a/frontend/pages/beta/index.tsx
+++ b/frontend/pages/beta/index.tsx
@@ -8,7 +8,7 @@ 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 Wrapper from '../../src/Wrapper'
+import Wrapper from '../../src/Wrapper.beta'
 import { MarketPlaceModelGroup, MarketPlaceModelSelectType, Model, Version } from '../../types/types'
 import useDebounce from '../../utils/hooks/useDebounce'
 
diff --git a/frontend/pages/beta/model/new.tsx b/frontend/pages/beta/model/new.tsx
index 621e9e2b9..b4758209d 100644
--- a/frontend/pages/beta/model/new.tsx
+++ b/frontend/pages/beta/model/new.tsx
@@ -15,7 +15,7 @@ import {
 import { useState } from 'react'
 import { NewModelData } from 'types/types'
 
-import Wrapper from '../../../src/Wrapper'
+import Wrapper from '../../../src/Wrapper.beta'
 
 export default function NewModel() {
   const [teamName, setTeamName] = useState('')
diff --git a/frontend/src/Wrapper.beta.tsx b/frontend/src/Wrapper.beta.tsx
index 8f69154f0..590877166 100644
--- a/frontend/src/Wrapper.beta.tsx
+++ b/frontend/src/Wrapper.beta.tsx
@@ -190,7 +190,16 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
         {!isUiConfigLoading && uiConfig && uiConfig.banner.enabled && <Box sx={{ mt: 20 }} />}
-        <AppBar open={open} position='absolute' data-test='appBar' sx={{ ...pageTopStyling, top: 'unset' }}>
+        <AppBar
+          open={open}
+          position='absolute'
+          data-test='appBar'
+          sx={{
+            ...pageTopStyling,
+            top: 'unset',
+            background: 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)',
+          }}
+        >
           <Toolbar
             sx={{
               pr: '24px', // keep right padding when drawer closed
@@ -309,7 +318,7 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
                 <ListItemText primary='Deployments' />
               </ListItemButton>
             </Link>
-            <Link href='/beta/create-new-model' color='inherit' underline='none'>
+            <Link href='/beta/model/new' color='inherit' underline='none'>
               <ListItemButton selected={page === 'upload'} data-test='uploadModelLink'>
                 <ListItemIcon>
                   {!open ? (

From aafeed2622516f575d732337c521f3fdfe55069e Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Thu, 6 Jul 2023 07:56:06 +0000
Subject: [PATCH 07/11] fix for darkmode appbar

---
 frontend/pages/index.tsx      | 2 +-
 frontend/src/Wrapper.beta.tsx | 5 ++++-
 frontend/src/Wrapper.tsx      | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index aafdb6d14..ef4eed1e6 100644
--- a/frontend/pages/index.tsx
+++ b/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>
diff --git a/frontend/src/Wrapper.beta.tsx b/frontend/src/Wrapper.beta.tsx
index 590877166..02ae9b429 100644
--- a/frontend/src/Wrapper.beta.tsx
+++ b/frontend/src/Wrapper.beta.tsx
@@ -197,7 +197,10 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
           sx={{
             ...pageTopStyling,
             top: 'unset',
-            background: 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)',
+            background:
+              theme.palette.mode === 'light'
+                ? 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)'
+                : '#242424',
           }}
         >
           <Toolbar
diff --git a/frontend/src/Wrapper.tsx b/frontend/src/Wrapper.tsx
index 5559b735e..5148dca30 100644
--- a/frontend/src/Wrapper.tsx
+++ b/frontend/src/Wrapper.tsx
@@ -192,7 +192,7 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
             top: 'unset',
             background:
               theme.palette.mode === 'light'
-                ? 'linear-gradient(276deg, rgba(223,71,156,1) 0%, rgba(84,39,142,1) 100%)'
+                ? 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)'
                 : '#242424',
           }}
         >

From ee552c23db125a9ddceaa73775d439a61a3071c1 Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:28:36 +0000
Subject: [PATCH 08/11] fixed index page e2e test

---
 frontend/cypress/e2e/pages/index.cy.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/cypress/e2e/pages/index.cy.ts b/frontend/cypress/e2e/pages/index.cy.ts
index 33e9c8e29..ec00bae8d 100644
--- a/frontend/cypress/e2e/pages/index.cy.ts
+++ b/frontend/cypress/e2e/pages/index.cy.ts
@@ -9,11 +9,19 @@ 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(
+      'have.css',
+      'background',
+      'rgba(0, 0, 0, 0) linear-gradient(276deg, rgb(214, 37, 96) 0%, rgb(84, 39, 142) 100%) repeat scroll 0% 0%'
+    )
     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(
+      'have.css',
+      'background',
+      'rgba(0, 0, 0, 0) linear-gradient(276deg, rgb(214, 37, 96) 0%, rgb(84, 39, 142) 100%) repeat scroll 0% 0%'
+    )
   })
 })
 

From 30039d1c82642e2246ad50cae067cac9cd5ae330 Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Thu, 6 Jul 2023 13:16:38 +0000
Subject: [PATCH 09/11] fixed index page e2e test

---
 frontend/cypress/e2e/pages/index.cy.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/cypress/e2e/pages/index.cy.ts b/frontend/cypress/e2e/pages/index.cy.ts
index ec00bae8d..8f82d5886 100644
--- a/frontend/cypress/e2e/pages/index.cy.ts
+++ b/frontend/cypress/e2e/pages/index.cy.ts
@@ -9,19 +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',
-      'rgba(0, 0, 0, 0) linear-gradient(276deg, rgb(214, 37, 96) 0%, rgb(84, 39, 142) 100%) repeat scroll 0% 0%'
-    )
+    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',
-      'rgba(0, 0, 0, 0) linear-gradient(276deg, rgb(214, 37, 96) 0%, rgb(84, 39, 142) 100%) repeat scroll 0% 0%'
-    )
+    cy.get('[data-test=appBar]').should('not.have.css', 'background-color', 'rgb(36, 36, 36)')
   })
 })
 

From 066bb93ed3554e79f509e0a6c2eb184e9abecd5b Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:00:05 +0000
Subject: [PATCH 10/11] added basic model page. add pagewithtabs component

---
 frontend/pages/beta/index.tsx        |  2 +-
 frontend/pages/beta/model/[uuid].tsx | 26 ++++++++++
 frontend/src/Wrapper.beta.tsx        | 12 +++--
 frontend/src/common/PageWithTabs.tsx | 72 ++++++++++++++++++++++++++++
 4 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 frontend/pages/beta/model/[uuid].tsx
 create mode 100644 frontend/src/common/PageWithTabs.tsx

diff --git a/frontend/pages/beta/index.tsx b/frontend/pages/beta/index.tsx
index 9d3b667f1..7c927118d 100644
--- a/frontend/pages/beta/index.tsx
+++ b/frontend/pages/beta/index.tsx
@@ -120,7 +120,7 @@ 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.primary.main }}
diff --git a/frontend/pages/beta/model/[uuid].tsx b/frontend/pages/beta/model/[uuid].tsx
new file mode 100644
index 000000000..0a1ebac9a
--- /dev/null
+++ b/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</>
diff --git a/frontend/src/Wrapper.beta.tsx b/frontend/src/Wrapper.beta.tsx
index 02ae9b429..01cfafd39 100644
--- a/frontend/src/Wrapper.beta.tsx
+++ b/frontend/src/Wrapper.beta.tsx
@@ -97,9 +97,10 @@ type WrapperProps = {
   title: string
   page: string
   children?: ReactNode
+  fullWidth?: boolean
 }
 
-export default function Wrapper({ title, page, children }: WrapperProps): ReactElement {
+export default function Wrapper({ title, page, children, fullWidth = false }: WrapperProps): ReactElement {
   const isDocsPage = useMemo(() => page.startsWith('docs'), [page])
 
   const [open, setOpen] = useState(false)
@@ -431,9 +432,12 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
               children
             ) : (
               <>
-                <Container maxWidth='xl' sx={{ mt: 4, mb: 4 }}>
-                  {children}
-                </Container>
+                {!fullWidth && (
+                  <Container maxWidth={fullWidth ? false : 'xl'} sx={{ mt: 4, mb: 4 }}>
+                    {children}
+                  </Container>
+                )}
+                {fullWidth && <Box>{children}</Box>}
                 <Copyright sx={{ mb: 2 }} />
               </>
             )}
diff --git a/frontend/src/common/PageWithTabs.tsx b/frontend/src/common/PageWithTabs.tsx
new file mode 100644
index 000000000..573d19b6e
--- /dev/null
+++ b/frontend/src/common/PageWithTabs.tsx
@@ -0,0 +1,72 @@
+import { Box, Button, Stack, Tab, Tabs, Typography } from '@mui/material'
+import { ReactElement, useState } from 'react'
+
+export interface PageTab {
+  title: string
+  view: ReactElement
+  disabled?: boolean
+}
+
+export default function PageWithTabs({
+  title,
+  tabs,
+  actionButtonTitle,
+  displayActionButton = false,
+  actionButtonOnClick,
+}: {
+  title
+  tabs: PageTab[]
+  actionButtonTitle: string
+  displayActionButton?: boolean
+  actionButtonOnClick: () => void
+}) {
+  const [value, setValue] = useState(0)
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+  return (
+    <>
+      <Box>
+        <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={2} sx={{ p: 2 }}>
+          <Typography color='primary' variant='h6'>
+            {title}
+          </Typography>
+          <Button hidden={!displayActionButton} onClick={actionButtonOnClick}>
+            {actionButtonTitle}
+          </Button>
+        </Stack>
+        <Tabs value={value} onChange={handleChange} aria-label='Tabbed view'>
+          {tabs.map((tab: PageTab) => {
+            return <Tab key={tab.title} label={tab.title} disabled={tab.disabled} />
+          })}
+        </Tabs>
+      </Box>
+      <Box sx={{}}>
+        {tabs.map((tab: PageTab, index: number) => {
+          return (
+            <CustomTabPanel key={tab.title} value={value} index={index}>
+              {tab.view}
+            </CustomTabPanel>
+          )
+        })}
+      </Box>
+    </>
+  )
+}
+
+interface TabPanelProps {
+  children?: ReactElement
+  index: number
+  value: number
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div role='tabpanel' hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ backgroundColor: 'white', p: 2, mb: 2 }}>{children}</Box>}
+    </div>
+  )
+}

From 40a3fda767f9dd62b5695a06713205aec1efb0ff Mon Sep 17 00:00:00 2001
From: ARADDCC002 <89992537+ARADDCC002@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:26:39 +0000
Subject: [PATCH 11/11] changed button variant

---
 frontend/src/common/PageWithTabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/common/PageWithTabs.tsx b/frontend/src/common/PageWithTabs.tsx
index 573d19b6e..6d9e07e3c 100644
--- a/frontend/src/common/PageWithTabs.tsx
+++ b/frontend/src/common/PageWithTabs.tsx
@@ -32,7 +32,7 @@ export default function PageWithTabs({
           <Typography color='primary' variant='h6'>
             {title}
           </Typography>
-          <Button hidden={!displayActionButton} onClick={actionButtonOnClick}>
+          <Button variant='contained' hidden={!displayActionButton} onClick={actionButtonOnClick}>
             {actionButtonTitle}
           </Button>
         </Stack>