Fixes #36595 - Don't show the value for hidden ansible variables

app/graphql/mutations/ansible_variable_overrides/update.rb

@@ -11,6 +11,7 @@ class Update < ::Mutations::UpdateMutation
       argument :omit, Boolean, required: false
       argument :host_id, Int, required: true
       argument :ansible_variable_id, Int, required: true
+      argument :hidden_value, Boolean, required: true
 
       field :overriden_ansible_variable, ::Types::OverridenAnsibleVariable, :null => true
 

app/graphql/presenters/overriden_ansible_variable_presenter.rb

@@ -3,7 +3,7 @@ class OverridenAnsibleVariablePresenter
     attr_reader :ansible_variable
 
     delegate :id, :key, :description, :override?,
-             :parameter_type, :hidden_value?, :omit, :required,
+             :parameter_type, :hidden_value, :omit, :required,
              :validator_type, :validator_rule, :default_value,
              :ansible_role, :current_value, :to => :ansible_variable
 

app/models/ansible_variable.rb

@@ -15,6 +15,10 @@ def ansible?
     true
   end
 
+  def hidden_value
+    hidden_value?
+  end
+
   def self.humanize_class_name(options = nil)
     if options.present?
       super

webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js

@@ -13,7 +13,7 @@
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Checkbox } from '@patternfly/react-core';
 
 import Pagination from 'foremanReact/components/Pagination';
 import deleteAnsibleVariableOverride from '../../../../graphql/mutations/deleteAnsibleVariableOverride.gql';
@@ -26,6 +26,7 @@
   validateValue,
   onCompleted,
   onError,
+  formatValue,
 } from './AnsibleVariableOverridesTableHelper';
 
 import withLoading from '../../../withLoading';
@@ -44,6 +45,7 @@
     value: variable.currentValue
       ? variable.currentValue.value
       : variable.defaultValue,
+    hiddenValue: variable.hiddenValue,
     validation: { key: 'noval', msg: '' },
     working: false,
   }));
@@ -77,6 +79,10 @@
     innerDispatch({ idx, payload: { open: flag } });
   };
 
+  const setHiddenValue = idx => isHide => {
+    innerDispatch({ idx, payload: { hiddenValue: isHide } });
+  };
+
   const onValueChange = (idx, variable) => value => {
     const payload = {
       value,
@@ -174,14 +180,31 @@
                   <Td>{variable.ansibleRoleName}</Td>
                   <Td>{variable.parameterType}</Td>
                   <Td>
-                    <EditableValue
-                      variable={variable}
-                      editing={editableState[idx].open}
-                      onChange={onValueChange(idx, variable)}
-                      value={editableState[idx].value}
-                      validation={editableState[idx].validation}
-                      working={editableState[idx].working}
-                    />
+                    {!editableState[idx].open ? (
+                      formatValue(variable)
+                    ) : (
+                      <>
+                        <EditableValue
+                          variable={variable}
+                          editing={editableState[idx].open}
+                          setHiddenValue={setHiddenValue(
+                            idx,
+                            variable.hiddenValue
+                          )}
+                          onChange={onValueChange(idx, variable)}
+                          value={editableState[idx].value}
+                          validation={editableState[idx].validation}
+                          working={editableState[idx].working}
+                        />
+                        <Checkbox
+                          ouiaId={`edit-parameters-table-row-hide-`}
+                          label={__('Hide value')}
+                          isChecked={editableState[idx].hiddenValue}
+                          onChange={setHiddenValue(idx)}
+                          id="hide value checkbox"
+                        />
+                      </>
+                    )}
                   </Td>
                   <Td>{formatSourceAttr(variable)}</Td>
                   <Td>

webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTableHelper.js

@@ -12,6 +12,7 @@
   return `${__(element)}: ${currentValue.elementName}`;
 }
 
+//here we can add the condition for hidden value to "*****"
 export const formatSourceAttr = variable =>
   variable.currentValue
     ? formatSourceLink(variable.currentValue)
@@ -21,7 +22,9 @@
   const value = variable.currentValue
     ? variable.currentValue.value
     : variable.defaultValue;
-
+  if (variable.hiddenValue) {
+    return '••••••••';
+  }
   switch (variable.parameterType) {
     case 'boolean':
       return value ? <CheckIcon /> : <TimesIcon />;

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

@@ -73,6 +73,7 @@ const EditableAction = ({
       variables: {
         id: lookupValue.id,
         value: state.value,
+        hiddenValue: state.hiddenValue,
         hostId,
         ansibleVariableId: decodeModelId(variable),
         match,

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

@@ -1,20 +1,13 @@
 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 (['json', 'yaml', 'array', 'hash'].includes(type)) {
@@ -61,7 +54,6 @@ const EditableValue = props => {
 };
 
 EditableValue.propTypes = {
-  editing: PropTypes.bool.isRequired,
   variable: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.any,

webpack/graphql/mutations/updateAnsibleVariableOverride.gql

@@ -3,8 +3,9 @@ mutation UpdateAnsibleVariableOverride(
   $hostId: Int!,
   $ansibleVariableId: Int!,
   $value: RawJson!
-  $match: String!) {
-  updateAnsibleVariableOverride(input: { id: $id, hostId: $hostId, value: $value, ansibleVariableId: $ansibleVariableId }) {
+  $match: String!
+  $hiddenValue: Boolean!) {
+  updateAnsibleVariableOverride(input: { id: $id, hostId: $hostId, value: $value, ansibleVariableId: $ansibleVariableId, hiddenValue: $hiddenValue }) {
     overridenAnsibleVariable {
       id
       lookupValues(match: $match) {
@@ -15,6 +16,7 @@ mutation UpdateAnsibleVariableOverride(
           omit
         }
       }
+      hiddenValue
       currentValue {
         element
         value

webpack/graphql/queries/hostVariableOverrides.gql

@@ -13,6 +13,7 @@ query($id: String!, $match: String, $first: Int, $last: Int) {
           canEdit
         }
         defaultValue
+        hiddenValue
         parameterType
         ansibleRoleName
         validatorType