webui: adding PRETTY_NAME to use in title instead of anaconda generic…

… title

ui/webui/src/components/app.jsx

@@ -35,8 +35,7 @@ import { PayloadsClient } from "../apis/payloads";
 
 import { readBuildstamp, getIsFinal } from "../helpers/betanag.js";
 import { readConf } from "../helpers/conf.js";
-
-const _ = cockpit.gettext;
+import { getOsReleaseByKey } from "../helpers/product.js";
 
 export const Application = () => {
     const [address, setAddress] = useState();
@@ -46,6 +45,7 @@ export const Application = () => {
     const [notifications, setNotifications] = useState({});
     const [isHelpExpanded, setIsHelpExpanded] = useState(false);
     const [helpContent, setHelpContent] = useState("");
+    const [prettyName, setPrettyName] = useState("");
 
     useEffect(() => {
         cockpit.file("/run/anaconda/bus.address").watch(address => {
@@ -69,6 +69,10 @@ export const Application = () => {
             buildstamp => setBeta(!getIsFinal(buildstamp)),
             ex => console.error("Failed to parse anaconda buildstamp file")
         );
+
+        getOsReleaseByKey("PRETTY_NAME").then(
+            setPrettyName
+        );
     }, []);
 
     const onAddNotification = (notificationProps) => {
@@ -95,7 +99,7 @@ export const Application = () => {
     }
     console.info("conf: ", conf);
 
-    const title = _("Anaconda installer");
+    const title = cockpit.format("$0 installation", prettyName);
 
     const page = (
         <Page

ui/webui/src/components/localization/InstallationLanguage.jsx

@@ -15,7 +15,7 @@
  * along with This program; If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import cockpit from "cockpit";
 
 import {
@@ -53,6 +53,7 @@ import {
     setLangCookie
 } from "../../helpers/language.js";
 import { AnacondaPage } from "../AnacondaPage.jsx";
+import { getOsReleaseByKey } from "../../helpers/product.js";
 
 import "./InstallationLanguage.scss";
 
@@ -317,9 +318,16 @@ LanguageSelector.contextType = AddressContext;
 export const InstallationLanguage = ({ idPrefix, setIsFormValid, onAddErrorNotification }) => {
     const [nativeName, setNativeName] = React.useState(false);
     const { setLanguage } = React.useContext(LanguageContext);
+    const [distributionName, setDistributionName] = useState("");
+
+    useEffect(() => {
+        getOsReleaseByKey("NAME").then(
+            setDistributionName
+        );
+    }, []);
 
     return (
-        <AnacondaPage title={_("Welcome to the Anaconda installer")}>
+        <AnacondaPage title={cockpit.format("Welcome to $0", distributionName)}>
             <Title
               headingLevel="h3"
             >

ui/webui/src/helpers/product.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2022 Red Hat, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * 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
+ * Lesser General Public License for more details.
+ *
+ * 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 cockpit from "cockpit";
+
+export const getOsReleaseByKey = (key) => {
+    const confFile = cockpit.file("/etc/os-release");
+    console.log(confFile);
+
+    return confFile
+            .read()
+            .then((content) =>
+                content
+                        .split(/\r?\n/)
+                        ?.find((item) => item?.includes(key))
+                        .split("=")[1]
+                        .replace(/['"]+/g, "")
+            )
+            .finally(confFile.close);
+};