upcoming: [UIE-9398] - Private Image Sharing Tabs New Layout (v2) (linode#13407)

pmakode-akamai · web-flow · commit a94a9d4e3d3e · 2026-02-23T16:33:45.000+05:30
* Split PR, and add more changes

* Added changeset: Private Image Sharing tabs new layout (v2)

* Few changes

* Update few remaining references

* Update filename

* Change custom to owned (query params)

* Update sharegroups to share-groups

* Update remaining share-groups references

* Few updates

* Minor clean up

* Make parent tabs routed and use routeparams for nested tabs per UX

* Update small code comment

* Update few more comments
diff --git a/packages/manager/.changeset/pr-13407-upcoming-features-1771317211182.md b/packages/manager/.changeset/pr-13407-upcoming-features-1771317211182.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Private Image Sharing tabs new layout (v2) ([#13407](https://github.com/linode/manager/pull/13407))
diff --git a/packages/manager/src/Router.tsx b/packages/manager/src/Router.tsx
@@ -10,6 +10,7 @@ import { useGlobalErrors } from 'src/hooks/useGlobalErrors';
 import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { ErrorBoundaryFallback } from './features/ErrorBoundary/ErrorBoundaryFallback';
+import { useIsPrivateImageSharingEnabled } from './features/Images/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { router } from './routes';
 
@@ -22,6 +23,7 @@ export const Router = () => {
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isACLPEnabled } = useIsACLPEnabled();
+  const { isPrivateImageSharingEnabled } = useIsPrivateImageSharingEnabled();
   const flags = useFlags();
 
   // Update the router's context
@@ -31,6 +33,7 @@ export const Router = () => {
       flags,
       globalErrors,
       isACLPEnabled,
+      isPrivateImageSharingEnabled,
       isDatabasesEnabled,
       isPlacementGroupsEnabled,
       profile,
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx
@@ -7,7 +7,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { http, HttpResponse, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import ImagesLanding from './ImagesLanding';
+import { ImagesLanding } from './ImagesLanding';
 
 const queryMocks = vi.hoisted(() => ({
   usePermissions: vi.fn().mockReturnValue({ data: { create_image: false } }),
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
@@ -568,5 +568,3 @@ export const ImagesLanding = () => {
     </>
   );
 };
-
-export default ImagesLanding;
diff --git a/packages/manager/src/features/Images/ImagesLanding/imagesLandingLazyRoute.ts b/packages/manager/src/features/Images/ImagesLanding/imagesLandingLazyRoute.ts
@@ -1,6 +1,6 @@
 import { createLazyRoute } from '@tanstack/react-router';
 
-import { ImagesLanding } from 'src/features/Images/ImagesLanding/ImagesLanding';
+import { ImagesLanding } from './ImagesLanding';
 
 export const imagesLandingLazyRoute = createLazyRoute('/images')({
   component: ImagesLanding,
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImageLibraryTabs.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImageLibraryTabs.tsx
@@ -0,0 +1,70 @@
+import { BetaChip, Notice, Stack } from '@linode/ui';
+import { useNavigate, useParams } from '@tanstack/react-router';
+import * as React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
+import { Tab } from 'src/components/Tabs/Tab';
+import { TabList } from 'src/components/Tabs/TabList';
+import { TabPanels } from 'src/components/Tabs/TabPanels';
+import { Tabs } from 'src/components/Tabs/Tabs';
+
+import { getImageLibrarySubTabIndex } from '../../../utils';
+import { imageLibrarySubTabs as subTabs } from './imageLibraryTabsConfig';
+
+export const ImageLibraryTabs = () => {
+  const navigate = useNavigate();
+
+  const params = useParams({
+    from: '/images/image-library/$imageType',
+    shouldThrow: false,
+  });
+
+  const subTabIndex = getImageLibrarySubTabIndex(subTabs, params?.imageType);
+
+  const onTabChange = (index: number) => {
+    // - Update the "imageType" param.
+    // - This switches between "Owned by me", "Shared with me" and "Recovery images" sub-tabs within the Image Library tab.
+    navigate({
+      to: `/images/image-library/$imageType`,
+      params: {
+        imageType: subTabs[index].type,
+      },
+    });
+  };
+
+  return (
+    <Stack spacing={3}>
+      <Tabs index={subTabIndex} onChange={onTabChange}>
+        <TabList>
+          {subTabs.map((tab) => (
+            <Tab key={`images-${tab.type}`}>
+              {tab.title} {tab.isBeta ? <BetaChip /> : null}
+            </Tab>
+          ))}
+        </TabList>
+        <React.Suspense fallback={<SuspenseLoader />}>
+          <TabPanels>
+            {subTabs.map((tab, idx) => (
+              <SafeTabPanel index={idx} key={`images-${tab.type}-content`}>
+                {tab.type === 'owned-by-me' && (
+                  // <ImagesView handlers={handlers} type="owned-by-me" />
+                  <Notice variant="info">Custom Images</Notice>
+                )}
+                {tab.type === 'shared-with-me' && (
+                  <Notice variant="info">
+                    Share with me is coming soon...
+                  </Notice>
+                )}
+                {tab.type === 'recovery-images' && (
+                  // <ImagesView handlers={handlers} type="recovery-images" />
+                  <Notice variant="info">Recovery Images</Notice>
+                )}
+              </SafeTabPanel>
+            ))}
+          </TabPanels>
+        </React.Suspense>
+      </Tabs>
+    </Stack>
+  );
+};
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.ts b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.ts
@@ -0,0 +1,11 @@
+import type { ImageLibrarySubTab } from '../../../utils';
+
+export const imageLibrarySubTabs: ImageLibrarySubTab[] = [
+  { type: 'owned-by-me', title: 'Owned by me' },
+  {
+    type: 'shared-with-me',
+    title: 'Shared with me',
+    isBeta: true,
+  },
+  { type: 'recovery-images', title: 'Recovery images' },
+];
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsLazyRoute.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsLazyRoute.tsx
@@ -0,0 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { ImageLibraryTabs } from './ImageLibraryTabs';
+
+export const imageLibraryTabsLazyRoute = createLazyRoute(
+  '/images/image-library'
+)({
+  component: ImageLibraryTabs,
+});
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImagesLandingV2.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImagesLandingV2.tsx
@@ -0,0 +1,46 @@
+import { BetaChip } from '@linode/ui';
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { LandingHeader } from 'src/components/LandingHeader';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { TabPanels } from 'src/components/Tabs/TabPanels';
+import { Tabs } from 'src/components/Tabs/Tabs';
+import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
+import { useTabs } from 'src/hooks/useTabs';
+
+export const ImagesLandingV2 = () => {
+  const { handleTabChange, tabIndex, tabs } = useTabs([
+    {
+      title: 'Image Library',
+      to: '/images/image-library',
+    },
+    {
+      title: 'Share Groups',
+      to: '/images/share-groups',
+      chip: <BetaChip />,
+    },
+  ]);
+
+  return (
+    <>
+      <LandingHeader
+        breadcrumbProps={{
+          pathname: 'Images',
+          removeCrumbX: 1,
+        }}
+        spacingBottom={16}
+        title="Images"
+      />
+
+      <Tabs index={tabIndex} onChange={handleTabChange}>
+        <TanStackTabLinkList tabs={tabs} />
+        <React.Suspense fallback={<SuspenseLoader />}>
+          <TabPanels>
+            <Outlet />
+          </TabPanels>
+        </React.Suspense>
+      </Tabs>
+    </>
+  );
+};
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTabs.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTabs.tsx
@@ -0,0 +1,6 @@
+import { Notice } from '@linode/ui';
+import React from 'react';
+
+export const ShareGroupsTabs = () => {
+  return <Notice variant="info">Share Groups is coming soon...</Notice>;
+};
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsLazyRoute.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsLazyRoute.tsx
@@ -0,0 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { ShareGroupsTabs } from './ShareGroupsTabs';
+
+export const shareGroupsTabsLazyRoute = createLazyRoute('/images/share-groups')(
+  {
+    component: ShareGroupsTabs,
+  }
+);
diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/imagesLandingV2LazyRoute.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/imagesLandingV2LazyRoute.tsx
@@ -0,0 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { ImagesLandingV2 } from './ImagesLandingV2';
+
+export const imagesLandingV2LazyRoute = createLazyRoute(
+  '/images/image-library'
+)({
+  component: ImagesLandingV2,
+});
diff --git a/packages/manager/src/features/Images/utils.test.tsx b/packages/manager/src/features/Images/utils.test.tsx
@@ -7,9 +7,12 @@ import { wrapWithTheme } from 'src/utilities/testHelpers';
 import {
   getEventsForImages,
   getImageLabelForLinode,
+  getImageLibrarySubTabIndex,
   useIsPrivateImageSharingEnabled,
 } from './utils';
 
+import type { ImageLibrarySubTab } from './utils';
+
 describe('getImageLabelForLinode', () => {
   it('handles finding an image and getting the label', () => {
     const linode = linodeFactory.build({
@@ -89,3 +92,30 @@ describe('useIsPrivateImageSharingEnabled', () => {
     });
   });
 });
+
+describe('getImageLibrarySubTabIndex', () => {
+  const subTabs: ImageLibrarySubTab[] = [
+    { type: 'owned-by-me', title: 'Owned by me' },
+    { type: 'shared-with-me', title: 'Shared with me', isBeta: true },
+    { type: 'recovery-images', title: 'Recovery images' },
+  ];
+
+  it('returns 0 if selectedTab is undefined', () => {
+    expect(getImageLibrarySubTabIndex(subTabs, undefined)).toBe(0);
+  });
+
+  it('returns the correct index when selectedTab matches a tab key', () => {
+    expect(getImageLibrarySubTabIndex(subTabs, 'owned-by-me')).toBe(0);
+    expect(getImageLibrarySubTabIndex(subTabs, 'shared-with-me')).toBe(1);
+    expect(getImageLibrarySubTabIndex(subTabs, 'recovery-images')).toBe(2);
+  });
+
+  it('returns 0 if selectedTab does not exist in subTabs', () => {
+    // @ts-expect-error intentionally passing an unexpected value
+    expect(getImageLibrarySubTabIndex(subTabs, 'hey')).toBe(0);
+  });
+
+  it('works with an empty subTabs array', () => {
+    expect(getImageLibrarySubTabIndex([], 'owned-by-me')).toBe(0);
+  });
+});
diff --git a/packages/manager/src/features/Images/utils.ts b/packages/manager/src/features/Images/utils.ts
@@ -5,6 +5,23 @@ import { useFlags } from 'src/hooks/useFlags';
 
 import type { Event, Image, Linode } from '@linode/api-v4';
 
+export type ImageLibraryType =
+  | 'owned-by-me'
+  | 'recovery-images'
+  | 'shared-with-me';
+
+/**
+ * Configuration for image sub-tabs within the Image Library tab.
+ */
+export interface ImageLibrarySubTab {
+  /** Whether this tab represents a beta feature */
+  isBeta?: boolean;
+  /** Display title for the tab */
+  title: string;
+  /** The type this tab represents */
+  type: ImageLibraryType;
+}
+
 export const getImageLabelForLinode = (linode: Linode, images: Image[]) => {
   const image = images?.find((image) => image.id === linode.image);
   return image?.label ?? linode.image;
@@ -55,3 +72,29 @@ export const useIsPrivateImageSharingEnabled = () => {
   // @TODO Private Image Sharing: check for customer tag/account capability when it exists
   return { isPrivateImageSharingEnabled: flags.privateImageSharing ?? false };
 };
+
+/**
+ * Returns the index of the currently selected sub-tab from an array of sub-tabs.
+ *
+ * @param subTabs - Array of sub-tabs with `type` and `title` properties.
+ * @param selectedTab - The type of currently selected sub-tab.
+ * Currently, this value comes from 'imageType' param on the Image Library tab.
+ *
+ * @returns the index of the selected sub-tab
+ */
+export const getImageLibrarySubTabIndex = (
+  subTabs: ImageLibrarySubTab[],
+  selectedTab: ImageLibraryType | undefined
+) => {
+  if (selectedTab === undefined) {
+    return 0;
+  }
+
+  const tabIndex = subTabs.findIndex((tab) => tab.type === selectedTab);
+
+  if (tabIndex === -1) {
+    return 0;
+  }
+
+  return tabIndex;
+};
diff --git a/packages/manager/src/routes/images/ImagesRoute.tsx b/packages/manager/src/routes/images/ImagesRoute.tsx
@@ -1,14 +1,47 @@
 import { Typography } from '@linode/ui';
-import { Outlet } from '@tanstack/react-router';
-import React from 'react';
+import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
+import React, { useEffect } from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Link } from 'src/components/Link';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useIsPrivateImageSharingEnabled } from 'src/features/Images/utils';
 
 export const ImagesRoute = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { isPrivateImageSharingEnabled } = useIsPrivateImageSharingEnabled();
+
+  // --------------
+  // NOTE: This might not be strictly required, but useEffect ensures that there's no stale state
+  // when feature flags are toggled at runtime so the user doesn't have to reload the application manually to see the correct state.
+  // ---------------
+  // Handle navigation between legacy /images and new tabbed UI based on feature flag.
+  // Redirects to the appropriate route on initial load and when the feature flag toggles at runtime.
+  // - When flag is ON: /images redirects to /images/image-library
+  // - When flag is OFF: /images/image-library or /images/share-groups redirect back to /images (legacy)
+  useEffect(() => {
+    if (location.pathname.startsWith('/images')) {
+      // Redirect to Image Library tab when feature flag is enabled
+      if (isPrivateImageSharingEnabled && location.pathname === '/images') {
+        navigate({
+          to: '/images/image-library/$imageType',
+          params: { imageType: 'owned-by-me' },
+          replace: true,
+        });
+      } else if (
+        // Redirect to legacy route when feature flag is disabled
+        !isPrivateImageSharingEnabled &&
+        (location.pathname.startsWith('/images/image-library') ||
+          location.pathname.startsWith('/images/share-groups'))
+      ) {
+        navigate({ to: '/images', replace: true });
+      }
+    }
+  }, [isPrivateImageSharingEnabled, location.pathname, navigate]);
+
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
       <DismissibleBanner
diff --git a/packages/manager/src/routes/images/index.ts b/packages/manager/src/routes/images/index.ts
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
diff --git a/packages/manager/src/routes/types.ts b/packages/manager/src/routes/types.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@linode/manager": Upcoming Features
 +---
++
 +Private Image Sharing tabs new layout (v2) ([#13407](https://github.com/linode/manager/pull/13407))