fix: display issues with Project selector (#138)

* fix: proper React keys and tooltips for projects list * fix: wrap long project names in project header * fix: wrap long names in project list
flyteorg · Jan 12, 2021 · 7d89638 · 7d89638
1 parent dc2fa8d
commit 7d89638
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/src/components/Navigation/ProjectSelector.tsx b/src/components/Navigation/ProjectSelector.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { KeyCodes } from 'common/constants';
 import { useCommonStyles } from 'components/common/styles';
-import { listhoverColor, mutedPrimaryTextColor } from 'components/Theme';
+import { listhoverColor } from 'components/Theme';
 import { SearchableProjectList } from './SearchableProjectList';
 
 const expanderGridHeight = 12;
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({
         flex: '0 0 auto'
     },
     header: {
-        flex: '1 0 auto',
+        flex: '1 0 0',
         textAlign: 'left'
     },
     listContainer: {
@@ -83,7 +83,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
             >
                 <header className={styles.header}>
                     <div className={commonStyles.microHeader}>PROJECT</div>
-                    <div className={commonStyles.mutedHeader}>
+                    <div className={classnames(commonStyles.mutedHeader, commonStyles.textWrapped)}>
                         {selectedProject.name}
                     </div>
                 </header>

diff --git a/src/components/Navigation/SearchableProjectList.tsx b/src/components/Navigation/SearchableProjectList.tsx
@@ -1,7 +1,9 @@
-import { ButtonBase, Typography } from '@material-ui/core';
+import * as classnames from 'classnames';
+import { Fade, Tooltip, Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { SearchableList, SearchResult } from 'components/common/SearchableList';
 import { useCommonStyles } from 'components/common/styles';
+import { defaultProjectDescription } from 'components/SelectProject/constants';
 import { Project } from 'models';
 import * as React from 'react';
 
@@ -11,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) => ({
         width: '100%'
     },
     itemName: {
-        flex: '1 0 auto',
+        flex: '1 0 0',
         fontWeight: 'bold'
     },
     noResults: {
@@ -66,14 +68,33 @@ const SearchResults: React.FC<SearchResultsProps> = ({
         <NoResults />
     ) : (
         <ul className={commonStyles.listUnstyled}>
-            {results.map(({ key, content, value }) => (
-                <div
-                    className={styles.searchResult}
-                    key={key}
-                    onClick={onProjectSelected.bind(null, value)}
+            {results.map(({ content, value }) => (
+                <Tooltip
+                    TransitionComponent={Fade}
+                    key={value.id}
+                    placement="bottom-end"
+                    enterDelay={500}
+                    title={
+                        <Typography variant="body1">
+                            <div className={commonStyles.textMonospace}>
+                                {value.id}
+                            </div>
+                            <div>
+                                <em>
+                                    {value.description ||
+                                        defaultProjectDescription}
+                                </em>
+                            </div>
+                        </Typography>
+                    }
                 >
-                    <div className={styles.itemName}>{content}</div>
-                </div>
+                    <div
+                        className={styles.searchResult}
+                        onClick={onProjectSelected.bind(null, value)}
+                    >
+                        <div className={classnames(styles.itemName, commonStyles.textWrapped)}>{content}</div>
+                    </div>
+                </Tooltip>
             ))}
         </ul>
     );