Skip to content

Commit

Permalink
Merge pull request #5259 from KKoukiou/webui-code-cleanup
Browse files Browse the repository at this point in the history 
webui: more code cleanup
  • Loading branch information
@KKoukiou
KKoukiou authored Oct 17, 2023
2 parents 74c5256 + 0eb6b06 commit 0b9fe7c
Show file tree
Hide file tree
Showing 15 changed files with 598 additions and 570 deletions.
75 changes: 44 additions & 31 deletions ui/webui/src/components/AnacondaHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/
import cockpit from "cockpit";

import React from "react";
import React, { useState, useEffect } from "react";

import {
Flex,
Expand All @@ -29,39 +29,22 @@ import { InfoCircleIcon } from "@patternfly/react-icons";

import { HeaderKebab } from "./HeaderKebab.jsx";

import { getIsFinal } from "../apis/runtime";

import "./AnacondaHeader.scss";

const _ = cockpit.gettext;
const N_ = cockpit.noop;

export const AnacondaHeader = ({ beta, title, reportLinkURL, isConnected }) => {
const prerelease = _("Pre-release");
const betanag = beta
? (
<Popover
headerContent={_("This is unstable, pre-release software")}
minWidth="30rem"
position={PopoverPosition.auto}
bodyContent={
<TextContent>
<Text component={TextVariants.p}>
{_("Notice: This is pre-released software that is intended for development and testing purposes only. Do NOT use this software for any critical work or for production environments.")}
</Text>
<Text component={TextVariants.p}>
{_("By continuing to use this software, you understand and accept the risks associated with pre-released software, that you intend to use this for testing and development purposes only and are willing to report any bugs or issues in order to enhance this work.")}
</Text>
<Text component={TextVariants.p}>
{_("If you do not understand or accept the risks, then please exit this program.")}
</Text>
</TextContent>
}
>
{/* HACK Patternfly currently doesn't implement clickable labels so the styling had to be done manually. */}
<div style={{ cursor: "pointer", userSelect: "none" }}>
<Label color="orange" icon={<InfoCircleIcon />} id="betanag-icon"> {prerelease} </Label>
</div>
</Popover>
)
: null;
export const AnacondaHeader = ({ title, reportLinkURL, isConnected, onCritFail }) => {
const [beta, setBeta] = useState();

useEffect(() => {
getIsFinal().then(
isFinal => setBeta(!isFinal),
onCritFail({ context: N_("Reading installer version information failed.") })
);
}, [onCritFail]);

return (
<PageSection variant={PageSectionVariants.light}>
Expand All @@ -70,9 +53,39 @@ export const AnacondaHeader = ({ beta, title, reportLinkURL, isConnected }) => {
<TextContent>
<Text component="h1">{title}</Text>
</TextContent>
{betanag}
{beta && <Beta />}
<HeaderKebab reportLinkURL={reportLinkURL} isConnected={isConnected} />
</Flex>
</PageSection>
);
};

const Beta = () => {
const prerelease = _("Pre-release");

return (
<Popover
headerContent={_("This is unstable, pre-release software")}
minWidth="30rem"
position={PopoverPosition.auto}
bodyContent={
<TextContent>
<Text component={TextVariants.p}>
{_("Notice: This is pre-released software that is intended for development and testing purposes only. Do NOT use this software for any critical work or for production environments.")}
</Text>
<Text component={TextVariants.p}>
{_("By continuing to use this software, you understand and accept the risks associated with pre-released software, that you intend to use this for testing and development purposes only and are willing to report any bugs or issues in order to enhance this work.")}
</Text>
<Text component={TextVariants.p}>
{_("If you do not understand or accept the risks, then please exit this program.")}
</Text>
</TextContent>
}
>
{/* HACK Patternfly currently doesn't implement clickable labels so the styling had to be done manually. */}
<div style={{ cursor: "pointer", userSelect: "none" }}>
<Label color="orange" icon={<InfoCircleIcon />} id="betanag-icon"> {prerelease} </Label>
</div>
</Popover>
);
};
2 changes: 1 addition & 1 deletion ui/webui/src/components/AnacondaPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const AnacondaPage = ({ title, children, step, stepNotification }) => {
return (
<Stack hasGutter>
{title && <Title headingLevel="h2">{title}</Title>}
{stepNotification && stepNotification.step === step &&
{stepNotification?.step === step &&
<Alert
isInline
title={stepNotification.message}
Expand Down
21 changes: 9 additions & 12 deletions ui/webui/src/components/AnacondaWizard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* along with This program; If not, see <http://www.gnu.org/licenses/>.
*/
import cockpit from "cockpit";
import React, { useEffect, useState, useMemo } from "react";
import React, { useContext, useEffect, useState, useMemo } from "react";

import {
ActionList,
Expand Down Expand Up @@ -50,18 +50,21 @@ import {
resetPartitioning,
getRequiredMountPoints,
} from "../apis/storage.js";
import { SystemTypeContext, OsReleaseContext } from "./Common.jsx";

const _ = cockpit.gettext;
const N_ = cockpit.noop;

export const AnacondaWizard = ({ dispatch, isBootIso, osRelease, storageData, localizationData, onCritFail, title, conf }) => {
export const AnacondaWizard = ({ dispatch, storageData, localizationData, onCritFail, title, conf }) => {
const [isFormDisabled, setIsFormDisabled] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
const [requiredMountPoints, setRequiredMountPoints] = useState();
const [reusePartitioning, setReusePartitioning] = useState(false);
const [stepNotification, setStepNotification] = useState();
const [storageEncryption, setStorageEncryption] = useState(getStorageEncryptionState());
const [storageScenarioId, setStorageScenarioId] = useState(window.sessionStorage.getItem("storage-scenario-id") || getDefaultScenario().id);
const osRelease = useContext(OsReleaseContext);
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";

const availableDevices = useMemo(() => {
return Object.keys(storageData.devices);
Expand Down Expand Up @@ -143,17 +146,13 @@ export const AnacondaWizard = ({ dispatch, isBootIso, osRelease, storageData, lo
requests: storageData.partitioning ? storageData.partitioning.requests : null,
language,
localizationData,
osRelease,
storageScenarioId,
},
...getReviewConfigurationProps()
},
{
component: InstallationProgress,
id: "installation-progress",
data: {
osRelease
}
}
];

Expand Down Expand Up @@ -210,8 +209,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, osRelease, storageData, lo
stepNotification={stepNotification}
isFormDisabled={isFormDisabled}
setIsFormDisabled={setIsFormDisabled}
isBootIso={isBootIso}
osRelease={osRelease}
{...s.data}
/>
</AnacondaPage>
Expand Down Expand Up @@ -260,7 +257,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, osRelease, storageData, lo
setIsFormDisabled={setIsFormDisabled}
storageEncryption={storageEncryption}
storageScenarioId={storageScenarioId}
isBootIso={isBootIso}
/>}
hideClose
mainAriaLabel={`${title} content`}
Expand All @@ -285,10 +281,10 @@ const Footer = ({
setIsFormDisabled,
storageEncryption,
storageScenarioId,
isBootIso
}) => {
const [nextWaitsConfirmation, setNextWaitsConfirmation] = useState(false);
const [quitWaitsConfirmation, setQuitWaitsConfirmation] = useState(false);
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";

const goToNextStep = (activeStep, onNext) => {
// first reset validation state to default
Expand Down Expand Up @@ -380,7 +376,6 @@ const Footer = ({
<QuitInstallationConfirmModal
exitGui={exitGui}
setQuitWaitsConfirmation={setQuitWaitsConfirmation}
isBootIso={isBootIso}
/>}
{activeStep.id === "installation-method" && !isFormValid &&
<HelperText id="next-helper-text">
Expand Down Expand Up @@ -440,7 +435,9 @@ const Footer = ({
);
};

export const QuitInstallationConfirmModal = ({ exitGui, setQuitWaitsConfirmation, isBootIso }) => {
export const QuitInstallationConfirmModal = ({ exitGui, setQuitWaitsConfirmation }) => {
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";

return (
<Modal
id="installation-quit-confirm-dialog"
Expand Down
2 changes: 2 additions & 0 deletions ui/webui/src/components/Common.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { Popover, PopoverPosition } from "@patternfly/react-core";
export const AddressContext = createContext("");
export const ConfContext = createContext();
export const LanguageContext = createContext("");
export const SystemTypeContext = createContext(null);
export const OsReleaseContext = createContext(null);

export const FormGroupHelpPopover = ({ helpContent }) => {
return (
Expand Down
6 changes: 4 additions & 2 deletions ui/webui/src/components/Error.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/

import cockpit from "cockpit";
import React, { useEffect, useState } from "react";
import React, { useContext, useEffect, useState } from "react";

import {
ActionList,
Expand All @@ -38,6 +38,7 @@ import {
import { ExternalLinkAltIcon, DisconnectedIcon } from "@patternfly/react-icons";

import { exitGui } from "../helpers/exit.js";
import { SystemTypeContext } from "./Common.jsx";

import "./Error.scss";

Expand Down Expand Up @@ -208,7 +209,8 @@ const quitButton = (isBootIso) => {
);
};

export const CriticalError = ({ exception, isBootIso, isConnected, reportLinkURL }) => {
export const CriticalError = ({ exception, isConnected, reportLinkURL }) => {
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";
const context = exception.contextData?.context;
const description = context
? cockpit.format(_("The installer cannot continue due to a critical error: $0"), _(context))
Expand Down
14 changes: 3 additions & 11 deletions ui/webui/src/components/HeaderKebab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/
import cockpit from "cockpit";

import React, { useState, useEffect } from "react";
import React, { useContext, useState, useEffect } from "react";
import {
AboutModal,
Button,
Expand All @@ -37,9 +37,9 @@ import {
EllipsisVIcon
} from "@patternfly/react-icons";

import { read_os_release as readOsRelease } from "os-release.js";
import { getAnacondaVersion } from "../helpers/product.js";
import { UserIssue } from "./Error.jsx";
import { OsReleaseContext } from "./Common.jsx";

import "./HeaderKebab.scss";

Expand All @@ -63,15 +63,7 @@ const AboutModalVersions = () => {
};

const ProductName = () => {
const [osRelease, setOsRelease] = useState();

useEffect(() => {
readOsRelease().then(setOsRelease);
}, []);

if (!osRelease) {
return null;
}
const osRelease = useContext(OsReleaseContext);

return (
<Stack hasGutter>
Expand Down
Loading

0 comments on commit 0b9fe7c

Please sign in to comment.