Skip to content

Commit

Permalink
[MI-3275]: Integrated config modal (#11)
Browse files Browse the repository at this point in the history 
* [MI-3275]: Integrated config modal

* [MI-3275]: destructured props in modal

* [MI-3275]: Fixed message in delete modal

* [MI-3275]: Fixed import order in modal

* [MI-3275]: Resolved missing closing tag errors

* [MI-3275]: Fixed indent for CI

* [MI-3275]: Fixed indentation errors in CI

* [MI-3275]: Removed evtra variables

* [MI-3317]: Added validations to forms and enhancements (#12)

* [MI-3317]: Added validations to forms

* [MI-3317]: added EOD to style.css

* [MI-3316]: Fixed some css

* [MI-3317]: Fixed grammar of validation messages

* [MI-3317]: Fixed grammar of validation message in action modal

* [MI-3317]: added classname to each modal

* [MI-3316]: added css to make modals stationary

* [MI-3316]: Removed some extra files

* [MI-3317]: removed some extra files

* [MI-3317]: reduced the icon size of svg icons

* [MI-3317]: Fixed grammar in actionModal message

* [MI-3317]: removed an extra comment

* [MI-3317]: Improved grammar of statements in config modal

* [MI-3317]: Fixed grammar of message

* [MI-3317]: Fixed import order

* [MI-3317]: Fixed redundant if conditions and removed extra empty lines

* [MI-3317]: Used fat-arrow function instead of normal function

* [MI-3317]: Removed camelcase from css

* [MI-3317]: Resolved conflicts and fixed CI

* [MI-3317]: Fixed indentation errors

* [MI-3317]: Improved the name of variables

* [MI-3317]: Removed else and used return with if

* [MI-3317]: Fixed the variable name in table

* [MI-3317]: Fixed CSS according to abhishek's review

* [MI-3355]: Added dropdown to choose teams and channels (#14)

* [MI-3355]: Removed extra types

* [MI-3355]: Improved message of view action modal

* [MI-3355]: removed extra packages

* [MI-3355]: Added eod to files

* [MI-3355]: Fixed adding action functionality

* [MI-3355]: Fixed the jump in UI during validation warnings

* [MI-3355]: fixed maximum nested callback in useEffect

* [MI-3355]: Fixed validation warnings in Add action modal

* [MI-3355]: Added ellipses to the tables

* [MI-3355]: updated API to fetch data in batches

* [MI-3355]: Removed comment and fixed empty lines

* [MI-3355]: Fixed css of modal visibility

* [MI-3355]: Added svg icons to different file

* [MI-3355]: Improvised the folder structure

* [MI-3355]: Improved the variable name in existingConfigTable

* [MI-3355]: Fixed error in adding new action to config with index zero

* [MI-3355]: Fixed import issue of .d.ts files

* [MI-3355]: Used fat-arrow function instead of normal functions

* [MI-3355]: Installed types and packages for js-cookie

* [MI-3355]: Setup reduxstore

* [MI-3355]: Disabled dropdown during loading state

* [MI-3355]: Improved getBaseUrl method

* [MI-3355]: Improved the API call

* [MI-3355]: Added constants and used baseUrl from redux state

* [MI-3355]: Fixed jump in UI in edit action modal

* [MI-3355]: Joined array of string with comma for messages & disabled dropdown incase of API failure

* [MI-3355]: Added type of onChange function

* [MI-3355]: Removed extra variables

* [MI-3355]: Improved the validation conditions

* [MI-3355]: Fixed css according to reviews by abhishek

* [MI-3355]: Improved visibility of action successfull message

* [MI-3355]: Used scss instead of css

* [MI-3355]: Fixed the CSS of channel-added-to content

* [MI-3355]: Added semicolons to types in common.d.ts

* Update webapp/src/components/modals/actionModal.tsx

Co-authored-by: Abhishek Verma <[email protected]>

* Update webapp/src/components/tables/existingConfigTable.tsx

Co-authored-by: Abhishek Verma <[email protected]>

* Update webapp/src/components/svgIcons/svg.tsx

Co-authored-by: Abhishek Verma <[email protected]>

* [MI-3355]: Used px instead of % in css

* [MI-3355]: Fixed some minor css

* [MI-3355]: Removed extra spaces from existingConfigTable

---------

Co-authored-by: Abhishek Verma <[email protected]>

---------

Co-authored-by: Abhishek Verma <[email protected]>

---------

Co-authored-by: Abhishek Verma <[email protected]>
  • Loading branch information
@Kshitij-Katiyar @avas27JTG
Kshitij-Katiyar and avas27JTG authored Aug 31, 2023
1 parent 0d66129 commit 709f1b2
Show file tree
Hide file tree
Showing 20 changed files with 2,176 additions and 1,116 deletions.
511 changes: 430 additions & 81 deletions webapp/package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion webapp/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,15 @@
"webpack-cli": "3.3.12"
},
"dependencies": {
"@reduxjs/toolkit": "1.9.5",
"core-js": "3.6.5",
"js-cookie": "3.0.5",
"mattermost-redux": "5.27.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-bootstrap": "2.8.0",
"react-dom": "18.2.0",
"react-redux": "7.2.0",
"react-select": "5.7.4",
"redux": "4.0.5",
"typescript": "5.1.6"
},
Expand Down
20 changes: 20 additions & 0 deletions webapp/src/api/api_wrapper.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Utils from 'utils';

export const fetchChannels = async (mmSiteUrl: string) => {
const url = Utils.getBaseUrls(mmSiteUrl).mattermostApiBaseUrl + '/channels?exclude_default_channels=true';
const response = await fetch(url, {
method: 'GET',
headers: {Authentication: Utils.getAuthToken()},
});
return response.json();
};

export const fetchTeams = async (mmSiteUrl: string) => {
const url = Utils.getBaseUrls(mmSiteUrl).mattermostApiBaseUrl + '/teams';
const response = await fetch(url, {
method: 'GET',
headers: {Authentication: Utils.getAuthToken()},
});
return response.json();
};

163 changes: 163 additions & 0 deletions webapp/src/components/modals/actionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
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 {OverlayTrigger, Tooltip} from 'react-bootstrap';

import './styles.scss';

type Props = {
visibility: boolean;
setVisibility: React.Dispatch<React.SetStateAction<boolean>>;
config: Configs[];
configIndex: number;
}

const ActionModal = ({visibility, setVisibility, config, configIndex}: Props) => {
const [attachmentMessageAvailable, setAttachmentMessageAvailable] = useState(false);

const actionsLength = config[configIndex]?.actions?.length;

const checkAttachmentMessage = () => {
if (config[configIndex]?.attachmentMessage?.length) {
setAttachmentMessageAvailable(Boolean(config[configIndex]?.attachmentMessage?.[0]));
return;
}

setAttachmentMessageAvailable(false);
};

useEffect(() => {
checkAttachmentMessage();
}, []);

const handleClose = () => setVisibility(false);

return (
<Modal
className='custom-modal'
show={visibility}
onHide={handleClose}
>
<Modal.Header closeButton={false}>
<Modal.Title>{'Actions'}</Modal.Title>
</Modal.Header>

<Modal.Body className='custom-modal-body'>
{attachmentMessageAvailable || (config[configIndex]?.actions && actionsLength) ? (<>
{attachmentMessageAvailable ? (
<Form>
<Form.Group className='form-group'>
<Form.Label>{'Attachment Message'}</Form.Label>
<Form.Control
type='long-text'
value={config[configIndex].attachmentMessage?.join(',') ?? ''}
placeholder=''
aria-label='Disabled input example'
readOnly={true}
/>
</Form.Group>
</Form>
) : (<p>{'No attachment message configured'}</p>)
}
{config[configIndex]?.actions && actionsLength ? (
<div>
<Form>
<Form.Group className='action-group'>
<Form.Label>{'Actions'}</Form.Label>
</Form.Group>
</Form>
<div className='list-table'>
<Table
striped={true}
>
<thead>
<tr>
<th className='type-action'>{'Type'}</th>
<th className='display-name-action'>{'Display Name'}</th>
<th className='name-action'>{'Name'}</th>
<th className='channels-added-action'>{'Add to Channels'}</th>
<th className='success-message-action'>{'Success Message'}</th>
</tr>
</thead>
<tbody>
{
config[configIndex].actions?.map((val, i) =>
(
<tr key={i.toString()}>
<td className='type-action'>
<OverlayTrigger
placement='top'
overlay={<Tooltip>{val.actionType}</Tooltip>}
>
<p>
{val.actionType}
</p>
</OverlayTrigger>
</td>
<td className='display-name-action'>
<OverlayTrigger
placement='top'
overlay={<Tooltip>{val.actionDisplayName}</Tooltip>}
>
<p className='display-name-content'>
{val.actionDisplayName}
</p>
</OverlayTrigger>
</td>
<td className='name-action'>
<OverlayTrigger
placement='top'
overlay={<Tooltip>{val.actionName}</Tooltip>}
>
<p className='action-name-content'>
{val.actionName}
</p>
</OverlayTrigger>
</td>
<td className='channels-added-action'>
<OverlayTrigger
placement='top'
overlay={<Tooltip>{val.channelsAddedTo.join(', ')}</Tooltip>}
>
<p className='channels-added-content'>
{val.channelsAddedTo.join(', ')}
</p>
</OverlayTrigger>
</td>
<td className='success-message-action'>
<OverlayTrigger
placement='top'
overlay={<Tooltip>{val.actionSuccessfullMessage.join(',')}</Tooltip>}
>
<p className='successfull-message-content'>
{val.actionSuccessfullMessage.join(',')}
</p>
</OverlayTrigger>
</td>
</tr>
),
)
}
</tbody>
</Table>
</div>
</div>
) : (<p>{'No action configured'}</p>)
}
</>) : (<p>{'No attachment message or action configured'}</p>)}
</Modal.Body>

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

export default ActionModal;
Loading

0 comments on commit 709f1b2

Please sign in to comment.