Merge pull request #91 from Brightscout/MI-2291

[MI-2291] Add feature to show error panel when user is not connected
mattermost · Oct 26, 2022 · 1d6d3e0 · 1d6d3e0
2 parents fb4d108 + dabea77
commit 1d6d3e0
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 66 deletions.
diff --git a/webapp/src/containers/addOrViewComments/index.tsx b/webapp/src/containers/addOrViewComments/index.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {CircularLoader, CustomModal as Modal, ModalFooter, ModalHeader, ModalLoader, ModalSubtitleAndError, TextArea} from '@brightscout/mattermost-ui-library';
+import {CircularLoader, CustomModal as Modal, ModalFooter, ModalHeader, ModalLoader, ModalSubtitleAndError, ResultPanel, TextArea} from '@brightscout/mattermost-ui-library';
 
 import {FetchBaseQueryError} from '@reduxjs/toolkit/dist/query';
 
@@ -18,6 +18,7 @@ const AddOrViewComments = () => {
     const [comments, setComments] = useState('');
     const [showModalLoader, setShowModalLoader] = useState(false);
     const [apiError, setApiError] = useState('');
+    const [showErrorPanel, setShowErrorPanel] = useState(false);
     const [validationError, setValidationError] = useState('');
     const [refetch, setRefetch] = useState(false);
 
@@ -40,21 +41,20 @@ const AddOrViewComments = () => {
         resetFieldStates();
     }, []);
 
+    const getCommentsPayload = (): CommentsPayload => ({
+        record_type: pluginState.openCommentModalReducer.data?.recordType,
+        record_id: pluginState.openCommentModalReducer.data?.recordId,
+        comments,
+    });
+
     const getCommentsState = () => {
-        const payload: CommentsPayload = {
-            record_type: pluginState.openCommentModalReducer.recordType,
-            record_id: pluginState.openCommentModalReducer.recordId,
-        };
+        const payload = getCommentsPayload();
         const {isLoading, isSuccess, isError, data, error: apiErr} = getApiState(Constants.pluginApiServiceConfigs.getComments.apiServiceName, payload);
-        return {isLoading, isSuccess, isError, data: data as string, error: ((apiErr as FetchBaseQueryError)?.data as APIError | undefined)?.message || ''};
+        return {isLoading, isSuccess, isError, data: data as string, error: ((apiErr as FetchBaseQueryError)?.data as APIError | undefined)};
     };
 
     const addCommentState = () => {
-        const payload: CommentsPayload = {
-            record_type: pluginState.openCommentModalReducer.recordType,
-            record_id: pluginState.openCommentModalReducer.recordId,
-            comments,
-        };
+        const payload = getCommentsPayload();
         const {isLoading, isSuccess, isError, error: apiErr} = getApiState(Constants.pluginApiServiceConfigs.addComments.apiServiceName, payload);
         return {isLoading, isSuccess, isError, error: ((apiErr as FetchBaseQueryError)?.data as APIError | undefined)?.message || ''};
     };
@@ -65,12 +65,7 @@ const AddOrViewComments = () => {
             return;
         }
 
-        const payload: CommentsPayload = {
-            record_type: pluginState.openCommentModalReducer.recordType,
-            record_id: pluginState.openCommentModalReducer.recordId,
-            comments,
-        };
-
+        const payload = getCommentsPayload();
         makeApiRequest(Constants.pluginApiServiceConfigs.addComments.apiServiceName, payload);
     };
 
@@ -80,24 +75,29 @@ const AddOrViewComments = () => {
     };
 
     useEffect(() => {
-        if (pluginState.openCommentModalReducer.recordType && pluginState.openCommentModalReducer.recordId) {
-            const payload: CommentsPayload = {
-                record_type: pluginState.openCommentModalReducer.recordType,
-                record_id: pluginState.openCommentModalReducer.recordId,
-            };
-
+        if (pluginState.openCommentModalReducer.open) {
+            const payload = getCommentsPayload();
             makeApiRequest(Constants.pluginApiServiceConfigs.getComments.apiServiceName, payload);
         }
-    }, [pluginState.openCommentModalReducer.recordType, pluginState.openCommentModalReducer.recordId]);
+    }, [pluginState.openCommentModalReducer.open]);
 
     useEffect(() => {
-        const {isLoading, isSuccess, error, data} = getCommentsState();
+        const {isLoading, isSuccess, error, data, isError} = getCommentsState();
         if (isSuccess) {
+            setShowErrorPanel(false);
             setCommentsData(data);
         }
 
-        if (error) {
-            setApiError(error);
+        if (isError) {
+            if (error?.id === Constants.ApiErrorIdNotConnected) {
+                setShowErrorPanel(true);
+            }
+
+            setApiError(error?.message ?? '');
+        }
+
+        if (isLoading) {
+            setShowErrorPanel(false);
         }
 
         setShowModalLoader(isLoading);
@@ -120,11 +120,7 @@ const AddOrViewComments = () => {
     // Fetch comments from the API when refetch is set
     useEffect(() => {
         if (refetch) {
-            const payload: CommentsPayload = {
-                record_type: pluginState.openCommentModalReducer.recordType,
-                record_id: pluginState.openCommentModalReducer.recordId,
-            };
-
+            const payload = getCommentsPayload();
             makeApiRequest(Constants.pluginApiServiceConfigs.getComments.apiServiceName, payload);
             setRefetch(false);
         }
@@ -143,39 +139,53 @@ const AddOrViewComments = () => {
                 />
                 <ModalLoader loading={addCommentState().isLoading}/>
                 {showModalLoader && !comments && <CircularLoader/>}
-                <div
-                    className={`comment-body
-                                ${((!commentsData.length || apiError) && !showModalLoader) && 'comment-body__height'}`}
-                >
-                    <TextArea
-                        placeholder='Write new comment here'
-                        value={comments}
-                        onChange={onChangeHandle}
-                        className='comment-body__text-area'
-                        disabled={showModalLoader}
-                        error={validationError}
+                {showErrorPanel ? (
+
+                    // TODO: Add a button to connect to ServiceNow account
+                    <ResultPanel
+                        header={apiError}
+                        className='wizard__secondary-panel--slide-in result-panel'
+                        secondaryBtn={{
+                            text: 'Close',
+                            onClick: hideModal,
+                        }}
+                        iconClass='fa-times-circle-o result-panel-icon--error result-panel-error-icon'
                     />
-                    {!apiError && <h4 className='comment-body__heading'>{Constants.CommentsHeading}</h4>}
-                    {commentsData ? (
-                        <>
-                            <div className='comment-body__description-text'>{commentsData}</div>
-                            <p className='comment-body__footer'>{Constants.NoCommentsPresent}</p>
-                        </>
-                    ) : (
-                        <>
-                            {!showModalLoader && <p className='comment-body__footer'>{Constants.CommentsNotFound}</p>}
-                        </>
-                    )}
-                </div>
-                <ModalSubtitleAndError error={apiError}/>
-                <ModalFooter
-                    onConfirm={addComment}
-                    confirmBtnText='Submit'
-                    confirmDisabled={showModalLoader}
-                    onHide={hideModal}
-                    cancelBtnText='Cancel'
-                    cancelDisabled={showModalLoader}
-                />
+                ) : (
+                    <>
+                        <div
+                            className={`comment-body
+                                    ${((!commentsData.length || apiError) && !showModalLoader) && 'comment-body__height'}`}
+                        >
+                            <TextArea
+                                placeholder='Write new comment here'
+                                value={comments}
+                                onChange={onChangeHandle}
+                                className='comment-body__text-area'
+                                disabled={showModalLoader}
+                                error={validationError}
+                            />
+                            {!apiError && <h4 className='comment-body__heading'>{Constants.CommentsHeading}</h4>}
+                            {commentsData ? (
+                                <>
+                                    <div className='comment-body__description-text'>{commentsData}</div>
+                                    <p className='comment-body__footer'>{Constants.NoCommentsPresent}</p>
+                                </>
+                            ) : (
+                                !showModalLoader && <p className='comment-body__footer'>{Constants.CommentsNotFound}</p>
+                            )}
+                        </div>
+                        <ModalSubtitleAndError error={apiError}/>
+                        <ModalFooter
+                            onConfirm={addComment}
+                            confirmBtnText='Submit'
+                            confirmDisabled={showModalLoader}
+                            onHide={hideModal}
+                            cancelBtnText='Cancel'
+                            cancelDisabled={showModalLoader}
+                        />
+                    </>
+                )}
             </>
         </Modal>
     );

diff --git a/webapp/src/containers/addOrViewComments/styles.scss b/webapp/src/containers/addOrViewComments/styles.scss
@@ -38,3 +38,8 @@
       margin: 0px;
     }
 }
+
+.result-panel-error-icon {
+  font-size: 45px;
+  color: var(--error-text);
+}
diff --git a/webapp/src/containers/shareRecords/index.tsx b/webapp/src/containers/shareRecords/index.tsx
@@ -97,7 +97,7 @@ const ShareRecords = () => {
         const payload: ShareRecordPayload = {
             channel_id: channel,
             record_type: recordType as RecordType,
-            record_id: recordId || '',
+            sys_id: recordId || '',
             assigned_to: recordData?.assigned_to || '',
             assignment_group: recordData?.assignment_group || '',
             priority: recordData?.priority || '',

diff --git a/webapp/src/models/plugin_api.d.ts b/webapp/src/models/plugin_api.d.ts
@@ -127,7 +127,7 @@ type ConfigData = {
 
 type ShareRecordPayload = {
     record_type: ShareRecordType;
-    record_id: string;
+    sys_id: string;
     short_description: string;
     state?: string;
     priority?: string;