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:

• 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

• 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

• 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

[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.

[pmakode-akamai]

Left a few comments that may need to be looked into, and the Beta chip is missing next to the Shared with me images header:

Missing beta chip

Apart from that, this looks good 👍 Approving pending resolution of these comments.

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #7 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	887 Passing	11 Skipped	43m 39s

Details

Failing Tests
	Spec	Test
❌	object-storage-objects-multicluster.spec.ts	Cloud Manager Cypress Tests→Object Storage Multicluster objects » can upload, access, and delete objects

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorageMulticluster/object-storage-objects-multicluster.spec.ts"