foreman_templates 7.0.7 → 8.0.0

data/webpack/components/NewTemplateSync/components/NewTemplateSyncForm/NewTemplateSyncFormSelectors.js

@@ -5,20 +5,17 @@ import {
   selectExportSettings,
 } from '../../NewTemplateSyncSelectors';
 
+export const transformInitialValues = settings =>
+  settings.reduce(
+    (memo, item) => Object.assign(memo, { [item.name]: item.value }),
+    {}
+  );
+
 export const selectInitialFormValues = createSelector(
   selectImportSettings,
   selectExportSettings,
-  (importSettings, exportSettings) =>
-    importSettings
-      .concat(exportSettings)
-      .reduce(
-        (memo, item) => Object.assign(memo, { [item.name]: item.value }),
-        {}
-      )
+  (importSettings, exportSettings) => ({
+    import: transformInitialValues(importSettings),
+    export: transformInitialValues(exportSettings),
+  })
 );
-
-const selectFormState = (formName, state) =>
-  state.form && state.form[formName] ? state.form[formName] : {};
-
-export const selectRegisteredFields = (formName, state) =>
-  selectFormState(formName, state).registeredFields || {};

data/webpack/components/NewTemplateSync/components/NewTemplateSyncForm/__tests__/NewTemplateSyncFormSelectors.test.js

@@ -1,35 +1,17 @@
 import { testSelectorsSnapshotWithFixtures } from 'react-redux-test-utils';
 
-import { NEW_TEMPLATE_SYNC_FORM_NAME } from '../NewTemplateSyncFormConstants';
 import {
-  registeredImportSettings,
-  initialValues,
   stateFactory,
   importSettings,
   exportSettings,
 } from '../../../__fixtures__/templateSyncSettings.fixtures';
 
-import {
-  selectInitialFormValues,
-  selectRegisteredFields,
-} from '../NewTemplateSyncFormSelectors';
-
-const formStateFactory = obj => ({
-  form: {
-    [NEW_TEMPLATE_SYNC_FORM_NAME]: obj,
-  },
-});
+import { selectInitialFormValues } from '../NewTemplateSyncFormSelectors';
 
 const fixtures = {
-  'should return registered fields': () =>
-    selectRegisteredFields(
-      NEW_TEMPLATE_SYNC_FORM_NAME,
-      formStateFactory(registeredImportSettings)
-    ),
   'should return initial form values': () =>
     selectInitialFormValues({
       ...stateFactory({ importSettings, exportSettings }),
-      ...formStateFactory(initialValues),
     }),
 };
 

data/webpack/components/NewTemplateSync/components/NewTemplateSyncForm/__tests__/__snapshots__/NewTemplateSyncFormSelectors.test.js.snap

@@ -2,43 +2,14 @@
 
 exports[`NewTemplateSyncFormSelectors should return initial form values 1`] = `
 Object {
-  "associate": "new",
-  "filter": "",
-  "force": false,
-  "negate": false,
-  "repo": "https://github.com/theforeman/community-templates.git",
-}
-`;
-
-exports[`NewTemplateSyncFormSelectors should return registered fields 1`] = `
-Object {
-  "associate": Object {
-    "description": "Associate templates to OS, organization and location",
-    "id": 45,
-    "name": "associate",
-    "selection": Array [
-      Object {
-        "label": "New",
-        "value": "new",
-      },
-      Object {
-        "label": "Never",
-        "value": "never",
-      },
-      Object {
-        "label": "Always",
-        "value": "always",
-      },
-    ],
-    "settingsType": "string",
-    "value": "new",
+  "export": Object {
+    "filter": "",
+    "negate": false,
+    "repo": "https://github.com/theforeman/community-templates.git",
   },
-  "force": Object {
-    "description": "Should importing overwrite locked templates?",
-    "id": 46,
-    "name": "force",
-    "settingsType": "bool",
-    "value": false,
+  "import": Object {
+    "associate": "new",
+    "force": false,
   },
 }
 `;

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

@@ -1,21 +1,15 @@
 import { connect } from 'react-redux';
-import { reduxForm } from 'redux-form';
 
 import * as FormActions from 'foremanReact/redux/actions/common/forms';
 
-import { selectLayout } from 'foremanReact/components/Layout/LayoutSelectors';
-
-import { NEW_TEMPLATE_SYNC_FORM_NAME } from './NewTemplateSyncFormConstants';
 import NewTemplateSyncForm from './NewTemplateSyncForm';
 
 import {
   selectImportSettings,
   selectExportSettings,
 } from '../../NewTemplateSyncSelectors';
-import {
-  selectInitialFormValues,
-  selectRegisteredFields,
-} from './NewTemplateSyncFormSelectors';
+
+import { selectInitialFormValues } from './NewTemplateSyncFormSelectors';
 
 const mapStateToProps = (state, ownProps) => {
   const importSettings = selectImportSettings(state);
@@ -24,22 +18,11 @@ const mapStateToProps = (state, ownProps) => {
 
   const initialFormValues = selectInitialFormValues(state);
 
-  const currentFields = selectRegisteredFields(
-    NEW_TEMPLATE_SYNC_FORM_NAME,
-    state
-  );
-
   return {
     initialValues: { ...initialFormValues },
     importSettings,
     exportSettings,
-    currentFields,
-    currentOrganization: selectLayout(state).currentOrganization,
-    currentLocation: selectLayout(state).currentLocation,
   };
 };
 
-const form = reduxForm({ form: NEW_TEMPLATE_SYNC_FORM_NAME })(
-  NewTemplateSyncForm
-);
-export default connect(mapStateToProps, FormActions)(form);
+export default connect(mapStateToProps, FormActions)(NewTemplateSyncForm);

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

@@ -5,7 +5,7 @@ import { FieldLevelHelp } from 'patternfly-react';
 import TextButtonField from './TextButtonField';
 import ButtonTooltip from './ButtonTooltip';
 
-const SyncSettingField = ({ setting, resetField, disabled }) => {
+const SyncSettingField = ({ setting, resetField, disabled, syncType }) => {
   const label = settingObj => `${settingObj.fullName} `;
 
   const fieldSelector = settingObj => {
@@ -20,10 +20,6 @@ const SyncSettingField = ({ setting, resetField, disabled }) => {
     return 'text';
   };
 
-  const handleReset = (settingName, settingValue) => {
-    resetField(settingName, settingValue);
-  };
-
   const tooltipContent = (
     <div
       dangerouslySetInnerHTML={{
@@ -34,18 +30,15 @@ const SyncSettingField = ({ setting, resetField, disabled }) => {
 
   return (
     <TextButtonField
-      name={setting.name}
+      name={`${syncType}.${setting.name}`}
       label={label(setting)}
       blank={{}}
       item={setting}
-      buttonAttrs={{
-        buttonText: <ButtonTooltip tooltipId={setting.name} />,
-        buttonAction: () => handleReset(setting.name, setting.value),
-      }}
+      buttonText={<ButtonTooltip tooltipId={setting.name} />}
+      buttonAction={resetField(`${syncType}.${setting.name}`, setting.value)}
       fieldSelector={fieldSelector}
       disabled={disabled}
       fieldRequired={setting.required}
-      validate={setting.validate}
       tooltipHelp={<FieldLevelHelp content={tooltipContent} />}
     >
       {setting.value}
@@ -57,6 +50,7 @@ SyncSettingField.propTypes = {
   setting: PropTypes.object.isRequired,
   resetField: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
+  syncType: PropTypes.string.isRequired,
 };
 
 export default SyncSettingField;

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

@@ -1,36 +1,20 @@
 import React from 'react';
-import { memoize, upperFirst } from 'lodash';
+import { upperFirst } 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,
+  formProps: { isSubmitting },
 }) => {
-  const addValidationToSetting = (setting, validations) =>
+  const addRequiredToSetting = setting =>
     setting.name === 'repo'
       ? setting.merge({
           required: true,
-          validate: [repoFormat(validations.repo)],
         })
       : setting;
 
@@ -58,14 +42,15 @@ const SyncSettingsFields = ({
   return (
     <React.Fragment>
       {settingsAry
-        .map(setting => addValidationToSetting(setting, validationData))
+        .map(addRequiredToSetting)
         .map(setting => modifyDescription(setting, syncType))
         .map(setting => specializeDescription(setting, syncType))
         .map(setting => (
           <SyncSettingField
             setting={setting}
+            syncType={syncType}
             key={setting.name}
-            disabled={disabled}
+            disabled={isSubmitting}
             resetField={resetField}
           />
         ))}
@@ -78,13 +63,11 @@ SyncSettingsFields.propTypes = {
   exportSettings: PropTypes.array.isRequired,
   syncType: PropTypes.string.isRequired,
   resetField: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  validationData: PropTypes.object,
+  formProps: PropTypes.object,
 };
 
 SyncSettingsFields.defaultProps = {
-  disabled: false,
-  validationData: {},
+  formProps: {},
 };
 
 export default SyncSettingsFields;

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { get } from 'lodash';
+import { Field as FormikField } from 'formik';
 import PropTypes from 'prop-types';
 
 import RenderField from './RenderField';
@@ -11,25 +12,35 @@ const TextButtonField = ({
   className,
   inputClassName,
   blank,
-  buttonAttrs,
+  buttonText,
+  buttonAction,
   fieldSelector,
-  validate,
   disabled,
   fieldRequired,
   tooltipHelp,
 }) => (
-  <Field
+  <FormikField
     name={name}
-    label={label}
-    fieldSelector={fieldSelector}
-    tooltipHelp={tooltipHelp}
-    component={RenderField}
-    buttonAttrs={buttonAttrs}
-    blank={blank}
-    item={item}
-    disabled={disabled}
-    validate={item.validate}
-    fieldRequired={fieldRequired}
+    render={({ field, form }) => (
+      <RenderField
+        label={label}
+        fieldSelector={fieldSelector}
+        tooltipHelp={tooltipHelp}
+        buttonAttrs={{
+          buttonText,
+          buttonAction: () => buttonAction(form.setFieldValue),
+        }}
+        blank={blank}
+        item={item}
+        disabled={disabled}
+        fieldRequired={fieldRequired}
+        meta={{
+          touched: get(form.touched, name),
+          error: get(form.errors, name),
+        }}
+        input={field}
+      />
+    )}
   />
 );
 
@@ -43,12 +54,9 @@ TextButtonField.propTypes = {
     label: PropTypes.string,
     value: PropTypes.string,
   }),
-  buttonAttrs: PropTypes.shape({
-    buttonText: PropTypes.node,
-    buttonAction: PropTypes.func,
-  }).isRequired,
+  buttonText: PropTypes.node.isRequired,
+  buttonAction: PropTypes.func.isRequired,
   fieldSelector: PropTypes.func,
-  validate: PropTypes.array,
   disabled: PropTypes.bool,
   fieldRequired: PropTypes.bool,
   tooltipHelp: PropTypes.node,
@@ -58,7 +66,6 @@ TextButtonField.defaultProps = {
   blank: { label: 'Choose one...', value: '' },
   className: '',
   inputClassName: 'col-md-6',
-  validate: [],
   disabled: false,
   fieldRequired: false,
   tooltipHelp: null,

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

@@ -8,11 +8,12 @@ import {
   filterSetting,
 } from '../../__fixtures__/templateSyncSettings.fixtures';
 
-const noop = () => {};
+const noop = () => () => {};
 
 const commonFixtures = {
   resetField: noop,
   disabled: false,
+  syncType: 'import',
 };
 
 const fixtures = {

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

@@ -13,6 +13,7 @@ const commonFixtures = {
   importSettings,
   exportSettings,
   resetField: noop,
+  formProps: { isSubmitting: false },
   disabled: false,
 };
 

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

@@ -29,7 +29,7 @@ const fixtures = {
     name: 'Text field',
     item: textItem,
     fieldSelector,
-    buttonAttrs,
+    ...buttonAttrs,
     disabled: false,
     label: 'Text',
     blank: {},
@@ -38,7 +38,7 @@ const fixtures = {
     name: 'Checkbox field',
     item: checkboxItem,
     fieldSelector,
-    buttonAttrs,
+    ...buttonAttrs,
     disabled: false,
     label: 'Checkbox',
     blank: {},
@@ -47,7 +47,7 @@ const fixtures = {
     name: 'select field',
     item: selectItem,
     fieldSelector,
-    buttonAttrs,
+    ...buttonAttrs,
     label: 'Select',
     disabled: false,
     blank,
@@ -55,7 +55,7 @@ const fixtures = {
   'should render text field without field selector': {
     name: 'no selector',
     label: 'Text field',
-    buttonAttrs,
+    ...buttonAttrs,
     disabled: false,
     blank: {},
   },

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

@@ -3,13 +3,11 @@
 exports[`SyncSettingField should render boolean setting as checkbox 1`] = `
 <TextButtonField
   blank={Object {}}
-  buttonAttrs={
-    Object {
-      "buttonAction": [Function],
-      "buttonText": <ButtonTooltip
-        tooltipId="force"
-      />,
-    }
+  buttonAction={[Function]}
+  buttonText={
+    <ButtonTooltip
+      tooltipId="force"
+    />
   }
   className=""
   disabled={false}
@@ -26,7 +24,7 @@ exports[`SyncSettingField should render boolean setting as checkbox 1`] = `
     }
   }
   label="undefined "
-  name="force"
+  name="import.force"
   tooltipHelp={
     <FieldLevelHelp
       buttonClass=""
@@ -43,20 +41,17 @@ exports[`SyncSettingField should render boolean setting as checkbox 1`] = `
       rootClose={true}
     />
   }
-  validate={Array []}
 />
 `;
 
 exports[`SyncSettingField should render setting with input field 1`] = `
 <TextButtonField
   blank={Object {}}
-  buttonAttrs={
-    Object {
-      "buttonAction": [Function],
-      "buttonText": <ButtonTooltip
-        tooltipId="filter"
-      />,
-    }
+  buttonAction={[Function]}
+  buttonText={
+    <ButtonTooltip
+      tooltipId="filter"
+    />
   }
   className=""
   disabled={false}
@@ -73,7 +68,7 @@ exports[`SyncSettingField should render setting with input field 1`] = `
     }
   }
   label="undefined "
-  name="filter"
+  name="import.filter"
   tooltipHelp={
     <FieldLevelHelp
       buttonClass=""
@@ -90,20 +85,17 @@ exports[`SyncSettingField should render setting with input field 1`] = `
       rootClose={true}
     />
   }
-  validate={Array []}
 />
 `;
 
 exports[`SyncSettingField should render setting with select choices 1`] = `
 <TextButtonField
   blank={Object {}}
-  buttonAttrs={
-    Object {
-      "buttonAction": [Function],
-      "buttonText": <ButtonTooltip
-        tooltipId="associate"
-      />,
-    }
+  buttonAction={[Function]}
+  buttonText={
+    <ButtonTooltip
+      tooltipId="associate"
+    />
   }
   className=""
   disabled={false}
@@ -134,7 +126,7 @@ exports[`SyncSettingField should render setting with select choices 1`] = `
     }
   }
   label="undefined "
-  name="associate"
+  name="import.associate"
   tooltipHelp={
     <FieldLevelHelp
       buttonClass=""
@@ -151,7 +143,6 @@ exports[`SyncSettingField should render setting with select choices 1`] = `
       rootClose={true}
     />
   }
-  validate={Array []}
 >
   new
 </TextButtonField>