fix(web): add status information to progress reporting (#1388)

- Improve progress reporting**
- Avoid "resetting" the progress icon.
- web: adjust progress report styles

web/package/agama-web-ui.changes

@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Wed Jun 26 14:04:53 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
+
+- Add status information to each steps in the progress report
+  and do not reset the progress icon animation
+  (gh#openSUSE/agama#1373 and gh#openSUSE/agama#1388).
+
 -------------------------------------------------------------------
 Wed Jun 26 13:45:36 UTC 2024 - David Diaz <[email protected]>
 

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

@@ -334,3 +334,12 @@ table td > .pf-v5-c-empty-state {
     1em + var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight)
   );
 }
+
+.pf-v5-c-progress-stepper.progress-report {
+  .pf-v5-c-progress-stepper__step-main {
+    inline-size: 220px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 1em;
+  }
+}

web/src/components/core/ProgressReport.jsx

@@ -28,41 +28,51 @@ import {
   ProgressStepper,
   ProgressStep,
   Spinner,
-  Stack,
+  Text,
+  TextVariants,
+  Flex,
 } from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
 import { Center } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 
 const Progress = ({ steps, step, firstStep, detail }) => {
-  const variant = (index) => {
-    if (index < step.current) return "success";
-    if (index === step.current) return "info";
-    if (index > step.current) return "pending";
-  };
-
   const stepProperties = (stepNumber) => {
     const properties = {
-      variant: variant(stepNumber),
       isCurrent: stepNumber === step.current,
       id: `step-${stepNumber}-id`,
       titleId: `step-${stepNumber}-title`,
     };
 
+    if (stepNumber < step.current) {
+      properties.variant = "success";
+      properties.description = <Text component={TextVariants.p}>{_("Finished")}</Text>;
+    }
+
     if (properties.isCurrent) {
-      properties.icon = <Spinner />;
+      properties.variant = "info";
       if (detail && detail.message !== "") {
         const { message, current, total } = detail;
-        properties.description = `${message} (${current}/${total})`;
+        properties.description = (
+          <>
+            <Text component={TextVariants.p}>{_("In progress")}</Text>
+            <Text component={TextVariants.p}>{`${message} (${current}/${total})`}</Text>
+          </>
+        );
       }
     }
 
+    if (stepNumber > step.current) {
+      properties.variant = "pending";
+      properties.description = <Text component={TextVariants.p}>{_("Pending")}</Text>;
+    }
+
     return properties;
   };
 
   return (
-    <ProgressStepper isCenterAligned>
+    <ProgressStepper isCenterAligned className="progress-report">
       {firstStep && (
         <ProgressStep key="initial" variant="success">
           {firstStep}
@@ -126,12 +136,13 @@ function ProgressReport({ title, firstStep }) {
         <GridItem sm={8} smOffset={2}>
           <Card isPlain>
             <CardBody>
-              <Stack hasGutter>
+              <Flex direction={{ default: "column" }} rowGap={{ default: "rowGap2xl" }} alignItems={{ default: "alignItemsCenter" }}>
+                <Spinner size="xl" />
                 <h1 id="progress-title" style={{ textAlign: "center" }}>
                   {progressTitle}
                 </h1>
                 <Content />
-              </Stack>
+              </Flex>
             </CardBody>
           </Card>
         </GridItem>