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

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>
+                        <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

@@ -1,19 +1,22 @@
 import {Store, Action} from 'redux';
-
 import {GlobalState} from 'mattermost-redux/types/store';
-
-import reducers from './reducers';
-
 // eslint-disable-next-line import/no-unresolved
-import {PluginRegistry} from './types/mattermostWebapp';
+import {PluginRegistry} from 'types/mattermostWebapp';
 
+import ExistingConfigTable from 'containers/components/tables/existingConfigTable';
+import AttachmentMsgModal from 'containers/components/modals/attachmentMsgModal';
+
+import reducers from './reducers';
 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);
+        registry.registerAdminConsoleCustomSetting('ExistingConfigurationTable', ExistingConfigTable);
+        registry.registerRootComponent(AttachmentMsgModal);
     }
 }
 

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;

webapp/src/services/index.ts

@@ -3,10 +3,10 @@ import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
 import Cookies from 'js-cookie';
 import {UserProfile} from 'mattermost-redux/types/users';
 
-import Constants from 'pluginConstants';
-
 import Utils from 'utils';
 
+import Constants from 'pluginConstants';
+
 // Service to make plugin API requests
 export const examplePluginApi = createApi({
     reducerPath: 'examplePluginApi',

webapp/src/types/plugin/reduxStore.d.ts

@@ -10,3 +10,11 @@ type GlobalModalState = {
 type WebsocketEventState = {
     isConnected: boolean;
 };
+
+type ViewConfigModalState = {
+    isVisible: boolean;
+};
+
+type PluginState = {
+    'plugins-com.mattermost.welcomebot': RootState<{ [x: string]: QueryDefinition<void, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, never, WellList[], 'pluginState'>; }, never, 'pluginState'>
+}