fix: [M3-9522] - Recovery images table headers alignment with data column (#12043)

* fix: [M3-9522] - Recovery images table headers alignment with data column

* Added changeset: Recovery Images Table Header alignment with the data column

* fix imports

* change changeset type and description

Author: hasyed-akamai

packages/manager/.changeset/pr-12043-tests-1744782995123.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Corrected alignment between Recovery Images Table Header and data column ([#12043](https://github.com/linode/manager/pull/12043))

packages/manager/cypress/e2e/core/images/images-non-empty-landing-page.spec.ts

@@ -1,6 +1,10 @@
-import { grantsFactory, profileFactory } from '@linode/utilities';
+import { profileFactory } from '@linode/utilities';
+import { grantsFactory } from '@linode/utilities';
 import { mockGetUser } from 'support/intercepts/account';
-import { mockGetAllImages } from 'support/intercepts/images';
+import {
+  mockGetCustomImages,
+  mockGetRecoveryImages,
+} from 'support/intercepts/images';
 import {
   mockGetProfile,
   mockGetProfileGrants,
@@ -49,20 +53,32 @@ function checkActionMenu(tableAlias: string, mockImages: any[]) {
 
 describe('image landing checks for non-empty state with restricted user', () => {
   beforeEach(() => {
-    const mockImages: Image[] = new Array(3)
+    const mockCustomImages: Image[] = new Array(3)
+      .fill(null)
+      .map((_item: null, index: number): Image => {
+        return imageFactory.build({
+          label: `Image ${index}`,
+          tags: [index % 2 === 0 ? 'even' : 'odd', 'nums'],
+          type: 'manual',
+        });
+      });
+
+    const mockRecoveryImages: Image[] = new Array(3)
       .fill(null)
       .map((_item: null, index: number): Image => {
         return imageFactory.build({
           label: `Image ${index}`,
-          tags: [index % 2 == 0 ? 'even' : 'odd', 'nums'],
+          tags: [index % 2 === 0 ? 'even' : 'odd', 'nums'],
+          type: 'automatic',
         });
       });
 
     // Mock setup to display the Image landing page in an non-empty state
-    mockGetAllImages(mockImages).as('getImages');
+    mockGetCustomImages(mockCustomImages).as('getCustomImages');
+    mockGetRecoveryImages(mockRecoveryImages).as('getRecoveryImages');
 
     // Alias the mockImages array
-    cy.wrap(mockImages).as('mockImages');
+    cy.wrap(mockCustomImages).as('mockCustomImages');
   });
 
   it('checks restricted user with read access has no access to create image and can see existing images', () => {
@@ -90,7 +106,8 @@ describe('image landing checks for non-empty state with restricted user', () =>
 
     // Login and wait for application to load
     cy.visitWithLogin('/images');
-    cy.wait('@getImages');
+    cy.wait('@getCustomImages');
+    cy.wait('@getRecoveryImages');
     cy.url().should('endWith', '/images');
 
     cy.contains('h3', 'Custom Images')
@@ -119,7 +136,7 @@ describe('image landing checks for non-empty state with restricted user', () =>
       )
       .should('be.visible');
 
-    cy.get<Image[]>('@mockImages').then((mockImages) => {
+    cy.get<Image[]>('@mockCustomImages').then((mockImages) => {
       // Assert that the correct number of Image entries are present in the customImageTable
       cy.get('@customImageTable')
         .find('tbody tr')

packages/manager/cypress/support/intercepts/images.ts

@@ -68,7 +68,7 @@ export const mockGetCustomImages = (
 };
 
 /**
- * Intercepts GET request to retrieve custom images and mocks response.
+ * Intercepts GET request to retrieve recovery images and mocks response.
  *
  * @param images - Array of Image objects with which to mock response.
  *

packages/manager/src/factories/images.ts

@@ -1,6 +1,7 @@
-import { Image } from '@linode/api-v4/lib/images/types';
 import { Factory } from '@linode/utilities';
 
+import type { Image } from '@linode/api-v4';
+
 export const imageFactory = Factory.Sync.makeFactory<Image>({
   capabilities: [],
   created: new Date().toISOString(),