Merge pull request #4922 from KKoukiou/webui-redesign

webui: new design for the storage entry page
rhinstaller · Jul 24, 2023 · 11dc7d0 · 11dc7d0
2 parents 639b8a2 + 7241fb5
commit 11dc7d0
Show file tree

Hide file tree

Showing 16 changed files with 517 additions and 1,089 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);
 
@@ -90,7 +87,7 @@ export const Application = () => {
             setCriticalError
         );
 
-        readOsRelease().then(osRelease => setPrettyName(osRelease.PRETTY_NAME));
+        readOsRelease().then(osRelease => setOsRelease(osRelease));
     }, [dispatch]);
 
     const onAddNotification = (notificationProps) => {
@@ -104,23 +101,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 === undefined || !prettyName || !storeInitilized)) {
+    if (!criticalError && (!address || !conf || beta === undefined || !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
@@ -163,13 +152,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>
@@ -180,13 +168,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