fix(dashboard): Invalid owner's name displayed after updates (#30272)

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)

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

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

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', () => {

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}`;
 }