foreman_resource_quota 0.4.0 → 0.6.0

data/webpack/components/ResourceQuotaForm/components/Resource/__test__/__snapshots__/UnitInputField.test.js.snap

@@ -1,155 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UnitInputField should render as disabled field 1`] = `
-<FormGroup
-  fieldId="quota-limit-resource-quota-form-group"
-  helperText={
-    <FormHelperText
-      isHidden={true}
-    >
-      
-    </FormHelperText>
-  }
-  helperTextInvalid=""
-  label="Quota Limit"
-  labelIcon={
-    <LabelIcon
-      text="Descriptive title."
-    />
-  }
-  validated="default"
+<div
+  className="container-unit-input-field"
 >
-  <InputGroup>
-    <TextInput
-      id="reg_token_life_time_input"
-      isDisabled={true}
-      max={5}
-      min={0}
-      onChange={[Function]}
-      validated="default"
-      value={0}
-    />
-    <Dropdown
-      dropdownItems={
-        Array [
-          <DropdownItem
-            id="unit-dropdownitem-mib"
-          >
-            MiB
-          </DropdownItem>,
-          <DropdownItem
-            id="unit-dropdownitem-gib"
-          >
-            GiB
-          </DropdownItem>,
-        ]
-      }
-      isOpen={false}
-      onSelect={[Function]}
-      toggle={
-        <DropdownToggle
+  <FormGroup
+    fieldId="quota-limit-resource-quota-form-group"
+    label="Quota Limit"
+    labelIcon={
+      <LabelIcon
+        text="Descriptive title."
+      />
+    }
+    validated="default"
+  >
+    <InputGroup>
+      <InputGroupItem>
+        <TextInput
+          id="resource-quota-reg-token-life-time-input"
           isDisabled={true}
-          onToggle={[Function]}
-        >
-          MiB
-        </DropdownToggle>
-      }
-    />
-  </InputGroup>
-</FormGroup>
+          max={5}
+          min={0}
+          onChange={[Function]}
+          ouiaId="resource-quota-reg-token-life-time-input"
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Dropdown
+          dropdownItems={
+            Array [
+              <DropdownItem
+                id="unit-dropdownitem-mib"
+                ouiaId="unit-dropdownitem-mib"
+              >
+                MiB
+              </DropdownItem>,
+              <DropdownItem
+                id="unit-dropdownitem-gib"
+                ouiaId="unit-dropdownitem-gib"
+              >
+                GiB
+              </DropdownItem>,
+            ]
+          }
+          isOpen={false}
+          onSelect={[Function]}
+          ouiaId="resource-quota-unit-input-field-input-group-item-dropdown"
+          toggle={
+            <DropdownToggle
+              isDisabled={true}
+              onToggle={[Function]}
+              ouiaId="resource-quota-unit-input-field-input-group-item-dropdowni-toggle"
+            >
+              MiB
+            </DropdownToggle>
+          }
+        />
+      </InputGroupItem>
+    </InputGroup>
+  </FormGroup>
+</div>
 `;
 
 exports[`UnitInputField should render default 1`] = `
-<FormGroup
-  fieldId="quota-limit-resource-quota-form-group"
-  helperText={
-    <FormHelperText
-      isHidden={true}
-    >
-      
-    </FormHelperText>
-  }
-  helperTextInvalid=""
-  label="Quota Limit"
-  labelIcon={
-    <LabelIcon
-      text="Descriptive title."
-    />
-  }
-  validated="default"
+<div
+  className="container-unit-input-field"
 >
-  <InputGroup>
-    <TextInput
-      id="reg_token_life_time_input"
-      isDisabled={false}
-      max={5}
-      min={0}
-      onChange={[Function]}
-      validated="default"
-      value={0}
-    />
-    <Dropdown
-      dropdownItems={
-        Array [
-          <DropdownItem
-            id="unit-dropdownitem-mib"
-          >
-            MiB
-          </DropdownItem>,
-          <DropdownItem
-            id="unit-dropdownitem-gib"
-          >
-            GiB
-          </DropdownItem>,
-        ]
-      }
-      isOpen={false}
-      onSelect={[Function]}
-      toggle={
-        <DropdownToggle
+  <FormGroup
+    fieldId="quota-limit-resource-quota-form-group"
+    label="Quota Limit"
+    labelIcon={
+      <LabelIcon
+        text="Descriptive title."
+      />
+    }
+    validated="default"
+  >
+    <InputGroup>
+      <InputGroupItem>
+        <TextInput
+          id="resource-quota-reg-token-life-time-input"
           isDisabled={false}
-          onToggle={[Function]}
-        >
-          MiB
-        </DropdownToggle>
-      }
-    />
-  </InputGroup>
-</FormGroup>
+          max={5}
+          min={0}
+          onChange={[Function]}
+          ouiaId="resource-quota-reg-token-life-time-input"
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Dropdown
+          dropdownItems={
+            Array [
+              <DropdownItem
+                id="unit-dropdownitem-mib"
+                ouiaId="unit-dropdownitem-mib"
+              >
+                MiB
+              </DropdownItem>,
+              <DropdownItem
+                id="unit-dropdownitem-gib"
+                ouiaId="unit-dropdownitem-gib"
+              >
+                GiB
+              </DropdownItem>,
+            ]
+          }
+          isOpen={false}
+          onSelect={[Function]}
+          ouiaId="resource-quota-unit-input-field-input-group-item-dropdown"
+          toggle={
+            <DropdownToggle
+              isDisabled={false}
+              onToggle={[Function]}
+              ouiaId="resource-quota-unit-input-field-input-group-item-dropdowni-toggle"
+            >
+              MiB
+            </DropdownToggle>
+          }
+        />
+      </InputGroupItem>
+    </InputGroup>
+  </FormGroup>
+</div>
 `;
 
 exports[`UnitInputField should render without dropdown (single unit) 1`] = `
-<FormGroup
-  fieldId="quota-limit-resource-quota-form-group"
-  helperText={
-    <FormHelperText
-      isHidden={true}
-    >
-      
-    </FormHelperText>
-  }
-  helperTextInvalid=""
-  label="Quota Limit"
-  labelIcon={
-    <LabelIcon
-      text="Descriptive title."
-    />
-  }
-  validated="default"
+<div
+  className="container-unit-input-field"
 >
-  <InputGroup>
-    <TextInput
-      id="reg_token_life_time_input"
-      isDisabled={false}
-      max={5}
-      min={0}
-      onChange={[Function]}
-      validated="default"
-      value={0}
-    />
-    <InputGroupText>
-      cores
-    </InputGroupText>
-  </InputGroup>
-</FormGroup>
+  <FormGroup
+    fieldId="quota-limit-resource-quota-form-group"
+    label="Quota Limit"
+    labelIcon={
+      <LabelIcon
+        text="Descriptive title."
+      />
+    }
+    validated="default"
+  >
+    <InputGroup>
+      <InputGroupItem>
+        <TextInput
+          id="resource-quota-reg-token-life-time-input"
+          isDisabled={false}
+          max={5}
+          min={0}
+          onChange={[Function]}
+          ouiaId="resource-quota-reg-token-life-time-input"
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupText>
+        cores
+      </InputGroupText>
+    </InputGroup>
+  </FormGroup>
+</div>
 `;

data/webpack/components/ResourceQuotaForm/components/Resource/index.js

@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import {
   Button,
   Card,
-  CardActions,
   CardExpandableContent,
   CardHeader,
   CardTitle,
@@ -132,19 +131,45 @@ const Resource = ({
     onChange,
   ]);
 
+  const renderApplyButton = () => {
+    if (isNewQuota) {
+      return <></>;
+    }
+    return (
+      <Button
+        isDisabled={!isUpdateApplicable}
+        size="sm"
+        isActive={isApplyLoading}
+        variant="primary"
+        onClick={onClickApply}
+        isLoading={isApplyLoading}
+        id="resource-quota-resource-index-button-apply"
+        ouiaId="resource-quota-resource-index-button-apply"
+      >
+        {__('Apply')}
+      </Button>
+    );
+  };
+
   return (
     <Card
       isExpanded={isExpanded}
       isDisabledRaised={!isEnabled}
       id={`resource-card-${cardId}`}
+      ouiaId={`resource-card-${cardId}`}
     >
-      <CardHeader onExpand={onExpand} isToggleRightAligned={false}>
+      <CardHeader
+        actions={{ actions: renderApplyButton() }}
+        onExpand={onExpand}
+        isToggleRightAligned={false}
+      >
         <Flex>
           <FlexItem>
             <Switch
               id={`switch-${cardId}`}
+              ouiaId={`switch-${cardId}`}
               aria-label={`switch-${cardId}`}
-              onChange={onChangeEnabled}
+              onChange={(_event, val) => onChangeEnabled(val)}
               isChecked={isEnabled}
             />
           </FlexItem>
@@ -152,20 +177,6 @@ const Resource = ({
             <CardTitle>{resourceTitle}</CardTitle>
           </FlexItem>
         </Flex>
-        {!isNewQuota && (
-          <CardActions>
-            <Button
-              isDisabled={!isUpdateApplicable}
-              isSmall
-              isActive={isApplyLoading}
-              variant="primary"
-              onClick={onClickApply}
-              isLoading={isApplyLoading}
-            >
-              {__('Apply')}
-            </Button>
-          </CardActions>
-        )}
       </CardHeader>
       <CardExpandableContent>
         <CardBody>

data/webpack/components/ResourceQuotaForm/components/Submit.js

@@ -48,7 +48,8 @@ const Submit = ({ isValid, onCreate, onSubmit }) => {
           onClick={handleOnSubmit}
           isLoading={isSubmitLoading}
           variant="primary"
-          id="submit-button"
+          id="resource-quota-submit-button"
+          ouiaId="resource-quota-submit-button"
         >
           {__('Create resource quota')}
         </Button>

data/webpack/components/ResourceQuotaForm/index.js

@@ -16,6 +16,7 @@ import {
   RESOURCE_IDENTIFIER_CPU,
   RESOURCE_IDENTIFIER_MEMORY,
   RESOURCE_IDENTIFIER_DISK,
+  RESOURCE_IDENTIFIER_UNASSIGNED,
   RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS,
   RESOURCE_IDENTIFIER_STATUS_NUM_USERS,
   RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS,
@@ -25,6 +26,7 @@ import {
 
 const ResourceQuotaForm = ({
   isNewQuota,
+  showAssignmentWarning,
   initialProperties,
   initialStatus,
   onSubmit,
@@ -72,33 +74,41 @@ const ResourceQuotaForm = ({
                   RESOURCE_IDENTIFIER_DESCRIPTION
                 )}
                 initialStatus={modelState.getQuotaStatus()}
-                handleInputValidation={modelState.handleInputValidation}
-                onChange={modelState.onChange}
-                onApply={modelState.onApply}
-                onFetch={modelState.onFetchUtilization}
-              />
-            )}
-          </SkeletonLoader>
-        </GalleryItem>
-        <GalleryItem key="edit-resource-quota-resources-item">
-          <SkeletonLoader
-            skeletonProps={{ width: 400 }}
-            status={isNewQuota || !isLoading ? STATUS.RESOLVED : STATUS.PENDING}
-          >
-            {(!isLoading || isNewQuota) && (
-              <Resources
-                isNewQuota={isNewQuota}
-                initialProperties={modelState.getQuotaProperties()}
-                initialStatus={modelState.getQuotaStatus(
-                  RESOURCE_IDENTIFIER_STATUS_UTILIZATION
+                unassigned={modelState.getQuotaProperties(
+                  RESOURCE_IDENTIFIER_UNASSIGNED
                 )}
+                showAssignmentWarning={showAssignmentWarning}
                 handleInputValidation={modelState.handleInputValidation}
                 onChange={modelState.onChange}
                 onApply={modelState.onApply}
+                onFetch={modelState.onFetchUtilization}
               />
             )}
           </SkeletonLoader>
         </GalleryItem>
+        {!modelState.getQuotaProperties(RESOURCE_IDENTIFIER_UNASSIGNED) && (
+          <GalleryItem key="edit-resource-quota-resources-item">
+            <SkeletonLoader
+              skeletonProps={{ width: 400 }}
+              status={
+                isNewQuota || !isLoading ? STATUS.RESOLVED : STATUS.PENDING
+              }
+            >
+              {(!isLoading || isNewQuota) && (
+                <Resources
+                  isNewQuota={isNewQuota}
+                  initialProperties={modelState.getQuotaProperties()}
+                  initialStatus={modelState.getQuotaStatus(
+                    RESOURCE_IDENTIFIER_STATUS_UTILIZATION
+                  )}
+                  handleInputValidation={modelState.handleInputValidation}
+                  onChange={modelState.onChange}
+                  onApply={modelState.onApply}
+                />
+              )}
+            </SkeletonLoader>
+          </GalleryItem>
+        )}
         {isNewQuota && (
           <GalleryItem key="edit-resource-quota-submit-item">
             <Submit
@@ -114,6 +124,7 @@ const ResourceQuotaForm = ({
 };
 
 ResourceQuotaForm.defaultProps = {
+  showAssignmentWarning: false,
   onSubmit: null,
   quotaChangesCallback: null,
   initialProperties: {
@@ -122,6 +133,7 @@ ResourceQuotaForm.defaultProps = {
     [RESOURCE_IDENTIFIER_CPU]: null,
     [RESOURCE_IDENTIFIER_MEMORY]: null,
     [RESOURCE_IDENTIFIER_DISK]: null,
+    [RESOURCE_IDENTIFIER_UNASSIGNED]: false,
   },
   initialStatus: {
     [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: null,
@@ -138,6 +150,7 @@ ResourceQuotaForm.defaultProps = {
 
 ResourceQuotaForm.propTypes = {
   isNewQuota: PropTypes.bool.isRequired,
+  showAssignmentWarning: PropTypes.bool,
   onSubmit: PropTypes.func,
   quotaChangesCallback: PropTypes.func,
   initialProperties: PropTypes.shape({
@@ -147,6 +160,7 @@ ResourceQuotaForm.propTypes = {
     [RESOURCE_IDENTIFIER_CPU]: PropTypes.number,
     [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.number,
     [RESOURCE_IDENTIFIER_DISK]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_UNASSIGNED]: PropTypes.bool,
   }),
   initialStatus: PropTypes.shape({
     [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: PropTypes.oneOfType([

data/webpack/components/UpdateResourceQuotaModal.js

@@ -20,7 +20,11 @@ import {
   RESOURCE_IDENTIFIER_STATUS_UTILIZATION,
 } from './ResourceQuotaForm/ResourceQuotaFormConstants';
 
-const UpdateResourceQuotaModal = ({ initialProperties, initialStatus }) => {
+const UpdateResourceQuotaModal = ({
+  initialProperties,
+  initialStatus,
+  showAssignmentWarning,
+}) => {
   const staticId = `${MODAL_ID_UPDATE_RESOURCE_QUOTA}-${initialProperties[RESOURCE_IDENTIFIER_ID]}`;
   const [isOpen, setIsOpen] = useState(false);
   const [quotaProperties, setQuotaProperties] = useState(initialProperties);
@@ -52,6 +56,7 @@ const UpdateResourceQuotaModal = ({ initialProperties, initialStatus }) => {
       >
         <ResourceQuotaForm
           isNewQuota={false}
+          showAssignmentWarning={showAssignmentWarning}
           initialProperties={quotaProperties}
           initialStatus={quotaStatus}
           quotaChangesCallback={onQuotaChangesCallback}
@@ -138,6 +143,7 @@ UpdateResourceQuotaModal.propTypes = {
       ]),
     }),
   }),
+  showAssignmentWarning: PropTypes.bool.isRequired,
 };
 
 export default UpdateResourceQuotaModal;

data/webpack/lib/ActionableDetail.scss

@@ -1,4 +1,4 @@
 
 dt {
-  font-size: var(--pf-global--FontSize--sm);
+  font-size: var(--pf-v5-global--FontSize--sm);
 }

data/webpack/lib/EditableSwitch.js

@@ -23,7 +23,7 @@ const EditableSwitch = ({
       aria-label={identifier}
       ouiaId={`switch-${identifier}`}
       isChecked={value}
-      onChange={onSwitch}
+      onChange={(_event, val) => onSwitch(val)}
       disabled={disabled}
     />
   );