text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { compose } from 'ramda';
  import { withRouter } from 'react-router-dom';
  import withStyles from '@mui/styles/withStyles';
  import Menu from '@mui/material/Menu';
  import MenuItem from '@mui/material/MenuItem';
  import Button from '@mui/material/Button';
  import IconButton from '@mui/material/IconButton';
  import Drawer from '@mui/material/Drawer';
  import Dialog from '@mui/material/Dialog';
  import DialogActions from '@mui/material/DialogActions';
  import DialogContent from '@mui/material/DialogContent';
  import DialogContentText from '@mui/material/DialogContentText';
  import Slide from '@mui/material/Slide';
  import MoreVert from '@mui/icons-material/MoreVert';
  import { graphql } from 'react-relay';
  import inject18n from '../../../components/i18n';
  import { QueryRenderer, commitMutation } from '../../../relay/environment';
  import { workspaceEditionQuery } from './WorkspaceEdition';
  import WorkspaceEditionContainer from './WorkspaceEditionContainer';
  import Loader from '../../../components/Loader';
  import Security, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../utils/Security';
  
  const styles = (theme) => ({
    container: {
      margin: 0,
    },
    drawerPaper: {
      minHeight: '100vh',
      width: '50%',
      position: 'fixed',
      overflow: 'auto',
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
      padding: 0,
    },
  });
  
  const Transition = React.forwardRef((props, ref) => (
    <Slide direction="up" ref={ref} {...props} />
  ));
  Transition.displayName = 'TransitionSlide';
  
  const WorkspacePopoverDeletionMutation = graphql`
    mutation WorkspacePopoverDeletionMutation($id: ID!) {
      workspaceEdit(id: $id) {
        delete
      }
    }
  `;
  
  class WorkspacePopover extends Component {
    constructor(props) {
      super(props);
      this.state = {
        anchorEl: null,
        displayDelete: false,
        displayEdit: false,
        deleting: false,
      };
    }
  
    handleOpen(event) {
      this.setState({ anchorEl: event.currentTarget });
    }
  
    handleClose() {
      this.setState({ anchorEl: null });
    }
  
    handleOpenDelete() {
      this.setState({ displayDelete: true });
      this.handleClose();
    }
  
    handleCloseDelete() {
      this.setState({ displayDelete: false });
    }
  
    submitDelete() {
      this.setState({ deleting: true });
      commitMutation({
        mutation: WorkspacePopoverDeletionMutation,
        variables: {
          id: this.props.id,
        },
        onCompleted: () => {
          this.setState({ deleting: false });
          this.handleClose();
          this.props.history.push(`/dashboard/workspaces/${this.props.type}s`);
        },
      });
    }
  
    handleOpenEdit() {
      this.setState({ displayEdit: true });
      this.handleClose();
    }
  
    handleCloseEdit() {
      this.setState({ displayEdit: false });
    }
  
    render() {
      const { classes, t, id, disabled } = this.props;
      return (
        <div className={classes.container}>
          <IconButton
            disabled={disabled}
            onClick={this.handleOpen.bind(this)}
            aria-haspopup="true"
            size="large"
            style={{ marginTop: 3 }}
          >
            <MoreVert />
          </IconButton>
          <Menu
            anchorEl={this.state.anchorEl}
            open={Boolean(this.state.anchorEl)}
            onClose={this.handleClose.bind(this)}
          >
            <MenuItem onClick={this.handleOpenEdit.bind(this)}>
              {t('Update')}
            </MenuItem>
            <Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
              <MenuItem onClick={this.handleOpenDelete.bind(this)}>
                {t('Delete')}
              </MenuItem>
            </Security>
          </Menu>
          <Dialog
            open={this.state.displayDelete}
            PaperProps={{ elevation: 1 }}
            keepMounted={true}
            TransitionComponent={Transition}
            onClose={this.handleCloseDelete.bind(this)}
          >
            <DialogContent>
              <DialogContentText>
                {t('Do you want to delete this workspace?')}
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button
                onClick={this.handleCloseDelete.bind(this)}
                disabled={this.state.deleting}
              >
                {t('Cancel')}
              </Button>
              <Button
                color="secondary"
                onClick={this.submitDelete.bind(this)}
                disabled={this.state.deleting}
              >
                {t('Delete')}
              </Button>
            </DialogActions>
          </Dialog>
          <Drawer
            open={this.state.displayEdit}
            anchor="right"
            elevation={1}
            sx={{ zIndex: 1202 }}
            classes={{ paper: classes.drawerPaper }}
            onClose={this.handleCloseEdit.bind(this)}
          >
            <QueryRenderer
              query={workspaceEditionQuery}
              variables={{ id }}
              render={({ props }) => {
                if (props) {
                  return (
                    <WorkspaceEditionContainer
                      workspace={props.workspace}
                      handleClose={this.handleCloseEdit.bind(this)}
                    />
                  );
                }
                return <Loader variant="inElement" />;
              }}
            />
          </Drawer>
        </div>
      );
    }
  }
  
  WorkspacePopover.propTypes = {
    id: PropTypes.string,
    classes: PropTypes.object,
    t: PropTypes.func,
    history: PropTypes.object,
    disabled: PropTypes.bool,
    type: PropTypes.string,
  };
  
  export default compose(
    inject18n,
    withRouter,
    withStyles(styles),
  )(WorkspacePopover);
  