Merge pull request #444 from KKoukiou/modify-storage-header-move

storage: move 'Modify storage' to the header kebab

src/components/AnacondaHeader.jsx

@@ -36,7 +36,7 @@ import "./AnacondaHeader.scss";
 const _ = cockpit.gettext;
 const N_ = cockpit.noop;
 
-export const AnacondaHeader = ({ onCritFail, reportLinkURL, title }) => {
+export const AnacondaHeader = ({ dispatch, isFormDisabled, onCritFail, reportLinkURL, setShowStorage, showStorage, title }) => {
  const [beta, setBeta] = useState();
  const network = useContext(NetworkContext);
  const isConnected = network.connected;
@@ -56,7 +56,15 @@ export const AnacondaHeader = ({ onCritFail, reportLinkURL, title }) => {
  <Text component="h1">{title}</Text>
  </TextContent>
  {beta && <Beta />}
- <HeaderKebab reportLinkURL={reportLinkURL} isConnected={isConnected} />
+ <HeaderKebab
+ dispatch={dispatch}
+ isConnected={isConnected}
+ isFormDisabled={isFormDisabled}
+ onCritFail={onCritFail}
+ reportLinkURL={reportLinkURL}
+ setShowStorage={setShowStorage}
+ showStorage={showStorage}
+ />
  </Flex>
  </PageSection>
  );

src/components/AnacondaWizard.jsx

@@ -32,7 +32,7 @@ import { AnacondaWizardFooter } from "./AnacondaWizardFooter.jsx";
 import { FooterContext, StorageContext, SystemTypeContext } from "./Common.jsx";
 import { getSteps } from "./steps.js";
 
-export const AnacondaWizard = ({ dispatch, isFetching, onCritFail }) => {
+export const AnacondaWizard = ({ dispatch, isFetching, onCritFail, showStorage }) => {
  // The Form should be disabled while backend checks are in progress
  // or the page initialization is in progress
  const [isFormDisabled, setIsFormDisabled] = useState(false);
@@ -57,6 +57,7 @@ export const AnacondaWizard = ({ dispatch, isFetching, onCritFail }) => {
  onCritFail,
  setIsFormDisabled,
  setIsFormValid,
+ showStorage,
  };
 
  const stepsOrder = getSteps(isBootIso, storageScenarioId);

src/components/HeaderKebab.jsx

@@ -41,6 +41,7 @@ import { getAnacondaVersion } from "../helpers/product.js";
 
 import { OsReleaseContext } from "./Common.jsx";
 import { UserIssue } from "./Error.jsx";
+import { CockpitStorageIntegration, ModifyStorage } from "./storage/CockpitStorageIntegration.jsx";
 
 import "./HeaderKebab.scss";
 
@@ -104,7 +105,7 @@ const AnacondaAboutModal = ({ isModalOpen, setIsAboutModalOpen }) => {
  );
 };
 
-export const HeaderKebab = ({ isConnected, reportLinkURL }) => {
+export const HeaderKebab = ({ dispatch, isConnected, onCritFail, reportLinkURL, setShowStorage, showStorage }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
  const [isReportIssueOpen, setIsReportIssueOpen] = useState(false);
@@ -125,6 +126,11 @@ export const HeaderKebab = ({ isConnected, reportLinkURL }) => {
  };
 
  const dropdownItems = [
+ <ModifyStorage
+ idPrefix="header-kebab"
+ key="modify-storage"
+ setShowStorage={setShowStorage}
+ />,
  <DropdownItem id="about-modal-dropdown-item-about" key="about" onClick={handleAboutModal}>
  {_("About")}
  </DropdownItem>,
@@ -165,6 +171,12 @@ export const HeaderKebab = ({ isConnected, reportLinkURL }) => {
  setIsReportIssueOpen={setIsReportIssueOpen}
  isConnected={isConnected}
  />}
+ {showStorage &&
+ <CockpitStorageIntegration
+ dispatch={dispatch}
+ onCritFail={onCritFail}
+ setShowStorage={setShowStorage}
+ />}
  </>
  );
 };

src/components/app.jsx

@@ -50,6 +50,7 @@ export const ApplicationLoading = () => (
 
 export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease, reportLinkURL }) => {
  const [storeInitialized, setStoreInitialized] = useState(false);
+ const [showStorage, setShowStorage] = useState(false);
  const address = useAddress();
 
  useEffect(() => {
@@ -80,9 +81,12 @@ export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease,
  <PageGroup
  stickyOnBreakpoint={{ default: "top" }}>
  <AnacondaHeader
+ dispatch={dispatch}
  title={title}
  reportLinkURL={reportLinkURL}
  onCritFail={onCritFail}
+ showStorage={showStorage}
+ setShowStorage={setShowStorage}
  />
  </PageGroup>
  <AnacondaWizard
@@ -91,6 +95,7 @@ export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease,
  title={title}
  dispatch={dispatch}
  conf={conf}
+ showStorage={showStorage}
  />
  </>
  );

src/components/storage/CockpitStorageIntegration.jsx

@@ -25,6 +25,7 @@ import {
  Card,
  CardBody,
  Divider,
+ DropdownItem,
  Flex,
  FlexItem,
  HelperText,
@@ -67,7 +68,7 @@ import { getDeviceByName, getDeviceByPath } from "../../helpers/storage.js";
 
 import { EmptyStatePanel } from "cockpit-components-empty-state";
 
-import { StorageContext } from "../Common.jsx";
+import { StorageContext, TargetSystemRootContext } from "../Common.jsx";
 import {
  useDiskFreeSpace,
  useDiskTotalSpace,
@@ -151,7 +152,6 @@ const CockpitStorageConfirmationModal = ({ handleCancelOpenModal, handleConfirmO
 
 export const CockpitStorageIntegration = ({
  dispatch,
- isFormDisabled,
  onCritFail,
  scenarioAvailability,
  setShowStorage,
@@ -217,7 +217,6 @@ export const CockpitStorageIntegration = ({
  {showDialog &&
  <CheckStorageDialog
  dispatch={dispatch}
- isFormDisabled={isFormDisabled}
  onCritFail={onCritFail}
  scenarioAvailability={scenarioAvailability}
  setShowDialog={setShowDialog}
@@ -288,7 +287,6 @@ export const preparePartitioning = async ({ devices, newMountPoints }) => {
 
 const CheckStorageDialog = ({
  dispatch,
- isFormDisabled,
  onCritFail,
  setShowDialog,
  setShowStorage,
@@ -501,7 +499,6 @@ const CheckStorageDialog = ({
  <>
  <Button
  id={idPrefix + "-check-storage-dialog-continue"}
- isDisabled={isFormDisabled}
  variant="primary"
  onClick={goBackToInstallation}>
  {_("Continue")}
@@ -523,7 +520,6 @@ const CheckStorageDialog = ({
  </Button>
  <Button
  id={idPrefix + "-check-storage-dialog-continue"}
- isDisabled={isFormDisabled}
  variant="secondary"
  onClick={() => setShowStorage(false)}>
  {_("Proceed with installation")}
@@ -635,3 +631,29 @@ const ModifyStorageSideBar = () => {
  </PageSection>
  );
 };
+
+export const ModifyStorage = ({ setShowStorage }) => {
+ const targetSystemRoot = useContext(TargetSystemRootContext);
+ const { diskSelection } = useContext(StorageContext);
+ const devices = useOriginalDevices();
+ const selectedDevices = diskSelection.selectedDisks.map(disk => devices[disk].path.v);
+ const mountPointConstraints = useMountPointConstraints();
+ const isEfi = mountPointConstraints?.some(c => c["required-filesystem-type"]?.v === "efi");
+ const cockpitAnaconda = JSON.stringify({
+ available_devices: selectedDevices,
+ efi: isEfi,
+ mount_point_prefix: targetSystemRoot,
+ });
+
+ return (
+ <DropdownItem
+ id="modify-storage"
+ onClick={() => {
+ window.sessionStorage.setItem("cockpit_anaconda", cockpitAnaconda);
+ setShowStorage(true);
+ }}
+ >
+ {_("Modify storage")}
+ </DropdownItem>
+ );
+};

src/components/storage/InstallationDestination.jsx

@@ -51,7 +51,6 @@ import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
 
 import { StorageContext, SystemTypeContext } from "../Common.jsx";
 import { useOriginalDevices, useOriginalExistingSystems } from "./Common.jsx";
-import { ModifyStorage } from "./ModifyStorage.jsx";
 
 import "./InstallationDestination.scss";
 
@@ -239,7 +238,6 @@ export const InstallationDestination = ({
  idPrefix,
  onCritFail,
  setIsFormValid,
- setShowStorage
 }) => {
  const refUsableDisks = useRef();
  const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";
@@ -281,15 +279,8 @@ export const InstallationDestination = ({
 
  return (
  <FormSection
- title={
- <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
- <Title headingLevel={headingLevel} id={idPrefix + "-disk-selector-title"}>{_("Destination")}</Title>
- <ModifyStorage
- idPrefix={idPrefix}
- setShowStorage={setShowStorage}
- />
- </Flex>
- }>
+ title={<Title headingLevel={headingLevel} id={idPrefix + "-disk-selector-title"}>{_("Destination")}</Title>}
+ >
  <FormGroup>
  <Flex direction={{ default: "column" }} spaceItems={{ default: "spaceItemsSm" }}>
  {diskSelection.selectedDisks.length === 0 && (

src/components/storage/InstallationMethod.jsx

@@ -29,7 +29,6 @@ import { resetPartitioning } from "../../apis/storage_partitioning.js";
 
 import { AnacondaWizardFooter } from "../AnacondaWizardFooter.jsx";
 import { DialogsContext, FooterContext, OsReleaseContext, StorageContext } from "../Common.jsx";
-import { CockpitStorageIntegration } from "./CockpitStorageIntegration.jsx";
 import { getNewPartitioning } from "./Common.jsx";
 import { InstallationDestination } from "./InstallationDestination.jsx";
 import { InstallationScenario, scenarios } from "./InstallationScenario.jsx";
@@ -45,8 +44,8 @@ const InstallationMethod = ({
  onCritFail,
  setIsFormDisabled,
  setIsFormValid,
+ showStorage,
 }) => {
- const [showStorage, setShowStorage] = useState(false);
  const [isReclaimSpaceCheckboxChecked, setIsReclaimSpaceCheckboxChecked] = useState();
 
  // Display custom footer
@@ -64,21 +63,13 @@ const InstallationMethod = ({
  id={idPrefix + "-selector-form"}
  onSubmit={e => { e.preventDefault(); return false }}
  >
- {showStorage &&
- <CockpitStorageIntegration
- dispatch={dispatch}
- isFormDisabled={isFormDisabled}
- onCritFail={onCritFail}
- setShowStorage={setShowStorage}
- />}
  <InstallationDestination
  isEfi={isEfi}
  dispatch={dispatch}
  idPrefix={idPrefix}
  isFormDisabled={isFormDisabled}
  setIsFormValid={setIsFormValid}
  setIsFormDisabled={setIsFormDisabled}
- setShowStorage={setShowStorage}
  onCritFail={onCritFail}
  />
  <DialogsContext.Provider value={{ isReclaimSpaceCheckboxChecked, setIsReclaimSpaceCheckboxChecked }}>

src/components/storage/MountPointMapping.jsx

@@ -661,12 +661,17 @@ const useExistingPartitioning = () => {
  return false;
  }
 
+ // Is the device usable?
+ if (devices[device].protected.v || devices[device].size.v === 0) {
+ return false;
+ }
+
  // All device's disks have to be in selected disks.
  return diskSelection.selectedDisks.some(disk => ancestors.includes(disk));
  });
 
- const usedDevices = partitioning?.requests?.map(r => r["device-spec"]) || [];
-
+ // Disk devices are not allowed in the mount point assignment
+ const usedDevices = (partitioning?.requests?.map(r => r["device-spec"]) || []).filter(d => devices[d]?.type.v !== "disk");
  if (usedDevices.every(d => usableDevices.includes(d)) && usableDevices.every(d => usedDevices.includes(d))) {
  return true;
  }

test/helpers/storage.py

@@ -87,7 +87,8 @@ def return_to_installation_confirm(self):
  self.browser.click("#cockpit-storage-integration-check-storage-dialog-continue")
 
  def modify_storage(self):
- self.browser.click(f"#{self._step}-modify-storage")
+ self.browser.click("#toggle-kebab")
+ self.browser.click("#modify-storage")
 
 
 class StorageEncryption():