From 56798744e6bddc76742d41868e0476ebb52fafac Mon Sep 17 00:00:00 2001
From: tr1ble <43150561+tr1ble@users.noreply.github.com>
Date: Tue, 7 Jun 2022 14:01:01 +0300
Subject: [PATCH] EPMRPP-77582 || Long organization name fix (#3123)

* EPMRPP-77582 || Long organization name fix

* EPMRPP-77582 || Code review fixes - 1

* EPMRPP-77582 || Code review fixes - 2

Co-authored-by: Artsiom Sadouski <artsiom_sadouski@epam.com>
---
 .../admin/projectsPage/projectsGrid/projectsGridColumns.jsx | 4 +++-
 .../projectsPanelView/projectPanel/projectPanel.jsx         | 6 +++++-
 .../projectsPanelView/projectPanel/projectPanel.scss        | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/src/pages/admin/projectsPage/projectsGrid/projectsGridColumns.jsx b/app/src/pages/admin/projectsPage/projectsGrid/projectsGridColumns.jsx
index 4de8159e29..25996b4c28 100644
--- a/app/src/pages/admin/projectsPage/projectsGrid/projectsGridColumns.jsx
+++ b/app/src/pages/admin/projectsPage/projectsGrid/projectsGridColumns.jsx
@@ -53,7 +53,9 @@ ProjectTypeColumn.defaultProps = {
 };
 
 export const OrganizationColumn = ({ className, value }) => (
-  <div className={cx('projects-col', className)}>{value.organization}</div>
+  <div className={cx('projects-col', className)} title={value.organization}>
+    {value.organization}
+  </div>
 );
 OrganizationColumn.propTypes = {
   className: PropTypes.string.isRequired,
diff --git a/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.jsx b/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.jsx
index e14f948d81..6bd50fae68 100644
--- a/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.jsx
+++ b/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.jsx
@@ -96,12 +96,16 @@ export class ProjectPanel extends Component {
     } = this.props;
     const { value: relativeTime, unit } = getRelativeUnits(new Date(lastRun).getTime());
 
+    const organization = this.getOrganization();
+
     return (
       <div className={cx('container')}>
         <div className={cx('info-block')}>
           <div className={cx('header')}>
             {this.getProjectIcon(entryType)}
-            <span className={cx('header-stretch-item', 'gray-text')}>{this.getOrganization()}</span>
+            <span className={cx('header-stretch-item', 'gray-text')} title={organization}>
+              {organization}
+            </span>
             <span className={cx('header-item')}>
               <ProjectMenu project={this.props.project} />
             </span>
diff --git a/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.scss b/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.scss
index 6cd885e670..8074c9a132 100644
--- a/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.scss
+++ b/app/src/pages/admin/projectsPage/projectsPanelView/projectPanel/projectPanel.scss
@@ -41,6 +41,9 @@
 
 .header-stretch-item {
   flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .hr {