Merge pull request #214 from linea-it/211-navigation-button

211 navigation button
linea-it · Dec 1, 2023 · 4f63d5c · 4f63d5c
2 parents f36b18c + bfef4a4
commit 4f63d5c
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 54 deletions.
diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
@@ -1,35 +1,38 @@
+import React from 'react'
+
 import ShareIcon from '@mui/icons-material/Share'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import VerifiedIcon from '@mui/icons-material/Verified'
+import EditIcon from '@mui/icons-material/Edit'
+
 import LoadingButton from '@mui/lab/LoadingButton'
-import {
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Chip,
-  Divider,
-  Grid,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  Paper,
-  Snackbar,
-  Stack,
-  Tab,
-  Tabs,
-  Typography
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Paper from '@mui/material/Paper'
+import Snackbar from '@mui/material/Snackbar'
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
 import Alert from '@mui/material/Alert'
-import ProductShare from './ProductShare'
 
-import EditIcon from '@mui/icons-material/Edit'
 import moment from 'moment'
 import { useRouter } from 'next/router'
 import prettyBytes from 'pretty-bytes'
 import PropTypes from 'prop-types'
-import React from 'react'
 import Loading from '../components/Loading'
+import ProductShare from './ProductShare'
 import ProductDataGrid from '../components/ProductDataGrid'
 import ProductNotFound from '../components/ProductNotFound'
 import {
@@ -232,7 +235,38 @@ export default function ProductDetail({ productId, internalName }) {
             Link copied successfully!
           </Alert>
         </Snackbar>
-        <Typography variant="h6">Product</Typography>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography>Data Products</Typography>
+          <Typography color="textPrimary">Product</Typography>
+        </Breadcrumbs>
+        <Box
+          sx={{
+            mt: 1,
+            mb: 1,
+            p: 1
+          }}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Stack
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="center"
+            spacing={2}
+          >
+            <ArrowBackIosIcon
+              onClick={() => {
+                router.back()
+              }}
+              color="primary"
+              cursor="pointer"
+            />
+            <Typography variant="h6">Product</Typography>
+          </Stack>
+        </Box>
       </Box>
       <Box component="form" noValidate autoComplete="off">
         <Grid

diff --git a/frontend/pages/about.js b/frontend/pages/about.js
@@ -1,14 +1,27 @@
-import { Container, Grid, Link, Typography } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/about'
+
 export default function About() {
   const classes = useStyles()
+
   return (
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">About</Typography>
+          </Breadcrumbs>
           <Typography variant="h6" sx={{ mb: 2 }}>
             About
           </Typography>

diff --git a/frontend/pages/contact.js b/frontend/pages/contact.js
@@ -1,14 +1,27 @@
-import { Container, Grid, Typography, Link } from '@mui/material'
-import useStyles from '../styles/pages/contact'
-import { parseCookies } from 'nookies'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+
+import { parseCookies } from 'nookies'
+import useStyles from '../styles/pages/contact'
+
 export default function Contact() {
   const classes = useStyles()
+
   return (
     <Container className={classes.root}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Contact</Typography>
+          </Breadcrumbs>
           <Typography variant="h6" sx={{ mb: 2 }}>
             Contact
           </Typography>

diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
@@ -1,10 +1,21 @@
-import { Box, Button, Card, CardContent, Paper } from '@mui/material'
+import * as React from 'react'
+
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Link from '@mui/material/Link'
+import Stack from '@mui/material/Stack'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
+
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
@@ -30,10 +41,41 @@ export default function Products() {
     <Paper className={classes.root} elevation={3}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
-          {/* TODO: Aqui deve entrar o BREADCRUMB */}
-          <Typography variant="h3" className={classes.title}>
-            Rubin Observatory PZ Data Products
-          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              Rubin Observatory PZ Data Products
+            </Typography>
+          </Breadcrumbs>
+          <Box
+            sx={{
+              mt: 1,
+              mb: 1,
+              p: 1
+            }}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              spacing={2}
+            >
+              <ArrowBackIosIcon
+                onClick={() => {
+                  router.back()
+                }}
+                color="primary"
+                cursor="pointer"
+              />
+              <Typography variant="h3" className={classes.title}>
+                Rubin Observatory PZ Data Products
+              </Typography>
+            </Stack>
+          </Box>
         </Grid>
         <Grid item xs={4}>
           {/* TODO: Aqui deve entrar botões de ações da pagina */}

diff --git a/frontend/pages/product/edit/[pid].js b/frontend/pages/product/edit/[pid].js
@@ -1,8 +1,11 @@
+import React, { useState } from 'react'
+
 import UploadIcon from '@mui/icons-material/Upload'
 import VerifiedIcon from '@mui/icons-material/Verified'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 
 import Alert from '@mui/material/Alert'
+import { Breadcrumbs, Link } from '@mui/material'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
@@ -16,10 +19,10 @@ import Snackbar from '@mui/material/Snackbar'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
+
 import moment from 'moment'
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import React, { useState } from 'react'
 import FileUploader from '../../../components/FileUploader'
 import LinearProgressWithLabel from '../../../components/LinearProgressWithLabel'
 import Loading from '../../../components/Loading'
@@ -185,6 +188,13 @@ export default function EditProduct() {
     <Container sx={{ flex: 1, m: 4 }}>
       {isLoading && <Loading isLoading={isLoading} />}
       <React.Fragment>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography>Data Products</Typography>
+          <Typography color="textPrimary">Edit Product</Typography>
+        </Breadcrumbs>
         <Box
           sx={{
             mt: 2,
@@ -204,7 +214,8 @@ export default function EditProduct() {
               onClick={() => {
                 router.back()
               }}
-              sx={{ cursor: 'pointer' }}
+              color="primary"
+              cursor="pointer"
             />
             <Typography variant="h6">Edit Product</Typography>
           </Stack>

diff --git a/frontend/pages/tutorials.js b/frontend/pages/tutorials.js
@@ -1,17 +1,28 @@
-import { Container, Grid, Link, Typography } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Divider from '@mui/material/Divider'
+
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/tutorials'
-// import ReactPrismjs from '@uiw/react-prismjs'
-// import 'prismjs/components/prism-bash'
+
 export default function Tutorials() {
   const classes = useStyles()
+
   return (
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Tutorials</Typography>
+          </Breadcrumbs>
           <Typography variant="h6" sx={{ mb: 2 }}>
             Tutorials
           </Typography>

diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
@@ -1,16 +1,21 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  FormControl,
-  Paper
-} from '@mui/material'
+import * as React from 'react'
+
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Link from '@mui/material/Link'
+import Stack from '@mui/material/Stack'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
+
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
@@ -34,10 +39,41 @@ export default function Products() {
     <Paper className={classes.root}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
-          {/* TODO: Aqui deve entrar o BREADCRUMB */}
-          <Typography variant="h3" className={classes.title}>
-            User-generated Data Products
-          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              User-generated Data Products
+            </Typography>
+          </Breadcrumbs>
+          <Box
+            sx={{
+              mt: 1,
+              mb: 1,
+              p: 1
+            }}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              spacing={2}
+            >
+              <ArrowBackIosIcon
+                onClick={() => {
+                  router.back()
+                }}
+                color="primary"
+                cursor="pointer"
+              />
+              <Typography variant="h3" className={classes.title}>
+                User-generated Data Products
+              </Typography>
+            </Stack>
+          </Box>
         </Grid>
         <Grid item xs={4}>
           {/* TODO: Aqui deve entrar botões de ações da pagina */}