[MI-3835] Add logic to hide/show RHS on the basis of system console setting

webapp/src/App.tsx

@@ -1,23 +1,34 @@
 import React, {useEffect} from 'react';
+import {Action, Store} from 'redux';
 import {useDispatch} from 'react-redux';
 
-import usePluginApi from 'hooks/usePluginApi';
+// eslint-disable-next-line import/no-unresolved
+import {PluginRegistry} from 'types/mattermost-webapp';
+
+import {GlobalState} from 'mattermost-redux/types/store';
+
+import {RhsTitle} from 'components';
 
-//global styles
 import {pluginApiServiceConfigs} from 'constants/apiService.constant';
+import {defaultPage, defaultPerPage, pluginTitle} from 'constants/common.constants';
+import {iconUrl} from 'constants/illustrations.constants';
+
+import {Rhs} from 'containers';
+
 import useApiRequestCompletionState from 'hooks/useApiRequestCompletionState';
+import usePluginApi from 'hooks/usePluginApi';
 
 import {setConnected} from 'reducers/connectedState';
-import {defaultPage, defaultPerPage} from 'constants/common.constants';
 import {setIsRhsLoading} from 'reducers/spinner';
 
+// global styles
 import 'styles/main.scss';
 
 /**
  * This is the main App component for the plugin
  * @returns {JSX.Element}
  */
-const App = (): JSX.Element => {
+const App = ({registry, store}:{registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>}): JSX.Element => {
     const dispatch = useDispatch();
     const {makeApiRequestWithCompletionStatus, getApiState} = usePluginApi();
 
@@ -35,6 +46,8 @@ const App = (): JSX.Element => {
         dispatch(setIsRhsLoading(isLoading));
     }, [isLoading]);
 
+    const {data: whitelistUserData} = getApiState(pluginApiServiceConfigs.whitelistUser.apiServiceName);
+
     useApiRequestCompletionState({
         serviceName: pluginApiServiceConfigs.needsConnect.apiServiceName,
         handleSuccess: () => {
@@ -43,6 +56,26 @@ const App = (): JSX.Element => {
         },
     });
 
+    useApiRequestCompletionState({
+        serviceName: pluginApiServiceConfigs.whitelistUser.apiServiceName,
+        handleSuccess: () => {
+            const {presentInWhitelist} = whitelistUserData as WhitelistUserResponse;
+            if (presentInWhitelist) {
+                const {_, toggleRHSPlugin} = registry.registerRightHandSidebarComponent(Rhs, <RhsTitle/>);
+                registry.registerChannelHeaderButtonAction(
+                    <img
+                        width={24}
+                        height={24}
+                        src={iconUrl}
+                        style={{filter: 'grayscale(1)'}}
+                    />, () => store.dispatch(toggleRHSPlugin), null, pluginTitle);
+                if (registry.registerAppBarComponent) {
+                    registry.registerAppBarComponent(iconUrl, () => store.dispatch(toggleRHSPlugin), pluginTitle);
+                }
+            }
+        },
+    });
+
     return <></>;
 };
 

webapp/src/index.tsx

@@ -9,14 +9,6 @@ import EnforceConnectedAccountModal from 'components/enforceConnectedAccountModa
 import MSTeamsAppManifestSetting from 'components/appManifestSetting';
 import ListConnectedUsers from 'components/getConnectedUsersSetting';
 
-import {RhsTitle} from 'components';
-
-import {Rhs} from 'containers';
-
-import {pluginTitle} from 'constants/common.constants';
-
-import {iconUrl} from 'constants/illustrations.constants';
-
 import {handleConnect, handleDisconnect} from 'websocket';
 
 import manifest from './manifest';
@@ -30,26 +22,18 @@ 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>>>) {
         registry.registerReducer(reducer);
-        registry.registerRootComponent(App);
+        registry.registerRootComponent(() => (
+            <App
+                registry={registry}
+                store={store}
+            />
+        ));
 
         // @see https://developers.mattermost.com/extend/plugins/webapp/reference/
         this.enforceConnectedAccountId = registry.registerRootComponent(EnforceConnectedAccountModal);
 
         registry.registerAdminConsoleCustomSetting('appManifestDownload', MSTeamsAppManifestSetting);
         registry.registerAdminConsoleCustomSetting('ConnectedUsersReportDownload', ListConnectedUsers);
-        const {_, toggleRHSPlugin} = registry.registerRightHandSidebarComponent(Rhs, <RhsTitle/>);
-
-        // TODO: update icons later
-        registry.registerChannelHeaderButtonAction(
-            <img
-                width={24}
-                height={24}
-                src={iconUrl}
-            />, () => store.dispatch(toggleRHSPlugin), null, pluginTitle);
-
-        if (registry.registerAppBarComponent) {
-            registry.registerAppBarComponent(iconUrl, () => store.dispatch(toggleRHSPlugin), pluginTitle);
-        }
 
         registry.registerWebSocketEventHandler(`custom_${manifest.id}_connect`, handleConnect(store));
         registry.registerWebSocketEventHandler(`custom_${manifest.id}_disconnect`, handleDisconnect(store));