agama-project · dgdavid · Mar 21, 2022
diff --git a/web/src/DBusError.jsx b/web/src/DBusError.jsx
@@ -22,14 +22,14 @@
 import React from "react";
 import { Button, Title, EmptyState, EmptyStateIcon, EmptyStateBody } from "@patternfly/react-core";
 
-import Layout from "./Layout";
-import Center from "./Center";
-
 import {
   EOS_ANNOUNCEMENT as SectionIcon,
   EOS_ENDPOINTS_DISCONNECTED as DisconnectionIcon
 } from "eos-icons-react";
 
+import Center from "./Center";
+import { SectionTitle } from "./layout/SectionTitle";
+
 // TODO: an example
 const ReloadAction = () => (
   <Button isLarge variant="primary" onClick={() => location.reload()}>
@@ -39,19 +39,18 @@ const ReloadAction = () => (
 
 function DBusError() {
   return (
-    <Layout sectionTitle="D-Bus Error" SectionIcon={SectionIcon} FooterActions={ReloadAction}>
-      <Center>
-        <EmptyState>
-          <EmptyStateIcon icon={DisconnectionIcon} />
-          <Title headingLevel="h4" size="lg">
-            Cannot connect to D-Bus
-          </Title>
-          <EmptyStateBody>
-            Could not connect to the D-Bus service. Please, check whether it is running.
-          </EmptyStateBody>
-        </EmptyState>
-      </Center>
-    </Layout>
+    <Center>
+      <SectionTitle>D-Bus error</SectionTitle>
+      <EmptyState>
+        <EmptyStateIcon icon={DisconnectionIcon} />
+        <Title headingLevel="h4" size="lg">
+          Cannot connect to D-Bus
+        </Title>
+        <EmptyStateBody>
+          Could not connect to the D-Bus service. Please, check whether it is running.
+        </EmptyStateBody>
+      </EmptyState>
+    </Center>
   );
 }
 

diff --git a/web/src/InstallationFinished.jsx b/web/src/InstallationFinished.jsx
@@ -30,15 +30,16 @@ import {
   EmptyStateSecondaryActions
 } from "@patternfly/react-core";
 
-import Layout from "./Layout";
-import Center from "./Center";
 import { useInstallerClient } from "./context/installer";
 
 import {
   EOS_TASK_ALT as InstallationFinishedIcon,
   EOS_CHECK_CIRCLE as SectionIcon
 } from "eos-icons-react";
 
+import Center from "./Center";
+import { SectionTitle } from "./layout/SectionTitle";
+
 const Actions = ({ onRestart }) => (
   <Button isLarge variant="secondary" onClick={onRestart}>
     Restart Installation
@@ -50,35 +51,30 @@ function InstallationFinished() {
   const onRestartAction = () => client.manager.startProbing();
 
   return (
-    <Layout
-      sectionTitle="Installation Finished"
-      SectionIcon={SectionIcon}
-      FooterActions={() => <Actions onRestart={onRestartAction} />}
-    >
-      <Center>
-        <EmptyState>
-          <EmptyStateIcon icon={InstallationFinishedIcon} className="success-icon" />
-          <Title headingLevel="h2" size="4xl">
-            Congratulations!
-          </Title>
-          <EmptyStateBody className="pf-c-content">
-            <div>
-              <Text>The installation on your machine is complete.</Text>
-              <Text>
-                At this point you can 'Restart installation' to continue playing with D-Installer or
-                manually reboot the machine to log in to the new system.
-              </Text>
-              <Text>Have a lot of fun! Your openSUSE Development Team.</Text>
-            </div>
-            <EmptyStateSecondaryActions>
-              <Button component="a" href="https://www.opensuse.org" target="_blank" variant="link">
-                www.opensuse.org
-              </Button>
-            </EmptyStateSecondaryActions>
-          </EmptyStateBody>
-        </EmptyState>
-      </Center>
-    </Layout>
+    <Center>
+      <SectionTitle>Installation Finished</SectionTitle>
+      <EmptyState>
+        <EmptyStateIcon icon={InstallationFinishedIcon} className="success-icon" />
+        <Title headingLevel="h2" size="4xl">
+          Congratulations!
+        </Title>
+        <EmptyStateBody className="pf-c-content">
+          <div>
+            <Text>The installation on your machine is complete.</Text>
+            <Text>
+              At this point you can 'Restart installation' to continue playing with D-Installer or
+              manually reboot the machine to log in to the new system.
+            </Text>
+            <Text>Have a lot of fun! Your openSUSE Development Team.</Text>
+          </div>
+          <EmptyStateSecondaryActions>
+            <Button component="a" href="https://www.opensuse.org" target="_blank" variant="link">
+              www.opensuse.org
+            </Button>
+          </EmptyStateSecondaryActions>
+        </EmptyStateBody>
+      </EmptyState>
+    </Center>
   );
 }
 

diff --git a/web/src/InstallationProgress.jsx b/web/src/InstallationProgress.jsx
@@ -22,18 +22,17 @@
 import React from "react";
 
 import Center from "./Center";
-import Layout from "./Layout";
 import ProgressReport from "./ProgressReport";
+import { SectionTitle } from "./layout/SectionTitle";
 
 import { EOS_DOWNLOADING as SectionIcon } from "eos-icons-react";
 
 function InstallationProgress() {
   return (
-    <Layout sectionTitle="Installing" SectionIcon={SectionIcon}>
-      <Center>
-        <ProgressReport />
-      </Center>
-    </Layout>
+    <Center>
+      <SectionTitle>Installing</SectionTitle>
+      <ProgressReport />
+    </Center>
   );
 }
 

diff --git a/web/src/LanguageSelector.jsx b/web/src/LanguageSelector.jsx
@@ -32,6 +32,8 @@ import {
   ModalVariant
 } from "@patternfly/react-core";
 
+import { SectionTitle } from "./layout/SectionTitle";
+
 const reducer = (state, action) => {
   switch (action.type) {
     case "LOAD": {
@@ -132,6 +134,7 @@ export default function LanguageSelector() {
           </Button>
         ]}
       >
+        <SectionTitle>Select the language</SectionTitle>
         <Form>
           <FormGroup
             fieldId="language"

diff --git a/web/src/LoadingEnvironment.jsx b/web/src/LoadingEnvironment.jsx
@@ -22,23 +22,21 @@
 import React from "react";
 import { Title, EmptyState, EmptyStateIcon } from "@patternfly/react-core";
 
-import Layout from "./Layout";
 import Center from "./Center";
+import { SectionTitle } from "./layout/SectionTitle";
 
 import { EOS_THREE_DOTS_LOADING_ANIMATED as LoadingIcon } from "eos-icons-react";
 
 function LoadingEnvironment() {
   return (
-    <Layout sectionTitle="D-Installer">
-      <Center>
-        <EmptyState>
-          <EmptyStateIcon icon={LoadingIcon} />
-          <Title headingLevel="h4" size="lg">
-            Loading installation environment, please wait.
-          </Title>
-        </EmptyState>
-      </Center>
-    </Layout>
+    <Center>
+      <EmptyState>
+        <EmptyStateIcon icon={LoadingIcon} />
+        <Title headingLevel="h4" size="lg">
+          Loading installation environment, please wait.
+        </Title>
+      </EmptyState>
+    </Center>
   );
 }
 

diff --git a/web/src/LoginForm.jsx b/web/src/LoginForm.jsx
@@ -24,7 +24,7 @@ import { useAuthContext } from "./context/auth";
 import { Alert, Button, Form, FormAlert, FormGroup, TextInput } from "@patternfly/react-core";
 
 import Center from "./Center";
-import Layout from "./Layout";
+import { SectionTitle } from "./layout/SectionTitle";
 
 const formError = error => (
   <FormAlert>
@@ -64,19 +64,19 @@ function LoginForm() {
   };
 
   return (
-    <Layout sectionTitle="Welcome to D-Installer" FooterActions={SubmitButton}>
-      <Center>
-        <Form id="d-installer-login">
-          {error && formError(error)}
-          <FormGroup label="Username" fieldId="username">
-            <TextInput isRequired type="text" id="username" ref={usernameRef} />
-          </FormGroup>
-          <FormGroup label="Password" fieldId="password">
-            <TextInput isRequired type="password" id="password" ref={passwordRef} />
-          </FormGroup>
-        </Form>
-      </Center>
-    </Layout>
+    <Center>
+      <SectionTitle>Please, log in</SectionTitle>
+      <Form id="d-installer-login">
+        {error && formError(error)}
+        <FormGroup label="Username" fieldId="username">
+          <TextInput isRequired type="text" id="username" ref={usernameRef} />
+        </FormGroup>
+        <FormGroup label="Password" fieldId="password">
+          <TextInput isRequired type="password" id="password" ref={passwordRef} />
+        </FormGroup>
+        <SubmitButton />
+      </Form>
+    </Center>
   );
 }
 

diff --git a/web/src/Overview.jsx b/web/src/Overview.jsx
@@ -24,11 +24,11 @@ import { useInstallerClient } from "./context/installer";
 
 import { Button, Flex, FlexItem } from "@patternfly/react-core";
 
-import Layout from "./Layout";
 import Category from "./Category";
 import LanguageSelector from "./LanguageSelector";
 import ProductSelector from "./ProductSelector";
 import Storage from "./Storage";
+import { SectionTitle } from "./layout/SectionTitle";
 
 import {
   EOS_FACT_CHECK as OverviewIcon,
@@ -71,13 +71,10 @@ function Overview() {
   };
 
   return (
-    <Layout
-      sectionTitle="Installation Summary"
-      SectionIcon={OverviewIcon}
-      FooterActions={InstallButton}
-    >
+    <>
+      <SectionTitle>Installation Summary</SectionTitle>
       <Flex direction={{ default: "column" }}>{renderCategories()}</Flex>
-    </Layout>
+    </>
   );
 }
 

diff --git a/web/src/ProbingProgress.jsx b/web/src/ProbingProgress.jsx
@@ -22,17 +22,16 @@
 import React from "react";
 
 import Center from "./Center";
-import Layout from "./Layout";
 import ProgressReport from "./ProgressReport";
+import { SectionTitle } from "./layout/SectionTitle";
 
 import { EOS_MULTISTATE as SectionIcon } from "eos-icons-react";
 
 const ProbingProgress = () => (
-  <Layout sectionTitle="Probing" SectionIcon={SectionIcon}>
-    <Center>
-      <ProgressReport />
-    </Center>
-  </Layout>
+  <Center>
+    <SectionTitle>Probing</SectionTitle>
+    <ProgressReport />
+  </Center>
 );
 
 export default ProbingProgress;
diff --git a/web/src/Layout.jsx → web/src/layout/Layout.jsx b/web/src/Layout.jsx → web/src/layout/Layout.jsx
@@ -21,6 +21,8 @@
 
 import React from "react";
 
+import { SectionTitlePlaceholder } from "./SectionTitle";
+
 /**
  * D-Installer main layout component.
  *
@@ -76,7 +78,7 @@ function Layout({
         <div className="layout__header-section-title">
           <h1>
             {SectionIcon && <SectionIcon className="layout__header-section-title-icon" />}
-            {sectionTitle}
+            <SectionTitlePlaceholder>D-Installer</SectionTitlePlaceholder>
           </h1>
         </div>
       </div>

diff --git a/web/src/layout/SectionTitle.jsx b/web/src/layout/SectionTitle.jsx
@@ -0,0 +1,18 @@
+import React, { useRef } from "react";
+
+import createLayoutSlot from "./slot";
+
+const Slot = createLayoutSlot();
+
+export function SectionTitlePlaceholder({ children, ...props }) {
+  const slotRef = useRef();
+  return (
+    <Slot.Placeholder ref={slotRef} {...props}>
+      {children}
+    </Slot.Placeholder>
+  );
+}
+
+export function SectionTitle({ children }) {
+  return <Slot.Content>{children}</Slot.Content>;
+}