upcoming: [UIE-9502] - Add Recovery Images tab (v2) (#13432)

* Split PR, and add more changes

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

* Few changes

* Update few remaining references

* Save progress..

* Update filename

* Some refactoring and add reuseable images component

* Change custom to owned (query params)

* Update sharegroups to share-groups

* Add more tests

* Update remaining share-groups references

* Few updates

* More changes

* Add ImagesView tests for custom images

* Minor changes

* Added changeset: Add reusable `ImagesView` and Integrate It for the `Owned by me` Images tab (v2)

* Added changeset: Add `shared` to ImageType

* Added changeset: Add `ZeroStateSearchNarrowIcon` to UI package

* Update changeset

* Clean up old query param from ImagesSearchParams

* Update custom images desc and move styles to dedicated file

* Add recovery images tab v2

* Minor change

* Add tests in ImagesView for Recovery Images

* Add unit tests in ImageLibraryTabs for recovery images

* Few minor changes to tests

* Update docsLink (for owned by me images) after latest UX update

* Few changes to emptyMessage.instruction type

* Add some changes related to docLink

* Few updates

* Simplify table col config for sorting

* Update Recovery Images to Recovery images

* Added changeset:  Add Recovery images tab (v2)

* Prevent old action routes when flag is enabled and update table styles per UX

Author: pmakode-akamai

packages/manager/.changeset/pr-13432-upcoming-features-1772094828866.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ Add Recovery images tab (v2) ([#13432](https://github.com/linode/manager/pull/13432))

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImageLibraryTabs.test.tsx

@@ -16,6 +16,7 @@ const queryMocks = vi.hoisted(() => ({
   useQueryWithPermissions: vi.fn().mockReturnValue({}),
   useLinodesPermissionsCheck: vi.fn().mockReturnValue({}),
   useSearch: vi.fn().mockReturnValue({}),
+  useParams: vi.fn(),
 }));
 
 vi.mock('src/features/IAM/hooks/usePermissions', () => ({
@@ -29,6 +30,7 @@ vi.mock('@tanstack/react-router', async () => {
     ...actual,
     useLocation: queryMocks.useLocation,
     useSearch: queryMocks.useSearch,
+    useParams: queryMocks.useParams,
   };
 });
 
@@ -61,8 +63,12 @@ describe('ImageLibraryTabs', () => {
     });
   });
 
-  // For Custom Images (Owned by me)
-  describe('For Custom Images (Owned by me)', () => {
+  // For Custom images (Owned by me)
+  describe('For Custom images (Owned by me)', () => {
+    beforeEach(() => {
+      queryMocks.useParams.mockReturnValue({ imageType: 'owned-by-me' });
+    });
+
     it("should render 'Owned by me' tab", async () => {
       const { getByText } = renderWithTheme(<ImageLibraryTabs />, {
         initialRoute: '/images/image-library/owned-by-me',
@@ -71,7 +77,7 @@ describe('ImageLibraryTabs', () => {
       expect(getByText('Owned by me')).toBeVisible();
     });
 
-    // Test Image action navigations for CUSTOM IMAGES (Owned by me)
+    // Test Image action navigations for CUSTOM images (Owned by me)
     it('should allow opening the Edit Image drawer', async () => {
       const image = imageFactory.build();
 
@@ -207,6 +213,156 @@ describe('ImageLibraryTabs', () => {
     });
   });
 
+  // For Recovery images
+  describe('For Recovery images', () => {
+    beforeEach(() => {
+      queryMocks.useParams.mockReturnValue({ imageType: 'recovery-images' });
+    });
+
+    it("should render 'Recovery images' tab", async () => {
+      const { getByText } = renderWithTheme(<ImageLibraryTabs />, {
+        initialRoute: '/images/image-library/recovery-images',
+      });
+
+      expect(getByText('Recovery images')).toBeVisible();
+    });
+
+    // Test Images Action navigations for RECOVERY images
+    it('should allow opening the Edit Image drawer', async () => {
+      const image = imageFactory.build({ type: 'automatic' });
+
+      server.use(
+        http.get('*/images', ({ request }) => {
+          const filter = request.headers.get('x-filter');
+
+          if (filter?.includes('automatic')) {
+            return HttpResponse.json(makeResourcePage([image]));
+          }
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { getByText, findByLabelText, router } = renderWithTheme(
+        <ImageLibraryTabs />,
+        {
+          initialRoute: '/images/image-library/recovery-images',
+        }
+      );
+
+      const actionMenu = await findByLabelText(
+        `Action menu for Image ${image.label}`
+      );
+      await userEvent.click(actionMenu);
+      await userEvent.click(getByText('Edit'));
+
+      expect(router.state.location.pathname).toBe(
+        `/images/image-library/recovery-images/${encodeURIComponent(image.id)}/edit`
+      );
+    });
+
+    it('should allow opening the Restore Image drawer', async () => {
+      const image = imageFactory.build();
+
+      server.use(
+        http.get('*/images', ({ request }) => {
+          const filter = request.headers.get('x-filter');
+
+          if (filter?.includes('automatic')) {
+            return HttpResponse.json(makeResourcePage([image]));
+          }
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { router, getByText, findByLabelText } = renderWithTheme(
+        <ImageLibraryTabs />,
+        {
+          initialRoute: '/images/image-library/recovery-images',
+        }
+      );
+
+      const actionMenu = await findByLabelText(
+        `Action menu for Image ${image.label}`
+      );
+      await userEvent.click(actionMenu);
+      await userEvent.click(getByText('Rebuild an Existing Linode'));
+
+      expect(router.state.location.pathname).toBe(
+        `/images/image-library/recovery-images/${encodeURIComponent(image.id)}/rebuild`
+      );
+    });
+
+    it('should allow deploying to a new Linode', async () => {
+      const image = imageFactory.build();
+      queryMocks.useLinodesPermissionsCheck.mockReturnValue({
+        availableLinodes: [linodeFactory.build()],
+      });
+
+      server.use(
+        http.get('*/images', ({ request }) => {
+          const filter = request.headers.get('x-filter');
+
+          if (filter?.includes('automatic')) {
+            return HttpResponse.json(makeResourcePage([image]));
+          }
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { findByLabelText, getByText, queryAllByTestId, router } =
+        renderWithTheme(<ImageLibraryTabs />, {
+          initialRoute: '/images/image-library/recovery-images',
+        });
+
+      const loadingElement = queryAllByTestId(loadingTestId);
+      await waitForElementToBeRemoved(loadingElement);
+
+      const actionMenu = await findByLabelText(
+        `Action menu for Image ${image.label}`
+      );
+      await userEvent.click(actionMenu);
+      await userEvent.click(getByText('Deploy to New Linode'));
+
+      expect(router.state.location.pathname).toBe('/linodes/create/images');
+
+      expect(router.state.location.search).toStrictEqual({
+        imageID: image.id,
+      });
+    });
+
+    it('should allow deleting an image', async () => {
+      const image = imageFactory.build();
+
+      server.use(
+        http.get('*/images', ({ request }) => {
+          const filter = request.headers.get('x-filter');
+
+          if (filter?.includes('automatic')) {
+            return HttpResponse.json(makeResourcePage([image]));
+          }
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { router, findByLabelText, getByText } = renderWithTheme(
+        <ImageLibraryTabs />,
+        {
+          initialRoute: '/images/image-library/recovery-images',
+        }
+      );
+
+      const actionMenu = await findByLabelText(
+        `Action menu for Image ${image.label}`
+      );
+      await userEvent.click(actionMenu);
+      await userEvent.click(getByText('Delete'));
+
+      expect(router.state.location.pathname).toBe(
+        `/images/image-library/recovery-images/${encodeURIComponent(image.id)}/delete`
+      );
+    });
+  });
+
   it('should render Owned (custom), Shared and Recovery tabs under Images Library Tab', async () => {
     const { getByText } = renderWithTheme(<ImageLibraryTabs />, {
       initialRoute: '/images/image-library',

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImageLibraryTabs.tsx

@@ -147,8 +147,7 @@ export const ImageLibraryTabs = () => {
                   </Notice>
                 )}
                 {tab.type === 'recovery-images' && (
-                  // <ImagesView handlers={handlers} type="recovery-images" />
-                  <Notice variant="info">Recovery Images</Notice>
+                  <ImagesView handlers={handlers} type="recovery-images" />
                 )}
               </SafeTabPanel>
             ))}

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.styles.ts

@@ -1,24 +1,34 @@
-import { Paper, Typography } from '@linode/ui';
+import { Box, Paper, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-export const StyledImageTable = styled(Paper, { label: 'StyledImageTable' })(
-  ({ theme }) => ({
-    marginBottom: theme.spacingFunction(24),
-    padding: 0,
-  })
-);
+export const StyledImageContainer = styled(Paper, {
+  label: 'StyledImageContainer',
+})(({ theme }) => ({
+  border: `1px solid ${theme.tokens.alias.Border.Normal}`,
+  marginBottom: theme.spacingFunction(24),
+  padding: 0,
+}));
 
-export const StyledImageTableHeader = styled('div', {
+export const StyledImageTableHeader = styled(Box, {
   label: 'StyledImageTableHeader',
 })(({ theme }) => ({
-  border: `1px solid ${theme.tokens.alias.Border.Normal}`,
-  borderBottom: 0,
-  padding: theme.spacingFunction(8),
-  paddingLeft: theme.spacingFunction(12),
+  padding: `${theme.spacingFunction(16)} ${theme.spacingFunction(24)} 0`,
 }));
 
 export const StyledImageTableSubheader = styled(Typography, {
   label: 'StyledImageTableSubheader',
 })(({ theme }) => ({
   marginTop: theme.spacingFunction(8),
 }));
+
+export const StyledImageTableContainer = styled(Box, {
+  label: 'StyledImageTableContainer',
+})(({ theme }) => ({
+  padding: `${theme.spacingFunction(16)} ${theme.spacingFunction(24)} ${theme.spacingFunction(24)}`,
+  '& .MuiTable-root': {
+    border: 'none',
+  },
+  '& [data-qa-table-pagination]': {
+    border: 'none',
+  },
+}));