use presentation api

Signed-off-by: Navya Govind <ngovind@bol.com>

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -41,6 +41,7 @@ import GroupIcon from '@material-ui/icons/Group';
 import { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';
 import { useFetchEntities } from './useFetchEntities';
 import { withStyles } from '@material-ui/core/styles';
+import { useEntityPresentation } from '../../apis';
 
 /** @public */
 export type CatalogReactEntityOwnerPickerClassKey = 'input';
@@ -79,6 +80,42 @@ export type EntityOwnerPickerProps = {
   mode?: 'owners-only' | 'all';
 };
 
+function WrappedOption(props: { entity: Entity; isSelected: boolean }) {
+  const classes = useStyles();
+  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';
+  const { primaryTitle } = useEntityPresentation(props.entity);
+  return (
+    <Box className={classes.fullWidth}>
+      <FixedWidthFormControlLabel
+        className={classes.fullWidth}
+        control={
+          <Checkbox
+            icon={icon}
+            checkedIcon={checkedIcon}
+            checked={props.isSelected}
+          />
+        }
+        onClick={event => event.preventDefault()}
+        label={
+          <Tooltip title={primaryTitle}>
+            <Box display="flex" alignItems="center">
+              {isGroup ? (
+                <GroupIcon fontSize="small" />
+              ) : (
+                <PersonIcon fontSize="small" />
+              )}
+              &nbsp;
+              <Box className={classes.boxLabel}>
+                <Typography noWrap>{primaryTitle}</Typography>
+              </Box>
+            </Box>
+          </Tooltip>
+        }
+      />
+    </Box>
+  );
+}
+
 /** @public */
 export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
   const classes = useStyles();
@@ -176,41 +213,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
           }}
           filterOptions={x => x}
           renderOption={(entity, { selected }) => {
-            const isGroup = entity.kind.toLocaleLowerCase('en-US') === 'group';
-            const humanizedName = humanizeEntity(
-              entity,
-              humanizeEntityRef(entity, { defaultKind: entity.kind }),
-            );
-            return (
-              <Box className={classes.fullWidth}>
-                <FixedWidthFormControlLabel
-                  className={classes.fullWidth}
-                  control={
-                    <Checkbox
-                      icon={icon}
-                      checkedIcon={checkedIcon}
-                      checked={selected}
-                    />
-                  }
-                  onClick={event => event.preventDefault()}
-                  label={
-                    <Tooltip title={humanizedName}>
-                      <Box display="flex" alignItems="center">
-                        {isGroup ? (
-                          <GroupIcon fontSize="small" />
-                        ) : (
-                          <PersonIcon fontSize="small" />
-                        )}
-                        &nbsp;
-                        <Box className={classes.boxLabel}>
-                          <Typography noWrap>{humanizedName}</Typography>
-                        </Box>
-                      </Box>
-                    </Tooltip>
-                  }
-                />
-              </Box>
-            );
+            return <WrappedOption entity={entity} isSelected={selected} />;
           }}
           size="small"
           popupIcon={<ExpandMoreIcon data-testid="owner-picker-expand" />}