RubyGems - foreman_resource_quota - Versions diffs - 0.4.0 → 0.5.0 - Mend

foreman_resource_quota 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46b1ed89e58274a5cfb37c6c32544151202c8b80e921560e5617cb132f5b7188
-  data.tar.gz: b04271957baf9f86d79281f0b5834733349fe09163d3ccdd4136d19644c396e1
+  metadata.gz: cf7fe8ad234e899887460b9e87041b4e2d05f6eaad6540a9567110326dc6ec7b
+  data.tar.gz: 100ee9af0fd01a0f7d026cafaae6ef1faf9b1e2897952bdb935ae896ed948dca
 SHA512:
-  metadata.gz: 96e7878190f41b66998e8c2f58412e5b4b5db2bd89271b4c42760c1d5894eff7d0dcf5890d9ff9f1231cb3e972e5cc4066b26cfd90899652122a854ebcfe2d74
-  data.tar.gz: b14c3f7584293897ad9d558ff27ed89f9f1fc24b41c3820e6aca8e961ad02016d23fce9aabd8562b9ebbdf5bb59fd17f3a466ec059370fefa189c5abbae3092c
+  metadata.gz: 8511f2e3460efa522ced8b3759555755fc2e4bd44613f68d74266a103a32bc54beafe75982ad58d9263264fd1c77102b44f0eb9564abdf4c972813f7ecbd4135
+  data.tar.gz: 5bd4034854f07d0cc7600864c84904a9295c49f4f0142880c6c5c37855d9fd3b77834dad065fdcf1ffc481a7a2dc7a40c5724e8861896352e349c72440f0c2e6

data/lib/foreman_resource_quota/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module ForemanResourceQuota
-  VERSION = '0.4.0'
+  VERSION = '0.5.0'
 end

data/package.json CHANGED Viewed

@@ -28,11 +28,11 @@
     "@sheerun/mutationobserver-shim": "^0.3.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@theforeman/builder": ">= 12.0.1",
-    "@theforeman/eslint-plugin-foreman": ">= 12.0.1",
-    "@theforeman/find-foreman": ">= 12.0.1",
-    "@theforeman/test": ">= 12.0.1",
-    "@theforeman/vendor-dev": ">= 12.0.1",
+    "@theforeman/builder": ">= 15.0.0",
+    "@theforeman/eslint-plugin-foreman": ">= 15.0.0",
+    "@theforeman/find-foreman": ">= 15.0.0",
+    "@theforeman/test": ">= 15.0.0",
+    "@theforeman/vendor-dev": ">= 15.0.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "prettier": "^1.19.1",

data/webpack/components/ResourceQuotaEmptyState/__test__/__snapshots__/ResourceQuotaEmptyState.test.js.snap CHANGED Viewed

@@ -42,6 +42,7 @@ exports[`ResourceQuotaEmptyState should render 1`] = `
     onClose={[Function]}
     ouiaId="foreman-resource-quota-create-modal"
     ouiaSafe={true}
+    position="default"
     showClose={true}
     title="Create resource quota"
     titleIconVariant={null}

data/webpack/components/ResourceQuotaForm/ResourceQuotaForm.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~~~@theforeman~~/~~vendor~~/~~scss/~~variables';
1	+ @import 'foremanReact/common/variables';

data/webpack/components/ResourceQuotaForm/components/Properties/Properties.scss CHANGED Viewed

@@ -1,9 +1,10 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'foremanReact/common/variables';
-.pf-c-card__body {
+.pf-v5-c-card__body {
   padding-top: 1rem;
 }
-.pf-c-content dl {
+.pf-v5-c-content dl {
   margin-bottom: 0px;
 }

data/webpack/components/ResourceQuotaForm/components/Properties/StaticDetail.js CHANGED Viewed

@@ -34,7 +34,7 @@ const StaticDetail = ({
         {isTextArea ? (
           <TextArea
             id={id}
-            onChange={onChange}
+            onChange={(_event, val) => onChange(val)}
             value={value}
             validated={validated}
             isRequired={isRequired}
@@ -42,7 +42,7 @@ const StaticDetail = ({
         ) : (
           <TextInput
             id={id}
-            onChange={onChange}
+            onChange={(_event, val) => onChange(val)}
             value={value}
             validated={validated}
             isRequired={isRequired}

data/webpack/components/ResourceQuotaForm/components/Properties/index.js CHANGED Viewed

@@ -8,9 +8,9 @@ import {
   Card,
   CardBody,
   CardHeader,
-  CardActions,
   CardTitle,
-  Level,
+  Flex,
+  FlexItem,
   LabelGroup,
   Button,
   Tooltip,
@@ -70,69 +70,83 @@ const Properties = ({
     );
   };
-  return (
-    <Card>
-      <CardHeader>
-        {!isNewQuota && (
-          <CardActions>
-            <Button
-              isLoading={isFetchLoading}
-              icon={<SyncAltIcon />}
-              isSmall
-              onClick={onClickFetch}
-              ref={tooltipRefFetchButton}
+  const renderSyncButton = () => {
+    if (isNewQuota) {
+      return <></>;
+    }
+    return (
+      <Tooltip
+        content={
+          <div>
+            <b> {__('Fetch quota utilization')} </b>
+            <div>
+              {__(
+                'This can take some time since the resources of every host, assigned to this quota, must be requested.'
+              )}
+            </div>
+          </div>
+        }
+        reference={tooltipRefFetchButton}
+      >
+        <Button
+          isLoading={isFetchLoading}
+          icon={<SyncAltIcon />}
+          size="sm"
+          onClick={onClickFetch}
+          ref={tooltipRefFetchButton}
+        />
+      </Tooltip>
+    );
+  };
+  const renderHeaderTitle = () => {
+    if (isNewQuota) {
+      return <CardTitle>{__('Properties')}</CardTitle>;
+    }
+    return (
+      <Flex>
+        <FlexItem>
+          <CardTitle>{__('Properties')}</CardTitle>
+        </FlexItem>
+        <FlexItem>
+          <LabelGroup isCompact>
+            <StatusPropertiesLabel
+              color="blue"
+              iconChild={<ClusterIcon />}
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]
+              }
+              linkUrl={`/hosts?search=resource_quota="${initialName}"`}
+              tooltipText="Number of assigned hosts"
             />
-            <Tooltip
-              content={
-                <div>
-                  <b> {__('Fetch quota utilization')} </b>
-                  <div>
-                    {__(
-                      'This can take some time since the resources of every host, assigned to this quota, must be requested.'
-                    )}
-                  </div>
-                </div>
+            <StatusPropertiesLabel
+              color="blue"
+              iconChild={<UserIcon />}
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERS]
               }
-              reference={tooltipRefFetchButton}
+              linkUrl={`/users?search=resource_quota="${initialName}"`}
+              tooltipText="Number of assigned users"
             />
-          </CardActions>
-        )}
-        {isNewQuota ? (
-          <CardTitle>{__('Properties')}</CardTitle>
-        ) : (
-          <Level hasGutter>
-            <CardTitle>{__('Properties')}</CardTitle>
-            <LabelGroup isCompact>
-              <StatusPropertiesLabel
-                color="blue"
-                iconChild={<ClusterIcon />}
-                statusContent={
-                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]
-                }
-                linkUrl={`/hosts?search=resource_quota="${initialName}"`}
-                tooltipText="Number of assigned hosts"
-              />
-              <StatusPropertiesLabel
-                color="blue"
-                iconChild={<UserIcon />}
-                statusContent={
-                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERS]
-                }
-                linkUrl={`/users?search=resource_quota="${initialName}"`}
-                tooltipText="Number of assigned users"
-              />
-              <StatusPropertiesLabel
-                color="blue"
-                iconChild={<UsersIcon />}
-                statusContent={
-                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]
-                }
-                linkUrl={`/usergroups?search=resource_quota="${initialName}"`}
-                tooltipText="Number of assigned usergroups"
-              />
-            </LabelGroup>
-          </Level>
-        )}
+            <StatusPropertiesLabel
+              color="blue"
+              iconChild={<UsersIcon />}
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]
+              }
+              linkUrl={`/usergroups?search=resource_quota="${initialName}"`}
+              tooltipText="Number of assigned usergroups"
+            />
+          </LabelGroup>
+        </FlexItem>
+      </Flex>
+    );
+  };
+  return (
+    <Card>
+      <CardHeader actions={{ actions: renderSyncButton() }}>
+        {renderHeaderTitle()}
       </CardHeader>
       <CardBody>
         <TextContent>

data/webpack/components/ResourceQuotaForm/components/Resource/Resource.scss CHANGED Viewed

@@ -1,13 +1,13 @@
 //@import '~@theforeman/vendor/scss/variables';
-.pf-c-card__body:first-child {
+.pf-v5-c-card__body:first-child {
   padding-top: 1rem;
 }
-.pf-c-form__label {
-    font-size: var(--pf-global--FontSize--sm);
+.pf-v5-c-form__label {
+    font-size: var(--pf-v5-global--FontSize--sm);
 }
-.pf-c-form__group-label-help {
-  font-size: var(--pf-global--FontSize--sm);
+.pf-v5-c-form__group-label-help {
+  font-size: var(--pf-v5-global--FontSize--sm);
 }

data/webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.js CHANGED Viewed

@@ -3,16 +3,24 @@ import PropTypes from 'prop-types';
 import {
   FormGroup,
   FormHelperText,
+  HelperText,
+  HelperTextItem,
   TextInput,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import './UnitInputField.scss';
 import { findLargestFittingUnit } from '../../../../helper';
 const UnitInputField = ({
@@ -69,11 +77,6 @@ const UnitInputField = ({
     [units]
   );
-  /* warning text displayed beneath value input field (built-in is used for errors) */
-  const helperTextWarning = (text, isHidden) => (
-    <FormHelperText isHidden={isHidden}>{text}</FormHelperText>
-  );
   /* applies the selected unit and checks the bounds */
   const isValid = useCallback(
     val => {
@@ -164,41 +167,81 @@ const UnitInputField = ({
     }
     return (
-      <Dropdown
-        onSelect={onUnitSelect}
-        toggle={
-          <DropdownToggle isDisabled={isDisabled} onToggle={onUnitToggle}>
-            {__(`${selectedUnit.symbol}`)}
-          </DropdownToggle>
-        }
-        isOpen={isUnitOpen}
-        dropdownItems={unitDropdownItems}
-      />
+      <InputGroupItem>
+        <Dropdown
+          onSelect={onUnitSelect}
+          toggle={
+            <DropdownToggle
+              isDisabled={isDisabled}
+              onToggle={(_event, _val) => onUnitToggle()}
+            >
+              {__(`${selectedUnit.symbol}`)}
+            </DropdownToggle>
+          }
+          isOpen={isUnitOpen}
+          dropdownItems={unitDropdownItems}
+        />
+      </InputGroupItem>
     );
   };
+  const renderFormHelperText = () => {
+    if (validated === 'error') {
+      return (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={validated}
+            >
+              {errorText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      );
+    }
+    if (validated === 'warning') {
+      return (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={validated}
+            >
+              {errorText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      );
+    }
+    return <></>;
+  };
   return (
-    <FormGroup
-      label={__('Quota Limit')}
-      validated={validated}
-      helperTextInvalid={errorText}
-      helperText={helperTextWarning(errorText, validated !== 'warning')}
-      fieldId="quota-limit-resource-quota-form-group"
-      labelIcon={labelIcon || {}}
-    >
-      <InputGroup>
-        <TextInput
-          isDisabled={isDisabled}
-          value={inputValue}
-          min={minValue}
-          max={maxValue}
-          validated={validated}
-          id="reg_token_life_time_input"
-          onChange={setInputValue}
-        />
-        {unitView()}
-      </InputGroup>
-    </FormGroup>
+    <div className="container-unit-input-field">
+      <FormGroup
+        label={__('Quota Limit')}
+        validated={validated}
+        fieldId="quota-limit-resource-quota-form-group"
+        labelIcon={labelIcon || {}}
+      >
+        <InputGroup>
+          <InputGroupItem>
+            <TextInput
+              isDisabled={isDisabled}
+              value={inputValue}
+              min={minValue}
+              max={maxValue}
+              validated={validated}
+              id="reg_token_life_time_input"
+              onChange={(_event, val) => setInputValue(val)}
+            />
+          </InputGroupItem>
+          {unitView()}
+        </InputGroup>
+        {renderFormHelperText()}
+      </FormGroup>
+    </div>
   );
 };

data/webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.scss ADDED Viewed

@@ -0,0 +1,7 @@
+@import 'foremanReact/common/variables';
+.container-unit-input-field {
+  .pf-v5-c-input-group__text {
+    word-break: keep-all;
+  }
+}

data/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   ProgressMeasureLocation,
   Tooltip,
 } from '@patternfly/react-core';
-import SyncAltIcon from '@patternfly/react-icons';
+import { SyncAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';

data/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.scss CHANGED Viewed

@@ -1,10 +1,10 @@
 .progress-disabled {
   background-color: transparent;
-  .pf-c-progress .pf-c-progress__bar::before {
-    background-color: var(--pf-global--disabled-color--100);
+  .pf-v5-c-progress .pf-v5-c-progress__bar::before {
+    background-color: var(--pf-v5-global--disabled-color--100);
   }
 }
-.progress-disabled .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
-  background-color: var(--pf-global--palette--black-500);
+.progress-disabled .pf-v5-c-progress.pf-v5-m-inside .pf-v5-c-progress__indicator {
+  background-color: var(--pf-v5-global--palette--black-500);
 }

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

@@ -1,155 +1,153 @@
 // 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="reg_token_life_time_input"
           isDisabled={true}
-          onToggle={[Function]}
-        >
-          MiB
-        </DropdownToggle>
-      }
-    />
-  </InputGroup>
-</FormGroup>
+          max={5}
+          min={0}
+          onChange={[Function]}
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Dropdown
+          dropdownItems={
+            Array [
+              <DropdownItem
+                id="unit-dropdownitem-mib"
+              >
+                MiB
+              </DropdownItem>,
+              <DropdownItem
+                id="unit-dropdownitem-gib"
+              >
+                GiB
+              </DropdownItem>,
+            ]
+          }
+          isOpen={false}
+          onSelect={[Function]}
+          toggle={
+            <DropdownToggle
+              isDisabled={true}
+              onToggle={[Function]}
+            >
+              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="reg_token_life_time_input"
           isDisabled={false}
-          onToggle={[Function]}
-        >
-          MiB
-        </DropdownToggle>
-      }
-    />
-  </InputGroup>
-</FormGroup>
+          max={5}
+          min={0}
+          onChange={[Function]}
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Dropdown
+          dropdownItems={
+            Array [
+              <DropdownItem
+                id="unit-dropdownitem-mib"
+              >
+                MiB
+              </DropdownItem>,
+              <DropdownItem
+                id="unit-dropdownitem-gib"
+              >
+                GiB
+              </DropdownItem>,
+            ]
+          }
+          isOpen={false}
+          onSelect={[Function]}
+          toggle={
+            <DropdownToggle
+              isDisabled={false}
+              onToggle={[Function]}
+            >
+              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="reg_token_life_time_input"
+          isDisabled={false}
+          max={5}
+          min={0}
+          onChange={[Function]}
+          validated="default"
+          value={0}
+        />
+      </InputGroupItem>
+      <InputGroupText>
+        cores
+      </InputGroupText>
+    </InputGroup>
+  </FormGroup>
+</div>
 `;

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

@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import {
   Button,
   Card,
-  CardActions,
   CardExpandableContent,
   CardHeader,
   CardTitle,
@@ -132,19 +131,41 @@ const Resource = ({
     onChange,
   ]);
+  const renderApplyButton = () => {
+    if (isNewQuota) {
+      return <></>;
+    }
+    return (
+      <Button
+        isDisabled={!isUpdateApplicable}
+        size="sm"
+        isActive={isApplyLoading}
+        variant="primary"
+        onClick={onClickApply}
+        isLoading={isApplyLoading}
+      >
+        {__('Apply')}
+      </Button>
+    );
+  };
   return (
     <Card
       isExpanded={isExpanded}
       isDisabledRaised={!isEnabled}
       id={`resource-card-${cardId}`}
     >
-      <CardHeader onExpand={onExpand} isToggleRightAligned={false}>
+      <CardHeader
+        actions={{ actions: renderApplyButton() }}
+        onExpand={onExpand}
+        isToggleRightAligned={false}
+      >
         <Flex>
           <FlexItem>
             <Switch
               id={`switch-${cardId}`}
               aria-label={`switch-${cardId}`}
-              onChange={onChangeEnabled}
+              onChange={(_event, val) => onChangeEnabled(val)}
               isChecked={isEnabled}
             />
           </FlexItem>
@@ -152,20 +173,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/lib/ActionableDetail.scss CHANGED Viewed

@@ -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 CHANGED Viewed

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

data/webpack/lib/EditableTextInput/EditableTextInput.js CHANGED Viewed

@@ -89,87 +89,91 @@ const EditableTextInput = ({
     onKeyUp,
     component,
     value: inputValue || '',
-    onChange: setInputValue,
+    onChange: (_event, val) => setInputValue(val),
     validated: valid,
   };
-  return editing ? (
-    <Split>
-      <SplitItem>
-        {textArea ? (
-          <TextArea {...inputProps} aria-label={`${attribute} text area`} />
-        ) : (
-          <TextInput
-            {...inputProps}
-            type={isPassword && !showPassword ? 'password' : 'text'}
-            aria-label={`${attribute} text input`}
-            ouiaId={ouiaId}
-          />
-        )}
-      </SplitItem>
-      <SplitItem>
-        <Button
-          ouiaId={`submit-button-${attribute}`}
-          aria-label={`submit ${attribute}`}
-          variant="plain"
-          onClick={onSubmit}
-        >
-          <CheckIcon />
-        </Button>
-      </SplitItem>
-      <SplitItem>
-        <Button
-          ouiaId={`clear-button-${attribute}`}
-          aria-label={`clear ${attribute}`}
-          variant="plain"
-          onClick={onClear}
-        >
-          <TimesIcon />
-        </Button>
-      </SplitItem>
-      {isPassword ? (
-        <SplitItem>
-          <Button
-            ouiaId={`show-button-${attribute}`}
-            aria-label={`show-password ${attribute}`}
-            variant="plain"
-            isDisabled={!inputValue?.length}
-            onClick={toggleShowPassword}
-          >
-            {showPassword ? <EyeSlashIcon /> : <EyeIcon />}
-          </Button>
-        </SplitItem>
-      ) : null}
-    </Split>
-  ) : (
-    <Split>
-      <SplitItem>
-        {inputValue ? (
-          <Text
-            className={`text${textArea ? 'Area' : 'Input'}-value`}
-            ouiaId={`${attribute}-text-value`}
-            aria-label={`${attribute} text value`}
-            component={component}
-          >
-            {editing ? inputValue : passwordPlaceholder || inputValue}
-          </Text>
-        ) : (
-          <Text
-            className={`text${textArea ? 'Area' : 'Input'}-placeholder`}
-            ouiaId={`${attribute}-text-value`}
-            aria-label={`${attribute} text value`}
-            component={component}
-          >
-            {passwordPlaceholder || placeholder}
-          </Text>
-        )}
-      </SplitItem>
-      {!disabled && (
-        <SplitItem>
-          <PencilEditButton {...{ attribute, onEditClick }} />
-        </SplitItem>
+  return (
+    <div className="container-editable-text-input">
+      {editing ? (
+        <Split>
+          <SplitItem>
+            {textArea ? (
+              <TextArea {...inputProps} aria-label={`${attribute} text area`} />
+            ) : (
+              <TextInput
+                {...inputProps}
+                type={isPassword && !showPassword ? 'password' : 'text'}
+                aria-label={`${attribute} text input`}
+                ouiaId={ouiaId}
+              />
+            )}
+          </SplitItem>
+          <SplitItem>
+            <Button
+              ouiaId={`submit-button-${attribute}`}
+              aria-label={`submit ${attribute}`}
+              variant="plain"
+              onClick={onSubmit}
+            >
+              <CheckIcon />
+            </Button>
+          </SplitItem>
+          <SplitItem>
+            <Button
+              ouiaId={`clear-button-${attribute}`}
+              aria-label={`clear ${attribute}`}
+              variant="plain"
+              onClick={onClear}
+            >
+              <TimesIcon />
+            </Button>
+          </SplitItem>
+          {isPassword ? (
+            <SplitItem>
+              <Button
+                ouiaId={`show-button-${attribute}`}
+                aria-label={`show-password ${attribute}`}
+                variant="plain"
+                isDisabled={!inputValue?.length}
+                onClick={toggleShowPassword}
+              >
+                {showPassword ? <EyeSlashIcon /> : <EyeIcon />}
+              </Button>
+            </SplitItem>
+          ) : null}
+        </Split>
+      ) : (
+        <Split>
+          <SplitItem>
+            {inputValue ? (
+              <Text
+                className={`text${textArea ? 'Area' : 'Input'}-value`}
+                ouiaId={`${attribute}-text-value`}
+                aria-label={`${attribute} text value`}
+                component={component}
+              >
+                {editing ? inputValue : passwordPlaceholder || inputValue}
+              </Text>
+            ) : (
+              <Text
+                className={`text${textArea ? 'Area' : 'Input'}-placeholder`}
+                ouiaId={`${attribute}-text-value`}
+                aria-label={`${attribute} text value`}
+                component={component}
+              >
+                {passwordPlaceholder || placeholder}
+              </Text>
+            )}
+          </SplitItem>
+          {!disabled && (
+            <SplitItem>
+              <PencilEditButton {...{ attribute, onEditClick }} />
+            </SplitItem>
+          )}
+        </Split>
       )}
-    </Split>
+    </div>
   );
 };

data/webpack/lib/EditableTextInput/editableTextInput.scss CHANGED Viewed

@@ -1,38 +1,40 @@
 /* Credits: https://github.com/Katello/katello/blob/631d5bb83dc5d87320ee9002a6de33809a281b3e/webpack/components/EditableTextInput/editableTextInput.scss */
-@import '~@theforeman/vendor/scss/variables';
+@import 'foremanReact/common/variables';
-.foreman-limited-text {
-  max-width: 200px;
-  margin: auto 0px;
-}
+.container-editable-text-input {
+  .foreman-limited-text {
+    max-width: 200px;
+    margin: auto 0px;
+  }
-.foreman-limited-editable-text {
-  max-width: 300px;
-  margin: auto 0px;
-}
+  .foreman-limited-editable-text {
+    max-width: 300px;
+    margin: auto 0px;
+  }
-// Edit icon isn't in line with text
-.foreman-edit-icon {
-  padding-top: 2px;
-}
+  // Edit icon isn't in line with text
+  .foreman-edit-icon {
+    padding-top: 2px;
+  }
-.textInput-placeholder, .textArea-placeholder {
-  color: var(--pf-global--disabled-color--100);
-}
+  .textInput-placeholder, .textArea-placeholder {
+    color: var(--pf-v5-global--disabled-color--100);
+  }
-textarea.pf-c-form-control {
-    width: 215px;
-}
+  textarea.pf-v5-c-form-control {
+      width: 215px;
+  }
-.pf-c-form-control:not(textarea) {
-  width: 215px;
-}
+  .pf-v5-c-form-control:not(textarea) {
+    width: 215px;
+  }
-p {
-  width: 215px;
-}
+  p {
+    width: 215px;
+  }
-p.textArea-placeholder, p.textArea-value {
-  width: 215px;
-  height: 50px;
+  p.textArea-placeholder, p.textArea-value {
+    width: 215px;
+    height: 50px;
+  }
 }

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_resource_quota
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Bastian Schmidt
@@ -19,7 +19,7 @@ dependencies:
         version: '10.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '11'
+        version: '12'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -29,7 +29,7 @@ dependencies:
         version: '10.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '11'
+        version: '12'
 - !ruby/object:Gem::Dependency
   name: theforeman-rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -276,6 +276,7 @@ files:
 - webpack/components/ResourceQuotaForm/components/QuotaState.js
 - webpack/components/ResourceQuotaForm/components/Resource/Resource.scss
 - webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.js
+- webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.scss
 - webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js
 - webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.scss
 - webpack/components/ResourceQuotaForm/components/Resource/__test__/UnitInputField.test.js