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

…hannels (#41) * [MI-3828] Add feature to show linked channels and search the linked channels * [MI-3828] Fix issue of view not displaying correctly on disconnecting user * [MI-3828] Fix ci * [MI-3828] Remove coverage folder * [MI-3828] Update util classes and refactor some code * [MI-3828] Update style and minor review comments * [MI-3828] Remove extra unit test case and make a common function * [MI-3828] Update breaking ui * [MI-3828] Update snapshot * [MI-3828] Review fixes for Phase 2 UI given by QA (#49) * [MI-3828] Review fixes for Phase 2 UI given by QA * [MI-3828] Fix warning card title
Brightscout · Dec 15, 2023 · ee3ad52 · ee3ad52
1 parent 620e672
commit ee3ad52
Show file tree

Hide file tree

Showing 33 changed files with 576 additions and 2,004 deletions.
diff --git a/server/api.go b/server/api.go
@@ -507,7 +507,7 @@ func (a *API) getLinkedChannels(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
-		searchTerm := strings.ToLower(r.URL.Query().Get(QueryParamSearchTerm))
+		searchTerm := strings.ToLower(strings.TrimSpace(r.URL.Query().Get(QueryParamSearchTerm)))
 		offset, limit := a.p.GetOffsetAndLimit(r.URL.Query())
 		matchCount := 0
 		for _, link := range links {

diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
@@ -30,11 +30,8 @@ const App = ({registry, store}:{registry: PluginRegistry, store: Store<GlobalSta
     const {makeApiRequestWithCompletionStatus, getApiState} = usePluginApi();
 
     useEffect(() => {
-        const linkedChannelsParams: SearchLinkedChannelParams = {page: defaultPage, per_page: defaultPerPage};
-
         makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.getConfig.apiServiceName);
         makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.needsConnect.apiServiceName);
-        makeApiRequestWithCompletionStatus(pluginApiServiceConfigs.getLinkedChannels.apiServiceName, linkedChannelsParams);
     }, []);
 
     const {data: needsConnectData, isLoading} = useMemo(() => getApiState(pluginApiServiceConfigs.needsConnect.apiServiceName), [getApiState]);

diff --git a/webapp/src/components/Icon/Icon.map.tsx b/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>
+    ),
 };
diff --git a/webapp/src/components/Icon/Icon.types.ts b/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;

diff --git a/webapp/src/components/LinkedChannelCard/LinkedChannelCard.component.tsx b/webapp/src/components/LinkedChannelCard/LinkedChannelCard.component.tsx
@@ -1,30 +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) => (
-    <div className='msteams-sync-utils'>
+export const LinkedChannelCard = ({msTeamsChannelName, msTeamsTeamName, mattermostChannelName, mattermostTeamName, mattermostChannelType}: LinkedChannelCardProps) => {
+    const getData = (channelName: string, teamName: string) => {
+        return (
+            <>
+                <Tooltip
+                    placement='left'
+                    text={channelName}
+                >
+                    <h5 className='my-0 msteams-linked-channel__entity-label'>{channelName}</h5>
+                </Tooltip>
+                <Tooltip
+                    placement='left'
+                    text={teamName}
+                >
+                    <h5 className='my-0 opacity-6 msteams-linked-channel__entity-label'>{teamName}</h5>
+                </Tooltip>
+            </>
+        );
+    };
+
+    return (
         <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'}/>
+                    {getData(mattermostChannelName, mattermostTeamName)}
                 </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>
+                    {getData(msTeamsChannelName, msTeamsTeamName)}
                 </div>
             </div>
         </div>
-    </div>
-);
+    );
+};
diff --git a/webapp/src/components/LinkedChannelCard/LinkedChannelCard.styles.scss b/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: normal;
+    }  
   }
 }
diff --git a/webapp/src/components/LinkedChannelCard/LinkedChannelCard.test.tsx b/webapp/src/components/LinkedChannelCard/LinkedChannelCard.test.tsx
@@ -11,6 +11,7 @@ const linkedChannelCardProps: LinkedChannelCardProps = {
     mattermostTeamName: 'mockMattermostTeamName',
     msTeamsChannelName: 'mockMSTeamsChannelName',
     msTeamsTeamName: 'mockMSTeamsTeamName',
+    mattermostChannelType: 'mattermostChannelType',
 };
 
 let tree: RenderResult;

diff --git a/webapp/src/components/LinkedChannelCard/LinkedChannelCard.types.ts b/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
 }