Feat/issue actions revisited (#1160)

* replacing issue actions with more simple ones and based on role

* fixing no defined task variable

* simplifying main bounty actions on the issue page for admin and users

frontend/src/components/design-library/molecules/action-buttons/action-buttons.stories.tsx

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CancelIcon from '@material-ui/icons/Cancel';
+import SaveIcon from '@material-ui/icons/Save';
+import ActionButtons from './action-buttons';
+import { Dialog } from '@material-ui/core';
+
+export default {
+  title: 'Design Library/Molecules/ActionButtons',
+  component: ActionButtons,
+};
+
+const Template = (args) => <ActionButtons {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  primary: [
+    {
+      key: 'create',
+      onClick: () => {},
+      label: 'Create',
+      disabled: false,
+      icon: <AddIcon fontSize='small' />,
+      component: <Dialog open={false}>create</Dialog>,
+    },
+  ],
+  secondary: [
+    {
+      key: 'cancel',
+      onClick: () => {},
+      label: 'Cancel',
+      disabled: false,
+      icon: <CancelIcon fontSize='small' />,
+      component: <Dialog open={false}>cancel</Dialog>,
+    },
+  ],
+};
+
+export const WithManyActions = Template.bind({});
+WithManyActions.args = {
+  primary: [
+    {
+      key: 'create 2',
+      onClick: () => {},
+      label: 'Create',
+      disabled: false,
+      icon: <AddIcon fontSize='small' />,
+      component: <Dialog open={false}>create 2</Dialog>,
+    },
+    {
+      key: 'edit',
+      onClick: () => {},
+      label: 'Edit',
+      disabled: false,
+      icon: <EditIcon fontSize='small' />,
+      component: <Dialog open={false}>edit</Dialog>,
+    },
+    {
+      key: 'delete',
+      onClick: () => {},
+      label: 'Delete',
+      disabled: false,
+      icon: <DeleteIcon fontSize='small' />,
+      component: <Dialog open={false}>delete</Dialog>,
+    },
+  ],
+  secondary: [
+    {
+      key: 'cancel secondary',
+      onClick: () => {},
+      label: 'Cancel',
+      disabled: false,
+      icon: <CancelIcon fontSize='small' />,
+      component: <Dialog open={false}>cancel secondary</Dialog>,
+    },
+    {
+      key: 'save secondary',
+      onClick: () => {},
+      label: 'Save',
+      disabled: false,
+      icon: <SaveIcon fontSize='small' />,
+      component: <Dialog open={false}>save secondary</Dialog>,
+    },
+  ],
+};

frontend/src/components/design-library/molecules/action-buttons/action-buttons.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Button } from '@material-ui/core';
+
+
+interface ActionButtonsProps {
+  primary: any[];
+  secondary: any[];
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({ primary, secondary }) => {
+  const [ currentKey, setCurrentKey ] = React.useState('');
+
+  const actionClick = (key:string, onClick: any) => {
+    setCurrentKey(key);
+    onClick?.();
+  }
+
+  return (
+    <div>
+      {primary?.map((action, index) => (
+        <>
+          <div style={{ marginTop: 30, marginBottom: 10 }}>
+            <Button
+              onClick={() => actionClick(action.key, action.onClick)}
+              color='primary'
+              fullWidth
+              size='large'
+              variant='contained'
+              disabled={action.disabled}
+              endIcon={action.icon}
+            >
+              <span style={{ display: 'inline-block', marginRight: 10 }}>
+          <FormattedMessage id={action.label} />
+              </span>
+            </Button>
+          </div>
+          {action.component && React.cloneElement(action.component, { open: action.key === currentKey, onClose: () => setCurrentKey('') })}
+        </>
+      ))}
+      <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+        {secondary?.map((action, index) => (
+          <>
+            <Button
+              onClick={() => actionClick(action.key, action.onClick)}
+              size='small'
+              color='secondary'
+              variant='contained'
+              disabled={action.disabled}
+              fullWidth
+              style={{ marginRight: 5 }}
+              endIcon={action.icon}
+            >
+              <span style={{ display: 'inline-block', marginRight: 10 }}>
+                {action.label}
+              </span>
+            </Button>
+            {action.component && React.cloneElement(action.component, { open: action.key === currentKey, onClose: () => setCurrentKey('') })}
+          </>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ActionButtons;

frontend/src/components/design-library/molecules/drawer/drawer.tsx

@@ -5,6 +5,7 @@ import {
   Container,
   Typography,
   Fab,
+  Box,
 } from '@material-ui/core'
 
 import CloseIcon from '@material-ui/icons/Close'
@@ -22,7 +23,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     boxShadow: 'none'
   },
 }));
-  
+
 type DrawerProps = {
   open: boolean;
   onClose: any;
@@ -42,13 +43,13 @@ const Drawer = ({
   const classes = useStyles();
 
   const closeDialogButton = () => {
-    
-      return (
-        <Fab size='small' aria-label='close' className={ classes.closeButton } onClick={ onClose }>
-          <CloseIcon fontSize='small' />
-        </Fab>
-      )
-    
+
+    return (
+      <Fab size='small' aria-label='close' className={classes.closeButton} onClick={onClose}>
+        <CloseIcon fontSize='small' />
+      </Fab>
+    )
+
   }
 
   return (
@@ -57,18 +58,30 @@ const Drawer = ({
       aria-labelledby='form-dialog-title'
       anchor='right'
     >
-      <Container>
-        <div style={{ padding: 20 }}>
-          <Typography variant='h5' id='form-dialog-title' gutterBottom>
-            {title}
-          </Typography>
-          {closeDialogButton()}
-          {children}
-          { actions.length > 0 &&
-            <DrawerActions actions={actions} />
+      <Box
+        display='flex'
+        flexDirection='column'
+        height='100%'
+        p={2}
+      >
+
+          <Box flexGrow={1}>
+            <div style={{ padding: 20 }}>
+              <Typography variant='h5' id='form-dialog-title' gutterBottom>
+                {title}
+              </Typography>
+              {closeDialogButton()}
+              {children}
+            </div>
+          </Box>
+
+          {actions.length > 0 &&
+            <Box>
+              <DrawerActions actions={actions} />
+            </Box>
           }
-        </div>
-      </Container>
+
+      </Box>
     </MuiDrawer>
   )
 }

frontend/src/components/design-library/organisms/invoice-payment/invoice-payment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
-import { Theme, createStyles, withStyles } from '@material-ui/core/styles';
+import { Theme, createStyles, makeStyles, withStyles } from '@material-ui/core/styles';
 import { FormattedMessage } from 'react-intl';
 import { BillingInfoCard } from '../../molecules/billing-info-card/billing-info-card'
 import ReactPlaceholder from 'react-placeholder';
@@ -10,22 +10,24 @@ import {
   Alert, AlertTitle
 } from '@material-ui/lab'
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     btnPayment: {
       float: 'right',
       marginTop: 10
     },
   })
+)
 
 const InvoicePayment = ({
   price,
   customer,
   onInvoicePayment,
-  onInfoClick,
-  classes
+  onInfoClick
 }) => {
 
+  const classes = useStyles()
+
   const { name, address } = customer.data
 
   return (
@@ -81,4 +83,4 @@ const InvoicePayment = ({
   )
 }
 
-export default withStyles(styles)(InvoicePayment)
+export default InvoicePayment

frontend/src/components/design-library/organisms/issue-actions/issue-actions.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import IssueActions from './issue-actions';
+
+const roles = {
+  admin: {
+    primary: [
+      {
+        onClick: () => {},
+        label: 'Pay contributor',
+        disabled: false,
+        icon: null,
+      },
+    ],
+    secondary: [
+      {
+        onClick: () => {},
+        label: 'Make a payment',
+        disabled: false,
+        icon: null,
+      },
+    ],
+  },
+  user: {
+    primary: [
+      {
+        onClick: () => {},
+        label: 'Create',
+        disabled: false,
+        icon: null,
+      },
+    ],
+    secondary: [
+      {
+        onClick: () => {},
+        label: 'Cancel',
+        disabled: false,
+        icon: null,
+      },
+    ],
+  },
+}
+
+export default {
+  title: 'Design Library/Organisms/IssueActions',
+  component: IssueActions,
+};
+
+const Template = (args) => <IssueActions {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  role: 'admin',
+  roles,
+
+};
+
+export const User = Template.bind({});
+User.args = {
+  role: 'user',
+  roles,
+}

frontend/src/components/design-library/organisms/issue-actions/issue-actions.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ActionButtons from '../../molecules/action-buttons/action-buttons';
+
+interface IssueActionsProps {
+  role: string;
+  roles: any;
+  children?: React.ReactNode;
+}
+
+const IssueActions = ({
+  role,
+  roles,
+}:IssueActionsProps) => {
+  return (
+    <ActionButtons
+      primary={roles[role].primary}
+      secondary={roles[role].secondary}
+    />
+  );
+};
+
+export default IssueActions;