Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storage: show skeletons only when needed #1171

Merged
merged 13 commits into from
May 2, 2024
Merged

Storage: show skeletons only when needed #1171

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
837a880
Storage: show skeletons only when needed
lslezak Apr 26, 2024
d093d36
More comments
lslezak Apr 26, 2024
f535c4d
Simplify screen reader texts
lslezak Apr 29, 2024
358e04a
Always refresh the proposal result
lslezak Apr 29, 2024
30f8d7a
Update test
lslezak Apr 29, 2024
4583eaf
Code review fixes
lslezak Apr 29, 2024
83eccdf
Review fixes
lslezak Apr 30, 2024
a143e22
Revert the <If> change
lslezak Apr 30, 2024
5d231ca
Add `isLoading` property to the <Popup> component
lslezak Apr 30, 2024
bc2cd45
Make the progress message configurable
lslezak Apr 30, 2024
db04da1
Reset the values after loading is finished
lslezak May 2, 2024
da9ec7d
Update unit test
lslezak May 2, 2024
2f954fa
Improve unit test
lslezak May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion web/src/components/core/Popup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import React from "react";
import { Button, Modal } from "@patternfly/react-core";
import { _ } from "~/i18n";
import { partition } from "~/utils";
import { Loading } from "~/components/layout";

/**
* @typedef {import("@patternfly/react-core").ModalProps} ModalProps
Expand Down Expand Up @@ -190,12 +191,14 @@ const AncillaryAction = ({ children, ...actionsProps }) => (
* @typedef {object} PopupBaseProps
* @property {"auto" | "small" | "medium" | "large"} [blockSize="auto"] - The block/height size for the dialog. Default is "auto".
* @property {"auto" | "small" | "medium" | "large"} [inlineSize="medium"] - The inline/width size for the dialog. Default is "medium".
* @property {boolean} [isLoading=false] - Whether the data is loading, if yes it displays a loading indicator instead of the requested content
* @typedef {Omit<ModalProps, "variant" | "size"> & PopupBaseProps} PopupProps
*
* @param {PopupProps} props
*/
const Popup = ({
isOpen = false,
isLoading = false,
showClose = false,
inlineSize = "medium",
blockSize = "auto",
Expand All @@ -214,7 +217,7 @@ const Popup = ({
actions={actions}
className={`${className} block-size-${blockSize} inline-size-${inlineSize}`.trim()}
>
{content}
{isLoading ? <Loading text={_("Loading data...")} /> : content}
dgdavid marked this conversation as resolved.
Show resolved Hide resolved
</Modal>
);
};
Expand Down
126 changes: 59 additions & 67 deletions web/src/components/storage/DeviceSelectionDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@ import { Form } from "@patternfly/react-core";

import { _ } from "~/i18n";
import { deviceChildren } from "~/components/storage/utils";
import { ControlledPanels as Panels, If, Popup } from "~/components/core";
import { ControlledPanels as Panels, Popup } from "~/components/core";
import { DeviceSelectorTable } from "~/components/storage";
import { noop } from "~/utils";
import { Loading } from "~/components/layout";

/**
* @typedef {import ("~/client/storage").ProposalTarget} ProposalTarget
Expand Down Expand Up @@ -122,75 +121,68 @@ devices.").split(/[[\]]/);
<Popup
title={_("Device for installing the system")}
isOpen={isOpen}
isLoading={isLoading}
blockSize="large"
inlineSize="large"
{...props}
>
<If
condition={isLoading}
then={
<Loading text={_("Loading data...")} />
}
else={
<Form id="target-form" onSubmit={onSubmit}>
<Panels className="stack">
<Panels.Options data-variant="buttons">
<Panels.Option
id={SELECT_DISK_ID}
name={OPTIONS_NAME}
isSelected={isTargetDisk}
onChange={selectTargetDisk}
controls={SELECT_DISK_PANEL_ID}
>
{_("Select a disk")}
</Panels.Option>
<Panels.Option
id={CREATE_LVM_ID}
name={OPTIONS_NAME}
isSelected={isTargetNewLvmVg}
onChange={selectTargetNewLvmVG}
controls={CREATE_LVM_PANEL_ID}
>
{_("Create an LVM Volume Group")}
</Panels.Option>
</Panels.Options>

<Panels.Panel id={SELECT_DISK_PANEL_ID} isExpanded={isTargetDisk}>
{msgStart1}
<b>{msgBold1}</b>
{msgEnd1}

<DeviceSelectorTable
aria-label={_("Device selector for target disk")}
devices={devices}
selected={[targetDevice]}
itemChildren={deviceChildren}
itemSelectable={isDeviceSelectable}
onSelectionChange={selectTargetDevice}
variant="compact"
/>
</Panels.Panel>

<Panels.Panel id={CREATE_LVM_PANEL_ID} isExpanded={isTargetNewLvmVg} className="stack">
{msgStart2}
<b>{msgBold2}</b>
{msgEnd2}

<DeviceSelectorTable
aria-label={_("Device selector for new LVM volume group")}
isMultiple
devices={devices}
selected={targetPVDevices}
itemChildren={deviceChildren}
itemSelectable={isDeviceSelectable}
onSelectionChange={setTargetPVDevices}
variant="compact"
/>
</Panels.Panel>
</Panels>
</Form>
}
/>
<Form id="target-form" onSubmit={onSubmit}>
<Panels className="stack">
<Panels.Options data-variant="buttons">
<Panels.Option
id={SELECT_DISK_ID}
name={OPTIONS_NAME}
isSelected={isTargetDisk}
onChange={selectTargetDisk}
controls={SELECT_DISK_PANEL_ID}
>
{_("Select a disk")}
</Panels.Option>
<Panels.Option
id={CREATE_LVM_ID}
name={OPTIONS_NAME}
isSelected={isTargetNewLvmVg}
onChange={selectTargetNewLvmVG}
controls={CREATE_LVM_PANEL_ID}
>
{_("Create an LVM Volume Group")}
</Panels.Option>
</Panels.Options>

<Panels.Panel id={SELECT_DISK_PANEL_ID} isExpanded={isTargetDisk}>
{msgStart1}
<b>{msgBold1}</b>
{msgEnd1}

<DeviceSelectorTable
aria-label={_("Device selector for target disk")}
devices={devices}
selected={[targetDevice]}
itemChildren={deviceChildren}
itemSelectable={isDeviceSelectable}
onSelectionChange={selectTargetDevice}
variant="compact"
/>
</Panels.Panel>

<Panels.Panel id={CREATE_LVM_PANEL_ID} isExpanded={isTargetNewLvmVg} className="stack">
{msgStart2}
<b>{msgBold2}</b>
{msgEnd2}

<DeviceSelectorTable
aria-label={_("Device selector for new LVM volume group")}
isMultiple
devices={devices}
selected={targetPVDevices}
itemChildren={deviceChildren}
itemSelectable={isDeviceSelectable}
onSelectionChange={setTargetPVDevices}
variant="compact"
/>
</Panels.Panel>
</Panels>
</Form>

<Popup.Actions>
<Popup.Confirm form="target-form" type="submit" isDisabled={isAcceptDisabled()} />
Expand Down
1 change: 1 addition & 0 deletions web/src/components/storage/EncryptionField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export default function EncryptionField({
method={method}
methods={methods}
isOpen={isDialogOpen}
isLoading={isLoading}
onCancel={closeDialog}
onAccept={onAccept}
/>
Expand Down
11 changes: 10 additions & 1 deletion web/src/components/storage/EncryptionSettingsDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ directly on its first run.");
* @property {string} method - Encryption method.
* @property {string[]} methods - Possible encryption methods.
* @property {boolean} [isOpen=false] - Whether the dialog is visible or not.
* @property {boolean} [isLoading=false] - Whether the data is loading
* @property {() => void} onCancel - Callback to trigger when on cancel action.
* @property {(settings: EncryptionSetting) => void} onAccept - Callback to trigger on accept action.
*
Expand All @@ -63,6 +64,7 @@ export default function EncryptionSettingsDialog({
method: methodProp,
methods,
isOpen = false,
isLoading = false,
onCancel,
onAccept
}) {
Expand All @@ -73,6 +75,13 @@ export default function EncryptionSettingsDialog({
const [validSettings, setValidSettings] = useState(true);
const formId = "encryptionSettingsForm";

// refresh the state when the real values are loaded
if (method === "" && methodProp !== "") { setMethod(methodProp) }
if (password === "" && passwordProp !== "") {
setPassword(passwordProp);
setIsEnabled(true);
}

useEffect(() => {
setValidSettings(!isEnabled || (password.length > 0 && passwordsMatch));
}, [isEnabled, password, passwordsMatch]);
Expand All @@ -91,7 +100,7 @@ export default function EncryptionSettingsDialog({
};

return (
<Popup title={DIALOG_TITLE} description={DIALOG_DESCRIPTION} isOpen={isOpen}>
<Popup title={DIALOG_TITLE} description={DIALOG_DESCRIPTION} isOpen={isOpen} isLoading={isLoading}>
<SwitchField
highlightContent
isChecked={isEnabled}
Expand Down
38 changes: 15 additions & 23 deletions web/src/components/storage/SpacePolicyDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import { Form } from "@patternfly/react-core";
import { _ } from "~/i18n";
import { SPACE_POLICIES } from '~/components/storage/utils';
import { If, OptionsPicker, Popup } from "~/components/core";
import { Loading } from "~/components/layout";
import { noop } from "~/utils";
import { SpaceActionsTable } from '~/components/storage';

Expand Down Expand Up @@ -148,33 +147,26 @@ in the devices listed below. Choose how to do it.");
title={_("Find space")}
description={description}
isOpen={isOpen}
isLoading={isLoading}
blockSize="large"
inlineSize="large"
{...props}
>
<If
condition={isLoading}
then={
<Loading text={_("Loading data...")} />
}
else={
<Form id="space-policy-form" onSubmit={onSubmit}>
<SpacePolicyPicker currentPolicy={policy} onChange={setPolicy} />
<If
condition={devices.length > 0}
then={
<SpaceActionsTable
devices={devices}
expandedDevices={expandedDevices}
deviceAction={deviceAction}
isActionDisabled={policy?.id !== "custom"}
onActionChange={changeActions}
/>
}
<Form id="space-policy-form" onSubmit={onSubmit}>
<SpacePolicyPicker currentPolicy={policy} onChange={setPolicy} />
<If
condition={devices.length > 0}
then={
<SpaceActionsTable
devices={devices}
expandedDevices={expandedDevices}
deviceAction={deviceAction}
isActionDisabled={policy?.id !== "custom"}
onActionChange={changeActions}
/>
</Form>
}
/>
}
/>
</Form>
<Popup.Actions>
<Popup.Confirm form="space-policy-form" type="submit" />
<Popup.Cancel onClick={onCancel} />
Expand Down
Loading