From 02f5084f01f698e0a27754ef7c26116ae488f31d Mon Sep 17 00:00:00 2001 From: raghavaggarwal2308 Date: Wed, 17 Jul 2024 15:00:51 +0530 Subject: [PATCH 1/3] [GH-461] Handle case of very long title and label in RHS --- .../components/sidebar_right/gitlab_items.tsx | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/sidebar_right/gitlab_items.tsx b/webapp/src/components/sidebar_right/gitlab_items.tsx index 8ec6d7f1..c39f1fa4 100644 --- a/webapp/src/components/sidebar_right/gitlab_items.tsx +++ b/webapp/src/components/sidebar_right/gitlab_items.tsx @@ -26,6 +26,8 @@ export const notificationReasons: Record = { const SUCCESS = 'success'; const PENDING = 'pending'; const ACTION_NAME_MEMBER_ACCESS_REQUESTED = 'member_access_requested'; +const MAX_TITLE_LENGTH = 100; +const MAX_LABEL_LENGTH = 20; function GitlabItems({item, theme}: GitlabItemsProps) { const style = getStyle(theme); @@ -50,8 +52,8 @@ function GitlabItems({item, theme}: GitlabItemsProps) { ); } - const titleText = item.title || item.target?.title || item.body || ''; - + let titleText = item.title || item.target?.title || item.body || ''; + titleText = titleText.length > MAX_TITLE_LENGTH ? `${titleText.substring(0, MAX_TITLE_LENGTH)}...` : titleText; let title: React.ReactNode = titleText; if (item.web_url || item.target_url) { title = ( @@ -258,28 +260,39 @@ const getStyle = makeStyleFromTheme((theme) => { const getGitlabLabels = (labels: Label[]) => { return labels.map((label) => { return ( - + {label.name} + + } > - {label.name} - + + {label.name.length > MAX_LABEL_LENGTH ? `${label.name.substring(0, MAX_LABEL_LENGTH)}...` : label.name} + + ); }); }; -const itemStyle: CSS.Properties = { +const labelStyle: CSS.Properties = { margin: '4px 5px 0 0', padding: '3px 8px', display: 'inline-flex', borderRadius: '3px', position: 'relative', + justifyContent: 'flex-start', }; export default GitlabItems; From 69c6e945ce2842311c135daaea27f74c2139bc6a Mon Sep 17 00:00:00 2001 From: raghavaggarwal2308 Date: Fri, 9 Aug 2024 16:12:07 +0530 Subject: [PATCH 2/3] [MM-672] Review fix --- webapp/src/components/sidebar_right/gitlab_items.tsx | 9 ++++++++- webapp/src/selectors/index.js | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/sidebar_right/gitlab_items.tsx b/webapp/src/components/sidebar_right/gitlab_items.tsx index c39f1fa4..da354c4f 100644 --- a/webapp/src/components/sidebar_right/gitlab_items.tsx +++ b/webapp/src/components/sidebar_right/gitlab_items.tsx @@ -10,6 +10,8 @@ import TickIcon from 'src/images/icons/tick'; import SignIcon from 'src/images/icons/sign'; import {formatTimeSince} from 'src/utils/date_utils'; import {GitlabItemsProps, Label} from 'src/types/gitlab_items'; +import {useSelector} from 'react-redux'; +import {getSidebarExpanded} from 'src/selectors'; export const notificationReasons: Record = { assigned: 'You were assigned to the issue/merge request.', @@ -52,8 +54,13 @@ function GitlabItems({item, theme}: GitlabItemsProps) { ); } + const isSidebarExpanded = useSelector(getSidebarExpanded); + let titleText = item.title || item.target?.title || item.body || ''; - titleText = titleText.length > MAX_TITLE_LENGTH ? `${titleText.substring(0, MAX_TITLE_LENGTH)}...` : titleText; + if (!isSidebarExpanded){ + titleText = titleText.length > MAX_TITLE_LENGTH ? `${titleText.substring(0, MAX_TITLE_LENGTH)}...` : titleText; + } + let title: React.ReactNode = titleText; if (item.web_url || item.target_url) { title = ( diff --git a/webapp/src/selectors/index.js b/webapp/src/selectors/index.js index 39d0593b..d3a04029 100644 --- a/webapp/src/selectors/index.js +++ b/webapp/src/selectors/index.js @@ -62,3 +62,5 @@ export const getSidebarData = createSelector( export const getConnected = (state) => state[`plugins-${manifest.id}`].connected; export const getConnectedGitlabUrl = (state) => state[`plugins-${manifest.id}`].gitlabURL; + +export const getSidebarExpanded = (state) => state.views.rhs.isSidebarExpanded; From 5929cb015ff03cd729d14e44024c650f78e24ca1 Mon Sep 17 00:00:00 2001 From: raghavaggarwal2308 Date: Fri, 9 Aug 2024 16:25:05 +0530 Subject: [PATCH 3/3] [MM-672] Fix lint error --- webapp/src/components/sidebar_right/gitlab_items.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/sidebar_right/gitlab_items.tsx b/webapp/src/components/sidebar_right/gitlab_items.tsx index da354c4f..25ef05e2 100644 --- a/webapp/src/components/sidebar_right/gitlab_items.tsx +++ b/webapp/src/components/sidebar_right/gitlab_items.tsx @@ -4,13 +4,14 @@ import {makeStyleFromTheme, changeOpacity} from 'mattermost-redux/utils/theme_ut import {Badge, Tooltip, OverlayTrigger} from 'react-bootstrap'; import * as CSS from 'csstype'; +import {useSelector} from 'react-redux'; + import CrossIcon from 'src/images/icons/cross'; import DotIcon from 'src/images/icons/dot'; import TickIcon from 'src/images/icons/tick'; import SignIcon from 'src/images/icons/sign'; import {formatTimeSince} from 'src/utils/date_utils'; import {GitlabItemsProps, Label} from 'src/types/gitlab_items'; -import {useSelector} from 'react-redux'; import {getSidebarExpanded} from 'src/selectors'; export const notificationReasons: Record = { @@ -57,7 +58,7 @@ function GitlabItems({item, theme}: GitlabItemsProps) { const isSidebarExpanded = useSelector(getSidebarExpanded); let titleText = item.title || item.target?.title || item.body || ''; - if (!isSidebarExpanded){ + if (!isSidebarExpanded) { titleText = titleText.length > MAX_TITLE_LENGTH ? `${titleText.substring(0, MAX_TITLE_LENGTH)}...` : titleText; }