foreman_ansible 6.3.3 → 7.0.0

data/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableAction.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMutation } from '@apollo/client';
+import classNames from 'classnames';
+
+import { Button, Spinner } from '@patternfly/react-core';
+import { TimesIcon, CheckIcon, PencilAltIcon } from '@patternfly/react-icons';
+
+import './EditableAction.scss';
+
+import { decodeModelId } from '../../../../globalIdHelper';
+import updateAnsibleVariableOverrideMutation from '../../../../graphql/mutations/updateAnsibleVariableOverride.gql';
+import createAnsibleVariableOverrideMutation from '../../../../graphql/mutations/createAnsibleVariableOverride.gql';
+import {
+  onCompleted,
+  onError,
+  hasError,
+  createMatcher,
+} from './EditableActionHelper';
+
+const EditableAction = ({
+  onValidationError,
+  toggleWorking,
+  onSubmitSuccess,
+  open,
+  onClose,
+  onOpen,
+  state,
+  variable,
+  hostId,
+  hostName,
+}) => {
+  const [callUpdateMutation] = useMutation(
+    updateAnsibleVariableOverrideMutation,
+    {
+      onCompleted: onCompleted(
+        'updateAnsibleVariableOverride',
+        onValidationError,
+        toggleWorking,
+        onSubmitSuccess
+      ),
+      onError: onError(toggleWorking),
+    }
+  );
+
+  const [callCreateMutation] = useMutation(
+    createAnsibleVariableOverrideMutation,
+    {
+      onCompleted: onCompleted(
+        'createAnsibleVariableOverride',
+        onValidationError,
+        toggleWorking,
+        onSubmitSuccess
+      ),
+      onError: onError(toggleWorking),
+    }
+  );
+
+  const onSubmit = event => {
+    if (!variable.currentValue || variable.currentValue.element !== 'fqdn') {
+      return createOverride();
+    }
+    return updateOverride();
+  };
+
+  const updateOverride = () => {
+    const match = createMatcher(variable.currentValue.elementName);
+    const lookupValue = variable.lookupValues.nodes.find(
+      item => item.match === match
+    );
+    toggleWorking(true);
+    callUpdateMutation({
+      variables: {
+        id: lookupValue.id,
+        value: state.value,
+        hostId,
+        ansibleVariableId: decodeModelId(variable),
+        match,
+      },
+    });
+  };
+
+  const createOverride = () => {
+    const match = createMatcher(hostName);
+    toggleWorking(true);
+    callCreateMutation({
+      variables: {
+        hostId,
+        lookupKeyId: decodeModelId(variable),
+        value: state.value,
+        match,
+      },
+    });
+  };
+
+  if (!variable.meta.canEdit) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <div>
+        <div
+          className={classNames({
+            hideElement: !open,
+            editableActionItem: true,
+          })}
+        >
+          <Button
+            variant="plain"
+            onClick={onClose}
+            isDisabled={state.working}
+            aria-label="Cancel editing override button"
+          >
+            <TimesIcon />
+          </Button>
+          <Button
+            variant="plain"
+            onClick={onSubmit}
+            isDisabled={state.working || hasError(state)}
+            aria-label="Submit editing override button"
+          >
+            <CheckIcon />
+          </Button>
+          <span className={!state.working ? 'hideElement' : ''}>
+            <Spinner size="md" />
+          </span>
+        </div>
+        <div
+          className={classNames({
+            hideElement: open,
+            editableActionItem: true,
+          })}
+        >
+          <Button
+            onClick={onOpen}
+            variant="plain"
+            aria-label="Edit override button"
+          >
+            <PencilAltIcon />
+          </Button>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+EditableAction.propTypes = {
+  onValidationError: PropTypes.func.isRequired,
+  toggleWorking: PropTypes.func.isRequired,
+  onSubmitSuccess: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onOpen: PropTypes.func.isRequired,
+  variable: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired,
+  open: PropTypes.bool.isRequired,
+  hostId: PropTypes.number.isRequired,
+  hostName: PropTypes.string.isRequired,
+};
+
+export default EditableAction;

data/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableAction.scss

@@ -0,0 +1,7 @@
+.hideElement {
+  display: none;
+}
+
+.editableActionItem {
+  width: 150px;
+}

data/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableActionHelper.js

@@ -0,0 +1,49 @@
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { showToast } from '../../../../toastHelper';
+
+export const formatError = error =>
+  sprintf(
+    __(
+      'There was a following error when changing Ansible variable override: %s'
+    ),
+    error
+  );
+
+export const joinErrors = errors => errors.map(err => err.message).join(', ');
+
+export const onCompleted = (
+  dataPath,
+  onValidationError,
+  toggleWorking,
+  onSubmitSuccess
+) => data => {
+  const { errors, overridenAnsibleVariable } = data[dataPath];
+  if (Array.isArray(errors) && errors.length > 0) {
+    if (
+      errors.length === 1 &&
+      errors[0].path.join(' ') === 'attributes value'
+    ) {
+      onValidationError(errors[0].message);
+    } else {
+      toggleWorking(false);
+      showToast({
+        type: 'error',
+        message: formatError(joinErrors(errors)),
+      });
+    }
+  } else {
+    onSubmitSuccess(overridenAnsibleVariable.currentValue.value);
+    showToast({
+      type: 'success',
+      message: __('Ansible variable override successfully changed.'),
+    });
+  }
+};
+
+export const onError = toggleWorking => error => {
+  toggleWorking(false);
+  showToast({ type: 'error', message: formatError(error.message) });
+};
+
+export const hasError = state => state.validation.key === 'error';
+export const createMatcher = value => `fqdn=${value}`;

data/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableValue.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { formatValue } from './AnsibleVariableOverridesTableHelper';
+
+import {
+  TextAreaField,
+  TextInputField,
+  SelectField,
+} from './EditableValueHelper';
+
+const EditableValue = props => {
+  if (!props.editing) {
+    return formatValue(props.variable);
+  }
+
+  const type = props.variable.parameterType;
+
+  if (type === 'array' || type === 'hash') {
+    return (
+      <TextAreaField
+        onChange={props.onChange}
+        value={props.value}
+        validation={props.validation}
+        isDisabled={props.working}
+      />
+    );
+  }
+
+  if (type === 'boolean') {
+    return (
+      <SelectField
+        selectItems={[
+          { id: 'trueSelectOpt', value: true, name: __('true') },
+          { id: 'falseSelectOpt', value: false, name: __('false') },
+        ]}
+        onChange={props.onChange}
+        validation={props.validation}
+        isDisabled={props.working}
+        value={props.value}
+      />
+    );
+  }
+
+  return (
+    <TextInputField
+      onChange={props.onChange}
+      value={props.value}
+      validation={props.validation}
+      isDisabled={props.working}
+      aria-label="Edit override field"
+    />
+  );
+};
+
+EditableValue.propTypes = {
+  editing: PropTypes.bool.isRequired,
+  variable: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.any,
+  validation: PropTypes.object.isRequired,
+  working: PropTypes.bool.isRequired,
+};
+
+EditableValue.defaultProps = {
+  value: '',
+};
+
+export default EditableValue;

data/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableValueHelper.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  TextInput,
+  TextArea,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+} from '@patternfly/react-core';
+
+const withFormGroup = Component => componentProps => {
+  const { validation, ...rest } = componentProps;
+  return (
+    <FormGroup
+      label=""
+      helperTextInvalid={validation.msg}
+      validated={validation.key}
+    >
+      <Component {...rest} validated={validation.key} />
+    </FormGroup>
+  );
+};
+
+export const SelectField = componentProps => {
+  const { selectItems, ...rest } = componentProps;
+  return (
+    <FormSelect className="without_select2" {...rest}>
+      {selectItems.map(item => (
+        <FormSelectOption key={item.id} value={item.value} label={item.name} />
+      ))}
+    </FormSelect>
+  );
+};
+
+export const TextInputField = withFormGroup(TextInput);
+export const TextAreaField = withFormGroup(TextArea);