Skip to content

Commit

Permalink
[MI-3230]: Developed a modal which opens on click of view button in c…
Browse files Browse the repository at this point in the history 
…onfig table (#6)

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

* Added form in modal to accept the action details

* [MI-3230]: Added view Action modal

* [MI-3230]: FIxed indentation in existingConfigTable

* [MI-3230: Fixed indentation in existingConfigTable

* [MI-3230]: fixed indentation in existingConfigTable

* [MI-3230]: Fixed indentation in existingConfigTable

* [MI-3230]: Removed unwanted files from webapp

* [MI-3230]: Fixed indentation

* [MI-3230]: Removed extra padding from existingConfigTable

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

* [MI-3230]: Added eod, use type instead of interface

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

* [MI-3230]: Improved name of variable in editActionModal

* [MI-3230]: Fixed some review changes by Abhishek

* [MI-3230]: Added div to </> in existingConfigTable

* [MI-3230]: Added curly braces to css file

* [MI-3241] : Added delete config modal to the webapp (#7)

* [MI-3241]: Added delete config modal

* [MI-3241]: fixed indent in table

* [MI-3241]: Fixed indent in existingConfigtable

* [MI-3241]: Removed extra files from webapp

* [MI-3241]: Resolved import not found

* [MI-3241]: removed extra empty lines

* [MI-3241]: Added corejs as dependency

* [MI-3241]: removed duplicate react-dom dependency

* [MI-3242]: Improved variable name in modal

* [MI-3241]: add eod to modal files

* [MI-3241]: removed extra div wrappers

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

* [MI-3241]: Fixed a syntax error in existingConfigTable

* [MI-3241]: Fixed CI in existingConfigTable

* [MI-3241]: Added curly brace to css file

* [MI-3255]: Added svg icon and Tooltip (#8)

* [MI-3255]: Added svg icon as button and added tooltip

* [MI-3254]: Added add/edit config modal and add config button

* [MI-3254]: Added add config button in existing config table

* [MI-3254]: Added config and action edit modal

* [MI-3254]: Fixed css of config modal and existing config table

* [MI-3254]: Added services and utils file for plugin

* [MI-3254]: added service and util files

* [MI-3255]: Fixed some indentation

* [MI-3255]: Removed some extra lines

* [MI-3254]: Removed extra files from webapp

* [MI-3255]: removed extra files from webapp

* [MI-3255]: Fixed indentation

* [MI-3255]: Fixed indentation

* [MI-3255]: Removed extra lines and updated variable names

* [MI-3255]: added null to config variable

* [MI-3255]: Improved variable name in DeleteModal

* [MI-3255]: Improved base URL fetching

* [MI-3255]: Improved variable name to increase understandability

* [MI-3274]: Integrated config table, view action modal & delete config modal (#10)

* [MI-3275]: Fixed indentation and other lint errors

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

* [MI-3274]: Used camelcase in type

* [MI-3274]: Resolved the import order issue

* [MI-3274]: Resolved import order

* [MI-3274]: Used types instead of interface

* [MI-3274]: Fixed indentation for CI

* [MI-3274]: Fixed lint CI

* [MI-3274]: Fixed conflict resolution error

* [MI-3274]: Fixed error in plugin.json

* [MI-3275]: Integrated config modal (#11)

* [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]>

---------

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

---------

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 Sep 1, 2023
1 parent 2fbf310 commit 4f79ae0
Show file tree
Hide file tree
Showing 21 changed files with 2,415 additions and 446 deletions.
6 changes: 3 additions & 3 deletions plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +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": []
}
]
}
Expand Down
2 changes: 1 addition & 1 deletion server/configuration.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
850 changes: 635 additions & 215 deletions webapp/package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion webapp/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,16 @@
"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"
},
"jest": {
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 4f79ae0

Please sign in to comment.