Issue #3362829 by Ryo Yamashita, yas: Fix an issue where the OpenStack key...

Issue #3362829 by Ryo Yamashita, yas: Fix an issue where the OpenStack key pair name was displayed as 'undefined' in the SPA

modules/cloud_dashboard/cloud_dashboard/src/organisms/PageTitle.tsx

@@ -4,6 +4,18 @@ import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { capitalize, cspToLabel, entityNameToLabel } from 'service/string';
 
+const getEntityDataNameLabel = (entityData: EntityData | undefined): string => {
+  // If the entity data is not set, return an empty string.
+  // If the entity data is set but the attributes are not set, return an empty string.
+  if (!entityData || !entityData.attributes) {
+    return '';
+  }
+
+  // If the entity data is set and the attributes are set, return the name.
+  // Note: The entity name's key is 'name' or 'key_pair_name'.
+  return entityData.attributes['name'] || entityData.attributes['key_pair_name'] || '';
+}
+
 const PageTitle = ({ action, designLabel, bundleId }: {
   action?: string
   designLabel?: string
@@ -74,9 +86,7 @@ const PageTitle = ({ action, designLabel, bundleId }: {
   /**
    * Get Entity Data Name.
    */
-  const entityDataNameLabel = entityData !== undefined
-    ? 'name' in entityData.attributes
-    ? entityData.attributes['name'] : undefined : undefined;
+  const entityDataNameLabel = getEntityDataNameLabel(entityData);
 
   /**
    * Get Action Type.