fix(web): reduce ProgressReport flickering

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Wed Jun 26 16:46:58 UTC 2024 - David Diaz <dgonzalez@suse.com>
+
+- Reduce progress report flickering (gh#openSUSE/agama#1395).
+
 -------------------------------------------------------------------
 Wed Jun 26 15:57:52 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/assets/styles/patternfly-overrides.scss

@@ -336,10 +336,8 @@ table td > .pf-v5-c-empty-state {
 }
 
 .pf-v5-c-progress-stepper.progress-report {
+  .pf-v5-c-progress-stepper__step-connector,
   .pf-v5-c-progress-stepper__step-main {
-    inline-size: 220px;
-    display: flex;
-    flex-direction: column;
-    row-gap: 1em;
+    inline-size: 250px;
   }
 }

web/src/components/core/ProgressReport.jsx

@@ -23,14 +23,14 @@ import React, { useEffect, useState } from "react";
 import {
   Card,
   CardBody,
+  Flex,
   Grid,
   GridItem,
-  ProgressStepper,
   ProgressStep,
+  ProgressStepper,
   Spinner,
-  Text,
-  TextVariants,
-  Flex,
+  Stack,
+  Truncate
 } from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
@@ -47,25 +47,27 @@ const Progress = ({ steps, step, firstStep, detail }) => {
 
     if (stepNumber < step.current) {
       properties.variant = "success";
-      properties.description = <Text component={TextVariants.p}>{_("Finished")}</Text>;
+      properties.description = <div>{_("Finished")}</div>;
     }
 
     if (properties.isCurrent) {
       properties.variant = "info";
       if (detail && detail.message !== "") {
         const { message, current, total } = detail;
         properties.description = (
-          <>
-            <Text component={TextVariants.p}>{_("In progress")}</Text>
-            <Text component={TextVariants.p}>{`${message} (${current}/${total})`}</Text>
-          </>
+          <Stack hasGutter>
+            <div>{_("In progress")}</div>
+            <div>
+              <Truncate content={`${message} (${current}/${total})`} trailingNumChars={12} position="middle" />
+            </div>
+          </Stack>
         );
       }
     }
 
     if (stepNumber > step.current) {
       properties.variant = "pending";
-      properties.description = <Text component={TextVariants.p}>{_("Pending")}</Text>;
+      properties.description = <div>{_("Pending")}</div>;
     }
 
     return properties;
@@ -133,7 +135,7 @@ function ProgressReport({ title, firstStep }) {
   return (
     <Center>
       <Grid hasGutter>
-        <GridItem sm={8} smOffset={2}>
+        <GridItem sm={10} smOffset={1}>
           <Card isPlain>
             <CardBody>
               <Flex direction={{ default: "column" }} rowGap={{ default: "rowGap2xl" }} alignItems={{ default: "alignItemsCenter" }}>

web/src/components/core/ProgressReport.test.jsx

@@ -89,7 +89,9 @@ describe("ProgressReport", () => {
         });
       });
 
-      await screen.findByText("Doing some partitioning (1/10)");
+      // NOTE: not finding the whole text because it is now split in two <span> because of PF/Truncate
+      await screen.findByText(/Doing some/);
+      await screen.findByText(/\(1\/10\)/);
     });
 
     it("shows the progress including the details from the software service", async () => {
@@ -108,7 +110,10 @@ describe("ProgressReport", () => {
         });
       });
 
-      await screen.findByText("Installing packages (495/500)");
+      // NOTE: not finding the whole "Intalling packages (495/500)" because it
+      // is now split in two <span> because of PF/Truncate
+      await screen.findByText(/Installing/);
+      await screen.findByText(/.*\(495\/500\)/);
     });
   });
 });