Fixes #31460 - add description field to job wizard

[MariaAga]

Adds the final field to the advanced step. Depends on #554
As the step to edit the template inputs doesn't exist yet, it doesn't use the value of the input but the name of the input instead.

New:

onclick it moves to this:

old:

Original generate description is here:

foreman_remote_execution/app/assets/javascripts/foreman_remote_execution/template_invocation.js

Lines 102 to 122 in ab166f9

	function regenerate_description(thing) {
	var fieldset = $(thing).closest('fieldset');
	var dict = load_keys(fieldset);
	var format = fieldset.find('.description_format').val();
	fieldset.find('.description').val(String.format(format, dict));
	}
	function load_keys(parent) {
	var dict = {};
	var pattern = $(parent).find(".description_format").val();
	var re = new RegExp("%\\{([^\\}]+)\\}", "gm");
	var match = re.exec(pattern);
	while(match != null) {
	dict[match[1]] = $(parent).find("#" + match[1]).val();
	match = re.exec(pattern);
	}
	dict['job_category'] = $('#job_invocation_job_category').val();
	dict['template_name'] = $('.job_template_selector:visible span.select2-chosen').html();
	return dict;
	}

[MariaAga]

@LaViro can you take a look? test failures are broken snapshots after pf4 update

[Ron-Lavi]

Thanks @MariaAga,
looks nice! left a few comments,
on my end, it actually doesn't remove the braces wrapper when switching to preview:

[MariaAga]

@LaViro Fixed the braces wrapper issue. I didn't include the advanced template and regular templates split in this pr before.

[Ron-Lavi]

Suggested change

	({
	data: {
	advanced_template_inputs,
	effective_user,
	job_template: { executionTimeoutInterval, description_format },
	},
	}) => {
	const advancedTemplateValues = {};
	const advancedInputs = advanced_template_inputs;
	if (advancedInputs) {
	advancedInputs.forEach(input => {
	advancedTemplateValues[input.name] = input?.default || '';
	});
	}
	setAdvancedValues(currentAdvancedValues => ({
	...currentAdvancedValues,
	effectiveUserValue: effective_user?.value || '',
	timeoutToKill: executionTimeoutInterval || '',
	templateValues: advancedTemplateValues,
	description: description_format || '',
	}));
	},
	[]
	({
	data: {
	advanced_template_inputs = [],
	effective_user,
	job_template: { executionTimeoutInterval, description_format },
	},
	}) => {
	const templateValues = {};
	advanced_template_inputs.forEach(input => {
	templateValues[input.name] = input?.default || '';
	});
	setAdvancedValues(currentAdvancedValues => ({
	...currentAdvancedValues,
	effectiveUserValue: effective_user?.value || '',
	timeoutToKill: executionTimeoutInterval || '',
	templateValues,
	description: description_format || '',
	}));
	},
	[]

[MariaAga]

advancedTemplateValues and templateValues are different as there are advanced_template_inputs and template_inputs

[Ron-Lavi]

I just removed the const declaration from line 30 and used advanced_template_inputs directly,

and then renamed advancedTemplateValues on line 29 to templateValues
so in line 40 you can use it directly as templateValues, instead of:
templateValues: advancedTemplateValues,

[MariaAga]

templateValues is a defined const already that is used in this pr: #556

foreman_remote_execution/webpack/JobWizard/JobWizard.js

Lines 19 to 40 in dc45ae4

	const [templateValues, setTemplateValues] = useState({}); // TODO use templateValues in advanced fields - description
	const [selectedHosts, setSelectedHosts] = useState(['host1', 'host2']);
	const dispatch = useDispatch();
	const setDefaults = useCallback(response => {
	const responseJob = response.data;
	const advancedTemplateValues = {};
	const defaultTemplateValues = {};
	const inputs = responseJob.template_inputs;
	const advancedInputs = responseJob.advanced_template_inputs;
	if (advancedInputs) {
	advancedInputs.forEach(input => {
	advancedTemplateValues[input.name] = input?.default || '';
	});
	}
	if (inputs) {
	inputs.forEach(input => {
	defaultTemplateValues[input.name] = input?.default || '';
	});
	}
	setTemplateValues(defaultTemplateValues);
	setAdvancedValues(currentAdvancedValues => ({

[Ron-Lavi]

alright, then let's revisit it on one of the final PRs, so it won't cause lot of refactoring

[Ron-Lavi]

a cool shortcut I thought about, but just a small nit

Suggested change

	setValue={newValue => setAdvancedValues({ description: newValue })}
	setValue={description => setAdvancedValues({ description })}

[MariaAga]

It's a good suggestion, but I'm worried that if we decide to have a const named description in the component it would create issues. (for example if we destruct advancedValues)

[Ron-Lavi]

I just removed the const declaration from line 30 and used advanced_template_inputs directly,

and then renamed advancedTemplateValues on line 29 to templateValues
so in line 40 you can use it directly as templateValues, instead of:
templateValues: advancedTemplateValues,

[Ron-Lavi]

Thanks @MariaAga !
@adamruzicka can you have a final look?

[adamruzicka]

Looks good

[adamruzicka]

Thank you @MariaAga & @LaViro !