[web] Improve product section

web/src/components/overview/ProductSection.jsx

@@ -21,17 +21,35 @@
 
 import React, { useEffect, useState } from "react";
 import { Text } from "@patternfly/react-core";
+import { sprintf } from "sprintf-js";
+
 import { toValidationError, useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
-import { If, Section, SectionSkeleton } from "~/components/core";
+import { Section, SectionSkeleton } from "~/components/core";
 import { _ } from "~/i18n";
 
 const errorsFrom = (issues) => {
  const errors = issues.filter(i => i.severity === "error");
  return errors.map(toValidationError);
 };
 
+const Content = ({ isLoading = false }) => {
+ const { registration, selectedProduct } = useProduct();
+
+ if (isLoading) return <SectionSkeleton numRows={1} />;
+
+ const isRegistered = registration?.code !== null;
+ const productName = selectedProduct?.name;
+
+ return (
+ <Text>
+ {/* TRANSLATORS: %s is replaced by a product name (e.g., SUSE ALP-Dolomite) */}
+ {isRegistered ? sprintf(_("%s (registered)"), productName) : productName}
+ </Text>
+ );
+};
+
 export default function ProductSection() {
  const { software } = useInstallerClient();
  const [issues, setIssues] = useState([]);
@@ -43,20 +61,6 @@ export default function ProductSection() {
  return software.product.onIssuesChange(setIssues);
  }, [cancellablePromise, setIssues, software]);
 
- const Content = ({ isLoading = false }) => {
- return (
- <If
- condition={isLoading}
- then={<SectionSkeleton numRows={1} />}
- else={
- <Text>
- {selectedProduct?.name}
- </Text>
- }
- />
- );
- };
-
  const isLoading = !selectedProduct;
  const errors = isLoading ? [] : errorsFrom(issues);
 

web/src/components/overview/ProductSection.test.jsx

@@ -25,7 +25,8 @@ import { installerRender } from "~/test-utils";
 import { createClient } from "~/client";
 import { ProductSection } from "~/components/overview";
 
-let mockProduct;
+let mockRegistration;
+let mockSelectedProduct;
 
 const mockIssue = { severity: "error", description: "Fake issue" };
 
@@ -35,12 +36,16 @@ jest.mock("~/components/core/SectionSkeleton", () => () => <div>Loading</div>);
 
 jest.mock("~/context/product", () => ({
  ...jest.requireActual("~/context/product"),
- useProduct: () => ({ selectedProduct: mockProduct })
+ useProduct: () => ({
+ registration: mockRegistration,
+ selectedProduct: mockSelectedProduct
+ })
 }));
 
 beforeEach(() => {
  const issues = [mockIssue];
- mockProduct = { name: "Test Product" };
+ mockRegistration = {};
+ mockSelectedProduct = { name: "Test Product" };
 
  createClient.mockImplementation(() => {
  return {
@@ -57,7 +62,15 @@ beforeEach(() => {
 it("shows the product name", async () => {
  installerRender(<ProductSection />);
 
- await screen.findByText("Test Product");
+ await screen.findByText(/Test Product/);
+ await waitFor(() => expect(screen.queryByText("registered")).not.toBeInTheDocument());
+});
+
+it("indicates whether the product is registered", async () => {
+ mockRegistration = { code: "111222" };
+ installerRender(<ProductSection />);
+
+ await screen.findByText(/Test Product \(registered\)/);
 });
 
 it("shows the error", async () => {
@@ -76,7 +89,7 @@ it("does not show warnings", async () => {
 
 describe("when no product is selected", () => {
  beforeEach(() => {
- mockProduct = undefined;
+ mockSelectedProduct = undefined;
  });
 
  it("shows the skeleton", async () => {