Add Snapshots for Demo Collections in tutorial page

src/components/Datasets/DatasetsTableHeader.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TableCell, TableRow } from '@mui/material';
+import { TableHeadWithGaps } from '../Common/TableWithGaps';
+import PropTypes from 'prop-types';
+
+export const DatasetsHeader = ({ headers }) => {
+  return (
+    <TableHeadWithGaps>
+      <TableRow>
+        {headers.map((header, index) => (
+          <TableCell
+            key={header}
+            sx={{ fontWeight: 'bold' }}
+            align={index === 0 ? 'left' : index === headers.lenght - 1 ? 'right' : 'center'}
+          >
+            {header}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHeadWithGaps>
+  );
+};
+
+DatasetsHeader.propTypes = {
+  headers: PropTypes.array.isRequired,
+};

src/components/Datasets/DatasetsTableRow.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import prettyBytes from 'pretty-bytes';
+import { useTheme } from '@mui/material/styles';
+import { Box, CircularProgress, IconButton, TableCell, TableRow, Tooltip, Typography } from '@mui/material';
+import { Download, FolderZip } from '@mui/icons-material';
+import ImportDatasetDialog from './ImportDatasetDialog';
+
+export const DatasetsTableRow = ({ dataset, importDataset }) => {
+  const theme = useTheme();
+  const [importing, setImporting] = useState(false);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+
+  return (
+    <TableRow key={dataset.name} align={'center'}>
+      <TableCell width={'50%'}>
+        <Tooltip title={'Import Dataset'} arrow placement={'top'}>
+          <Box
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              verticalAlign: 'middle',
+              cursor: importing ? 'default' : 'pointer',
+              '&:hover': {
+                textDecoration: !importing ? 'underline' : 'none',
+                '& .MuiSvgIcon-root': {
+                  color: !importing ? theme.palette.primary.dark : theme.palette.divider,
+                },
+              },
+            }}
+            onClick={() => setIsImportDialogOpen(true)}
+          >
+            <Box sx={{ position: 'relative' }}>
+              <FolderZip
+                fontSize={'large'}
+                sx={{
+                  color: !importing ? theme.palette.primary.main : theme.palette.divider,
+                  mr: 2,
+                }}
+              />
+              {importing && (
+                <CircularProgress
+                  sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    marginTop: '-23px',
+                    marginLeft: '-29px',
+                  }}
+                />
+              )}
+            </Box>
+            <Box>
+              <Typography variant="body1">{dataset.name}</Typography>
+              <Typography variant="body2" color="textSecondary">
+                {dataset.description}
+              </Typography>
+            </Box>
+          </Box>
+        </Tooltip>
+      </TableCell>
+
+      <TableCell align="center">{prettyBytes(dataset.size)}</TableCell>
+
+      {dataset.vectors.size && (
+        <TableRow>
+          <TableCell align="center">default</TableCell>
+          <TableCell align="center">{dataset.vectors.size}</TableCell>
+          <TableCell align="center">{dataset.vectors.distance}</TableCell>
+          <TableCell align="center">{dataset.vectors.model}</TableCell>
+        </TableRow>
+      )}
+      {!dataset.vectors.size &&
+        Object.keys(dataset.vectors).map((vector) => (
+          <TableRow key={vector}>
+            <TableCell align="center">{vector}</TableCell>
+            <TableCell align="center">{dataset.vectors[vector].size}</TableCell>
+            <TableCell align="center">{dataset.vectors[vector].distance}</TableCell>
+            <TableCell align="center">{dataset.vectors[vector].model}</TableCell>
+          </TableRow>
+        ))}
+
+      <TableCell align="center">{dataset.vectorCount}</TableCell>
+      <TableCell align="center">
+        <Tooltip title="Import Dataset" arrow placement={'top'}>
+          <IconButton onClick={() => setIsImportDialogOpen(true)}>
+            <Download />
+          </IconButton>
+        </Tooltip>
+      </TableCell>
+      <ImportDatasetDialog
+        open={isImportDialogOpen}
+        onClose={() => setIsImportDialogOpen(false)}
+        content={`Enter collection name for ${dataset.fileName}`}
+        fileName={dataset.fileName}
+        actionHandler={importDataset}
+        setImporting={setImporting}
+        importing={importing}
+      />
+    </TableRow>
+  );
+};
+
+DatasetsTableRow.propTypes = {
+  dataset: PropTypes.shape({
+    name: PropTypes.string,
+    vectors: PropTypes.object,
+    description: PropTypes.string,
+    vectorCount: PropTypes.number,
+    fileName: PropTypes.string,
+    size: PropTypes.number,
+  }),
+  importDataset: PropTypes.func,
+};

src/components/Datasets/ImportDatasetDialog.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Button, Dialog, Input, Typography } from '@mui/material';
+
+const ImportDatasetDialog = ({ open, onClose, content, actionHandler, fileName, setImporting, importing }) => {
+  const [collectionName, setCollectionName] = useState('');
+  const handleActionClick = () => {
+    actionHandler(fileName, collectionName, setImporting, importing);
+    onClose();
+    setCollectionName('');
+  };
+
+  return (
+    <Dialog open={open} fullWidth={true}>
+      <Box
+        sx={{
+          display: 'flex',
+          p: 3,
+        }}
+      >
+        <div>
+          <Typography variant="h5">Enter collection name</Typography>
+          <Typography color="textSecondary" sx={{ mt: 2 }} variant="body1">
+            {content}
+          </Typography>
+        </div>
+      </Box>
+      <Input
+        sx={{ mx: 3, mb: 3 }}
+        placeholder="Collection Name"
+        value={collectionName}
+        onChange={(e) => setCollectionName(e.target.value)}
+      />
+
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          px: 3,
+          py: 1.5,
+        }}
+      >
+        <Button sx={{ mr: 2 }} variant="outlined" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          sx={{
+            backgroundColor: 'success.main',
+            '&:hover': {
+              backgroundColor: 'success.dark',
+            },
+          }}
+          variant="contained"
+          onClick={handleActionClick}
+          disabled={!collectionName}
+        >
+          Import Dataset
+        </Button>
+      </Box>
+    </Dialog>
+  );
+};
+
+// propType validation
+ImportDatasetDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  content: PropTypes.string.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+  fileName: PropTypes.string.isRequired,
+  setImporting: PropTypes.func.isRequired,
+  importing: PropTypes.bool.isRequired,
+};
+
+export default ImportDatasetDialog;

src/components/Sidebar/Sidebar.jsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import MuiDrawer from '@mui/material/Drawer';
 import { List, Typography, Divider, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { LibraryBooks, Terminal } from '@mui/icons-material';
+import { LibraryBooks, Terminal, Animation } from '@mui/icons-material';
 import Tooltip from '@mui/material/Tooltip';
 import SidebarTutorialSection from './SidebarTutorialSection';
 
@@ -114,6 +114,30 @@ export default function Sidebar({ open, version }) {
         <ListItem key={'Tutorial'} disablePadding sx={{ display: 'block' }}>
           <SidebarTutorialSection isSidebarOpen={open} />
         </ListItem>
+        <ListItem key={'Datasets'} disablePadding sx={{ display: 'block' }}>
+          <Tooltip title={'Datasets'} placement={'right'} arrow={true}>
+            <ListItemButton
+              sx={{
+                minHeight: 48,
+                justifyContent: open ? 'initial' : 'center',
+                px: 2.5,
+              }}
+              component={Link}
+              to="/Datasets"
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                  mr: open ? 3 : 'auto',
+                  justifyContent: 'center',
+                }}
+              >
+                <Animation />
+              </ListItemIcon>
+              <ListItemText primary={'Datasets'} sx={{ opacity: open ? 1 : 0 }} />
+            </ListItemButton>
+          </Tooltip>
+        </ListItem>
       </List>
       <List style={{ marginTop: `auto` }}>
         <ListItem>

src/pages/Datasets.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { CenteredFrame } from '../components/Common/CenteredFrame';
+import { Grid, TableContainer, Typography } from '@mui/material';
+import { TableBodyWithGaps, TableWithGaps } from '../components/Common/TableWithGaps';
+import { DatasetsHeader } from '../components/Datasets/DatasetsTableHeader';
+import { DatasetsTableRow } from '../components/Datasets/DatasetsTableRow';
+import { useClient } from '../context/client-context';
+import { useSnackbar } from 'notistack';
+import { getSnackbarOptions } from '../components/Common/utils/snackbarOptions';
+
+function Datasets() {
+  const [datasets, setDatasets] = useState([]);
+  const { client: qdrantClient } = useClient();
+  const [isLoading, setIsLoading] = useState(false);
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  const errorSnackbarOptions = getSnackbarOptions('error', closeSnackbar);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch('https://snapshots.qdrant.io/manifest.json');
+        const responseJson = await response.json();
+        const datasets = responseJson.map((dataset) => {
+          return {
+            name: dataset.name,
+            fileName: dataset.file_name,
+            size: dataset.size,
+            vectors: dataset.vectors,
+            vectorCount: dataset.vector_count,
+            description: dataset.description,
+          };
+        });
+        setDatasets(datasets);
+      } catch (error) {
+        enqueueSnackbar(error.message, errorSnackbarOptions);
+      }
+      setIsLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  const importDataset = async (fileName, collectionName, setImporting, importing) => {
+    if (importing) {
+      enqueueSnackbar('Importing in progress', errorSnackbarOptions);
+      return;
+    } else if (!collectionName) {
+      enqueueSnackbar('Collection name is required', errorSnackbarOptions);
+      return;
+    } else {
+      setImporting(true);
+
+      try {
+        const response = await qdrantClient.recoverSnapshot(collectionName, {
+          location: `https://snapshots.qdrant.io/${fileName}`,
+        });
+        console.log(response);
+        enqueueSnackbar('Snapshot successfully imported', getSnackbarOptions('success', closeSnackbar, 2000));
+      } catch (e) {
+        enqueueSnackbar(e.message, errorSnackbarOptions);
+      } finally {
+        setImporting(false);
+      }
+    }
+  };
+
+  const tableRows = datasets.map((dataset) => (
+    <DatasetsTableRow key={dataset.name} dataset={dataset} importDataset={importDataset} />
+  ));
+
+  return (
+    <>
+      <CenteredFrame>
+        <Grid container maxWidth={'xl'} spacing={3}>
+          <Grid xs={12} item>
+            <Typography variant="h4">Datasets</Typography>
+          </Grid>
+          {isLoading && <div>Loading...</div>}
+          {!isLoading && datasets?.length === 0 && <div>No datasets found</div>}
+          {!isLoading && datasets?.length > 0 && (
+            <Grid item xs={12}>
+              <TableContainer>
+                <TableWithGaps aria-label="simple table">
+                  <DatasetsHeader
+                    headers={[
+                      'Dataset Name',
+                      'Datasets size',
+                      'Vectors Configuration (Name, Size, Distance, Model)',
+                      'Vectors count',
+                      'Import',
+                    ]}
+                  />
+
+                  <TableBodyWithGaps>{tableRows}</TableBodyWithGaps>
+                </TableWithGaps>
+              </TableContainer>
+            </Grid>
+          )}
+        </Grid>
+      </CenteredFrame>
+    </>
+  );
+}
+
+export default Datasets;