mirror of
https://github.com/ansible/awx.git
synced 2026-02-16 02:30:01 -03:30
Merge pull request #11125 from nixocio/ui_remove_component
Remove unused component VariablesInput
This commit is contained in:
@@ -1,104 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { string, func, bool, number } from 'prop-types';
|
|
||||||
import { Split, SplitItem } from '@patternfly/react-core';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { yamlToJson, jsonToYaml, isJsonString } from 'util/yaml';
|
|
||||||
import MultiButtonToggle from '../MultiButtonToggle';
|
|
||||||
import CodeEditor from './CodeEditor';
|
|
||||||
import { JSON_MODE, YAML_MODE } from './constants';
|
|
||||||
|
|
||||||
function formatJson(jsonString) {
|
|
||||||
return JSON.stringify(JSON.parse(jsonString), null, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
const SplitItemRight = styled(SplitItem)`
|
|
||||||
margin-bottom: 5px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
function VariablesInput(props) {
|
|
||||||
const { id, label, readOnly, rows, error, onError, className, name } = props;
|
|
||||||
/* eslint-disable react/destructuring-assignment */
|
|
||||||
const defaultValue = isJsonString(props.value)
|
|
||||||
? formatJson(props.value)
|
|
||||||
: props.value;
|
|
||||||
const [value, setValue] = useState(defaultValue);
|
|
||||||
const [mode, setMode] = useState(isJsonString(value) ? JSON_MODE : YAML_MODE);
|
|
||||||
const isControlled = !!props.onChange;
|
|
||||||
/* eslint-enable react/destructuring-assignment */
|
|
||||||
|
|
||||||
const onChange = (newValue) => {
|
|
||||||
if (isControlled) {
|
|
||||||
props.onChange(newValue);
|
|
||||||
}
|
|
||||||
setValue(newValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`pf-c-form__group ${className || ''}`}>
|
|
||||||
<Split hasGutter>
|
|
||||||
<SplitItem>
|
|
||||||
<label htmlFor={id} className="pf-c-form__label">
|
|
||||||
{label}
|
|
||||||
</label>
|
|
||||||
</SplitItem>
|
|
||||||
<SplitItemRight>
|
|
||||||
<MultiButtonToggle
|
|
||||||
buttons={[
|
|
||||||
[YAML_MODE, 'YAML'],
|
|
||||||
[JSON_MODE, 'JSON'],
|
|
||||||
]}
|
|
||||||
value={mode}
|
|
||||||
onChange={(newMode) => {
|
|
||||||
try {
|
|
||||||
if (mode === JSON_MODE) {
|
|
||||||
onChange(jsonToYaml(value));
|
|
||||||
} else {
|
|
||||||
onChange(yamlToJson(value));
|
|
||||||
}
|
|
||||||
setMode(newMode);
|
|
||||||
} catch (err) {
|
|
||||||
onError(err.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
name={name}
|
|
||||||
/>
|
|
||||||
</SplitItemRight>
|
|
||||||
</Split>
|
|
||||||
<CodeEditor
|
|
||||||
mode={mode}
|
|
||||||
readOnly={readOnly}
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
rows={rows}
|
|
||||||
hasErrors={!!error}
|
|
||||||
/>
|
|
||||||
{error ? (
|
|
||||||
<div className="pf-c-form__helper-text pf-m-error" aria-live="polite">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
VariablesInput.propTypes = {
|
|
||||||
id: string.isRequired,
|
|
||||||
label: string.isRequired,
|
|
||||||
value: string.isRequired,
|
|
||||||
readOnly: bool,
|
|
||||||
error: string,
|
|
||||||
rows: number,
|
|
||||||
onChange: func,
|
|
||||||
onError: func,
|
|
||||||
name: string.isRequired,
|
|
||||||
};
|
|
||||||
VariablesInput.defaultProps = {
|
|
||||||
readOnly: false,
|
|
||||||
onChange: null,
|
|
||||||
rows: 6,
|
|
||||||
error: null,
|
|
||||||
onError: () => {},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default styled(VariablesInput)`
|
|
||||||
--pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
|
|
||||||
`;
|
|
||||||
@@ -3,5 +3,4 @@ import CodeEditor from './CodeEditor';
|
|||||||
export default CodeEditor;
|
export default CodeEditor;
|
||||||
export { default as CodeEditorField } from './CodeEditorField';
|
export { default as CodeEditorField } from './CodeEditorField';
|
||||||
export { default as VariablesDetail } from './VariablesDetail';
|
export { default as VariablesDetail } from './VariablesDetail';
|
||||||
export { default as VariablesInput } from './VariablesInput';
|
|
||||||
export { default as VariablesField } from './VariablesField';
|
export { default as VariablesField } from './VariablesField';
|
||||||
|
|||||||
Reference in New Issue
Block a user