upcoming: [UIE-9399] — "Shared with me" Images tab

[dwiley-akamai]

Description 📝

Populate the "Shared with me" Images tab.

Changes 🔄

• Move getRegionListItem() to utilities.ts and have it accept an array of regions also
• Add optional dataPendoId property to docsLink object/property in imageLibraryTabsConfig.tsx‎
• Conditionally render/hide actions in ImageActionMenu.tsx depending on if it is in a SharedImageRow or not
• Mock data to facilitate testing

Scope 🚢

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

TBD

Preview 📷

Before

After (empty state)

After (populated)

How to test 🧪

Prerequisites

Toggle the Private Image Sharing flag in the CM DevTool. Testing will be easier with the Legacy MSW and you can make modifications in L929-L944 of serverHandlers.ts to test out different data, states, and number of results.

Verification steps

With the Private Image Sharing flag on...

• Navigate to the Images > Image Library > "Shared with me" tab. It should look like the preview above
• Ensure the table is mobile-friendly
• Ensure all links in the <Paper /> work
• Ensure all interactive elements behave as expected

If you want to use real data, you'll need to refer to the API spec (linked in UIE-9311) and use Postman to make requests to the DevCloud API. In general the flow would look something like:

1. From your main DevCloud account, make a POST request to /v4beta/images/sharegroups to create a share group. Grab the share group ID as well as the share group UUID from the response

• Make a POST request to /v4beta/images/sharegroups/{share group ID}/images and include an image ID in the body to add an image to the share group

2. From a second DevCloud account, make a POST request to /v4beta/images/sharegroups/tokens with the share group UUID from step 1 as the value for valid_for_sharegroup_uuid. Grab the token from the response
3. From your main DevCloud account, make a POST request to v4beta/images/sharegroups/{share group ID}/members and use the token from the previous step as the token value in the body

To Do:

• Unit tests
• Add mocks for ease of testing
• Ticket creation for follow-up work for some elements related to Pendo support (created UIE-10546)

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[linode-gh-bot]

Cloud Manager UI test results

🔺 2 failing tests on test run #1 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
2 Failing	878 Passing	11 Skipped	38m 0s

Details

Failing Tests
	Spec	Test
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can create and delete object storage buckets
❌	lke-create.spec.ts	Cloud Manager Cypress Tests→LKE Cluster Creation with LKE-E→shows the LKE-E flow with the feature flag on » creates an LKE-E cluster with the account capability

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/kubernetes/lke-create.spec.ts"

[fabrice-akamai]

Imports can be consolidated here

[fabrice-akamai]

• ✅ Looks like the preview above
• ✅ The table is mobile-friendly
• ✅ All links in the <Paper /> work and point to the right page
• ✅ All interactive elements behave as expected, no bugs encountered, no console errors.