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

@@ -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;

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>