Fixes #25013 - vmware - disable other storage type correctly

theforeman · Feb 12, 2019 · ad1a01d · ad1a01d
1 parent b24e085
commit ad1a01d
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 65 deletions.
diff --git a/...assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.test.js b/...assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.test.js
@@ -12,4 +12,22 @@ describe('StorageContainer', () => {
 
     expect(wrapper.find('.text-vmware-size').props().value).toEqual(10);
   });
+
+  test.each`
+    toChange        | htmlSelector      | toDismiss
+    ${'storagePod'} | ${'.storage-pod'} | ${'datastore'}
+    ${'datastore'}  | ${'.datastore'}   | ${'storagePod'}
+  `(
+    'hides $toDismiss on $toChange selection',
+    ({ toChange, htmlSelector, toDismiss }) => {
+      const updateDisk = jest.fn();
+      const wrapper = shallow(<Disk {...props} updateDisk={updateDisk} />);
+      const evt = { target: { value: `new_${toChange}_id` } };
+      wrapper.find(`Select${htmlSelector}`).simulate('change', evt);
+      expect(updateDisk).toHaveBeenCalledWith(toChange, evt);
+      expect(updateDisk).toHaveBeenCalledWith(toDismiss, {
+        target: { value: null },
+      });
+    }
+  );
 });
diff --git a/...ack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/index.js b/...ack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/index.js
@@ -25,78 +25,91 @@ const Disk = ({
   storagePods,
   storagePodsStatus,
   storagePodsError,
-}) => (
-  <div className="disk-container">
-    <div className="form-group">
-      <label className="col-md-2 control-label">{__('Disk name')}</label>
-      <div className="col-md-4">{name}</div>
-      <div className="col-md-2">
-        {!vmExists && (
-          <Button className="close" onClick={removeDisk}>
-            <span aria-hidden="true">&times;</span>
-          </Button>
-        )}
+}) => {
+  const updateStoragePod = newValues => {
+    updateDisk('storagePod', newValues);
+    updateDisk('datastore', { target: { value: null } });
+  };
+  const updateDatastore = newValues => {
+    updateDisk('datastore', newValues);
+    updateDisk('storagePod', { target: { value: null } });
+  };
+
+  return (
+    <div className="disk-container">
+      <div className="form-group">
+        <label className="col-md-2 control-label">{__('Disk name')}</label>
+        <div className="col-md-4">{name}</div>
+        <div className="col-md-2">
+          {!vmExists && (
+            <Button className="close" onClick={removeDisk}>
+              <span aria-hidden="true">&times;</span>
+            </Button>
+          )}
+        </div>
       </div>
-    </div>
-    {!(datastore || datastore.length) && (
-      <Select
-        label={__('Storage Pod')}
-        value={storagePod}
-        disabled={vmExists}
-        onChange={newValues => updateDisk('storagePod', newValues)}
-        options={storagePods}
-        allowClear
-        key="storagePodsSelect"
-        status={storagePodsStatus}
-        errorMessage={storagePodsError}
-      />
-    )}
-    {!(storagePod && storagePod.length) && (
+      {!(datastore && datastore.length) && (
+        <Select
+          label={__('Storage Pod')}
+          value={storagePod}
+          disabled={vmExists}
+          onChange={newValues => updateStoragePod(newValues)}
+          options={storagePods}
+          allowClear
+          key="storagePodsSelect"
+          status={storagePodsStatus}
+          errorMessage={storagePodsError}
+          className="storage-pod"
+        />
+      )}
+      {!(storagePod && storagePod.length) && (
+        <Select
+          disabled={vmExists}
+          label={__('Data store')}
+          value={datastore}
+          onChange={newValues => updateDatastore(newValues)}
+          options={datastores}
+          allowClear
+          key="datastoresSelect"
+          status={datastoresStatus}
+          errorMessage={datastoresError}
+          className="datastore"
+        />
+      )}
+
       <Select
+        label={__('Disk Mode')}
+        value={mode}
         disabled={vmExists}
-        label={__('Data store')}
-        value={datastore}
-        onChange={newValues => updateDisk('datastore', newValues)}
-        options={datastores}
-        allowClear
-        key="datastoresSelect"
-        status={datastoresStatus}
-        errorMessage={datastoresError}
+        onChange={newValues => updateDisk('mode', newValues)}
+        options={diskModeTypes}
       />
-    )}
-
-    <Select
-      label={__('Disk Mode')}
-      value={mode}
-      disabled={vmExists}
-      onChange={newValues => updateDisk('mode', newValues)}
-      options={diskModeTypes}
-    />
 
-    <NumericInput
-      value={sizeGb}
-      minValue={1}
-      format={v => `${v} GB`}
-      className="text-vmware-size"
-      onChange={newValues => updateDisk('sizeGb', newValues)}
-      label={__('Size (GB)')}
-    />
+      <NumericInput
+        value={sizeGb}
+        minValue={1}
+        format={v => `${v} GB`}
+        className="text-vmware-size"
+        onChange={newValues => updateDisk('sizeGb', newValues)}
+        label={__('Size (GB)')}
+      />
 
-    <Checkbox
-      label={__('Thin provision')}
-      checked={thin}
-      disabled={vmExists}
-      onChange={newValues => updateDisk('thin', newValues)}
-    />
+      <Checkbox
+        label={__('Thin provision')}
+        checked={thin}
+        disabled={vmExists}
+        onChange={newValues => updateDisk('thin', newValues)}
+      />
 
-    <Checkbox
-      label={__('Eager zero')}
-      checked={eagerzero}
-      disabled={vmExists}
-      onChange={newValues => updateDisk('eagerzero', newValues)}
-    />
-  </div>
-);
+      <Checkbox
+        label={__('Eager zero')}
+        checked={eagerzero}
+        disabled={vmExists}
+        onChange={newValues => updateDisk('eagerzero', newValues)}
+      />
+    </div>
+  );
+};
 
 Disk.propTypes = {
   config: PropTypes.shape({