[MI-3842]: Review fixes frontend phase 1

webapp/__mocks__/svg.js

@@ -0,0 +1,2 @@
+export default 'SvgrURL';
+export const ReactComponent = 'div';

webapp/jest.config.ts

@@ -43,6 +43,7 @@ const config: Config = {
 
     // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
     moduleNameMapper: {
+        '\\.svg$': '<rootDir>/__mocks__/svg.js',
         '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
         '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
         '^src/(.*)': '<rootDir>/src/$1',

webapp/src/App.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {Action, Store} from 'redux';
 import {useDispatch} from 'react-redux';
 
@@ -28,6 +28,7 @@ import 'styles/main.scss';
 const App = ({registry, store}:{registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>}): JSX.Element => {
     const dispatch = useDispatch();
     const {makeApiRequestWithCompletionStatus, getApiState} = usePluginApi();
+
     useEffect(() => {
         const linkedChannelsParams: SearchLinkedChannelParams = {page: defaultPage, per_page: defaultPerPage};
 
@@ -36,13 +37,13 @@ const App = ({registry, store}:{registry: PluginRegistry, store: Store<GlobalSta
         makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.getLinkedChannels.apiServiceName, linkedChannelsParams);
     }, []);
 
-    const {data: needsConnectData, isLoading} = getApiState(pluginApiServiceConfigs.needsConnect.apiServiceName);
+    const {data: needsConnectData, isLoading} = useMemo(() => getApiState(pluginApiServiceConfigs.needsConnect.apiServiceName), [getApiState]);
 
     useEffect(() => {
         dispatch(setIsRhsLoading(isLoading));
     }, [isLoading]);
 
-    const {data: configData} = getApiState(pluginApiServiceConfigs.getConfig.apiServiceName);
+    const {data: configData} = useMemo(() => getApiState(pluginApiServiceConfigs.getConfig.apiServiceName), [getApiState]);
 
     useApiRequestCompletionState({
         serviceName: pluginApiServiceConfigs.needsConnect.apiServiceName,
@@ -98,4 +99,4 @@ const App = ({registry, store}:{registry: PluginRegistry, store: Store<GlobalSta
     return <></>;
 };
 
-export default App;
+export default App;

webapp/src/components/Dialog/Dialog.component.tsx

@@ -1,35 +1,30 @@
 import React from 'react';
-import {useDispatch} from 'react-redux';
 
 import {Dialog as MMDialog, LinearProgress, DialogProps} from '@brightscout/mattermost-ui-library';
 
-import usePluginApi from 'hooks/usePluginApi';
-import {getDialogState} from 'selectors';
-import {closeDialog} from 'reducers/dialog';
-
-export const Dialog = ({onCloseHandler, onSubmitHandler}: Pick<DialogProps, 'onCloseHandler' | 'onSubmitHandler'>) => {
-    const dispatch = useDispatch();
-    const {state} = usePluginApi();
-    const {show, title, description, destructive, primaryButtonText, secondaryButtonText, isLoading} = getDialogState(state);
-
-    const handleClose = () => dispatch(closeDialog());
-
-    return (
-        <MMDialog
-            description={description}
-            destructive={destructive}
-            show={show}
-            primaryButtonText={primaryButtonText}
-            secondaryButtonText={secondaryButtonText}
-            onCloseHandler={() => {
-                handleClose();
-                onCloseHandler();
-            }}
-            onSubmitHandler={onSubmitHandler}
-            className='disconnect-dialog'
-            title={title}
-        >
-            {isLoading && <LinearProgress/>}
-        </MMDialog>
-    );
-};
+export const Dialog = ({
+    show,
+    title,
+    destructive,
+    primaryButtonText,
+    secondaryButtonText,
+    onSubmitHandler,
+    onCloseHandler,
+    children,
+    isLoading,
+    className,
+}: DialogProps & {isLoading?: boolean, children: React.ReactNode}) => (
+    <MMDialog
+        show={show}
+        destructive={destructive}
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        onCloseHandler={() => onCloseHandler()}
+        onSubmitHandler={onSubmitHandler}
+        className={className}
+        title={title}
+    >
+        {isLoading && <LinearProgress className='absolute w-full left-0 top-62'/>}
+        {children}
+    </MMDialog>
+);

webapp/src/components/Dialog/Dialog.test.tsx

@@ -9,25 +9,29 @@ const onCloseHandler = jest.fn();
 const onSubmitHandler = jest.fn();
 
 const dialogProps = {
+    show: true,
+    destructive: true,
+    primaryButtonText: 'Try Again',
+    secondaryButtonText: 'Cancel',
     onCloseHandler,
     onSubmitHandler,
+    title: 'Unlink Channel',
 };
 
 let tree: RenderResult;
 
 describe('Dialog component', () => {
     beforeEach(() => {
-        tree = render(<Dialog {...dialogProps}/>);
+        tree = render(<Dialog {...dialogProps}>{'Are you sure you want to disconnect your Microsoft Teams Account?'}</Dialog>);
     });
 
     it('Should render correctly', () => {
         expect(tree).toMatchSnapshot();
     });
 
     it('Should close the dialog on clicking close button', () => {
-        expect(tree.getAllByRole('button').length).toEqual(2);
+        userEvent.click(tree.getByText('Cancel'));
 
-        userEvent.click(tree.getAllByRole('button')[1]);
         expect(onCloseHandler).toHaveBeenCalledTimes(1);
     });
 });

webapp/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Dialog component Should render correctly 1`] = `
     />
     <div
       aria-modal="true"
-      class="fade sc-fFSPTT eBIuuG mm-dialog disconnect-dialog modal show"
+      class="fade sc-fFSPTT eBIuuG mm-dialog  modal show"
       role="dialog"
       style="display: block;"
       tabindex="-1"
@@ -32,7 +32,7 @@ exports[`Dialog component Should render correctly 1`] = `
             <h2
               class="sc-dIvrsQ iMFmGO"
             >
-              mockTitle
+              Unlink Channel
             </h2>
             <button
               class="sc-fKgJPI dGklgm"
@@ -41,38 +41,29 @@ exports[`Dialog component Should render correctly 1`] = `
                 class="sc-bdnxRM dOvjAb mm-icon"
                 size="20"
               >
-                <reactcomponent />
+                <div />
               </div>
             </button>
           </div>
           <div
             class="sc-iemWCZ lnrLZX"
           >
-            
-            <div
-              class="sc-bCwfaz fFyvgR"
-            >
-              <div
-                class="mm-linearProgress  linear_loader  progress"
-              >
-                <div
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="progress-bar"
-                  role="progressbar"
-                />
-              </div>
-            </div>
+            Are you sure you want to disconnect your Microsoft Teams Account?
             <div
               class="sc-dlMDgC fWGLyT"
             >
               <button
-                class="sc-kEqXSa cwanGm mm-button "
+                class="sc-kEqXSa cwanGm mm-button destructiveBtnSecondary "
+                width="fit-content"
+              >
+                Cancel
+              </button>
+              <button
+                class="sc-kEqXSa gYXdoQ mm-button destructiveBtnPrimary "
                 width="fit-content"
               >
-                Close
+                Try Again
               </button>
-              
             </div>
           </div>
           <div

webapp/src/components/Snackbar/Snackbar.component.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {useDispatch} from 'react-redux';
 
 import {Button} from '@brightscout/mattermost-ui-library';
@@ -13,13 +13,25 @@ import {alertTimeout} from 'constants/common.constants';
 
 import {SnackbarColor} from './Snackbar.types';
 
+const snackbarColorMap: Record<SnackbarColor, string> = {
+    error: 'bg-error',
+    default: 'bg-default',
+    success: 'bg-success',
+};
+
+const snackbarIconMap: Record<SnackbarColor, IconName> = {
+    error: 'warning',
+    default: 'tick',
+    success: 'tick',
+};
+
 export const Snackbar = () => {
     const dispatch = useDispatch();
     const {state} = usePluginApi();
     const timeId = useRef(0);
     const {isOpen, message, severity} = getSnackbarState(state);
 
-    const handleClose = () => dispatch(closeAlert());
+    const handleClose = useCallback(() => dispatch(closeAlert()), []);
 
     useEffect(() => {
         if (isOpen) {
@@ -34,18 +46,6 @@ export const Snackbar = () => {
         };
     }, [isOpen]);
 
-    const snackbarColorMap: Record<SnackbarColor, string> = {
-        error: 'bg-error',
-        default: 'bg-default',
-        success: 'bg-success',
-    };
-
-    const snackbarIconMap: Record<SnackbarColor, IconName> = {
-        error: 'warning',
-        default: 'tick',
-        success: 'tick',
-    };
-
     return (
         <div className='msteams-sync-utils'>
             <div

webapp/src/components/enforceConnectedAccountModal.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useEffect} from 'react';
+import React, {useCallback, useState, useEffect, useMemo, useRef} from 'react';
 
 import Constants from 'constants/index';
 
@@ -11,7 +11,7 @@ export default function EnforceConnectedAccountModal() {
     const [open, setOpen] = useState(false);
     const [canSkip, setCanSkip] = useState(false);
     const [connecting, setConnecting] = useState(false);
-    const [isInterval, setIsInterval] = useState(false);
+    const isInterval = useRef(false);
     const {makeApiRequestWithCompletionStatus, getApiState} = usePluginApi();
 
     const skip = useCallback(() => {
@@ -26,15 +26,15 @@ export default function EnforceConnectedAccountModal() {
         makeApiRequestWithCompletionStatus(Constants.pluginApiServiceConfigs.needsConnect.apiServiceName);
     }, []);
 
-    const {data: needsConnectData} = getApiState(Constants.pluginApiServiceConfigs.needsConnect.apiServiceName);
-    const {data: connectData} = getApiState(Constants.pluginApiServiceConfigs.connect.apiServiceName);
+    const {data: needsConnectData} = useMemo(() => getApiState(Constants.pluginApiServiceConfigs.needsConnect.apiServiceName), [getApiState]);
+    const {data: connectData} = useMemo(() => getApiState(Constants.pluginApiServiceConfigs.connect.apiServiceName), [getApiState]);
 
     useApiRequestCompletionState({
         serviceName: Constants.pluginApiServiceConfigs.needsConnect.apiServiceName,
         handleSuccess: () => {
             if (needsConnectData) {
                 const data = needsConnectData as NeedsConnectData;
-                if (!isInterval) {
+                if (!isInterval.current) {
                     setOpen(data.needsConnect);
                     setCanSkip(data.canSkip);
                 } else if (!data.needsConnect) {
@@ -62,12 +62,12 @@ export default function EnforceConnectedAccountModal() {
     useEffect(() => {
         let interval: any = 0;
         if (connecting) {
-            setIsInterval(true);
+            isInterval.current = true;
             interval = setInterval(checkConnected, 1000);
         }
         return () => {
             if (interval) {
-                setIsInterval(false);
+                isInterval.current = false;
                 clearInterval(interval);
             }
         };

webapp/src/containers/Rhs/Rhs.container.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {memo, useCallback, useMemo} from 'react';
 
 import {Spinner} from '@brightscout/mattermost-ui-library';
 
@@ -14,7 +14,6 @@ import {ConnectAccount} from './views/ConnectAccount';
 import {LinkedChannels} from './views/LinkedChannels';
 import {ConnectedAccount} from './views/ConnectedAccount';
 
-// TODO: update component later
 export const Rhs = () => {
     const {state, getApiState} = usePluginApi();
     const {connected} = getConnectedState(state);