AdvancedTable - @model ember-data support

[zamoore]

📌 Summary

If merged, this PR allows for the usage of ember-data model instances as model data in the Advanced Table component.

🛠️ Detailed description

We use duck typing to avoid bringing in ember-data as a direct dependency.

export const isEmberDataModel = (
  item: HdsAdvancedTableModelItem
): item is import('@ember-data/model').default => {
  return (
    'constructor' in item &&
    typeof item.constructor === 'function' &&
    'modelName' in item.constructor &&
    typeof item.constructor.modelName === 'string' &&
    'serialize' in item &&
    typeof item.serialize === 'function'
  );
};

If the data is an ember-data model, we can extract its attributes during serialization into an HdsAdvancedTableTableModel.

if (isEmberDataModel(row)) {
  const attrs: Record<string, unknown> = {};
  const modelClass = row.constructor as typeof Model;

  modelClass.eachAttribute((key: string) => {
    attrs[key] = (row as Model).get(key);
  });

  attrs['id'] = row.id;

  rowData = attrs;
}

🔗 External links

Jira ticket: HDS-4749

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Apr 2, 2025 7:14pm
hds-website	✅ Ready (Inspect)	Visit Preview	Apr 2, 2025 7:14pm

[github-actions]

📦 RC Packages Published

Latest commit: 9ac0b12

Published 1 packages

@hashicorp/design-system-components@4.19.0-rc-20250402205606

yarn up -C @hashicorp/design-system-components@rc

[zamoore]

Not implementing this for now as we have varied ember-data support across all of our downstream apps. Consumers will need to convert ember-data records to plain js objects.