From 43c0613fb725d1a67a60f01d3bc22879d2574bea Mon Sep 17 00:00:00 2001
From: Adam <ascratcherd@gmail.com>
Date: Fri, 9 Oct 2020 06:25:00 +0100
Subject: [PATCH] Fix/new ui is distorted due to long organization name #735
 (#1014)

* Fix for long org names on side menu.

Now ellipsizes with tooltip if Orgname is over the value set in ellipsize prop. Otherwise functions as before.

* added ellipsize prop to index. Fixes #735

20 seems to be a good value that stop org names running onto next line. Tested on Firefox and chrome. Linux debian stretch.

Co-authored-by: root <root@rutabaga.groudon>
---
 app/client/src/components/ads/MenuItem.tsx  | 22 ++++++++++++++++++++-
 app/client/src/pages/Applications/index.tsx |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/ads/MenuItem.tsx b/app/client/src/components/ads/MenuItem.tsx
index 08f763eec5..08546b0878 100644
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@@ -3,12 +3,15 @@ import { CommonComponentProps, Classes } from "./common";
 import styled from "styled-components";
 import Icon, { IconName, IconSize } from "./Icon";
 import Text, { TextType, FontWeight } from "./Text";
+import TooltipComponent from "components/ads/Tooltip";
+import { Position } from '@blueprintjs/core/lib/esm/common/position';
 
 export type MenuItemProps = CommonComponentProps & {
   icon?: IconName;
   text: string;
   label?: ReactNode;
   href?: string;
+  ellipsize?: number;
   onSelect?: () => void;
 };
 
@@ -64,6 +67,19 @@ const IconContainer = styled.span`
 `;
 
 function MenuItem(props: MenuItemProps) {
+  return (
+    props.ellipsize && props.text.length > props.ellipsize ? (
+      <TooltipComponent
+        position={Position.BOTTOM}
+        content={props.text}
+      >
+        <MenuItemContent {...props} />
+      </ TooltipComponent>
+    ) : <MenuItemContent {...props} />
+  )
+}
+
+function MenuItemContent(props: MenuItemProps) {
   return (
     <ItemRow
       href={props.href}
@@ -75,7 +91,7 @@ function MenuItem(props: MenuItemProps) {
         {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
         {props.text ? (
           <Text type={TextType.H5} weight={FontWeight.NORMAL}>
-            {props.text}
+            {props.ellipsize ? ellipsize(props.ellipsize, props.text) : props.text}
           </Text>
         ) : null}
       </IconContainer>
@@ -84,4 +100,8 @@ function MenuItem(props: MenuItemProps) {
   );
 }
 
+function ellipsize(length: number, text: string) {
+  return text.length > length ? text.slice(0, length).concat(" ...") : text
+};
+
 export default MenuItem;
diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx
index 5bb591aabd..46005599df 100644
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@@ -246,6 +246,7 @@ function LeftPane() {
                 key={org.organization.name}
                 href={`${window.location.pathname}#${org.organization.name}`}
                 text={org.organization.name}
+                ellipsize={20}
               />
             ))}
         </WorkpsacesNavigator>