[web] Move each section to its own page

web/package/cockpit-d-installer.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Wed Mar  1 23:22:37 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- Create a dedicated page per section
+  (gh#yast/d-installer#443).
+
 -------------------------------------------------------------------
 Tue Feb 21 00:50:48 UTC 2023 - David Diaz <dgonzalez@suse.com>
 

web/src/assets/fonts.scss

@@ -103,7 +103,7 @@
 }
 
 /**
- * Roboto Mono is a monospaced addition to the Roboto type family, designec by Christina Robertson
+ * Roboto Mono is a monospaced addition to the Roboto type family, designed by Christina Robertson
  * and licensed under Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0
  *
  * Fonts files downloaded from Google Fonts https://fonts.google.com/ by using https://github.com/majodev/google-webfonts-helper

web/src/assets/styles/app.scss

@@ -7,7 +7,7 @@
   }
 }
 
-// Make proposal actiosn compact
+// Make proposal actions compact
 .proposal-actions li + li {
   margin-block-start: 0;
 }
@@ -56,10 +56,6 @@
   }
 }
 
-.installer-skeleton {
-  margin-block-start: 1em;
-}
-
 .collapsed {
   height: 0;
   overflow: hidden;
@@ -140,6 +136,8 @@ button.hidden-popover-button {
 }
 
 .danger-action {
+  --pf-c-dropdown__menu-item--Color: var(--pf-global--danger-color--200);
+
   color: var(--pf-global--danger-color--200);
 
   svg {

web/src/assets/styles/blocks.scss

@@ -16,6 +16,17 @@ section > svg {
 
 section > h2 {
   grid-area: title;
+
+  a {
+    text-decoration: underline;
+    text-decoration-thickness: 0.1em;
+    text-underline-offset: 0.2em;
+    transition: all 0.15s ease-in-out;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
 }
 
 section > .content {

web/src/assets/styles/composition.scss

@@ -16,6 +16,10 @@
   gap: var(--split-gutter);
 }
 
+.wrapped {
+  flex-wrap: wrap;
+}
+
 [data-state="reversed"] {
   flex-direction: row-reverse;
 }

web/src/assets/styles/layout.scss

@@ -39,7 +39,7 @@
 
 .wrapper > main {
   grid-area: content;
-  overflow-y: auto; // Sadly, only Firefox supports oerflow-block at this moment (Jan 2023)
+  overflow-y: auto; // Sadly, only Firefox supports overflow-block at this moment (Jan 2023)
   overflow-block: auto;
   padding: var(--spacer-medium);
 }

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

@@ -45,7 +45,7 @@
 }
 
 .pf-c-button.pf-m-link {
-  // Colors for buttons mofidiers
+  // Colors for buttons modifiers
   --pf-c-button--m-link--Color: var(--color-link);
   --pf-c-button--m-link--Color--hover: var(--color-link-hover);
   --pf-c-button--m-link--m-inline--hover--Color: var(--link-color-hover);
@@ -69,7 +69,13 @@
   block-size: 10rem;
 }
 
-// Fix single-line subprogress missaligment
+// Do not add block padding to empty state inside a table/column
+table td > .pf-c-empty-state {
+  --pf-c-empty-state--PaddingTop: 0;
+  --pf-c-empty-state--PaddingBottom: 0;
+}
+
+// Fix single-line sub-progress miss-alignment
 .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
   grid-row: 1/3;
   grid-column: 1/3;

web/src/assets/styles/utilities.scss

@@ -25,6 +25,10 @@
   text-align: center;
 }
 
+.bold {
+  font-weight: bold;
+}
+
 .icon-size-10 {
   width: 10px;
   height: 10px;

web/src/assets/styles/variables.scss

@@ -5,8 +5,8 @@
 
   --fw-light: 300;
   --fw-normal: 400;
-  --fw-medium: 400;
-  --fw-bold: 500;
+  --fw-medium: 500;
+  --fw-bold: 700;
 
   --fs-base: 14px;
   --fs-h1: 1.5rem;

web/src/client/dbus.js

@@ -158,7 +158,7 @@ class DBusClient {
    * @param {string} path - D-Bus path
    * @param {string} iface - D-Bus interface name
    * @param {ChangesHandler} handler - callback function
-   * @return {RemoveFn} function to desubscribe from the changes
+   * @return {RemoveFn} function to unsubscribe from the changes
    */
   onObjectChanged(path, iface, handler) {
     const { remove } = this.client.subscribe(

web/src/client/network/model.js

@@ -115,7 +115,7 @@ const SecurityProtocols = Object.freeze({
 /**
  * Returns an IPv4 configuration object
  *
- * Defaults values can be overriden
+ * Defaults values can be overridden
  *
  * @private
  * @param {object} props
@@ -137,7 +137,7 @@ const createIPv4 = ({ method, addresses, nameServers, gateway }) => {
 /**
  * Returns a connection object
  *
- * Defaults values can be overriden
+ * Defaults values can be overridden
  *
  * @param {object} options
  * @param {string} [options.id] - Connection ID

web/src/client/network/network_manager.js

@@ -370,7 +370,7 @@ class NetworkManagerAdapter {
    * Subscribes to network events
    *
    * Registers a handler for changes in /org/freedesktop/NetworkManager/ActiveConnection/*.
-   * The handler recevies a NetworkEvent object.
+   * The handler receives a NetworkEvent object.
    *
    * @private
    */

web/src/components/core/Em.jsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+// @ts-check
+
+import React from "react";
+import { Label } from "@patternfly/react-core";
+
+/**
+ * Helper component for emphasize wrapped children
+ * @component
+ *
+ * @param {object} props
+ * @param {React.ReactNode} [props.children] elements to be emphasized
+ */
+export default function Em({ children }) {
+  return (
+    <Label isCompact>
+      {children}
+    </Label>
+  );
+}

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+import { Em } from "~/components/core";
+
+describe("Em", () => {
+  it("wraps given children inside a compact PF4/Label", () => {
+    plainRender(<Em>Whatever</Em>);
+    const children = screen.getByText("Whatever");
+    const parent = children.closest("span.pf-c-label");
+    expect(parent.classList.contains("pf-m-compact")).toBe(true);
+  });
+});

web/src/components/core/Fieldset.jsx

@@ -36,7 +36,7 @@ import React from "react";
  *   </Fieldset>
  *
  * @param {object} props
- * @param {React.ReactNode} props.legend - The lengend
+ * @param {React.ReactNode} props.legend - The legend
  * @param {string} [props.className] - additionally CSS class names
  * @param {JSX.Element} [props.children] - the section content
  * @param {object} [props.otherProps] fieldset element attributes, see {@link https://html.spec.whatwg.org/#the-fieldset-element}

web/src/components/core/If.jsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+/**
+ * Simple component for simplifying conditional rendering.
+ * @component
+ *
+ * Borrowed from the old  Michael J. Ryan’s comment at https://github.com/facebook/jsx/issues/65#issuecomment-255484351
+ * See more options at https://blog.logrocket.com/react-conditional-rendering-9-methods/
+ *
+ * @param {object} props
+ * @param {boolean} props.condition
+ * @param {JSX.Element} [props.then=null] - the content to be rendered when the condition is true
+ * @param {JSX.Element} [props.else=null] - the content to be rendered when the condition is false
+ */
+export default function If ({
+  condition,
+  then: positive = null,
+  else: negative = null
+}) {
+  return condition ? positive : negative;
+}

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

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+import { If } from "~/components/core";
+
+describe("If", () => {
+  describe("when condition evaluates to true", () => {
+    describe("and 'then' prop was given", () => {
+      it("renders content given in 'then' prop", () => {
+        plainRender(<If condition={3 < 6} then="Hello World!" else="Goodbye World!" />);
+
+        screen.getByText("Hello World!");
+      });
+    });
+
+    describe("but 'then' prop was not given", () => {
+      it("renders nothing", () => {
+        const { container } = plainRender(<If condition={3 < 6} else="Goodbye World!" />);
+
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+  });
+
+  describe("when condition evaluates to false", () => {
+    describe("and 'else' prop was given", () => {
+      it("renders content given in 'else' prop", () => {
+        plainRender(<If condition={6 < 3} then="Hello World!" else="Goodbye World!" />);
+
+        screen.getByText("Goodbye World!");
+      });
+    });
+
+    describe("but 'else' prop was not given", () => {
+      it("renders nothing", () => {
+        const { container } = plainRender(<If condition={6 < 3} then="Hello World!" />);
+
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+  });
+});

web/src/components/core/LogsButton.jsx

@@ -30,7 +30,7 @@ const FILENAME = "y2logs.tar.xz";
 const FILETYPE = "application/x-xz";
 
 /**
- * Button for collecting and donwloading YaST logs
+ * Button for collecting and downloading YaST logs
  *
  * @component
  *