webui: new design for welcome page in live image

Re-approach the installation method and target screen, by merging these into one single step acting as first step in the live os media. Remove all helper drawers and put the compact re-formated text inline. testStoragePartitions was deleted as it's now obsolete. It was testing the local disks table rows expanded content.
rhinstaller · Jul 20, 2023 · 697ab86 · 697ab86
1 parent 66eb312
commit 697ab86
Show file tree

Hide file tree

Showing 15 changed files with 515 additions and 1,101 deletions.
diff --git a/ui/webui/src/components/AnacondaWizard.jsx b/ui/webui/src/components/AnacondaWizard.jsx
@@ -33,8 +33,8 @@ import {
     WizardContextConsumer,
 } from "@patternfly/react-core";
 
-import { InstallationDestination } from "./storage/InstallationDestination.jsx";
-import { StorageConfiguration, getScenario, getDefaultScenario } from "./storage/StorageConfiguration.jsx";
+import { InstallationMethod } from "./storage/InstallationMethod.jsx";
+import { getScenario, getDefaultScenario } from "./storage/StorageConfiguration.jsx";
 import { CustomMountPoint } from "./storage/CustomMountPoint.jsx";
 import { DiskEncryption, StorageEncryptionState } from "./storage/DiskEncryption.jsx";
 import { InstallationLanguage } from "./localization/InstallationLanguage.jsx";
@@ -49,7 +49,7 @@ import {
 
 const _ = cockpit.gettext;
 
-export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationData, onAddErrorNotification, toggleContextHelp, hideContextHelp, title, conf }) => {
+export const AnacondaWizard = ({ dispatch, isBootIso, osRelease, storageData, localizationData, onAddErrorNotification, title, conf }) => {
     const [isFormValid, setIsFormValid] = useState(true);
     const [stepNotification, setStepNotification] = useState();
     const [isInProgress, setIsInProgress] = useState(false);
@@ -79,21 +79,16 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
                 label: _("Welcome"),
             }]
             : []),
-        // TODO: rename InstallationDestination component and its file ?
         {
-            id: "installation-destination",
-            label: _("Installation destination"),
+            component: InstallationMethod,
+            data: { deviceData: storageData.devices, diskSelection: storageData.diskSelection, dispatch },
+            id: "installation-method",
+            label: _("Installation method"),
+        },
+        {
+            id: "disk-configuration",
+            label: _("Disk configuration"),
             steps: [{
-                component: InstallationDestination,
-                data: { deviceData: storageData.devices, diskSelection: storageData.diskSelection, dispatch },
-                id: "storage-devices",
-                label: _("Storage devices")
-            }, {
-                component: StorageConfiguration,
-                data: { deviceData: storageData.devices, diskSelection: storageData.diskSelection },
-                id: "storage-configuration",
-                label: _("Storage configuration")
-            }, {
                 component: CustomMountPoint,
                 data: { deviceData: storageData.devices, diskSelection: storageData.diskSelection, partitioningData: lastPartitioning, dispatch },
                 id: "custom-mountpoint",
@@ -142,7 +137,7 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
     const flattenedStepsIds = getFlattenedStepsIds(stepsOrder);
 
     const { path } = usePageLocation();
-    const currentStepId = isBootIso ? path[0] || "installation-language" : path[0] || "storage-devices";
+    const currentStepId = isBootIso ? path[0] || "installation-language" : path[0] || "installation-method";
 
     const isFinishedStep = (stepId) => {
         const stepIdx = flattenedStepsIds.findIndex(s => s === stepId);
@@ -172,13 +167,13 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
                           idPrefix={s.id}
                           setIsFormValid={setIsFormValid}
                           onAddErrorNotification={onAddErrorNotification}
-                          toggleContextHelp={toggleContextHelp}
                           stepNotification={stepNotification}
                           isInProgress={isInProgress}
                           storageEncryption={storageEncryption}
                           setStorageEncryption={setStorageEncryption}
                           storageScenarioId={storageScenarioId}
                           isBootIso={isBootIso}
+                          osRelease={osRelease}
                           setStorageScenarioId={(scenarioId) => {
                               window.sessionStorage.setItem("storage-scenario-id", scenarioId);
                               setStorageScenarioId(scenarioId);
@@ -201,7 +196,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
         setIsFormValid(true);
 
         cockpit.location.go([newStep.id]);
-        hideContextHelp();
     };
 
     return (
@@ -316,7 +310,7 @@ const Footer = ({
             <WizardContextConsumer>
                 {({ activeStep, onNext, onBack }) => {
                     const isFirstScreen = (
-                        activeStep.id === "installation-language" || (activeStep.id === "storage-devices" && !isBootIso)
+                        activeStep.id === "installation-language" || (activeStep.id === "installation-method" && !isBootIso)
                     );
                     const nextButtonText = (
                         activeStep.id === "installation-review"
@@ -344,7 +338,7 @@ const Footer = ({
                               setQuitWaitsConfirmation={setQuitWaitsConfirmation}
                               isBootIso={isBootIso}
                             />}
-                            {activeStep.id === "storage-devices" && !isFormValid &&
+                            {activeStep.id === "installation-method" && !isFormValid &&
                                 <HelperText id="next-helper-text">
                                     <HelperTextItem
                                       variant="indeterminate">

diff --git a/ui/webui/src/components/HelpDrawer.jsx b/ui/webui/src/components/HelpDrawer.jsx
diff --git a/ui/webui/src/components/app.jsx b/ui/webui/src/components/app.jsx
@@ -29,7 +29,6 @@ import { WithDialogs } from "dialogs.jsx";
 import { AddressContext, LanguageContext } from "./Common.jsx";
 import { AnacondaHeader } from "./AnacondaHeader.jsx";
 import { AnacondaWizard } from "./AnacondaWizard.jsx";
-import { HelpDrawer } from "./HelpDrawer.jsx";
 import { CriticalError } from "./Error.jsx";
 
 import { BossClient } from "../apis/boss.js";
@@ -48,9 +47,7 @@ export const Application = () => {
     const [conf, setConf] = useState();
     const [language, setLanguage] = useState();
     const [notifications, setNotifications] = useState({});
-    const [isHelpExpanded, setIsHelpExpanded] = useState(false);
-    const [helpContent, setHelpContent] = useState("");
-    const [prettyName, setPrettyName] = useState("");
+    const [osRelease, setOsRelease] = useState("");
     const [state, dispatch] = useReducerWithThunk(reducer, initialState);
     const [storeInitilized, setStoreInitialized] = useState(false);
 
@@ -89,7 +86,7 @@ export const Application = () => {
             setCriticalError
         );
 
-        readOsRelease().then(osRelease => setPrettyName(osRelease.PRETTY_NAME));
+        readOsRelease().then(osRelease => setOsRelease(osRelease));
     }, [dispatch]);
 
     const onAddNotification = (notificationProps) => {
@@ -103,23 +100,15 @@ export const Application = () => {
         onAddNotification({ title: ex.name, message: ex.message, variant: "danger" });
     };
 
-    const toggleContextHelp = (content) => {
-        if (!isHelpExpanded) {
-            setHelpContent(content);
-        }
-        setIsHelpExpanded(!isHelpExpanded);
-    };
-
     // Postpone rendering anything until we read the dbus address and the default configuration
-    if (!criticalError && (!address || !conf || !beta || !prettyName || !storeInitilized)) {
+    if (!criticalError && (!address || !conf || !beta || !osRelease || !storeInitilized)) {
         console.debug("Loading initial data...");
         return null;
     }
 
     // On live media rebooting the system will actually shut it off
     const isBootIso = conf?.["Installation System"].type === "BOOT_ISO";
-
-    const title = cockpit.format("$0 installation", prettyName);
+    const title = cockpit.format("$0 installation", osRelease.PRETTY_NAME);
 
     const page = (
         criticalError
@@ -162,13 +151,12 @@ export const Application = () => {
                             <AnacondaWizard
                               isBootIso={isBootIso}
                               onAddErrorNotification={onAddErrorNotification}
-                              toggleContextHelp={toggleContextHelp}
-                              hideContextHelp={() => setIsHelpExpanded(false)}
                               title={title}
                               storageData={state.storage}
                               localizationData={state.localization}
                               dispatch={dispatch}
                               conf={conf}
+                              osRelease={osRelease}
                             />
                         </WithDialogs>
                     </AddressContext.Provider>
@@ -179,13 +167,7 @@ export const Application = () => {
     return (
         <WithDialogs>
             <LanguageContext.Provider value={{ language, setLanguage }}>
-                <HelpDrawer
-                  isExpanded={isHelpExpanded}
-                  setIsExpanded={setIsHelpExpanded}
-                  helpContent={helpContent}
-                >
-                    {page}
-                </HelpDrawer>
+                {page}
             </LanguageContext.Provider>
         </WithDialogs>
     );

diff --git a/ui/webui/src/components/storage/CustomMountPoint.jsx b/ui/webui/src/components/storage/CustomMountPoint.jsx
@@ -123,7 +123,7 @@ const MountpointCheckbox = ({ reformat, isRootMountPoint, handleCheckReFormat, p
     );
 };
 
-export const CustomMountPoint = ({ deviceData, diskSelection, partitioningData, dispatch, idPrefix, setIsFormValid, onAddErrorNotification, toggleContextHelp, stepNotification }) => {
+export const CustomMountPoint = ({ deviceData, diskSelection, partitioningData, dispatch, idPrefix, setIsFormValid, onAddErrorNotification, stepNotification }) => {
     const [creatingPartitioning, setCreatingPartitioning] = useState(true);
     const [showUnlockDialog, setShowUnlockDialog] = useState(false);
 

diff --git a/ui/webui/src/components/storage/HelpAutopartOptions.jsx b/ui/webui/src/components/storage/HelpAutopartOptions.jsx
@@ -1,42 +1,9 @@
-import React from "react";
 import cockpit from "cockpit";
 
-import {
-    Text,
-    TextContent,
-    TextVariants,
-} from "@patternfly/react-core";
-
 const _ = cockpit.gettext;
 
-export const helpEraseAll = (
-    <TextContent>
-        <Text component={TextVariants.p}>
-            {_("Removes all partitions on the selected devices, " +
-            "which includes partitions created by other operating systems.")}
-        </Text>
-
-        <Text component={TextVariants.p}>
-            {_("This option removes data from the selected devices, " +
-            "so make sure you have backed up your data.")}
-        </Text>
-    </TextContent>
-);
+export const helpEraseAll = _("Remove all partitions on the selected devices, including existing operating systems. Make sure you have backed up your data.");
 
-export const helpUseFreeSpace = (
-    <TextContent>
-        <Text component={TextVariants.p}>
-            {_("Retains your current data and partitions and uses " +
-            "only the unpartitioned space on the selected devices, " +
-            "assuming you have enough free space available.")}
-        </Text>
-    </TextContent>
-);
+export const helpUseFreeSpace = _("Keeps current disk layout and uses only available space.");
 
-export const helpCustomMountPoint = (
-    <TextContent>
-        <Text component={TextVariants.p}>
-            {_("This option requires that the selected device has formated partitions.")}
-        </Text>
-    </TextContent>
-);
+export const helpCustomMountPoint = _("This option requires that the selected device has formated partitions.");
diff --git a/ui/webui/src/components/storage/HelpStorageOptions.jsx b/ui/webui/src/components/storage/HelpStorageOptions.jsx