[MI-3828] Add feature to show linked channels and search the linked channels

webapp/src/App.tsx

@@ -22,11 +22,8 @@ const App = (): JSX.Element => {
     const {makeApiRequestWithCompletionStatus, getApiState} = usePluginApi();
 
     useEffect(() => {
-        const linkedChannelsParams: SearchLinkedChannelParams = {page: defaultPage, per_page: defaultPerPage};
-
         makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.whitelistUser.apiServiceName);
         makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.needsConnect.apiServiceName);
-        makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.getLinkedChannels.apiServiceName, linkedChannelsParams);
     }, []);
 
     const {data: needsConnectData, isLoading} = getApiState(pluginApiServiceConfigs.needsConnect.apiServiceName);

webapp/src/components/Icon/Icon.map.tsx

@@ -447,4 +447,19 @@ export const IconMap : Record<IconName, JSX.Element> = {
             />
         </svg>
     ),
+    lock: (
+        <svg
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M16.5 17.9938V11.2438H7.5V17.9938H16.5ZM16.5 9.7498C16.92 9.7498 17.274 9.8938 17.562 10.1818C17.85 10.4698 17.994 10.8238 17.994 11.2438V17.9938C17.994 18.4138 17.844 18.7678 17.544 19.0558C17.256 19.3558 16.908 19.5058 16.5 19.5058H7.5C7.092 19.5058 6.738 19.3558 6.438 19.0558C6.15 18.7678 6.006 18.4138 6.006 17.9938V11.2438C6.006 10.8238 6.15 10.4698 6.438 10.1818C6.738 9.8938 7.092 9.7498 7.5 9.7498H8.256V8.2558C8.256 7.5598 8.418 6.9298 8.742 6.3658C9.078 5.7898 9.528 5.3338 10.092 4.9978C10.668 4.6618 11.304 4.4938 12 4.4938C12.696 4.4938 13.326 4.6618 13.89 4.9978C14.466 5.3338 14.916 5.7898 15.24 6.3658C15.576 6.9298 15.744 7.5598 15.744 8.2558V9.7498H16.5ZM12 6.0058C11.58 6.0058 11.196 6.1078 10.848 6.3118C10.512 6.5038 10.242 6.7738 10.038 7.1218C9.846 7.4578 9.75 7.8358 9.75 8.2558V9.7498H14.25V8.2558C14.25 7.8358 14.148 7.4578 13.944 7.1218C13.752 6.7738 13.482 6.5038 13.134 6.3118C12.798 6.1078 12.42 6.0058 12 6.0058Z'
+                fill='#3F4350'
+                fillOpacity='0.56'
+            />
+        </svg>
+    ),
 };

webapp/src/components/Icon/Icon.types.ts

@@ -1,4 +1,4 @@
-export type IconName = 'user' | 'message' | 'connectAccount' | 'warning' | 'close' | 'globe' | 'msTeams' | 'link' | 'noChannels' | 'tick'
+export type IconName = 'user' | 'message' | 'connectAccount' | 'warning' | 'close' | 'globe' | 'msTeams' | 'link' | 'noChannels' | 'tick' | 'lock'
 
 export type IconProps = {
     iconName: IconName;

webapp/src/components/LinkedChannelCard/LinkedChannelCard.component.tsx

@@ -1,27 +1,50 @@
 import React from 'react';
 
+import {Tooltip} from '@brightscout/mattermost-ui-library';
+
+import {General as MMConstants} from 'mattermost-redux/constants';
+
 import {Icon} from 'components/Icon';
 
 import {LinkedChannelCardProps} from './LinkedChannelCard.types';
 
 import './LinkedChannelCard.styles.scss';
 
-export const LinkedChannelCard = ({msTeamsChannelName, msTeamsTeamName, mattermostChannelName, mattermostTeamName}: LinkedChannelCardProps) => (
+export const LinkedChannelCard = ({msTeamsChannelName, msTeamsTeamName, mattermostChannelName, mattermostTeamName, mattermostChannelType}: LinkedChannelCardProps) => (
     <div className='px-16 py-12 border-t-1 d-flex gap-4 msteams-linked-channel'>
         <div className='msteams-linked-channel__link-icon d-flex align-items-center flex-column justify-center'>
             <Icon iconName='link'/>
         </div>
-        <div className='d-flex flex-column gap-6'>
+        <div className='d-flex flex-column gap-6 msteams-linked-channel__body'>
             <div className='d-flex gap-8 align-items-center'>
-                {/* TODO: Update icon on basis of channel type  */}
-                <Icon iconName='globe'/>
-                <h5 className='my-0'>{mattermostChannelName}</h5>
-                <h5 className='my-0 opacity-6'>{mattermostTeamName}</h5>
+                <Icon iconName={mattermostChannelType === MMConstants.PRIVATE_CHANNEL ? 'lock' : 'globe'}/>
+                <Tooltip
+                    placement='left'
+                    text={mattermostChannelName}
+                >
+                    <h5 className='my-0 msteams-linked-channel__entity-label'>{mattermostChannelName}</h5>
+                </Tooltip>
+                <Tooltip
+                    placement='left'
+                    text={mattermostTeamName}
+                >
+                    <h5 className='my-0 opacity-6 msteams-linked-channel__entity-label'>{mattermostTeamName}</h5>
+                </Tooltip>
             </div>
             <div className='d-flex gap-8 align-items-center'>
                 <Icon iconName='msTeams'/>
-                <h5 className='my-0'>{msTeamsChannelName}</h5>
-                <h5 className='my-0 opacity-6'>{msTeamsTeamName}</h5>
+                <Tooltip
+                    placement='left'
+                    text={msTeamsChannelName}
+                >
+                    <h5 className='my-0 msteams-linked-channel__entity-label'>{msTeamsChannelName}</h5>
+                </Tooltip>
+                <Tooltip
+                    placement='left'
+                    text={msTeamsTeamName}
+                >
+                    <h5 className='my-0 opacity-6 msteams-linked-channel__entity-label'>{msTeamsTeamName}</h5>
+                </Tooltip>
             </div>
         </div>
     </div>

webapp/src/components/LinkedChannelCard/LinkedChannelCard.styles.scss

@@ -26,5 +26,17 @@
         width: 10px;
       }
     }
+
+    &__body {
+      width: 95%;
+    }
+
+    &__entity-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 45%;
+      line-height: inherit;
+    }  
   }
 }

webapp/src/components/LinkedChannelCard/LinkedChannelCard.types.ts

@@ -1,3 +1,3 @@
-export type LinkedChannelCardProps = Pick<ChannelLinkData, 'mattermostChannelName' | 'msTeamsChannelName' | 'msTeamsTeamName' | 'mattermostTeamName'> & {
+export type LinkedChannelCardProps = Pick<ChannelLinkData, 'mattermostChannelName' | 'msTeamsChannelName' | 'msTeamsTeamName' | 'mattermostTeamName' | 'mattermostChannelType'> & {
     channelId: string
 }

webapp/src/components/enforceConnectedAccountModal.tsx

@@ -22,10 +22,6 @@ export default function EnforceConnectedAccountModal() {
         makeApiRequestWithCompletionStatus(Constants.pluginApiServiceConfigs.connect.apiServiceName);
     }, []);
 
-    useEffect(() => {
-        makeApiRequestWithCompletionStatus(Constants.pluginApiServiceConfigs.needsConnect.apiServiceName);
-    }, []);
-
     const {data: needsConnectData} = getApiState(Constants.pluginApiServiceConfigs.needsConnect.apiServiceName);
     const {data: connectData} = getApiState(Constants.pluginApiServiceConfigs.connect.apiServiceName);
 

webapp/src/constants/common.constants.ts

@@ -8,6 +8,8 @@ export const defaultPage = 0;
 
 export const defaultPerPage = 20;
 
+export const debounceFunctionTimeLimit = 500;
+
 // Severity used in alert component
 export const alertSeverity: Record<SnackbarColor, SnackbarColor> = {
     success: 'success',