[MI-3274]: Integrated config table, view action modal & delete config modal

plugin.json

@@ -23,10 +23,9 @@
       "header": "Configure this plugin directly in the config.json file. Learn more [in our documentation](https://github.com/mattermost/mattermost-plugin-welcomebot/blob/master/README.md).\n\n To report an issue, make a suggestion, or submit a contribution, [check the plugin repository](https://github.com/mattermost/mattermost-plugin-welcomebot).",
       "settings": [
         {
-            "key": "ExistingConfigurationTable",
-            "display_name": "Existing Configurations:",
-            "type": "custom"
-        }
+            "key": "WelcomeMessages",
+            "type": "custom",
+            "default": []
     ]
   }
 }

server/configuration.go

@@ -46,7 +46,7 @@ type ConfigMessage struct {
 
 // Configuration from config.json
 type Configuration struct {
-	WelcomeMessages []*ConfigMessage
+	WelcomeMessages []*ConfigMessage `json:"WelcomeMessages"`
 }
 
 // List of the welcome messages from the configuration

webapp/src/containers/components/modals/actionModal.tsx

@@ -1,80 +1,79 @@
-import React from 'react';
 
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Table from 'react-bootstrap/Table';
-import Form from 'react-bootstrap/Form';
-
-import './styles.css';
+import {Configs} from 'types/plugin/common';
 
 type Props = {
-    visibility: boolean;
-    setVisibility: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const ViewActionsModal = ({visibility, setVisibility}: Props) => {
-    const handleClose = () => {
-        setVisibility(false);
-    };
+function ActionModal({visible, setVisible, config, configIndex}: Props) {
+    const actionsLength = config[configIndex]?.actions?.length ?? 0;
+    const attachmentMessageLength = config[configIndex]?.attachmentMessage?.length ?? 0;
+
+    useEffect(() => {
+        setVisible(visible);
+    }, [visible]);
 
-    return (
-        <Modal
-            show={visibility}
-            onHide={handleClose}
-        >
-            <Modal.Header closeButton={false}>
+    const handleClose = () => {
+        setVisible(false);
                 <Modal.Title>{'Actions'}</Modal.Title>
             </Modal.Header>
 
             <Modal.Body>
-                <Form>
-                    <Form.Group className='form-group'>
-                        <Form.Label>{'Attachment Message'}</Form.Label>
-                        <Form.Control
-                            type='long-text'
-                            placeholder='This is an example attachment message'
-                            aria-label='Disabled input example'
-                            readOnly={true}
-                        />
-                    </Form.Group>
-                    <Form.Group className='action-group'>
-                        <Form.Label>{'Actions'}</Form.Label>
-                    </Form.Group>
-                </Form>
-                <Table
-                    striped={true}
-                    className='listTable'
-                >
-                    <thead>
-                        <tr>
-                            <th>{'Type'}</th>
-                            <th>{'Display Name'}</th>
-                            <th>{'Channels Added to'}</th>
-                            <th>{'Success Message'}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>{'Button'}</td>
-                            <td>{'Import'}</td>
-                            <td>{'channel1, channel2, channel3'}</td>
-                            <td>{'Welcome to your new team!'}</td>
-                        </tr>
-                        <tr>
-                            <td>{'Automatic'}</td>
-                            <td>{'Export'}</td>
-                            <td>{'channel1, channel2'}</td>
-                            <td>{'Welcome to your new team!'}</td>
-                        </tr>
-                        <tr>
-                            <td>{'Button'}</td>
-                            <td>{'Deport'}</td>
-                            <td>{'channel1, channel3'}</td>
-                            <td>{'Welcome to your new team!'}</td>
-                        </tr>
-                    </tbody>
-                </Table>
-            </Modal.Body>
+                {(config[configIndex].attachmentMessage && attachmentMessageLength > 0) || (config[configIndex]?.actions && actionsLength > 0) ? (<>
+                    {config[configIndex].attachmentMessage && attachmentMessageLength > 0 ? (
+                        <Form>
+                            <Form.Group className='form-group'>
+                                <Form.Label>{'Attachment Message'}</Form.Label>
+                                <Form.Control
+                                    type='long-text'
+                                    value={config[configIndex].attachmentMessage ?? ''}
+                                    placeholder=''
+                                    aria-label='Disabled input example'
+                                    readOnly={true}
+                                />
+                            </Form.Group>
+                        </Form>
+                    ) : (<p>{'No Attachment message configured'}</p>)
+                    }
+                    {config[configIndex]?.actions && actionsLength > 0 ? (
+                        <div>
+                            <Form>
+                                <Form.Group className='action-group'>
+                                    <Form.Label>{'Actions'}</Form.Label>
+                                </Form.Group>
+                            </Form>
+                            <Table
+                                striped={true}
+                                className='listTable'
+                            >
+                                <thead>
+                                    <tr>
+                                        <th>{'Type'}</th>
+                                        <th>{'Name'}</th>
+                                        <th>{'Display Name'}</th>
+                                        <th>{'Channels Added to'}</th>
+                                        <th>{'Success Message'}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {
+                                    config[configIndex].actions?.map((val, i) =>
+                                        (
+                                            <tr key={i.toString()}>
+                                                <td>{val.actionType}</td>
+                                                <td>{val.actionName}</td>
+                                                <td>{val.actionDisplayName}</td>
+                                                <td>{val.channelsAddedTo}</td>
+                                                <td>{val.actionSuccessfullMessage}</td>
+                                            </tr>
+                                        ),
+                                    )
+                                    }
+                                </tbody>
+                            </Table>
+                        </div>
+                    ) : (<p>{'No Action configured'}</p>)
+                    }
+                </>) : (<p>{'No Attachment message or Action configured'}</p>)}
 
             <Modal.Footer>
                 <Button
@@ -84,6 +83,6 @@ const ViewActionsModal = ({visibility, setVisibility}: Props) => {
             </Modal.Footer>
         </Modal>
     );
-};
+}
 
-export default ViewActionsModal;
+export default ActionModal;

webapp/src/containers/components/modals/configModal.tsx

@@ -10,22 +10,38 @@ import {OverlayTrigger, Tooltip, ToggleButton} from 'react-bootstrap';
 import './styles.css';
 
 type Props = {
-    visibility: boolean;
-    setVisibility: React.Dispatch<React.SetStateAction<boolean>>;
-    config: Config | null;
+    visible: boolean;
+    setVis: React.Dispatch<React.SetStateAction<boolean>>;
+    configIndex: number | null;
+    config: Configs[];
+    onChange: any;
+    modalHeader: string;
 }
 
 function ConfigModal({visibility, setVisibility, config}: Props) {
     const [show, setShow] = useState(false);
     const [isActionVisible, setIsActionVisible] = useState(false);
     const [isConfigVisible, setIsConfigVisible] = useState(false);
     const [radioValue, setRadioValue] = useState('');
-    const [isDeleteVisible, setIsDeleteVisible] = useState(false);
+    const [deleteVisible, setDeleteVisible] = useState(false);
+
+    const handleCloseButton = (
+        variant: string,
+        text: string,
+    ) => (
+        <Button
+            variant={variant}
+            onClick={handleClose}
+        >
+            {text}
+        </Button>
+    );
 
     const guest = [
         {name: 'true', value: 'true'},
         {name: 'false', value: 'false'},
     ];
+
     const buttonTypes = [
         {name: 'button', value: 'button'},
         {name: 'automatic', value: 'automatic'},
@@ -189,9 +205,7 @@ function ConfigModal({visibility, setVisibility, config}: Props) {
                                                         strokeWidth='1.65'
                                                         strokeLinecap='round'
                                                         strokeLinejoin='round'
-                                                    >
-                                                        <polyline points='3 6 5 6 21 6'/>
-                                                        <path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
+                                                    ><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
                                                         <line
                                                             x1='10'
                                                             y1='11'
@@ -258,8 +272,7 @@ function ConfigModal({visibility, setVisibility, config}: Props) {
                                                         strokeWidth='1.65'
                                                         strokeLinecap='round'
                                                         strokeLinejoin='round'
-                                                    ><polyline points='3 6 5 6 21 6'/>
-                                                        <path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
+                                                    ><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
                                                         <line
                                                             x1='10'
                                                             y1='11'
@@ -326,8 +339,7 @@ function ConfigModal({visibility, setVisibility, config}: Props) {
                                                         strokeWidth='1.65'
                                                         strokeLinecap='round'
                                                         strokeLinejoin='round'
-                                                    ><polyline points='3 6 5 6 21 6'/>
-                                                        <path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
+                                                    ><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/>
                                                         <line
                                                             x1='10'
                                                             y1='11'
@@ -404,48 +416,12 @@ function ConfigModal({visibility, setVisibility, config}: Props) {
                     </div>}
                 </Modal.Body>
                 <Modal.Footer>
-                    {isConfigVisible &&
-                    <Button
-                        variant='secondary'
-                        onClick={handleClose}
-                    >
-                        {'Close'}
-                    </Button>}
-                    {isActionVisible &&
-                    <Button
-                        variant='secondary'
-                        onClick={handleClose}
-                    >
-                        {'Cancel'}
-                    </Button>}
-                    {isDeleteVisible &&
-                    <Button
-                        variant='secondary'
-                        onClick={handleClose}
-                    >
-                        {'Cancel'}
-                    </Button>}
-                    {isConfigVisible &&
-                    <Button
-                        variant='primary'
-                        onClick={handleClose}
-                    >
-                        {'Save changes'}
-                    </Button>}
-                    {isActionVisible &&
-                    <Button
-                        variant='primary'
-                        onClick={handleClose}
-                    >
-                        {'Add action'}
-                    </Button>}
-                    {isDeleteVisible &&
-                    <Button
-                        variant='danger'
-                        onClick={handleClose}
-                    >
-                        {'Delete action'}
-                    </Button>}
+                    {configVisible && handleCloseButton('primary', 'Save changes')}
+                    {actionVisible && handleCloseButton('primary', 'Add action')}
+                    {configVisible && handleCloseButton('secondary', 'Close')}
+                    {actionVisible && handleCloseButton('secondary', 'Cancel')}
+                    {deleteVisible && handleCloseButton('secondary', 'Cancel')}
+                    {deleteVisible && handleCloseButton('danger', 'Delete action')}
                 </Modal.Footer>
             </Modal>
         </>

webapp/src/containers/components/modals/deleteModal.tsx

@@ -5,13 +5,32 @@ import Modal from 'react-bootstrap/Modal';
 
 import './styles.css';
 
-type Props = {
-    visibility: boolean;
-    setVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+import {Configs} from 'types/plugin/common';
+
+interface Props {
+    visible: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    config: Configs[];
+    configIndex: number;
+    onChange: any;
 }
 
-const DeleteConfigModal = ({visibility, setVisibility}: Props) => {
-    const handleClose = () => setVisibility(false);
+const DeleteModal = ({visible, setVisible, config, configIndex, onChange}: Props) => {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setShow(visible);
+    }, [visible]);
+
+    const handleClose = () => {
+        setVisible(false);
+    };
+
+    const handleDelete = () => {
+        config.splice(configIndex, 1);
+        onChange(config);
+        handleClose();
+    };
 
     return (
         <>
@@ -24,20 +43,22 @@ const DeleteConfigModal = ({visibility, setVisibility}: Props) => {
                 </Modal.Header>
 
                 <Modal.Body>
-                    {/* TODO: Add team name according to the team */}
-                    <p>{'Delete the configs for the team xyz'}</p>
+                    <p>{`Are you sure you would like to delete the configs for the team ${config[configIndex].teamName}?`} </p>
                 </Modal.Body>
 
                 <Modal.Footer>
                     <Button
                         variant='secondary'
                         onClick={handleClose}
                     >{'Close'}</Button>
-                    <Button variant='danger'>{'Delete'}</Button>
+                    <Button
+                        variant='danger'
+                        onClick={handleDelete}
+                    >{'Delete'}</Button>
                 </Modal.Footer>
             </Modal>
         </>
     );
 };
 
-export default DeleteConfigModal;
+export default DeleteModal;