ENG-3859 feat(portal): better navigation between list details list identity and tag claim

[Vitalsine85]

Affected Packages

Apps

• portal

Packages

• 1ui
• api
• protocol
• sdk

Tools

• tools

Overview

This adds navigation elements to detail pages which link to any associated lists. This might change a bit after we make some modifications to lists, but in the meantime, this'll do.

Screen Captures

If applicable, add screenshots or screen captures of your changes.

Declaration

• I hereby declare that I have abided by the rules and regulations as outlined in the CONTRIBUTING.md

PR Summary by Typo

Summary
This pull request introduces a new DetailInfoCard component and updates imports in various files. It replaces InfoCard with DetailInfoCard in some components and adds new properties and imports.

Key Points

1. New DetailInfoCard component added in apps/portal/app/components/detail-info-card.tsx
2. Replaces InfoCard with DetailInfoCard in ClaimDetails and imports new dependencies
3. Updates IdentityLoaderData interface and useLiveLoader hook to load DetailInfoCard and new list property.

To turn off PR summary, please visit Notification settings.

[linear]

ENG-3859 Navigation between List Details, List Identity and Tag Claim

Description:

This is in reference to the ticket created by MK. PRO-27 This ticket is only to solve the navigation between the pages.

Attachments:

Problem Screenshots

Screenshot 2024-09-03 at 2.34.01 PM.png

Screenshot 2024-09-03 at 2.34.13 PM.png

Screenshot 2024-09-03 at 2.34.50 PM.png

Solution: Meta Data in Tag Claims and List Identity have a link to the List Details page.

Navigation between List Details, List Identity and Tag Claim - Features (Figma)

---

// Test Lead Notes //

[jonathanprozzi]

if we want to start moving away from using let we could try something like this --

const list = await ClaimsService.searchClaims({
  predicate: getSpecialPredicate(CURRENT_ENV).tagPredicate.id,
  object: identity.id,
})
  .then(listResult => listResult?.data[0] ?? null)
  .catch(error => {
    logger('Failed to fetch list:', error);
    return null;
  });

what do you think? i know we're mixing these patterns in our loaders so likely a bigger question but wondering what you think.

not blocking just a question

[Vitalsine85]

Either way works for me, I don't really have a preference. We should just have a quick chat and land on one or the other.

[jonathanprozzi]

Looks good -- small question for us to consider
Also I think this should be a feat instead of a chore because it does add logic / reworks a component in 2 routes