Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MI-3230]: Developed a modal which opens on click of view button in config table #6

Merged
merged 28 commits into from
Sep 1, 2023
Merged

[MI-3230]: Developed a modal which opens on click of view button in config table #6

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
e5fd9fe
[MI-3230]: Developed a modal which opens on click of view button in c…
Kshitij-Katiyar Jul 3, 2023
8189a22
Added form in modal to accept the action details
Kshitij-Katiyar Jul 4, 2023
27382ec
[MI-3230]: Added view Action modal
Kshitij-Katiyar Jul 4, 2023
a3a5f3d
[MI-3230]: Removed rhs files from plugin
Kshitij-Katiyar Jul 10, 2023
bb66c10
[MI-3230]: FIxed indentation in existingConfigTable
Kshitij-Katiyar Jul 10, 2023
50ea728
Merge branch 'MI-3199' of github.com:Brightscout/mattermost-plugin-we…
Kshitij-Katiyar Jul 10, 2023
9fca2af
[MI-3230: Fixed indentation in existingConfigTable
Kshitij-Katiyar Jul 10, 2023
63351b3
[MI-3230]: fixed indentation in existingConfigTable
Kshitij-Katiyar Jul 10, 2023
065d0c7
[MI-3230]: Fixed indentation in existingConfigTable
Kshitij-Katiyar Jul 10, 2023
f3ea422
Merge branch 'MI-3199' of github.com:Brightscout/mattermost-plugin-we…
Kshitij-Katiyar Jul 11, 2023
e8f2f9c
[MI-3230]: Removed unwanted files from webapp
Kshitij-Katiyar Jul 19, 2023
fd096a0
[MI-3230]: removed extra files
Kshitij-Katiyar Jul 19, 2023
eb3c661
[MI-3230]: Removed some extra lines and added eod
Kshitij-Katiyar Aug 1, 2023
99458ac
[MI-3230]: Fixed indentation
Kshitij-Katiyar Aug 1, 2023
fc5046e
Merge branch 'MI-3199' into MI-3230
Kshitij-Katiyar Aug 2, 2023
a8d6308
[MI-3230]: Removed extra padding from existingConfigTable
Kshitij-Katiyar Aug 2, 2023
9c94b0a
Merge branch 'MI-3230' of github.com:Brightscout/mattermost-plugin-we…
Kshitij-Katiyar Aug 2, 2023
ea5f613
[MI-3230]: Improved the name of variables
Kshitij-Katiyar Aug 10, 2023
c17b02e
[MI-3230]: Added eod, use type instead of interface
Kshitij-Katiyar Aug 11, 2023
96d4a30
[MI-3230]: Used fat arrow function instead of normal function
Kshitij-Katiyar Aug 11, 2023
96157eb
[MI-3230]: Improved name of variable in editActionModal
Kshitij-Katiyar Aug 17, 2023
799e74a
Merge branch 'MI-3199' of github.com:Brightscout/mattermost-plugin-we…
Kshitij-Katiyar Aug 22, 2023
160248b
Merge branch 'MI-3199' into MI-3230
Kshitij-Katiyar Aug 24, 2023
4c85f44
[MI-3230]: Fixed some review changes by Abhishek
Kshitij-Katiyar Aug 24, 2023
62b1d22
Merge branch 'MI-3230' of github.com:Brightscout/mattermost-plugin-we…
Kshitij-Katiyar Aug 24, 2023
a16a58b
[MI-3230]: Added div to </> in existingConfigTable
Kshitij-Katiyar Aug 24, 2023
75d4a42
[MI-3230]: Added curly braces to css file
Kshitij-Katiyar Aug 24, 2023
9db34a8
[MI-3241] : Added delete config modal to the webapp (#7)
Kshitij-Katiyar Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 117 additions & 133 deletions webapp/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@
"core-js": "3.6.5",
"mattermost-redux": "5.27.0",
"react": "18.2.0",
"react-dom": "18,2.0",
"react-bootstrap": "2.8.0",
"react-redux": "7.2.0",
"redux": "4.0.5",
"react-dom": "18.2.0",
"react-bootstrap": "2.8.0",
"typescript": "5.1.6"
Expand Down
107 changes: 107 additions & 0 deletions webapp/src/containers/components/modals/editActionsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React, {useEffect, useState} from 'react';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';

import './styles.css';


interface Props {
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
visible: boolean;
setVis: React.Dispatch<React.SetStateAction<boolean>>;
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
}

function EditActionsModal({visible, setVis}: Props) {
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
const [show, setShow] = useState(false);

useEffect(() => {
setShow(visible);
}, [visible]);

const handleClose = () => {
setShow(false);
setVis(false);
};
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
return (
<>
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<Modal
show={show}
onHide={handleClose}
>
<Modal.Header closeButton={false}>
<Modal.Title>{'Actions'}</Modal.Title>
</Modal.Header>

<Modal.Body>
<Form>
<Form.Group>
<Form.Label>
{'Attachment Message'}
</Form.Label>
<Form.Control
type='text'
placeholder='Enter the attachment message'
/>
</Form.Group>
<Form.Group>
<Form.Label>
{'Action Type'}
</Form.Label>
<div className='dropdown'>
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<Form.Select aria-label='Choose the action type'>
<option>
{'Choose the type of action'}
</option>
<option value='1'>
{'Button'}
</option>
<option value='2'>
{'Automatic'}
</option>
</Form.Select>
</div>
</Form.Group>
<Form.Group>
<Form.Label>
{'Action Display Name'}
</Form.Label>
<Form.Control
type='text'
placeholder='Enter the display name of action'
/>
</Form.Group>
<Form.Group>
<Form.Label>
{'Channels Added to'}
</Form.Label>
<Form.Control
type='text'
placeholder='Enter the name of channels in which you want to add the new user'
/>
</Form.Group>
<Form.Group>
<Form.Label>
{'Action Successfull message'}
</Form.Label>
<Form.Control
type='text'
placeholder='Enter the success message on completion of action'
/>
</Form.Group>
</Form>
</Modal.Body>

<Modal.Footer>
<Button
variant='secondary'
onClick={handleClose}
>{'Close'}</Button>
<Button variant='primary'>{'Save changes'}</Button>
</Modal.Footer>
</Modal>
</>
);
}

export default EditActionsModal;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add EOF

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

6 changes: 3 additions & 3 deletions webapp/src/containers/components/modals/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.show {
display: block;
position: initial;
.modal {
opacity: 1;
padding-top: 10%;
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

94 changes: 94 additions & 0 deletions webapp/src/containers/components/modals/viewActionsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React, {useEffect, useState} 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';

interface Props {
visible: boolean;
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved

function ViewActionsModal(props: Props) {
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
const [show, setShow] = useState(false);

useEffect(() => {
setShow(props.visible);
}, [props.visible]);

const handleClose = () => {
setShow(false);
props.setVisible(false);
};
return (
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<>
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<Modal
show={show}
onHide={handleClose}
>
<Modal.Header closeButton={false}>
<Modal.Title>{'Actions'}</Modal.Title>
</Modal.Header>

<Modal.Body>
<Form>
<Form.Group>
<Form.Label>{'Attachment Message'}</Form.Label>
<Form.Control
type='long-text'
readOnly={true}
/>
</Form.Group>
<Form.Group>
<Form.Label>{'Actions'}</Form.Label>
</Form.Group>
</Form>
<Table striped={true}>
<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 mate!'}</td>
</tr>
<tr>
<td>{'Automatic'}</td>
<td>{'Export'}</td>
<td>{'channel1, channel2'}</td>
<td>{'Welcome to your new team mate!'}</td>
</tr>
<tr>
<td>{'Button'}</td>
<td>{'Deport'}</td>
<td>{'channel1, channel3'}</td>
<td>{'Welcome to your new team mate!'}</td>
</tr>
</tbody>
</Table>
</Modal.Body>

<Modal.Footer>
<Button
variant='secondary'
onClick={handleClose}
>{'Close'}</Button>
<Button
variant='primary'
disabled={true}
>{'Save changes'}</Button>
</Modal.Footer>
</Modal>
</>
);
}

export default ViewActionsModal;
102 changes: 67 additions & 35 deletions webapp/src/containers/components/tables/existingConfigTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Button from 'react-bootstrap/Button';

import './styles.css';

import ViewActionsModal from '../modals/viewActionsModal';

type HelpText = {
key: string | null;
props: {
Expand All @@ -31,8 +33,17 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
const handleView = () => {
setVisible(true);
};
const handleViews = () => {
setVisible(false);
};
return (
<div>
{visible &&
<ViewActionsModal
visible={visible}
setVis={setVisible}
/>
}
<FormGroup>
<Col sm={4}>
{label}
Expand All @@ -42,10 +53,10 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
<thead>
<tr>
<th className='team-name single-line'>{'Team Name'}</th>
<th className='delay'>{'Delay in seconds'}</th>
<th className='delay'>{'Delay (in sec)'}</th>
<th className='message'>{'Message'}</th>
<th className='attachment-message single-line'>{'Attachment message'}</th>
<th className='options'>{'Options'}</th>
<th className='include-guests'>{'Include Guests'}</th>
<th className='options single-line'>{'Options'}</th>
</tr>
</thead>
<tbody>
Expand All @@ -56,17 +67,21 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
{'Hello to standup group sdhfvk.'}
</td>
<td>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
{'True'}
</td>
<td>
<div className='options'>
<ButtonGroup aria-label='Basic example'>
<Button variant='primary'>{'Edit'}</Button>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
<Button
variant='primary'
onClick={handleViews}
>{'Edit'}</Button>
<Button variant='danger'>{'Delete'}</Button>
</ButtonGroup>
</div>
Expand All @@ -77,17 +92,21 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
<td>{'5'}</td>
<td>{'This group is to share overview'}</td>
<td>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
{'True'}
</td>
<td>
<div>
<div className='options'>
<ButtonGroup aria-label='Basic example'>
<Button variant='primary'>{'Edit'}</Button>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
<Button
variant='primary'
onClick={handleViews}
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
>{'Edit'}</Button>
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<Button variant='danger'>{'Delete'}</Button>
</ButtonGroup>
</div>
Expand All @@ -98,17 +117,22 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
<td>{'2'}</td>
<td>{'Share all your results here'}</td>
<td>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
{'True'}
</td>

<td>
<div>
<div className='options'>
<ButtonGroup aria-label='Basic example'>
<Button variant='primary'>{'Edit'}</Button>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
<Button
variant='primary'
onClick={handleViews}
>{'Edit'}</Button>
<Button variant='danger'>{'Delete'}</Button>
</ButtonGroup>
</div>
Expand All @@ -119,18 +143,26 @@ const ExistingConfigTable = ({label, helpText}: Props) => {
<td>{'6'}</td>
<td>{'Deployment details here'}</td>
<td>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
{'True'}
</td>
<td>
<div>
<div className='options'>
<ButtonGroup aria-label='Basic example'>
<Button variant='primary'>{'Edit'}</Button>
<Button variant='danger'>{'Delete'}</Button>
<Button
variant='primary'
onClick={handleView}
>
{'View'}
</Button>
<Button
variant='primary'
onClick={handleViews}
>
{'Edit'}
</Button>
Kshitij-Katiyar marked this conversation as resolved.
Show resolved Hide resolved
<Button variant='danger'>
{'Delete'}
</Button>
</ButtonGroup>
</div>
</td>
Expand Down
Loading