Skip to content

Commit

Permalink
ui bugs and enchanment
Browse files Browse the repository at this point in the history 
Signed-off-by: captain-Akshay <[email protected]>
  • Loading branch information
@captain-Akshay
captain-Akshay committed Mar 29, 2024
1 parent 380160d commit 6f6577f
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 29 deletions.
86 changes: 86 additions & 0 deletions ui/components/MesheryPatterns/ActionButton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import * as React from 'react';
import {
Button,
ButtonGroup,
Paper,
Popper,
MenuItem,
MenuList,
ClickAwayListener,
} from '@material-ui/core';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function ActionButton({ defaultActionClick, options }) {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);

const handleMenuItemClick = () => {
setOpen(false);
};

const handleToggle = (event) => {
event.stopPropagation();
setOpen((prevOpen) => !prevOpen);
};

const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}

setOpen(false);
};

return (
<React.Fragment>
<ButtonGroup
variant="contained"
style={{ boxShadow: 'none' }}
ref={anchorRef}
aria-label="Button group with a nested menu"
>
<Button onClick={defaultActionClick} variant="contained">
Action
</Button>
<Button size="small" onClick={handleToggle} variant="contained">
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper
sx={{
zIndex: 1,
}}
open={open}
anchorEl={anchorRef.current}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList id="split-button-menu" autoFocusItem>
{options.map((option, index) => (
<MenuItem
disabled={option.disabled}
key={option}
onClick={(event) => {
handleMenuItemClick(event);
option.onClick(event, index);
}}
>
<div style={{ marginRight: '0.5rem' }}>{option.icon}</div>
{option.label}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Popper>
</React.Fragment>
);
}
59 changes: 31 additions & 28 deletions ui/components/MesheryPatterns/MesheryPatternCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
import Save from '@material-ui/icons/Save';
import Fullscreen from '@material-ui/icons/Fullscreen';
import Moment from 'react-moment';
import GetAppIcon from '@material-ui/icons/GetApp';
import FlipCard from '../FlipCard';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import FullscreenExit from '@material-ui/icons/FullscreenExit';
Expand All @@ -26,6 +27,7 @@ import { Provider } from 'react-redux';
import { store } from '../../store';
import CAN from '@/utils/can';
import { keys } from '@/utils/permission_constants';
import ActionButton from './ActionButton';

const INITIAL_GRID_SIZE = { xl: 4, md: 6, xs: 12 };

Expand All @@ -40,6 +42,7 @@ function MesheryPatternCard_({
handleUnpublishModal,
handleDeploy,
handleUnDeploy,
handleDownload,
updateHandler,
deleteHandler,
handleClone,
Expand Down Expand Up @@ -164,39 +167,39 @@ function MesheryPatternCard_({
<span className={classes.btnText}> Unpublish </span>
</TooltipButton>
)}

<TooltipButton
title="Valildate"
variant="contained"
className={classes.testsButton}
onClick={(e) => genericClickHandler(e, handleVerify)}
disabled={!CAN(keys.VALIDATE_DESIGN.action, keys.VALIDATE_DESIGN.subject)}
>
<DoneIcon className={classes.iconPatt} />
<span className={classes.btnText}> Validate </span>
</TooltipButton>

<ActionButton
defaultActionClick={(e) => genericClickHandler(e, handleVerify)}
options={[
{
label: 'Validate',
icon: <DoneIcon className={classes.iconPatt} />,
onClick: (e) => genericClickHandler(e, handleVerify),
disabled: !CAN(keys.VALIDATE_DESIGN.action, keys.VALIDATE_DESIGN.subject),
},
{
label: 'Deploy',
icon: <DoneAllIcon className={classes.iconPatt} />,
onClick: (e) => genericClickHandler(e, handleDeploy),
disabled: !CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject),
},
{
label: 'Undeploy',
icon: <UndeployIcon fill={'currentColor'} className={classes.iconPatt} />,
onClick: (e) => genericClickHandler(e, handleUnDeploy),
disabled: !CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject),
},
]}
/>
<TooltipButton
title="Deploy"
title="Download"
variant="contained"
onClick={(ev) => genericClickHandler(ev, handleDeploy)}
color="primary"
onClick={handleDownload}
className={classes.testsButton}
disabled={!CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject)}
>
<DoneAllIcon className={classes.iconPatt} />
<span className={classes.btnText}>Deploy</span>
</TooltipButton>
<TooltipButton
title="Undeploy"
variant="contained"
className={classes.undeployButton}
onClick={(ev) => genericClickHandler(ev, handleUnDeploy)}
disabled={!CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject)} // use undeploy keys after it get seeded
>
<UndeployIcon fill="#ffffff" className={classes.iconPatt} />
<span className={classes.btnText}>Undeploy</span>
<GetAppIcon data-cy="download-button" />
<span className={classes.btnText}> Download </span>
</TooltipButton>

{visibility === VISIBILITY.PRIVATE ? (
<TooltipButton
title="Design"
Expand Down
59 changes: 58 additions & 1 deletion ui/components/MesheryPatterns/MesheryPatternGridView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,22 @@ import React, { useState } from 'react';
import MesheryPatternCard from './MesheryPatternCard';
import DesignConfigurator from '../configuratorComponents/MeshModel';
import { FILE_OPS, ACTIONS } from '../../utils/Enum';
import { EVENT_TYPES } from '../../lib/event-types';
import ConfirmationMsg from '../ConfirmationModal';
import { getComponentsinFile } from '../../utils/utils';
import useStyles from './Grid.styles';
import Validation from '../Validation';
import Modal from '../Modal';
import PublicIcon from '@material-ui/icons/Public';
import DryRunComponent from '../DryRun/DryRunComponent';
import { withSnackbar } from 'notistack';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateProgress } from '../../lib/store';
import ExportModal from '../ExportModal';
import downloadContent from '@/utils/fileDownloader';
import { useNotification } from '@/utils/hooks/useNotification';
const INITIAL_GRID_SIZE = { xl: 4, md: 6, xs: 12 };

function PatternCardGridItem({
Expand All @@ -23,6 +31,7 @@ function PatternCardGridItem({
handleUnDeploy,
handleClone,
handleSubmit,
handleDownload,
setSelectedPatterns,
canPublishPattern = false,
user,
Expand Down Expand Up @@ -50,6 +59,7 @@ function PatternCardGridItem({
handleUnpublishModal={handleUnpublishModal}
handleClone={handleClone}
handleInfoModal={handleInfoModal}
handleDownload={handleDownload}
deleteHandler={() =>
handleSubmit({
data: yaml,
Expand Down Expand Up @@ -130,9 +140,11 @@ function MesheryPatternGrid({
selectedK8sContexts,
publishSchema,
user,
updateProgress,
handleInfoModal,
}) {
const classes = useStyles();
const { notify } = useNotification();
const handlePublishModal = (pattern) => {
if (canPublishPattern) {
setPublishModal({
Expand Down Expand Up @@ -160,6 +172,40 @@ function MesheryPatternGrid({
dryRunComponent: null,
});

const [downloadModal, setDownloadModal] = useState({
open: false,
content: null,
});
const handleDownload = (e, design, source_type, params) => {
e.stopPropagation();
updateProgress({ showProgress: true });
try {
let id = design.id;
let name = design.name;
downloadContent({ id, name, type: 'pattern', source_type, params });
updateProgress({ showProgress: false });
notify({ message: `"${name}" design downloaded`, event_type: EVENT_TYPES.INFO });
} catch (e) {
console.error(e);
}
};
const handleDownloadDialogClose = () => {
setDownloadModal((prevState) => ({
...prevState,
open: false,
content: null,
}));
};

const handleDesignDownloadModal = (e, pattern) => {
e.stopPropagation();
setDownloadModal((prevState) => ({
...prevState,
open: true,
content: pattern,
}));
};

const handleModalClose = () => {
setModalOpen({
open: false,
Expand Down Expand Up @@ -227,6 +273,7 @@ function MesheryPatternGrid({
handleUnpublishModal={(e) => handleUnpublishModal(e, pattern)()}
handleInfoModal={() => handleInfoModal(pattern)}
handleSubmit={handleSubmit}
handleDownload={(e) => handleDesignDownloadModal(e, pattern)}
setSelectedPatterns={setSelectedPattern}
/>
))}
Expand Down Expand Up @@ -296,8 +343,18 @@ function MesheryPatternGrid({
submitBtnIcon={<PublicIcon />}
/>
)}
<ExportModal
downloadModal={downloadModal}
handleDownloadDialogClose={handleDownloadDialogClose}
handleDesignDownload={handleDownload}
/>
</div>
);
}

export default MesheryPatternGrid;
const mapDispatchToProps = (dispatch) => ({
updateProgress: bindActionCreators(updateProgress, dispatch),
});

// @ts-ignore
export default connect(mapDispatchToProps)(withSnackbar(MesheryPatternGrid));

0 comments on commit 6f6577f

Please sign in to comment.