foreman_templates 7.0.1 → 7.0.2

data/webpack/components/NewTemplateSync/components/SyncSettingField.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldLevelHelp } from 'patternfly-react';
+
+import TextButtonField from './TextButtonField';
+import ButtonTooltip from './ButtonTooltip';
+
+const SyncSettingField = ({ setting, resetField, disabled }) => {
+  const label = settingObj => `${settingObj.fullName} `;
+
+  const fieldSelector = settingObj => {
+    if (settingObj.settingsType === 'boolean') {
+      return 'checkbox';
+    }
+
+    if (settingObj.selection.length !== 0) {
+      return 'select';
+    }
+
+    return 'text';
+  };
+
+  const handleReset = (settingName, settingValue) => {
+    resetField(settingName, settingValue);
+  };
+
+  return (
+    <TextButtonField
+      name={setting.name}
+      label={label(setting)}
+      blank={{}}
+      item={setting}
+      buttonAttrs={{
+        buttonText: <ButtonTooltip tooltipId={setting.name} />,
+        buttonAction: () => handleReset(setting.name, setting.value),
+      }}
+      fieldSelector={fieldSelector}
+      disabled={disabled}
+      fieldRequired={setting.required}
+      validate={setting.validate}
+      tooltipHelp={<FieldLevelHelp content={setting.description} />}
+    >
+      {setting.value}
+    </TextButtonField>
+  );
+};
+
+SyncSettingField.propTypes = {
+  setting: PropTypes.object.isRequired,
+  resetField: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+export default SyncSettingField;

data/webpack/components/NewTemplateSync/components/SyncSettingFields.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { memoize } from 'lodash';
+import PropTypes from 'prop-types';
+
+import SyncSettingField from './SyncSettingField';
+
+const repoFormat = memoize(formatAry => value => {
+  if (value) {
+    const valid = formatAry
+      .map(item => value.startsWith(item))
+      .reduce((memo, item) => item || memo, false);
+
+    if (valid) {
+      return undefined;
+    }
+  }
+
+  return `Invalid repo format, must start with one of: ${formatAry.join(', ')}`;
+});
+
+const SyncSettingsFields = ({
+  importSettings,
+  exportSettings,
+  syncType,
+  resetField,
+  disabled,
+  validationData,
+}) => {
+  const addValidationToSetting = (setting, validations) =>
+    setting.name === 'repo'
+      ? setting.merge({
+          required: true,
+          validate: [repoFormat(validations.repo)],
+        })
+      : setting;
+
+  const settingsAry = syncType === 'import' ? importSettings : exportSettings;
+
+  return (
+    <React.Fragment>
+      {settingsAry
+        .map(setting => addValidationToSetting(setting, validationData))
+        .map(setting => (
+          <SyncSettingField
+            setting={setting}
+            key={setting.name}
+            disabled={disabled}
+            resetField={resetField}
+          />
+        ))}
+    </React.Fragment>
+  );
+};
+
+SyncSettingsFields.propTypes = {
+  importSettings: PropTypes.array.isRequired,
+  exportSettings: PropTypes.array.isRequired,
+  syncType: PropTypes.string.isRequired,
+  resetField: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  validationData: PropTypes.object,
+};
+
+SyncSettingsFields.defaultProps = {
+  disabled: false,
+  validationData: {},
+};
+
+export default SyncSettingsFields;

data/webpack/components/NewTemplateSync/components/SyncTypeRadios.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Radio } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+
+const SyncTypeRadios = ({
+  controlLabel,
+  radios,
+  name,
+  className = '',
+  inputClassName = 'col-md-6',
+  disabled = false,
+}) => (
+  <CommonForm
+    label={controlLabel}
+    className={className}
+    inputClassName={inputClassName}
+  >
+    {radios.map((item, index) => (
+      <Radio
+        key={index}
+        inline
+        title={item.label}
+        checked={item.checked}
+        disabled={disabled}
+        value={item.value}
+        onChange={item.onChange}
+      >
+        {item.label}
+      </Radio>
+    ))}
+  </CommonForm>
+);
+
+SyncTypeRadios.propTypes = {
+  controlLabel: PropTypes.string.isRequired,
+  radios: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+SyncTypeRadios.defaultProps = {
+  className: undefined,
+  inputClassName: undefined,
+  disabled: false,
+};
+
+export default SyncTypeRadios;

data/webpack/components/NewTemplateSync/components/TextButtonField/BlankOption.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const BlankOption = ({ blank }) => {
+  if (Object.keys(blank).length === 0) {
+    return null;
+  }
+  return (
+    <option key={blank.value} value={blank.value}>
+      {blank.label}
+    </option>
+  );
+};
+
+BlankOption.propTypes = {
+  blank: PropTypes.object.isRequired,
+};
+
+export default BlankOption;

data/webpack/components/NewTemplateSync/components/TextButtonField/CheckboxField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Checkbox } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+const CheckboxField = ({ input, item, disabled }) => (
+  <Checkbox {...input} disabled={disabled} checked={input.value} />
+);
+
+CheckboxField.propTypes = {
+  input: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+export default CheckboxField;

data/webpack/components/NewTemplateSync/components/TextButtonField/FieldType.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import InputField from './InputField';
+import SelectField from './SelectField';
+import CheckboxField from './CheckboxField';
+
+const FieldType = ({ item, fieldSelector, input, disabled, blank }) => {
+  if (!fieldSelector) {
+    return <InputField input={input} disabled={disabled} />;
+  }
+
+  switch (fieldSelector(item)) {
+    case 'text':
+      return <InputField input={input} disabled={disabled} />;
+    case 'select':
+      return (
+        <SelectField
+          input={input}
+          blank={blank}
+          item={item}
+          disabled={disabled}
+        />
+      );
+    case 'checkbox':
+      return <CheckboxField input={input} item={item} disabled={disabled} />;
+    default:
+      throw new Error(`Unknown field type ${fieldSelector(item)} for ${item}`);
+  }
+};
+
+FieldType.propTypes = {
+  item: PropTypes.object.isRequired,
+  fieldSelector: PropTypes.func,
+  input: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  blank: PropTypes.object,
+};
+
+FieldType.defaultProps = {
+  fieldSelector: null,
+  disabled: false,
+  blank: {},
+};
+
+export default FieldType;

data/webpack/components/NewTemplateSync/components/TextButtonField/InputField.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormControl } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+const InputField = ({ input, disabled }) => (
+  <FormControl {...input} type="text" disabled={disabled} />
+);
+
+InputField.propTypes = {
+  input: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+export default InputField;

data/webpack/components/NewTemplateSync/components/TextButtonField/RenderField.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+import { InputGroup, Button } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+import FieldType from './FieldType';
+
+const RenderField = ({
+  input,
+  label,
+  className,
+  inputClassName,
+  fieldRequired,
+  disabled,
+  blank,
+  item,
+  fieldSelector,
+  tooltipHelp,
+  meta: { error, touched },
+  buttonAttrs: { buttonText, buttonAction },
+}) => (
+  <CommonForm
+    label={label}
+    className={className}
+    inputClassName={inputClassName}
+    required={fieldRequired}
+    error={error}
+    touched={touched}
+    tooltipHelp={tooltipHelp}
+  >
+    <InputGroup>
+      <FieldType
+        item={item}
+        fieldSelector={fieldSelector}
+        input={input}
+        disabled={disabled}
+        blank={blank}
+      />
+      <InputGroup.Button className="left-padded">
+        <Button onClick={buttonAction} disabled={disabled}>
+          {buttonText}
+        </Button>
+      </InputGroup.Button>
+    </InputGroup>
+  </CommonForm>
+);
+
+RenderField.propTypes = {
+  input: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  fieldRequired: PropTypes.bool,
+  disabled: PropTypes.bool.isRequired,
+  blank: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  fieldSelector: PropTypes.func,
+  tooltipHelp: PropTypes.node,
+  meta: PropTypes.object,
+  buttonAttrs: PropTypes.object,
+};
+
+RenderField.defaultProps = {
+  className: '',
+  inputClassName: 'col-md-4',
+  fieldRequired: false,
+  blank: {},
+  fieldSelector: null,
+  tooltipHelp: null,
+  meta: {},
+  buttonAttrs: {},
+};
+
+export default RenderField;

data/webpack/components/NewTemplateSync/components/TextButtonField/SelectField.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormControl } from 'patternfly-react';
+import BlankOption from './BlankOption';
+
+const SelectField = ({ input, blank, item, disabled }) => (
+  <FormControl {...input} componentClass="select" disabled={disabled}>
+    <BlankOption blank={blank} />
+    {item.selection.map(opt => (
+      <option key={opt.value} value={opt.value}>
+        {opt.label}
+      </option>
+    ))}
+  </FormControl>
+);
+
+SelectField.propTypes = {
+  input: PropTypes.object.isRequired,
+  blank: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+export default SelectField;

data/webpack/components/NewTemplateSync/components/TextButtonField/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Field } from 'redux-form';
+import PropTypes from 'prop-types';
+
+import RenderField from './RenderField';
+
+const TextButtonField = ({
+  item = {},
+  label,
+  name,
+  className,
+  inputClassName,
+  blank,
+  buttonAttrs,
+  fieldSelector,
+  validate,
+  disabled,
+  fieldRequired,
+  tooltipHelp,
+}) => (
+  <Field
+    name={name}
+    label={label}
+    fieldSelector={fieldSelector}
+    tooltipHelp={tooltipHelp}
+    component={RenderField}
+    buttonAttrs={buttonAttrs}
+    blank={blank}
+    item={item}
+    disabled={disabled}
+    validate={item.validate}
+    fieldRequired={fieldRequired}
+  />
+);
+
+TextButtonField.propTypes = {
+  item: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  blank: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string,
+  }),
+  buttonAttrs: PropTypes.shape({
+    buttonText: PropTypes.node,
+    buttonAction: PropTypes.func,
+  }).isRequired,
+  fieldSelector: PropTypes.func,
+  validate: PropTypes.array,
+  disabled: PropTypes.bool,
+  fieldRequired: PropTypes.bool,
+  tooltipHelp: PropTypes.node,
+};
+
+TextButtonField.defaultProps = {
+  blank: { label: 'Choose one...', value: '' },
+  className: '',
+  inputClassName: 'col-md-6',
+  validate: [],
+  disabled: false,
+  fieldRequired: false,
+  tooltipHelp: null,
+  fieldSelector: () => 'text',
+  item: {},
+};
+
+export default TextButtonField;

data/webpack/components/NewTemplateSync/components/__tests__/SyncSettingField.test.js

@@ -0,0 +1,34 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import SyncSettingField from '../SyncSettingField';
+
+import {
+  associateSetting,
+  forceSetting,
+  filterSetting,
+} from '../../__fixtures__/templateSyncSettings.fixtures';
+
+const noop = () => {};
+
+const commonFixtures = {
+  resetField: noop,
+  disabled: false,
+};
+
+const fixtures = {
+  'should render setting with select choices': {
+    setting: associateSetting,
+    ...commonFixtures,
+  },
+  'should render setting with input field': {
+    setting: filterSetting,
+    ...commonFixtures,
+  },
+  'should render boolean setting as checkbox': {
+    setting: forceSetting,
+    ...commonFixtures,
+  },
+};
+
+describe('SyncSettingField', () =>
+  testComponentSnapshotsWithFixtures(SyncSettingField, fixtures));

data/webpack/components/NewTemplateSync/components/__tests__/SyncSettingFields.test.js

@@ -0,0 +1,33 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import SyncSettingFields from '../SyncSettingFields';
+
+import {
+  importSettings,
+  exportSettings,
+} from '../../__fixtures__/templateSyncSettings.fixtures';
+
+const noop = () => {};
+
+const commonFixtures = {
+  importSettings,
+  exportSettings,
+  resetField: noop,
+  disabled: false,
+};
+
+const fixtures = {
+  'should show export settings': {
+    syncType: 'export',
+    validationData: {},
+    ...commonFixtures,
+  },
+  'should show import settings': {
+    syncType: 'import',
+    validationData: { repo: ['http', 'https'] },
+    ...commonFixtures,
+  },
+};
+
+describe('SyncSettingFields', () =>
+  testComponentSnapshotsWithFixtures(SyncSettingFields, fixtures));

data/webpack/components/NewTemplateSync/components/__tests__/SyncTypeRadios.test.js

@@ -0,0 +1,20 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import SyncTypeRadios from '../SyncTypeRadios';
+
+const noop = () => {};
+
+const fixtures = {
+  'should render': {
+    controlLabel: 'Test radios',
+    name: 'radios',
+    radios: [
+      { label: 'A', checked: false, value: 'a', onChange: noop },
+      { label: 'B', checked: true, value: 'b', onChange: noop },
+      { label: 'C', checked: false, value: 'c', onChange: noop },
+    ],
+  },
+};
+
+describe('SyncTypeRadios', () =>
+  testComponentSnapshotsWithFixtures(SyncTypeRadios, fixtures));

data/webpack/components/NewTemplateSync/components/__tests__/TextButtonField.test.js

@@ -0,0 +1,65 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TextButtonField from '../TextButtonField';
+
+const textItem = {
+  type: 'text',
+};
+
+const selectItem = {
+  type: 'select',
+  selection: [
+    { label: 'A', value: 'a' },
+    { label: 'B', value: 'b' },
+    { label: 'C', value: 'c' },
+  ],
+};
+
+const checkboxItem = {
+  type: 'checkbox',
+};
+
+const blank = { label: 'Bare Metal', value: 'bareMetal' };
+
+const fieldSelector = item => item.type;
+const buttonAttrs = { buttonText: 'Button', buttonAction: () => {} };
+
+const fixtures = {
+  'should render text item': {
+    name: 'Text field',
+    item: textItem,
+    fieldSelector,
+    buttonAttrs,
+    disabled: false,
+    label: 'Text',
+    blank: {},
+  },
+  'should render checkbox item': {
+    name: 'Checkbox field',
+    item: checkboxItem,
+    fieldSelector,
+    buttonAttrs,
+    disabled: false,
+    label: 'Checkbox',
+    blank: {},
+  },
+  'should render select item with custom blank opt': {
+    name: 'select field',
+    item: selectItem,
+    fieldSelector,
+    buttonAttrs,
+    label: 'Select',
+    disabled: false,
+    blank,
+  },
+  'should render text field without field selector': {
+    name: 'no selector',
+    label: 'Text field',
+    buttonAttrs,
+    disabled: false,
+    blank: {},
+  },
+};
+
+describe('TextButtonField', () =>
+  testComponentSnapshotsWithFixtures(TextButtonField, fixtures));