External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-10 22:19:28 -02:30
Code Issues Packages Projects Releases Wiki Activity

update VariablesDetail properly if value prop changes (preserving current mode)

Browse Source
This commit is contained in:
Keith Grant
2020-01-22 15:42:28 -08:00
parent 046518ab8f
commit a1d7beca83
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { string, number } from 'prop-types'; import { string, number } from 'prop-types';
import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
import { DetailName, DetailValue } from '@components/DetailList'; import { DetailName, DetailValue } from '@components/DetailList';
@@ -7,11 +7,30 @@ import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle'; import YamlJsonToggle from './YamlJsonToggle';
import { JSON_MODE, YAML_MODE } from './constants'; import { JSON_MODE, YAML_MODE } from './constants';
function getValueAsMode(value, mode) {
if (!value) {
if (mode === JSON_MODE) {
return '{}';
}
return '---';
}
const modeMatches = isJson(value) === (mode === JSON_MODE);
if (modeMatches) {
return value;
}
return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
}
function VariablesDetail({ value, label, rows }) { function VariablesDetail({ value, label, rows }) {
const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE); const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
const [currentValue, setCurrentValue] = useState(value); const [currentValue, setCurrentValue] = useState(value || '---');
const [error, setError] = useState(null); const [error, setError] = useState(null);
useEffect(() => {
setCurrentValue(getValueAsMode(value, mode));
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [value]);
return ( return (
<> <>
<DetailName <DetailName
@@ -35,11 +54,7 @@ function VariablesDetail({ value, label, rows }) {
mode={mode} mode={mode}
onChange={newMode => { onChange={newMode => {
try { try {
const newVal = setCurrentValue(getValueAsMode(currentValue, newMode));
newMode === YAML_MODE
? jsonToYaml(currentValue)
: yamlToJson(currentValue);
setCurrentValue(newVal);
setMode(newMode); setMode(newMode);
} catch (err) { } catch (err) {
setError(err); setError(err);
@@ -56,7 +71,7 @@ function VariablesDetail({ value, label, rows }) {
> >
<CodeMirrorInput <CodeMirrorInput
mode={mode} mode={mode}
value={currentValue || '---'} // When github issue https://github.com/ansible/awx/issues/5502 gets resolved this line of code should be revisited and refactored if possible. value={currentValue}
readOnly readOnly
rows={rows} rows={rows}
css="margin-top: 10px" css="margin-top: 10px"