From 2f0c9947ce90140e0f6eabe8805c81bc32be6333 Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 17 Sep 2024 14:27:30 -0700
Subject: [PATCH] fix(dashboard): Invalid owner's name displayed after updates
 (#30272)

---
 .../src/components/FacePile/index.tsx           |  9 ++++++---
 .../components/PropertiesModal/index.tsx        | 17 ++++++-----------
 superset-frontend/src/types/Owner.ts            |  5 +++--
 .../src/utils/getOwnerName.test.ts              |  2 ++
 superset-frontend/src/utils/getOwnerName.ts     |  2 +-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/components/FacePile/index.tsx b/superset-frontend/src/components/FacePile/index.tsx
index d67d9d8d36897..b5586304d3649 100644
--- a/superset-frontend/src/components/FacePile/index.tsx
+++ b/superset-frontend/src/components/FacePile/index.tsx
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import type Owner from 'src/types/Owner';
 import {
   getCategoricalSchemeRegistry,
   styled,
@@ -23,12 +24,13 @@ import {
   FeatureFlag,
   SupersetTheme,
 } from '@superset-ui/core';
+import getOwnerName from 'src/utils/getOwnerName';
 import { Tooltip } from 'src/components/Tooltip';
 import { Avatar } from 'src/components';
 import { getRandomColor } from './utils';
 
 interface FacePileProps {
-  users: { first_name: string; last_name: string; id: number }[];
+  users: Owner[];
   maxCount?: number;
 }
 
@@ -57,8 +59,9 @@ const StyledGroup = styled(Avatar.Group)`
 export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
   return (
     <StyledGroup maxCount={maxCount}>
-      {users.map(({ first_name, last_name, id }) => {
-        const name = `${first_name} ${last_name}`;
+      {users.map(user => {
+        const { first_name, last_name, id } = user;
+        const name = getOwnerName(user);
         const uniqueKey = `${id}-${first_name}-${last_name}`;
         const color = getRandomColor(uniqueKey, colorList);
         const avatarUrl = isFeatureEnabled(FeatureFlag.SlackEnableAvatars)
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 8fef96509761a..0bfa1706d577a 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -45,6 +45,8 @@ import TagType from 'src/types/TagType';
 import { fetchTags, OBJECT_TYPES } from 'src/features/tags/tags';
 import { loadTags } from 'src/components/Tags/utils';
 import { applyColors, getColorNamespace } from 'src/utils/colorScheme';
+import getOwnerName from 'src/utils/getOwnerName';
+import Owner from 'src/types/Owner';
 
 const StyledFormItem = styled(FormItem)`
   margin-bottom: 0;
@@ -250,17 +252,10 @@ const PropertiesModal = ({
   };
 
   const handleOwnersSelectValue = () => {
-    const parsedOwners = (owners || []).map(
-      (owner: {
-        id: number;
-        first_name?: string;
-        last_name?: string;
-        full_name?: string;
-      }) => ({
-        value: owner.id,
-        label: owner.full_name || `${owner.first_name} ${owner.last_name}`,
-      }),
-    );
+    const parsedOwners = (owners || []).map((owner: Owner) => ({
+      value: owner.id,
+      label: getOwnerName(owner),
+    }));
     return parsedOwners;
   };
 
diff --git a/superset-frontend/src/types/Owner.ts b/superset-frontend/src/types/Owner.ts
index 91e9d29c9bf94..b8c0f4962cba8 100644
--- a/superset-frontend/src/types/Owner.ts
+++ b/superset-frontend/src/types/Owner.ts
@@ -22,7 +22,8 @@
  */
 
 export default interface Owner {
-  first_name: string;
+  first_name?: string;
   id: number;
-  last_name: string;
+  last_name?: string;
+  full_name?: string;
 }
diff --git a/superset-frontend/src/utils/getOwnerName.test.ts b/superset-frontend/src/utils/getOwnerName.test.ts
index a4a25e57b24ed..27ec7e99b9446 100644
--- a/superset-frontend/src/utils/getOwnerName.test.ts
+++ b/superset-frontend/src/utils/getOwnerName.test.ts
@@ -22,6 +22,8 @@ test('render owner name correctly', () => {
   expect(getOwnerName({ id: 1, first_name: 'Foo', last_name: 'Bar' })).toEqual(
     'Foo Bar',
   );
+
+  expect(getOwnerName({ id: 2, full_name: 'John Doe' })).toEqual('John Doe');
 });
 
 test('return empty string for undefined owner', () => {
diff --git a/superset-frontend/src/utils/getOwnerName.ts b/superset-frontend/src/utils/getOwnerName.ts
index 2534c45f2cbb1..42c1519c8671b 100644
--- a/superset-frontend/src/utils/getOwnerName.ts
+++ b/superset-frontend/src/utils/getOwnerName.ts
@@ -22,5 +22,5 @@ export default function getOwnerName(owner?: Owner): string {
   if (!owner) {
     return '';
   }
-  return `${owner.first_name} ${owner.last_name}`;
+  return owner.full_name || `${owner.first_name} ${owner.last_name}`;
 }