Merge pull request #551 from KKoukiou/INSTALLER-4085

Parse new 'hidden_screen' configuration file options
rhinstaller · Jan 14, 2025 · 6b8450b · 6b8450b
2 parents 12619ae + 41af498
commit 6b8450b
Show file tree

Hide file tree

Showing 37 changed files with 238 additions and 174 deletions.
diff --git a/src/components/AnacondaPage.jsx b/src/components/AnacondaPage.jsx
@@ -14,10 +14,24 @@
  * You should have received a copy of the GNU Lesser General Public License
  * along with This program; If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { cloneElement, useEffect, useRef, useState } from "react";
+import cockpit from "cockpit";
+
+import React, { cloneElement, useContext, useEffect, useRef, useState } from "react";
 import { Alert, Stack, Title } from "@patternfly/react-core";
 
-export const AnacondaPage = ({ children, isFormDisabled, setIsFormDisabled, step, title, usePageInit }) => {
+import { OsReleaseContext } from "../contexts/Common.jsx";
+
+const _ = cockpit.gettext;
+
+export const AnacondaPage = ({
+    children,
+    isFirstScreen,
+    isFormDisabled,
+    setIsFormDisabled,
+    step,
+    title,
+    usePageInit,
+}) => {
     const [stepNotification, setStepNotification] = useState();
     const [showPage, setShowPage] = useState(!isFormDisabled);
     const showPageRef = useRef(showPage);
@@ -43,9 +57,11 @@ export const AnacondaPage = ({ children, isFormDisabled, setIsFormDisabled, step
         return null;
     }
 
+    const titleElem = isFirstScreen ? <InitialPageTitle /> : title;
+
     return (
         <Stack hasGutter>
-            {title && <Title headingLevel="h2">{title}</Title>}
+            {titleElem && <Title headingLevel="h2">{titleElem}</Title>}
             {stepNotification?.step === step &&
                 <Alert
                   id={step + "-step-notification"}
@@ -57,3 +73,9 @@ export const AnacondaPage = ({ children, isFormDisabled, setIsFormDisabled, step
         </Stack>
     );
 };
+
+const InitialPageTitle = () => {
+    const osRelease = useContext(OsReleaseContext);
+
+    return cockpit.format(_("Welcome. Let's install $0 now."), osRelease.REDHAT_SUPPORT_PRODUCT);
+};
diff --git a/src/components/AnacondaWizard.jsx b/src/components/AnacondaWizard.jsx
@@ -27,7 +27,7 @@ import {
     WizardStep,
 } from "@patternfly/react-core";
 
-import { FooterContext, StorageContext, SystemTypeContext } from "../contexts/Common.jsx";
+import { FooterContext, StorageContext, SystemTypeContext, UserInterfaceContext } from "../contexts/Common.jsx";
 
 import { AnacondaPage } from "./AnacondaPage.jsx";
 import { AnacondaWizardFooter } from "./AnacondaWizardFooter.jsx";
@@ -42,6 +42,7 @@ export const AnacondaWizard = ({ currentStepId, dispatch, isFetching, onCritFail
     const [isFormValid, setIsFormValid] = useState(false);
     const { storageScenarioId } = useContext(StorageContext);
     const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";
+    const userInterfaceConfig = useContext(UserInterfaceContext);
     const { path } = usePageLocation();
 
     const componentProps = {
@@ -53,7 +54,7 @@ export const AnacondaWizard = ({ currentStepId, dispatch, isFetching, onCritFail
         showStorage,
     };
 
-    const stepsOrder = getSteps(isBootIso, storageScenarioId);
+    const stepsOrder = getSteps(userInterfaceConfig, isBootIso, storageScenarioId);
     const firstStepId = stepsOrder.filter(s => !s.isHidden)[0].id;
 
     const createSteps = (stepsOrder, componentProps) => {
@@ -76,8 +77,9 @@ export const AnacondaWizard = ({ currentStepId, dispatch, isFetching, onCritFail
                           setIsFormDisabled={setIsFormDisabled}
                           step={s.id}
                           title={s.title}
+                          isFirstScreen={s.isFirstScreen}
                           usePageInit={s.usePageInit}>
-                            <s.component {...componentProps} />
+                            <s.component {...componentProps} isFirstScreen={s.isFirstScreen} />
                         </AnacondaPage>
                     ),
                     ...stepProps

diff --git a/src/components/installation/InstallationProgress.jsx b/src/components/installation/InstallationProgress.jsx
@@ -46,27 +46,27 @@ import "./InstallationProgress.scss";
 
 const _ = cockpit.gettext;
 const N_ = cockpit.noop;
-const idPrefix = "installation-progress";
+const SCREEN_ID = "anaconda-screen-progress";
 
 const progressSteps = [
     {
         description: _("Storage configuration: Storage is currently being configured."),
-        id: "installation-progress-step-storage",
+        id: SCREEN_ID + "-step-storage",
         title: _("Storage configuration"),
     },
     {
         description: _("Software installation: Storage configuration complete. The software is now being installed onto your device."),
-        id: "installation-progress-step-payload",
+        id: SCREEN_ID + "-step-payload",
         title: _("Software installation"),
     },
     {
         description: _("System configuration: Software installation complete. The system is now being configured."),
-        id: "installation-progress-step-configuration",
+        id: SCREEN_ID + "-step-configuration",
         title: _("System configuration"),
     },
     {
         description: _("Finalizing: The system configuration is complete. Finalizing installation may take a few moments."),
-        id: "installation-progress-step-boot-loader",
+        id: SCREEN_ID + "-step-boot-loader",
         title: _("Finalization"),
     },
 ];
@@ -160,7 +160,7 @@ const InstallationProgress = ({ onCritFail }) => {
     }
 
     return (
-        <Flex direction={{ default: "column" }} className={idPrefix + "-status " + idPrefix + "-status-" + status}>
+        <Flex direction={{ default: "column" }} className={SCREEN_ID + "-status " + SCREEN_ID + "-status-" + status}>
             <EmptyStatePanel
               icon={icon}
               loading={!icon}
@@ -200,7 +200,7 @@ const InstallationProgress = ({ onCritFail }) => {
                                       return (
                                           <ProgressStep
                                             aria-label={ariaLabel}
-                                            id={idPrefix + "-step-" + index}
+                                            id={SCREEN_ID + "-step-" + index}
                                             isCurrent={index === currentProgressStep}
                                             icon={phaseIcon}
                                             titleId={progressStep.id}
@@ -240,7 +240,7 @@ const InstallationProgress = ({ onCritFail }) => {
 export class Page {
     constructor () {
         this.component = InstallationProgress;
-        this.id = "installation-progress";
+        this.id = SCREEN_ID;
         this.isFinal = true;
     }
 }
diff --git a/src/components/installation/InstallationProgress.scss b/src/components/installation/InstallationProgress.scss
@@ -2,7 +2,7 @@
     width: 100%;
 }
 
-.installation-progress-status {
+.anaconda-screen-progress-status {
     &-success .pf-v5-c-empty-state__icon {
         color: var(--pf-v5-global--success-color--100);
     }

diff --git a/src/components/localization/InstallationLanguage.jsx b/src/components/localization/InstallationLanguage.jsx
@@ -45,11 +45,12 @@ import {
     setLangCookie
 } from "../../helpers/language.js";
 
-import { LanguageContext, OsReleaseContext } from "../../contexts/Common.jsx";
+import { LanguageContext } from "../../contexts/Common.jsx";
 
 import "./InstallationLanguage.scss";
 
 const _ = cockpit.gettext;
+const SCREEN_ID = "anaconda-screen-language";
 
 const getLanguageEnglishName = lang => lang["english-name"].v;
 const getLanguageNativeName = lang => lang["native-name"].v;
@@ -82,7 +83,6 @@ class LanguageSelector extends React.Component {
 
     renderOptions (filter) {
         const { commonLocales, languages } = this.props;
-        const idPrefix = this.props.idPrefix;
 
         const filtered = [];
         const filterLow = filter.toLowerCase();
@@ -114,7 +114,7 @@ class LanguageSelector extends React.Component {
 
             return (
                 <MenuItem
-                  id={`${idPrefix}-${prefix}-${getLocaleId(locale).split(".UTF-8")[0]}`}
+                  id={`${SCREEN_ID}-${prefix}-${getLocaleId(locale).split(".UTF-8")[0]}`}
                   isSelected={isSelected}
                   key={`${prefix}-${getLocaleId(locale)}`}
                   itemId={getLocaleId(locale)}
@@ -159,7 +159,7 @@ class LanguageSelector extends React.Component {
                 <React.Fragment key="group-common-languages">
                     <MenuGroup
                       label={_("Suggested languages")}
-                      id={idPrefix + "-common-languages"}
+                      id={SCREEN_ID + "-common-languages"}
                       labelHeadingLevel="h3"
                     >
                         {suggestedItems}
@@ -184,7 +184,7 @@ class LanguageSelector extends React.Component {
             filtered.push(
                 <MenuGroup
                   label={_("Additional languages")}
-                  id={`${idPrefix}-additional-languages`}
+                  id={`${SCREEN_ID}-additional-languages`}
                   labelHeadingLevel="h3"
                   key="group-additional-languages"
                 >
@@ -197,7 +197,7 @@ class LanguageSelector extends React.Component {
         if (filter && filtered.length === 0) {
             return [
                 <MenuItem
-                  id={`${idPrefix}-search-no-result`}
+                  id={`${SCREEN_ID}-search-no-result`}
                   isDisabled
                   key="no-result"
                 >
@@ -256,7 +256,7 @@ class LanguageSelector extends React.Component {
 
         return (
             <>
-                <TextInputGroup className="installation-language-search">
+                <TextInputGroup className="anaconda-screen-language-search">
                     <TextInputGroupMain
                       icon={<SearchIcon />}
                       value={this.state.search}
@@ -276,8 +276,8 @@ class LanguageSelector extends React.Component {
                     )}
                 </TextInputGroup>
                 <Menu
-                  className="installation-language-menu"
-                  id={this.props.idPrefix + "-language-menu"}
+                  className="anaconda-screen-language-menu"
+                  id={SCREEN_ID + "-language-menu"}
                   isScrollable
                   isPlain
                   onSelect={handleOnSelect}
@@ -294,7 +294,7 @@ class LanguageSelector extends React.Component {
     }
 }
 
-const InstallationLanguage = ({ idPrefix, setIsFormValid, setStepNotification }) => {
+const InstallationLanguage = ({ setIsFormValid, setStepNotification }) => {
     const { commonLocales, language, languages } = useContext(LanguageContext);
 
     useEffect(() => {
@@ -312,7 +312,6 @@ const InstallationLanguage = ({ idPrefix, setIsFormValid, setStepNotification })
                 <FormGroup>
                     <LanguageSelector
                       id="language-selector"
-                      idPrefix={idPrefix}
                       languages={languages}
                       commonLocales={commonLocales}
                       language={language}
@@ -326,17 +325,10 @@ const InstallationLanguage = ({ idPrefix, setIsFormValid, setStepNotification })
     );
 };
 
-const PageTitle = () => {
-    const osRelease = useContext(OsReleaseContext);
-    return cockpit.format(_("Welcome to $0"), osRelease.NAME);
-};
-
 export class Page {
-    constructor (isBootIso) {
+    constructor () {
         this.component = InstallationLanguage;
-        this.id = "installation-language";
-        this.isHidden = !isBootIso;
+        this.id = SCREEN_ID;
         this.label = _("Welcome");
-        this.title = <PageTitle />;
     }
 }
diff --git a/src/components/localization/InstallationLanguage.scss b/src/components/localization/InstallationLanguage.scss
@@ -1,16 +1,16 @@
-.installation-language-menu.pf-v5-c-menu.pf-m-scrollable {
+.anaconda-screen-language-menu.pf-v5-c-menu.pf-m-scrollable {
     max-width: 400px;
     // heading: 84, footer: 44, content (about from header): 158, necessary padding underneath: 8px,
     // 50px magic number
     --pf-v5-c-menu__content--MaxHeight: calc(100vh - 84px - 44px - 158px - 8px - 50px);
 }
 
-.installation-language-search {
+.anaconda-screen-language-search {
     margin-bottom: var(--pf-v5-global--spacer--sm);
     max-width: 400px;
 }
 
-.installation-language-menu {
+.anaconda-screen-language-menu {
     border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }
 
@@ -21,7 +21,7 @@ to prevent surprises elsewhere. However, if we use the widget elsewhere,
 it would also need this fix, so this is definitely a fix for PF
 overrides, not a local fix.
 */
-#installation-language-language-menu {
+#anaconda-screen-language-language-menu {
   // Oddly, the spacing here isn't consistent with the reference on the website;
   // it should be balanced on the top and bottom, not all just on the top
   .pf-v5-c-menu__group-title {

diff --git a/src/components/review/Hostname.jsx b/src/components/review/Hostname.jsx
@@ -38,7 +38,7 @@ import { setHostname } from "../../apis/network.js";
 import { NetworkContext } from "../../contexts/Common.jsx";
 
 const _ = cockpit.gettext;
-const idPrefix = "installation-review";
+const SCREEN_ID = "anaconda-screen-review";
 
 const ChangeHostname = ({ initHostname }) => {
     const [currentHostname, setCurrentHostname] = useState(initHostname);
@@ -162,7 +162,7 @@ export const HostnameRow = () => {
             <DescriptionListTerm>
                 {_("Hostname")}
             </DescriptionListTerm>
-            <DescriptionListDescription id={idPrefix + "-target-system-hostname"}>
+            <DescriptionListDescription id={SCREEN_ID + "-target-system-hostname"}>
                 <Flex
                   spaceItems={{ default: "spaceItemsMd" }}
                   alignItems={{ default: "alignItemsCenter" }}>