Merge pull request #233 from getmaxun/maxun-v

feat: product updates
This commit is contained in:
Karishma Shukla
2024-12-09 21:15:04 +05:30
committed by GitHub
4 changed files with 263 additions and 81 deletions

View File

@@ -15,11 +15,13 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
import { getStoredRecording } from "../../api/storage";
import { apiUrl } from "../../apiConfig.js";
import Cookies from 'js-cookie';
interface IntegrationProps {
isOpen: boolean;
handleStart: (data: IntegrationSettings) => void;
handleClose: () => void;
}
export interface IntegrationSettings {
spreadsheetId: string;
spreadsheetName: string;
@@ -75,8 +77,7 @@ export const IntegrationSettingsModal = ({
);
notify(
"error",
`Error fetching spreadsheet files: ${
error.response?.data?.message || error.message
`Error fetching spreadsheet files: ${error.response?.data?.message || error.message
}`
);
}

View File

@@ -1,16 +1,17 @@
import React, { useState, useContext } from 'react';
import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
import styled from "styled-components";
import { stopRecording } from "../../api/recording";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { IconButton, Menu, MenuItem, Typography, Avatar, Chip, } from "@mui/material";
import { AccountCircle, Logout, Clear } from "@mui/icons-material";
import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material";
import { AccountCircle, Logout, Clear, YouTube, X, Update, Close } from "@mui/icons-material";
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../context/auth';
import { SaveRecording } from '../molecules/SaveRecording';
import DiscordIcon from '../atoms/DiscordIcon';
import { apiUrl } from '../../apiConfig';
import MaxunLogo from "../../assets/maxunlogo.png";
import packageJson from "../../../package.json"
interface NavBarProps {
recordingName: string;
@@ -24,6 +25,38 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const currentVersion = packageJson.version;
const [open, setOpen] = useState(false);
const [latestVersion, setLatestVersion] = useState<string | null>(null);
const [tab, setTab] = useState(0);
const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
const fetchLatestVersion = async (): Promise<string | null> => {
try {
const response = await fetch("https://api.github.com/repos/getmaxun/maxun/releases/latest");
const data = await response.json();
const version = data.tag_name.replace(/^v/, ""); // Remove 'v' prefix
return version;
} catch (error) {
console.error("Failed to fetch latest version:", error);
return null; // Handle errors gracefully
}
};
const handleUpdateOpen = () => {
setOpen(true);
fetchLatestVersion();
};
const handleUpdateClose = () => {
setOpen(false);
setTab(0); // Reset tab to the first tab
};
const handleUpdateTabChange = (event: React.SyntheticEvent, newValue: number) => {
setTab(newValue);
};
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
@@ -50,85 +83,233 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
navigate('/');
};
useEffect(() => {
const checkForUpdates = async () => {
const latestVersion = await fetchLatestVersion();
setLatestVersion(latestVersion); // Set the latest version state
if (latestVersion && latestVersion !== currentVersion) {
setIsUpdateAvailable(true); // Show a notification or highlight the "Upgrade" button
}
};
checkForUpdates();
}, []);
return (
<NavBarWrapper>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
}}>
<img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
<div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
</div>
{
user ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
{!isRecording ? (
<>
<IconButton
component="a"
href="https://discord.gg/5GbPjBUkws"
target="_blank"
rel="noopener noreferrer"
sx={{
<>
{isUpdateAvailable && (
<Snackbar
open={isUpdateAvailable}
onClose={() => setIsUpdateAvailable(false)}
message={
`New version ${latestVersion} available! Click "Upgrade" to update.`
}
action={
<>
<Button
color="primary"
size="small"
onClick={handleUpdateOpen}
style={{
backgroundColor: '#ff00c3',
color: 'white',
fontWeight: 'bold',
textTransform: 'none',
marginRight: '8px',
borderRadius: '5px',
}}
>
Upgrade
</Button>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={() => setIsUpdateAvailable(false)}
style={{ color: 'black' }}
>
<Close />
</IconButton>
</>
}
ContentProps={{
sx: {
background: "white",
color: "black",
}
}}
/>
)}
<NavBarWrapper>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
}}>
<img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
<div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
<Chip
label={`${currentVersion}`}
color="primary"
variant="outlined"
sx={{ marginTop: '10px' }}
/>
</div>
{
user ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
{!isRecording ? (
<>
<Button variant="outlined" onClick={handleUpdateOpen} sx={{
marginRight: '40px',
color: "#00000099",
border: "#00000099 1px solid",
'&:hover': { color: '#ff00c3', border: '#ff00c3 1px solid' }
}}>
<Update sx={{ marginRight: '5px' }} /> Upgrade Maxun
</Button>
<Modal open={open} onClose={handleUpdateClose}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 500,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
borderRadius: 2,
}}
>
{latestVersion === null ? (
<Typography>Checking for updates...</Typography>
) : currentVersion === latestVersion ? (
<Typography variant="h6" textAlign="center">
🎉 You're up to date!
</Typography>
) : (
<>
<Typography variant="body1" textAlign="left" sx={{ marginLeft: '30px' }}>
A new version is available: {latestVersion}. Upgrade to the latest version for bug fixes, enhancements and new features!
<br />
View all the new updates
<a href="https://github.com/getmaxun/maxun/releases/" target="_blank" style={{ textDecoration: 'none' }}>{' '}here.</a>
</Typography>
<Tabs
value={tab}
onChange={handleUpdateTabChange}
sx={{ marginTop: 2, marginBottom: 2 }}
centered
>
<Tab label="Manual Setup Upgrade" />
<Tab label="Docker Compose Setup Upgrade" />
</Tabs>
{tab === 0 && (
<Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
<code style={{ color: 'black' }}>
<p>Run the commands below</p>
# pull latest changes
<br />
git pull origin master
<br />
<br />
# install dependencies
<br />
npm install
<br />
<br />
# start maxun
<br />
npm run start
</code>
</Box>
)}
{tab === 1 && (
<Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
<code style={{ color: 'black' }}>
<p>Run the commands below</p>
# pull latest docker images
<br />
docker-compose pull
<br />
<br />
# start maxun
<br />
docker-compose up -d
</code>
</Box>
)}
</>
)}
</Box>
</Modal>
<iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
<IconButton onClick={handleMenuOpen} sx={{
display: 'flex',
alignItems: 'center',
borderRadius: '5px',
padding: '8px',
marginRight: '30px',
}}
>
<DiscordIcon sx={{ marginRight: '5px' }} />
</IconButton>
<iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
<IconButton onClick={handleMenuOpen} sx={{
display: 'flex',
alignItems: 'center',
borderRadius: '5px',
padding: '8px',
marginRight: '10px',
'&:hover': { backgroundColor: 'white', color: '#ff00c3' }
}}>
<AccountCircle sx={{ marginRight: '5px' }} />
<Typography variant="body1">{user.email}</Typography>
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
<Logout sx={{ marginRight: '5px' }} /> Logout
</MenuItem>
</Menu>
</>
) : (
<>
<IconButton onClick={goToMainMenu} sx={{
borderRadius: '5px',
padding: '8px',
background: 'red',
color: 'white',
marginRight: '10px',
'&:hover': { color: 'white', backgroundColor: 'red' }
}}>
<Clear sx={{ marginRight: '5px' }} />
Discard
</IconButton>
<SaveRecording fileName={recordingName} />
</>
)}
</div>
) : ""
}
</NavBarWrapper>
marginRight: '10px',
'&:hover': { backgroundColor: 'white', color: '#ff00c3' }
}}>
<AccountCircle sx={{ marginRight: '5px' }} />
<Typography variant="body1">{user.email}</Typography>
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
PaperProps={{ sx: { width: '180px' } }}
>
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
<Logout sx={{ marginRight: '5px' }} /> Logout
</MenuItem>
<MenuItem onClick={() => {
window.open('https://discord.gg/5GbPjBUkws', '_blank');
}}>
<DiscordIcon sx={{ marginRight: '5px' }} /> Discord
</MenuItem>
<MenuItem onClick={() => {
window.open('https://www.youtube.com/@MaxunOSS/videos?ref=app', '_blank');
}}>
<YouTube sx={{ marginRight: '5px' }} /> YouTube
</MenuItem>
<MenuItem onClick={() => {
window.open('https://x.com/maxun_io?ref=app', '_blank');
}}>
<X sx={{ marginRight: '5px' }} /> Twiiter (X)
</MenuItem>
</Menu>
</>
) : (
<>
<IconButton onClick={goToMainMenu} sx={{
borderRadius: '5px',
padding: '8px',
background: 'red',
color: 'white',
marginRight: '10px',
'&:hover': { color: 'white', backgroundColor: 'red' }
}}>
<Clear sx={{ marginRight: '5px' }} />
Discard
</IconButton>
<SaveRecording fileName={recordingName} />
</>
)}
</div>
) : ""
}
</NavBarWrapper>
</>
);
};

View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react';
import { Stack, Button, IconButton, Tooltip, Chip, Badge } from "@mui/material";
import { Stack, Button, IconButton, Tooltip, Badge } from "@mui/material";
import { AddPair, deletePair, UpdatePair } from "../../api/workflow";
import { WorkflowFile } from "maxun-core";
import { ClearButton } from "../atoms/buttons/ClearButton";

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { GenericModal } from "../atoms/GenericModal";
import { TextField, Typography, Box, Button, Chip } from "@mui/material";
import { TextField, Typography, Box, Button } from "@mui/material";
import { modalStyle } from "./AddWhereCondModal";
import { useGlobalInfoStore } from '../../context/globalInfo';
import { duplicateRecording, getStoredRecording } from '../../api/storage';