[MI-3199]: Developed a table to display the existing config of plugin

.gitignore

@@ -1 +1 @@
-dist
+dist

Makefile

@@ -66,7 +66,7 @@ endif
 .PHONY: webapp/.npminstall
 webapp/.npminstall:
 ifneq ($(HAS_WEBAPP),)
-	cd webapp && $(NPM) install
+	cd webapp && $(NPM) install --legacy-peer-deps
 	touch $@
 endif
 

build/manifest/main.go

@@ -118,11 +118,11 @@ func applyManifest(manifest *model.Manifest) error {
 
 	if manifest.HasWebapp() {
 		if err := ioutil.WriteFile(
-			"webapp/src/manifest.js",
+			"webapp/src/manifest.ts",
 			[]byte(fmt.Sprintf(pluginIDJSFileTemplate, manifest.Id, manifest.Version)),
 			0600,
 		); err != nil {
-			return errors.Wrap(err, "failed to open webapp/src/manifest.js")
+			return errors.Wrap(err, "failed to open webapp/src/manifest.ts")
 		}
 	}
 

plugin.json

@@ -20,6 +20,16 @@
     "bundle_path": "webapp/dist/main.js"
   },
   "settings_schema": {
-      "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)."
+      "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",
+            "help_text": "",
+            "placeholder": "",
+            "default": ""
+        }
+    ]
   }
 }

webapp/package.json

@@ -69,7 +69,7 @@
     "js-cookie": "3.0.1",
     "mattermost-redux": "5.27.0",
     "react": "16.13.1",
-    "react-bootstrap": "2.7.4",
+    "react-bootstrap": "1.0.1",
     "react-redux": "7.2.0",
     "redux": "4.0.5",
     "typescript": "3.9.6"

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

@@ -0,0 +1,50 @@
+import React, {useEffect, useState} from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+import usePluginApi from 'hooks/usePluginApi';
+
+//TODO: render this modal when view button is clicked in Config table
+const AttachmentMsgModal = () => {
+    const [show, setShow] = useState(false);
+    const usePlugin = usePluginApi();
+
+    useEffect(() => {
+        const visibility = usePlugin.state['plugins-com.mattermost.welcomebot'].viewConfigModalSlice.isVisible;
+        setShow(visibility);
+    }, []);
+
+    const handleClose = () => {
+        setShow(false);
+    };
+    return (
+        <>
+            <div
+                className='modal show'
+                style={{display: 'block', position: 'initial'}}
+            >
+                <Modal show={show}>
+                    <Modal.Header closeButton={true}>
+                        <Modal.Title>{'Attachment Message'}</Modal.Title>
+                    </Modal.Header>
+
+                    <Modal.Body>
+                        <p>{'Attachment message body text goes here.'}</p>
+                    </Modal.Body>
+
+                    <Modal.Footer>
+                        <Button
+                            variant='secondary'
+                            onClick={handleClose}
+                        >
+                            {'Close'}
+                        </Button>
+                        <Button variant='primary'>{'Save changes'}</Button>
+                    </Modal.Footer>
+                </Modal>
+            </div>
+        </>
+    );
+};
+
+export default AttachmentMsgModal;

webapp/src/containers/components/tables/existingConfigTable.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import {FormGroup, Col, Table, ButtonGroup, Button} from 'react-bootstrap';
+
+import './styles.css';
+import {useDispatch} from 'react-redux';
+
+import {showViewConfigModalState} from 'reducers/viewConfigModal';
+
+type HelpText = {
+    key: string | null;
+    props: {
+        isMarkdown: boolean;
+        isTranslated: boolean;
+        text: string;
+        textDefault?: string;
+        textValues?: string;
+    }
+}
+
+type Props = {
+    id: string;
+    label: string;
+    value: string;
+    helpText: HelpText;
+}
+
+//TODO: Will remove this dummy data
+const ExistingConfigTable = ({label, helpText}: Props) => {
+    const dispatch = useDispatch();
+    const handleView = () => {
+        dispatch(showViewConfigModalState());
+    };
+
+    return (
+        <div>
+            <FormGroup>
+                <Col sm={4}>
+                    {label}
+                </Col>
+                <Col sm={8}>
+                    <Table striped={true}>
+                        <thead>
+                            <tr>
+                                <th className='team-name single-line'>{'Team Name'}</th>
+                                <th className='delay'>{'Delay in seconds'}</th>
+                                <th className='message'>{'Message'}</th>
+                                <th className='attachment-message  single-line'>{'Attachment message'}</th>
+                                <th className='options'>{'Options'}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>{'Standup'}</td>
+                                <td>{'4'}</td>
+                                <td className='ellipsis'>
+                                    {'Hello to standup group sdhfvk.'}
+                                </td>
+                                <td>
+                                    <Button
+                                        variant='primary'
+                                        onClick={handleView}
+                                    >
+                                        {'View'}
+                                    </Button>
+                                </td>
+                                <td>
+                                    <div className='options'>
+                                        <ButtonGroup aria-label='Basic example'>
+                                            <Button variant='primary'>{'Edit'}</Button>
+                                            <Button variant='danger'>{'Delete'}</Button>
+                                        </ButtonGroup>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{'Overview'}</td>
+                                <td>{'5'}</td>
+                                <td>{'This group is to share overview'}</td>
+                                <td>
+                                    <Button
+                                        variant='primary'
+                                        onClick={handleView}
+                                    >
+                                        {'View'}
+                                    </Button>
+                                </td>
+                                <td>
+                                    <div>
+                                        <ButtonGroup aria-label='Basic example'>
+                                            <Button variant='primary'>{'Edit'}</Button>
+                                            <Button variant='danger'>{'Delete'}</Button>
+                                        </ButtonGroup>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{'Result'}</td>
+                                <td>{'2'}</td>
+                                <td>{'Share all your results here'}</td>
+                                <td>
+                                    <Button
+                                        variant='primary'
+                                        onClick={handleView}
+                                    >
+                                        {'View'}
+                                    </Button>
+                                </td>
+                                <td>
+                                    <div>
+                                        <ButtonGroup aria-label='Basic example'>
+                                            <Button variant='primary'>{'Edit'}</Button>
+                                            <Button variant='danger'>{'Delete'}</Button>
+                                        </ButtonGroup>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>{'Deploy'}</td>
+                                <td>{'6'}</td>
+                                <td>{'Deployment details here'}</td>
+                                <td>
+                                    <Button
+                                        variant='primary'
+                                        onClick={handleView}
+                                    >
+                                        {'View'}
+                                    </Button>
+                                </td>
+                                <td>
+                                    <div>
+                                        <ButtonGroup aria-label='Basic example'>
+                                            <Button variant='primary'>{'Edit'}</Button>
+                                            <Button variant='danger'>{'Delete'}</Button>
+                                        </ButtonGroup>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </Table>
+                    <div className='help-text'>
+                        <span>
+                            {helpText?.props?.text}
+                        </span>
+                    </div>
+                </Col>
+            </FormGroup>
+        </div>
+    );
+};
+
+export default ExistingConfigTable;

webapp/src/containers/components/tables/styles.css

@@ -0,0 +1,27 @@
+.btn-group {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+table.table tbody tr td,
+table.table thead tr th,
+table.table thead {
+  border: 2px solid #ddd;
+}
+
+.table td {
+    text-align: center;
+}
+
+.table th {
+    text-align: center;
+    vertical-align: bottom;
+} 
+
+table {
+    width: 100%;
+}
+.table thead tr th td{
+    white-space:nowrap
+}

webapp/src/hooks/usePluginApi.ts

@@ -0,0 +1,9 @@
+import {useSelector} from 'react-redux';
+
+function usePluginApi() {
+    const state = useSelector((pluginState: PluginState) => pluginState);
+
+    return {state};
+}
+
+export default usePluginApi;

webapp/src/index.tsx

@@ -9,25 +9,34 @@ import {GlobalState} from 'mattermost-redux/types/store';
 // Constants
 
 // Containers
+
+import {PluginRegistry} from 'types/mattermostWebapp';
+
+import ExistingConfigTable from 'containers/components/tables/existingConfigTable';
+
+import AttachmentMsgModal from 'containers/components/modals/attachmentMsgModal';
+
 import ChannelHeaderButton from './containers/components/channelHeaderButton';
 import RHS from './containers/rhs';
 
 // Reducer
 import reducers from './reducers';
 
-import {PluginRegistry} from './types/mattermostWebapp';
-
 import pluginConstants from './pluginConstants';
 
-import {pluginId} from './manifest';
+import {id} from './manifest';
 
 export default class Plugin {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+
     public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
         // @see https://developers.mattermost.com/extend/plugins/webapp/reference/
         registry.registerReducer(reducers);
         const {showRHSPlugin} = registry.registerRightHandSidebarComponent(RHS, pluginConstants.common.RIGHT_SIDEBAR_HEADER);
         registry.registerChannelHeaderButtonAction(<ChannelHeaderButton/>, () => store.dispatch(showRHSPlugin), null, pluginConstants.common.CHANNEL_HEADER_BUTTON_TOOLTIP);
+        registry.registerAdminConsoleCustomSetting('ExistingConfigurationTable', ExistingConfigTable);
+        registry.registerRootComponent(AttachmentMsgModal);
+        registry.registerRootComponent(StaticExample);
     }
 }
 
@@ -37,4 +46,4 @@ declare global {
     }
 }
 
-window.registerPlugin(pluginId, new Plugin());
+window.registerPlugin(id, new Plugin());

webapp/src/manifest.test.tsx

@@ -1,7 +1,7 @@
-import {pluginId, pluginVersion} from './manifest';
+import {id, version} from './manifest';
 
 // To ease migration, verify separate export of id and version.
 test('Plugin id and version are defined', () => {
-    expect(pluginId).toBeDefined();
-    expect(pluginVersion).toBeDefined();
+    expect(id).toBeDefined();
+    expect(version).toBeDefined();
 });

webapp/src/manifest.ts

@@ -1,3 +1,4 @@
-// Code generated .* DO NOT EDIT.
-export const pluginId = 'mattermost-plugin-template';
-export const pluginVersion = '0.0.1';
+// This file is automatically generated. Do not modify it manually.
+
+export const id = 'com.mattermost.welcomebot';
+export const version = '1.3.0';

webapp/src/reducers/index.ts

@@ -5,11 +5,13 @@ import {examplePluginApi} from 'services';
 import globalModalSlice from './globalModal';
 import apiRequestCompletionSlice from './apiRequest';
 import websocketEventSlice from './websocketEvent';
+import viewConfigModalSlice from './viewConfigModal';
 
 const reducers = combineReducers({
     apiRequestCompletionSlice,
     globalModalSlice,
     websocketEventSlice,
+    viewConfigModalSlice,
     [examplePluginApi.reducerPath]: examplePluginApi.reducer,
 });
 

webapp/src/reducers/viewConfigModal/index.ts

@@ -0,0 +1,22 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+const initialState: ViewConfigModalState = {
+    isVisible: false,
+};
+
+export const viewConfigModalSlice = createSlice({
+    name: 'viewConfigModalSlice',
+    initialState,
+    reducers: {
+        showViewConfigModalState: (state: ViewConfigModalState) => {
+            state.isVisible = true;
+        },
+        hideViewConfigModalState: (state: ViewConfigModalState) => {
+            state.isVisible = false;
+        },
+    },
+});
+
+export const {showViewConfigModalState, hideViewConfigModalState} = viewConfigModalSlice.actions;
+
+export default viewConfigModalSlice.reducer;