foreman_resource_quota 0.3.1 → 0.5.0

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import LabelIcon from 'foremanReact/components/common/LabelIcon';
+
+import UnitInputField from '../UnitInputField';
+
+const getDefaultProps = () => ({
+  initialValue: 0,
+  onChange: jest.fn(),
+  isDisabled: false,
+  handleInputValidation: jest.fn(),
+  units: [
+    { symbol: 'MiB', factor: 1 },
+    { symbol: 'GiB', factor: 1024 },
+  ],
+  labelIcon: <LabelIcon text="Descriptive title." />,
+  minValue: 0,
+  maxValue: 5,
+});
+
+const fixtureDefault = {
+  'should render default': {
+    ...getDefaultProps(),
+  },
+};
+
+const fixtureSingleUnit = {
+  'should render without dropdown (single unit)': {
+    ...getDefaultProps(),
+    units: [{ symbol: 'cores', factor: 1 }],
+  },
+};
+
+const fixtureDisabled = {
+  'should render as disabled field': {
+    ...getDefaultProps(),
+    isDisabled: true,
+  },
+};
+
+describe('UnitInputField', () => {
+  testComponentSnapshotsWithFixtures(UnitInputField, fixtureDefault);
+  testComponentSnapshotsWithFixtures(UnitInputField, fixtureSingleUnit);
+  testComponentSnapshotsWithFixtures(UnitInputField, fixtureDisabled);
+
+  it('triggers handleInputValidation on unit change', async () => {
+    const props = getDefaultProps();
+
+    render(<UnitInputField {...props} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 3 } });
+
+    // gets called (1.) with initialValue and (2.) the simulated change
+    expect(props.onChange).toHaveBeenCalledTimes(2);
+    expect(props.onChange).toHaveBeenCalledWith(props.initialValue);
+    expect(props.onChange).toHaveBeenLastCalledWith(3);
+    expect(props.handleInputValidation).toHaveBeenCalledTimes(2);
+    expect(props.handleInputValidation).toHaveBeenCalledWith(true);
+  });
+
+  test('triggers onChange with rounded value', () => {
+    const props = getDefaultProps();
+
+    render(<UnitInputField {...props} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 3.5 } });
+
+    // gets called (1.) with initialValue and (2.) the simulated change
+    expect(props.onChange).toHaveBeenCalledTimes(2);
+    expect(props.onChange).toHaveBeenCalledWith(props.initialValue);
+    expect(props.onChange).toHaveBeenLastCalledWith(3);
+    expect(props.handleInputValidation).toHaveBeenCalledTimes(2);
+    expect(props.handleInputValidation).toHaveBeenCalledWith(true);
+  });
+
+  test('does not trigger onChange when value out of bounds', () => {
+    const props = getDefaultProps();
+
+    render(<UnitInputField {...props} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: props.maxValue + 1 } });
+
+    // onChange only called for initialValue
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+    expect(props.onChange).toHaveBeenCalledWith(props.initialValue);
+    // handleInputValidation called with false => invalid
+    expect(props.handleInputValidation).toHaveBeenCalledTimes(2);
+    expect(props.handleInputValidation).toHaveBeenLastCalledWith(false);
+  });
+
+  test('does not trigger onChange when value is not a number', () => {
+    const props = getDefaultProps();
+
+    render(<UnitInputField {...props} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'no number' } });
+
+    // onChange only called for initialValue
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+    expect(props.onChange).toHaveBeenCalledWith(props.initialValue);
+    // handleInputValidation called with false => invalid
+    expect(props.handleInputValidation).toHaveBeenCalledTimes(2);
+    expect(props.handleInputValidation).toHaveBeenLastCalledWith(false);
+  });
+});

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

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnitInputField should render as disabled field 1`] = `
+<div
+  className="container-unit-input-field"
+>
+  <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}
+          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`] = `
+<div
+  className="container-unit-input-field"
+>
+  <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>
+      <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`] = `
+<div
+  className="container-unit-input-field"
+>
+  <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

@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import {
   Button,
   Card,
-  CardActions,
   CardExpandableContent,
   CardHeader,
   CardTitle,
@@ -74,7 +73,7 @@ const Resource = ({
       dispatchAPICallbackToast(
         success,
         response,
-        `Sucessfully applied ${resourceTitle}.`,
+        `Successfully applied ${resourceTitle}.`,
         `An error occurred appyling ${resourceTitle}.`
       )
     );
@@ -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/components/ResourceQuotaForm/components/Submit.js

@@ -31,7 +31,7 @@ const Submit = ({ isValid, onCreate, onSubmit }) => {
       dispatchAPICallbackToast(
         success,
         response,
-        `Sucessfully created new Resource Quota`,
+        `Successfully created new Resource Quota`,
         `An error occurred while creating new Resource Quota.`
       )
     );

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}
     />
   );

data/webpack/lib/EditableTextInput/EditableTextInput.js

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

@@ -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;
+  }
 }

data/webpack/test_helper.js

@@ -0,0 +1,49 @@
+/* Credits: https://github.com/theforeman/foreman_ansible/blob/master/webpack/testHelper.js */
+import React, { useState } from 'react';
+import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
+import { reducers as apiReducer, APIMiddleware } from 'foremanReact/redux/API';
+import { Provider } from 'react-redux';
+import { MockedProvider } from '@apollo/react-testing';
+import thunk from 'redux-thunk';
+
+import ConfirmModal, {
+  reducers as confirmModalReducers,
+} from 'foremanReact/components/ConfirmModal';
+import { getForemanContext } from 'foremanReact/Root/Context/ForemanContext';
+
+const reducers = combineReducers({ ...apiReducer, ...confirmModalReducers });
+export const generateStore = () =>
+  createStore(reducers, compose(applyMiddleware(thunk, APIMiddleware)));
+
+// use to resolve async mock requests for apollo MockedProvider
+export const tick = () => new Promise(resolve => setTimeout(resolve, 0));
+
+export const withRedux = Component => props => (
+  <Provider store={generateStore()}>
+    <Component {...props} />
+    <ConfirmModal />
+  </Provider>
+);
+
+export const withMockedProvider = Component => props => {
+  const [context, setContext] = useState({
+    metadata: {
+      UISettings: {
+        perPage: 20,
+      },
+    },
+  });
+  const contextData = { context, setContext };
+  const ForemanContext = getForemanContext(contextData);
+
+  // eslint-disable-next-line react/prop-types
+  const { mocks, ...rest } = props;
+
+  return (
+    <ForemanContext.Provider value={contextData}>
+      <MockedProvider mocks={mocks}>
+        <Component {...rest} />
+      </MockedProvider>
+    </ForemanContext.Provider>
+  );
+};