Display affected systems to the user

This patch displays the systems affected by a advisory errata to the
user. It exposes the new backend API in the advisory errata page and
updates the relevant tests. This change required an update to the
factories.

Furthermore, I added a section for showcasing the "empty data" state in
the advisory details page.

assets/js/lib/test-utils/factories/advisoryErrata.js

@@ -10,6 +10,10 @@ const affectedPackageFactory = Factory.define(({ sequence }) => ({
   epoch: `${faker.number.int({ min: 0, max: 50 })}`,
 }));
 
+const affectedSystemFactory = Factory.define(({ sequence }) => ({
+  name: `${faker.string.uuid()}-${sequence}`,
+}));
+
 const fixMapFactory = Factory.define(({ transientParams }) => {
   const { length = 1 } = transientParams;
 
@@ -40,6 +44,7 @@ export const advisoryErrataFactory = Factory.define(({ params }) => ({
     ),
   cves: cveFactory.buildList(10),
   affected_packages: affectedPackageFactory.buildList(10),
+  affected_systems: affectedSystemFactory.buildList(10),
   errata_details: {
     id: faker.number.int({ min: 1, max: 65536 }),
     issue_date: faker.date.recent({ days: 30 }),

assets/js/pages/AdvisoryDetails/AdvisoryDetails.jsx

@@ -27,7 +27,12 @@ function AdvisoryDetails({
     reboot_suggested: rebootSuggested,
   } = errata.errata_details;
 
-  const { fixes, cves, affected_packages: affectedPackages } = errata;
+  const {
+    fixes,
+    cves,
+    affected_packages: affectedPackages,
+    affected_systems: affectedSystems,
+  } = errata;
 
   return (
     <div>
@@ -131,6 +136,20 @@ function AdvisoryDetails({
           )}
         </div>
       </div>
+      <div className="flex flex-col mb-4">
+        <h2 className="text-xl font-bold mb-2">Affected Systems</h2>
+        <div className="bg-white py-4 px-6 shadow shadow-md rounded-lg">
+          {affectedSystems && affectedSystems.length ? (
+            <ul>
+              {affectedSystems.map(({ name }) => (
+                <li key={`system-${name}`}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <EmptyData />
+          )}
+        </div>
+      </div>
     </div>
   );
 }

assets/js/pages/AdvisoryDetails/AdvisoryDetails.stories.jsx

@@ -37,6 +37,35 @@ However, the post didn't come by today, and I am starting to wonder, if my Geeko
           arch_label: 'x86_64',
         },
       ],
+      affected_systems: [
+        {
+          name: 'vmdrbddev01',
+        },
+      ],
+    },
+    affectsPackageMaintenanceStack: false,
+  },
+};
+
+export const Empty = {
+  args: {
+    advisoryName: 'SUSE-15-SP4-2023-3369',
+    errata: {
+      errata_details: {
+        issue_date: Date.now(),
+        update_date: Date.now(),
+        synopsis: 'I think my Geekos ate my quiche 🦎🦎',
+        advisory_status: 'stable',
+        type: 'security_advisory',
+        description: `My Geekos really love the cakes I order from the crab bakery.
+Yesterday, I left before the post arrived. Normally, the post just delivers my packages the next day.
+However, the post didn't come by today, and I am starting to wonder, if my Geekos ate my quiche. AITA? 😟`,
+        reboot_suggested: true,
+      },
+      fixes: {},
+      cves: [],
+      affected_packages: [],
+      affected_systems: [],
     },
     affectsPackageMaintenanceStack: false,
   },

assets/js/pages/AdvisoryDetails/AdvisoryDetails.test.jsx

@@ -15,13 +15,14 @@ describe('AdvisoryDetails', () => {
       cves: [],
       fixes: {},
       affected_packages: [],
+      affected_systems: [],
     });
 
     render(
       <AdvisoryDetails advisoryName={faker.lorem.word()} errata={errata} />
     );
 
-    expect(screen.getAllByText('No data available').length).toBe(3);
+    expect(screen.getAllByText('No data available').length).toBe(4);
   });
 
   it('displays relevant errata data', () => {
@@ -50,6 +51,18 @@ describe('AdvisoryDetails', () => {
     });
   });
 
+  it('displays affected systems', () => {
+    const errata = advisoryErrataFactory.build();
+    const advisoryName = faker.lorem.word();
+
+    render(<AdvisoryDetails advisoryName={advisoryName} errata={errata} />);
+
+    errata.affected_systems.forEach(({ name }) => {
+      const el = screen.getByText(name);
+      expect(el).toBeVisible();
+    });
+  });
+
   it('displays fixes with a valid link', () => {
     const errata = advisoryErrataFactory.build();
     const advisoryName = faker.lorem.word();