[upcoming] UIE-9402: Implement Owned groups tab landing page by fabrice-akamai · Pull Request #13506 · linode/manager

fabrice-akamai · 2026-03-17T21:21:34Z

Description 📝

This PR implements the Owned groups tab landing page content, allowing unrestricted users to view their share groups.

Note: The current implementation does not allow users to sort the table by image count or membership count since this feature is not yet supported by the backend.

Changes 🔄

List any change(s) relevant to the reviewer.

Added ShareGroupsView with the search field and share groups table
Added the columns and share group tab configs in ShareGroupsTabsConfig.tsx
Added ShareGroupTable with ShareGroupRow and ShareGroupActionMenu

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

Preview 📷

Screen.Recording.2026-03-18.at.4.27.30.PM.mov

How to test 🧪

Prerequisites

(How to setup test environment)

Switch to DevCloud in the dev tools in order to test the share groups API
Enable the Private Image Sharing feature flag

Verification steps

(How to verify changes)

Navigate to the Images page
Click on the Share groups tab
Test the share groups view component by interacting with the search field, table and action menus

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

…nto develop

…om/fabrice-akamai/manager into UIE-9402-owned-groups-landing-page

dwiley-akamai · 2026-03-19T17:02:58Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupRow.tsx

+      <Hidden mdDown>
+        <TableCell>
+          {updated &&
+            formatDate(updated, {
+              timezone: profile?.timezone,
+            })}
+        </TableCell>
+      </Hidden>


Perhaps we should display a — when updated is null (can confirm with UX how they want to handle that but we have done it elsewhere in the app)

packages/queries/src/images/sharegroups.ts

packages/api-v4/src/images/index.ts

dwiley-akamai · 2026-03-19T17:50:29Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { TableRowError } from 'src/components/TableRowError/TableRowError';
+import { TableSortCell } from 'src/components/TableSortCell/TableSortCell';


Let's try to use the CDS Web Components where possible when developing this feature. My last PR shows how to bring in the table-related components for example

Will do. Thanks!

abailly-akamai · 2026-03-20T11:15:53Z

@fabrice-akamai I am not going to block this (no need to break it down at this point) but I also am not going to review it. The PR is too large and isn't easily ingestible. Even by looking at the amount of commits this is pretty clear.

While the standards are certainly changing, please keep in mind our contributing guidelines for future PRs. It helps your team members review the code, contribute, and actually ship quicker and with more confidence.

fabrice-akamai · 2026-03-20T13:54:33Z

@fabrice-akamai I am not going to block this (no need to break it down at this point) but I also am not going to review it. The PR is too large and isn't easily ingestible. Even by looking at the amount of commits this is pretty clear.

While the standards are certainly changing, please keep in mind our contributing guidelines for future PRs. It helps your team members review the code, contribute, and actually ship quicker and with more confidence.

Hi @abailly-akamai, I agree that this is a pretty large PR and it involves a lot of file changes. This is mainly because the table I implemented required a lot of subcomponents to be added like the row, action menu, and search field. I also had to add new queries to support fetching the paginated data, so it was hard to break them down without leaving out an essential part of the feature. In the future, I'll make sure to break down such features into smaller PRs that are easier to review. Thanks for the feedback!

dwiley-akamai

Code review ✅
Verification steps ✅

My comments about UI styling/formatting can be addressed in a follow-up PR but the Pendo IDs and import consolidation can be done in this one

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupActionMenu.tsx

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupRow.tsx

dwiley-akamai · 2026-03-23T15:34:21Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupRow.tsx

The formatting & mobile support will need to be improved here:

Updated cell dash seems right-aligned

Updated cell contents get hidden at some point but the column remains (and the Created content gets shifted there)

Column names wrap or get obscured

Group names get obscured at a point

Screen.Recording.2026-03-23.at.11.29.39.AM.mov

This can be handled in a follow-up PR

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

fabrice-akamai · 2026-03-23T19:55:24Z

Code review ✅ Verification steps ✅

My comments about UI styling/formatting can be addressed in a follow-up PR but the Pendo IDs and import consolidation can be done in this one

Thanks @dwiley-akamai for the thorough review. Here's a summary of my latest changes:

Pendo IDs in Action menu: Updated the name to be more concise, based on the Figma mocks
TableRowEmpty state: Removed the TableRowEmpty component that doesn't render properly with the CDS table. Added a simple table row instead.
Table responsiveness: Fixed the bug causing the inconsistency at different breakpoints and addressed the edge case with the group names.
Empty updated cell: Left-aligned the dash for consistency with the rest of the table.

Screen.Recording.2026-03-23.at.3.46.02.PM.mov

pmakode-akamai · 2026-03-24T09:48:38Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+              <TableRow>
+                <TableCell
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >
+                  {emptyMessage.main}
+                </TableCell>
+              </TableRow>


Suggested change

<TableRow>

<TableCell

style={{

display: 'flex',

justifyContent: 'center',

}}

>

{emptyMessage.main}

</TableCell>

</TableRow>

<TableRow rowborder>

<TableCell>

<Box

sx={(theme) => ({

display: 'flex',

flexDirection: 'column',

alignItems: 'center',

gap: theme.spacingFunction(4),

p: `${theme.spacingFunction(24)} ${theme.spacingFunction(32)}`,

width: '100%',

})}

>

<ZeroStateSearchNarrowIcon />

<Typography variant="h3">{emptyMessage.main}</Typography>

{!query && emptyMessage.instruction && (

<Typography variant="body1">

{emptyMessage.instruction}

</Typography>

)}

</Box>

</TableCell>

</TableRow>

If TableRowEmpty isn't working here, I think we should be able to achieve the same using the ADS table components. This change should align with the Figma mockups, and the rowBorder prop will ensure the bottom border/stroke for the last row or empty states, just like we see in the non ads components.

pmakode-akamai · 2026-03-24T10:00:34Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+              <TableRowError
+                colSpan={columns.length + 1}
+                message={error[0].reason}
+              />


I see there's an alignment issue here - we should also be able to fix this by using the ADS component.

Suggested change

<TableRowError

colSpan={columns.length + 1}

message={error[0].reason}

/>

<TableRow rowborder>

<TableCell>

<ErrorState compact errorText={error[0].reason} />

</TableCell>

</TableRow>

Before After

pmakode-akamai · 2026-03-24T10:11:03Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+  shareGroups: Sharegroup[];
+}
+
+export const ShareGroupsTable = (props: ShareGroupsTableProps) => {


Unlike other tables (ADS tables like Databases Clusters or non-ADS tables like Owned by me / Recovery Images), why isn't table striping working for this table when My Profile -> Preferences -> Table Striping is turned ON?

When My Profile -> Preferences -> Table Striping -> Turned ON:

Other CM tables ShareGroupsTable

Good observation. I didn't account for that, I'll update the table to use the user preferences.

pmakode-akamai · 2026-03-24T10:16:32Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsLanding.tsx

              <SafeTabPanel index={index} key={`images-${tab.type}-content`}>
                {tab.type === 'owned-groups' && (
-                  <Notice variant="info">Owned Groups is coming soon...</Notice>
+                  <ShareGroupsView type={'owned-groups'} />


Suggested change

<ShareGroupsView type={'owned-groups'} />

<ShareGroupsView type="owned-groups" />

nit: No need for {} here -- using a plain string prop is cleaner

pmakode-akamai · 2026-03-24T10:18:02Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+import type { ShareGroupsViewTableColConfig } from './shareGroupsTabsConfig';
+import type { APIError, Sharegroup } from '@linode/api-v4';
+import type { Order } from 'src/hooks/useOrderV2';
+interface HeaderProps {


nit: could we add a line break between the imports and the interface declaration for better readability?

pmakode-akamai · 2026-03-24T10:35:18Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+              {headerProps.buttonProps && (
+                <Button
+                  buttonType="primary"
+                  data-pendo-id={`Images Groups Owned-Create Button`}


Suggested change

data-pendo-id={`Images Groups Owned-Create Button`}

data-pendo-id={headerProps.buttonProps.pendoId}

pmakode-akamai · 2026-03-24T10:38:23Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

+            ))}
+          </TableBody>
+        </Table>
+        <PaginationFooter


question (non-blocking & optional): Is there any plan to replace this PaginationFooter with the ADS PaginationFooter (if available) across all places in the context of Private Image Sharing?

I'm not aware of any plan to replace the PaginationFooter across the app, but I would assume that if we're eventually going to integrate the CDS components in CM then this PaginationFooter will probably be replaced as well.

We should be using the CDS Pagination component -- import { Pagination } from 'akamai-cds-react-components/Pagination'

pmakode-akamai · 2026-03-24T10:51:16Z

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx

+            mb: 2,
+          },
+        }}
+        data-pendo-id="Images Groups Owned-Search"


The hardcoded Pendo ID here seems to be an issue❗️ We may need to keep the Pendo IDs in a config for all subsequent table searches and use them here from the config instead.

Agreed. I'll move away from hard-coded values here and define them in the config file so they can be passed as props.

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupTable.styles.ts

packages/queries/src/images/sharegroups.ts

linode-gh-bot · 2026-03-24T20:26:23Z

Cloud Manager UI test results

🔺 4 failing tests on test run #15 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`4 Failing`	`884 Passing`	`11 Skipped`	`50m 5s`

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
❌	`object-storage.e2e.spec.ts`	Cloud Manager Cypress Tests→object storage end-to-end tests » can create and delete object storage buckets
❌	`alerts-create.spec.ts`	Cloud Manager Cypress Tests→Create flow when beta alerts enabled by region and feature flag » create flow after switching to beta alerts
❌	`alerts-create.spec.ts`	Cloud Manager Cypress Tests→Create flow when beta alerts enabled by region and feature flag » can toggle from legacy to beta alerts and back to legacy

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorageMulticluster/object-storage-objects-multicluster.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/linodes/alerts-create.spec.ts"

fabrice-akamai added 6 commits September 26, 2025 10:40

Added missing padding around the Managed dashboard card

8680aae

changed spacing to spacingFunction

d53e3f6

Merge branch 'develop' of https://github.com/fabrice-akamai/manager i…

ef5485f

…nto develop

Merge branch 'develop' of https://github.com/fabrice-akamai/manager i…

2a8188d

…nto develop

Merge branch 'develop' of https://github.com/fabrice-akamai/manager i…

2db02f3

…nto develop

Implement Owned groups landing content

64b2563

github-project-automation bot added this to Cloud Manager Mar 17, 2026

github-project-automation bot moved this to Review in Cloud Manager Mar 17, 2026

fabrice-akamai added 4 commits March 18, 2026 14:28

Add pendo Ids

57488f1

Added changeset: Implement owned groups landing page content

2749983

Update test cases

df792bf

Remove sortableProps from unsupported keys in owned groups table

4bf9aae

fabrice-akamai marked this pull request as ready for review March 18, 2026 20:31

fabrice-akamai requested a review from a team as a code owner March 18, 2026 20:31

fabrice-akamai requested review from abailly-akamai, dwiley-akamai and pmakode-akamai March 18, 2026 20:31

fabrice-akamai added 4 commits March 18, 2026 16:42

More pendo Ids

bab8579

Merge branch 'develop' into UIE-9402-owned-groups-landing-page

b19fe0a

Remove hard-coded value for share group type

766b75a

Merge branch 'UIE-9402-owned-groups-landing-page' of https://github.c…

fdef94a

…om/fabrice-akamai/manager into UIE-9402-owned-groups-landing-page

dwiley-akamai assigned fabrice-akamai Mar 19, 2026

dwiley-akamai added the Private Image Sharing Related to Private Image Sharing feature label Mar 19, 2026

dwiley-akamai reviewed Mar 19, 2026

View reviewed changes

Use contextQueries with shareGroupQueries

2d773d8

fabrice-akamai added 3 commits March 20, 2026 11:26

Add dash to updated cell when empty

ff24e6b

Replace table component with cds table

69e4266

Merge branch 'develop' into UIE-9402-owned-groups-landing-page

d649b6d

Rename interface name to be more generic

37d7fe4

dwiley-akamai approved these changes Mar 23, 2026

View reviewed changes

fabrice-akamai added 2 commits March 23, 2026 15:20

Update pendo IDs in the share group action menu

8ef0c27

Improve table responsiveness and fix empty error display issue

30c3810

pmakode-akamai reviewed Mar 24, 2026

View reviewed changes

fabrice-akamai added 4 commits March 24, 2026 12:00

Add changeset in queries package

0ff13ff

Update edge cases with share groups table

b5df8d0

Remove pendo ID from search field and docslink

837d049

Merge branch 'develop' into UIE-9402-owned-groups-landing-page

bf818a7

-              <TableRow>
-                <TableCell
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                  }}
-                >
-                  {emptyMessage.main}
-                </TableCell>
-              </TableRow>
+              <TableRow rowborder>
+                <TableCell>
+                  <Box
+                    sx={(theme) => ({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      gap: theme.spacingFunction(4),
+                      p: `${theme.spacingFunction(24)} ${theme.spacingFunction(32)}`,
+                      width: '100%',
+                    })}
+                  >
+                    <ZeroStateSearchNarrowIcon />
+                    <Typography variant="h3">{emptyMessage.main}</Typography>
+                    {!query && emptyMessage.instruction && (
+                      <Typography variant="body1">
+                        {emptyMessage.instruction}
+                      </Typography>
+                    )}
+                  </Box>
+                </TableCell>
+              </TableRow>

	<ShareGroupsView type={'owned-groups'} />
	<ShareGroupsView type="owned-groups" />

	data-pendo-id={`Images Groups Owned-Create Button`}
	data-pendo-id={headerProps.buttonProps.pendoId}

Conversation

fabrice-akamai commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Preview 📷

How to test 🧪

Prerequisites

Verification steps

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

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abailly-akamai commented Mar 20, 2026

Uh oh!

fabrice-akamai commented Mar 20, 2026

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

fabrice-akamai commented Mar 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

linode-gh-bot commented Mar 24, 2026

Cloud Manager UI test results

🔺 4 failing tests on test run #15 ↗︎

Details

Troubleshooting

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fabrice-akamai commented Mar 17, 2026 •

edited

Loading