Skip to content

[upcoming] UIE-9410: Implement the Create Share Group page#13550

Open
fabrice-akamai wants to merge 16 commits intolinode:developfrom
fabrice-akamai:UIE-9410-create-share-group-page
Open

[upcoming] UIE-9410: Implement the Create Share Group page#13550
fabrice-akamai wants to merge 16 commits intolinode:developfrom
fabrice-akamai:UIE-9410-create-share-group-page

Conversation

@fabrice-akamai
Copy link
Copy Markdown
Contributor

@fabrice-akamai fabrice-akamai commented Mar 31, 2026

Description 📝

This PR implements the 'Create Share Group' page along with the supporting functions for querying, routing, and submitting the form. With these changes, users can now create share groups from the UI instead of relying on API requests alone. This is the first of 3 PRs for this ticket; future PRs will implement the Images and Selected images sections.

Changes 🔄

List any change(s) relevant to the reviewer.

  • Added ShareGroupsCreate page with landing header and form
  • Added ShareGroupsCreate form
  • Added ShareGroupsCreate query mutation in sharegroups.ts
  • Added new route in routes/images/index.ts
  • Added unit tests for the ShareGroupsCreate form

Scope 🚢

Upon production release, changes in this PR will be visible to:

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

Target release date 🗓️

TBD

Preview 📷

Screen.Recording.2026-03-31.at.12.55.58.PM.mov

How to test 🧪

Prerequisites

In an environment with the Private Image Sharing feature flag enabled,

  • Navigate to Images -> Share Groups tab
  • Click the 'Create Share Group' button on the landing page

Verification steps

(How to verify changes)

  • Fill the label and optionally the description field
  • Click Create Share Group
  • Verify that your share group was successfully created and appears in the table
  • Test edge cases such as submitting an empty form, missing label, spaces and special characters in label, exceeding character limit in label field, etc. Make sure the form displays the correct error message and handles errors gracefully
  • Verify that the breadcrumb and docs links work properly
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 fabrice-akamai marked this pull request as ready for review March 31, 2026 17:04
@fabrice-akamai fabrice-akamai requested a review from a team as a code owner March 31, 2026 17:04
@dwiley-akamai dwiley-akamai added the Private Image Sharing Related to Private Image Sharing feature label Mar 31, 2026
Comment on lines +81 to +100
<Controller
control={control}
name="description"
render={({ field, fieldState }) => (
<TextField
errorText={fieldState.error?.message}
label="Description"
multiline
noMarginTop
{...field}
onChange={(e) =>
field.onChange(
e.target.value === '' ? undefined : e.target.value
)
}
rows={1}
value={field.value ?? ''}
/>
)}
/>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's check with the API team on implementing a maximum number of characters for the description field

Image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, I'll reach out to them about this.

Copy link
Copy Markdown
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice - PR looks good from a code/UI perspective 👍

@@ -0,0 +1,24 @@
import Grid from '@mui/material/Grid';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's no do straight imports from @mui

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an alternative you suggest @abailly-akamai? We do this throughout the codebase and I don't believe we have a Grid in the ui package

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤕 My bad old habit when I see a MUI import. It's one of the very few component we haven't abstracted. Carry on!

oof-the-simpsons

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, no worries. Thanks for clarifying this @dwiley-akamai @abailly-akamai!

Copy link
Copy Markdown
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verification steps ✅
Code review ✅

@@ -0,0 +1,24 @@
import Grid from '@mui/material/Grid';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an alternative you suggest @abailly-akamai? We do this throughout the codebase and I don't believe we have a Grid in the ui package

@github-project-automation github-project-automation bot moved this from Review to Approved in Cloud Manager Apr 1, 2026
@fabrice-akamai
Copy link
Copy Markdown
Contributor Author

I made a few additional changes to the ShareGroupsTable to improve the display of the Group and Description fields when the text is too large:

  • Removed line wrap so that the text overflow gets truncated with ellipses
  • Added a tooltip to show the full text
  • Made the description column wider
Same width (current) Wider description column (new)
Screenshot 2026-04-01 at 6 36 16 PM Screenshot 2026-04-01 at 6 50 27 PM

@tzmiivsk-akamai any thoughts on expanding the description column and adding a tooltip to the group cells?

cc: @dwiley-akamai @abailly-akamai

@linode-gh-bot
Copy link
Copy Markdown
Collaborator

Cloud Manager UI test results

🔺 3 failing tests on test run #7 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
3 Failing885 Passing11 Skipped43m 31s

Details

Failing Tests
SpecTest
account-switching.spec.tsCloud Manager Cypress Tests→Parent/Child account switching→From Parent to Child » can search child accounts
object-storage.e2e.spec.tsCloud Manager Cypress Tests→object storage end-to-end tests » can create and delete object storage buckets
object-storage.e2e.spec.tsCloud Manager Cypress Tests→object storage end-to-end tests » can update bucket access

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/parentChild/account-switching.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts"

@tzmiivsk-akamai
Copy link
Copy Markdown

I made a few additional changes to the ShareGroupsTable to improve the display of the Group and Description fields when the text is too large:

  • Removed line wrap so that the text overflow gets truncated with ellipses
  • Added a tooltip to show the full text
  • Made the description column wider

@tzmiivsk-akamai any thoughts on expanding the description column and adding a tooltip to the group cells?

Looking good! A couple of small adjustments:
Let's show tooltips only when the description is truncated to avoid visual noise.
Can we narrow down 'Members'/'Images' columns and expand 'Group' instead?
Paddings (left of 'Group' and right of 'Action Menu') look a bit wider than the designs.

Could you please double-check these? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Private Image Sharing Related to Private Image Sharing feature

Projects

Status: Approved

Development

Successfully merging this pull request may close these issues.

5 participants