mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 03:10:42 -03:30
Adds unique ouiaId to MultiButtonToggle
This commit is contained in:
parent
5707d65d0f
commit
134d84ded9
@ -23,7 +23,15 @@ import {
|
||||
import CodeEditor from './CodeEditor';
|
||||
import { JSON_MODE, YAML_MODE } from './constants';
|
||||
|
||||
function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
|
||||
function VariablesDetail({
|
||||
dataCy,
|
||||
helpText,
|
||||
value,
|
||||
label,
|
||||
rows,
|
||||
fullHeight,
|
||||
name,
|
||||
}) {
|
||||
const [mode, setMode] = useState(
|
||||
isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE
|
||||
);
|
||||
@ -76,6 +84,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
|
||||
setMode={setMode}
|
||||
currentValue={currentValue}
|
||||
onExpand={() => setIsExpanded(true)}
|
||||
name={name}
|
||||
/>
|
||||
</DetailName>
|
||||
<DetailValue
|
||||
@ -128,6 +137,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
|
||||
mode={mode}
|
||||
setMode={setMode}
|
||||
currentValue={currentValue}
|
||||
name={name}
|
||||
/>
|
||||
<CodeEditor
|
||||
id={`${dataCy}-preview-expanded`}
|
||||
@ -149,6 +159,7 @@ VariablesDetail.propTypes = {
|
||||
rows: oneOfType([number, string]),
|
||||
dataCy: string,
|
||||
helpText: string,
|
||||
name: string.isRequired,
|
||||
};
|
||||
VariablesDetail.defaultProps = {
|
||||
rows: null,
|
||||
@ -156,7 +167,16 @@ VariablesDetail.defaultProps = {
|
||||
helpText: '',
|
||||
};
|
||||
|
||||
function ModeToggle({ id, label, helpText, dataCy, mode, setMode, onExpand }) {
|
||||
function ModeToggle({
|
||||
id,
|
||||
label,
|
||||
helpText,
|
||||
dataCy,
|
||||
mode,
|
||||
setMode,
|
||||
onExpand,
|
||||
name,
|
||||
}) {
|
||||
return (
|
||||
<Split hasGutter>
|
||||
<SplitItem isFilled>
|
||||
@ -184,6 +204,7 @@ function ModeToggle({ id, label, helpText, dataCy, mode, setMode, onExpand }) {
|
||||
onChange={newMode => {
|
||||
setMode(newMode);
|
||||
}}
|
||||
name={name}
|
||||
/>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
|
||||
@ -230,6 +230,7 @@ function VariablesFieldInternals({
|
||||
]}
|
||||
value={mode}
|
||||
onChange={setMode}
|
||||
name={name}
|
||||
/>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
|
||||
@ -16,7 +16,7 @@ const SplitItemRight = styled(SplitItem)`
|
||||
`;
|
||||
|
||||
function VariablesInput(props) {
|
||||
const { id, label, readOnly, rows, error, onError, className } = props;
|
||||
const { id, label, readOnly, rows, error, onError, className, name } = props;
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
const defaultValue = isJsonString(props.value)
|
||||
? formatJson(props.value)
|
||||
@ -60,6 +60,7 @@ function VariablesInput(props) {
|
||||
onError(err.message);
|
||||
}
|
||||
}}
|
||||
name={name}
|
||||
/>
|
||||
</SplitItemRight>
|
||||
</Split>
|
||||
@ -88,6 +89,7 @@ VariablesInput.propTypes = {
|
||||
rows: number,
|
||||
onChange: func,
|
||||
onError: func,
|
||||
name: string.isRequired,
|
||||
};
|
||||
VariablesInput.defaultProps = {
|
||||
readOnly: false,
|
||||
|
||||
@ -11,7 +11,7 @@ const SmallButton = styled(Button)`
|
||||
}
|
||||
`;
|
||||
|
||||
function MultiButtonToggle({ buttons, value, onChange }) {
|
||||
function MultiButtonToggle({ buttons, value, onChange, name }) {
|
||||
const setValue = newValue => {
|
||||
if (value !== newValue) {
|
||||
onChange(newValue);
|
||||
@ -24,7 +24,7 @@ function MultiButtonToggle({ buttons, value, onChange }) {
|
||||
buttons.map(([buttonValue, buttonLabel]) => (
|
||||
<SmallButton
|
||||
aria-label={buttonLabel}
|
||||
ouiaId={`button-label-${buttonLabel}`}
|
||||
ouiaId={`${name}-${buttonLabel}-button`}
|
||||
key={buttonLabel}
|
||||
className={`toggle-button-${buttonValue}`}
|
||||
onClick={() => setValue(buttonValue)}
|
||||
@ -67,6 +67,7 @@ MultiButtonToggle.propTypes = {
|
||||
buttons: buttonsPropType.isRequired,
|
||||
value: string.isRequired,
|
||||
onChange: func.isRequired,
|
||||
name: string.isRequired,
|
||||
};
|
||||
|
||||
export default MultiButtonToggle;
|
||||
|
||||
@ -250,6 +250,7 @@ function PromptDetail({ resource, launchConfig = {}, overrides = {} }) {
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={overrides.extra_vars}
|
||||
name="extra_vars"
|
||||
/>
|
||||
)}
|
||||
</PromptDetailList>
|
||||
|
||||
@ -168,6 +168,7 @@ function PromptInventorySourceDetail({ resource }) {
|
||||
label={t`Source Variables`}
|
||||
rows={4}
|
||||
value={source_vars}
|
||||
name="source_vars"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -245,7 +245,12 @@ function PromptJobTemplateDetail({ resource }) {
|
||||
/>
|
||||
)}
|
||||
{extra_vars && (
|
||||
<VariablesDetail label={t`Variables`} rows={4} value={extra_vars} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={extra_vars}
|
||||
name="extra_vars"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -115,7 +115,12 @@ function PromptWFJobTemplateDetail({ resource }) {
|
||||
/>
|
||||
)}
|
||||
{extra_vars && (
|
||||
<VariablesDetail label={t`Variables`} rows={4} value={extra_vars} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={extra_vars}
|
||||
name="extra_vars"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -369,6 +369,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
|
||||
value={jsonToYaml(JSON.stringify(extra_data))}
|
||||
rows={4}
|
||||
label={t`Variables`}
|
||||
name="extra_vars"
|
||||
/>
|
||||
)}
|
||||
</PromptDetailList>
|
||||
|
||||
@ -51,6 +51,7 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] } }) {
|
||||
]}
|
||||
value={mode}
|
||||
onChange={newMode => setMode(newMode)}
|
||||
name="timezone"
|
||||
/>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
|
||||
@ -55,6 +55,7 @@ function ActivityStreamDetailButton({ streamItem, user, description }) {
|
||||
value={
|
||||
streamItem?.changes ? JSON.stringify(streamItem.changes) : ''
|
||||
}
|
||||
name="changes"
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
|
||||
@ -80,11 +80,13 @@ function CredentialTypeDetails({ credentialType }) {
|
||||
label={t`Input configuration`}
|
||||
value={jsonToYaml(JSON.stringify(inputs))}
|
||||
rows={6}
|
||||
name="input"
|
||||
/>
|
||||
<VariablesDetail
|
||||
label={t`Injector configuration`}
|
||||
value={jsonToYaml(JSON.stringify(injectors))}
|
||||
rows={6}
|
||||
name="injector"
|
||||
/>
|
||||
<UserDateDetail
|
||||
label={t`Created`}
|
||||
|
||||
@ -100,7 +100,12 @@ function HostDetail({ host }) {
|
||||
user={modified_by}
|
||||
dataCy="host-last-modified-by"
|
||||
/>
|
||||
<VariablesDetail label={t`Variables`} rows={4} value={variables} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={variables}
|
||||
name="variables"
|
||||
/>
|
||||
</DetailList>
|
||||
<CardActionsRow>
|
||||
{user_capabilities?.edit && (
|
||||
|
||||
@ -36,7 +36,12 @@ function HostFacts({ host }) {
|
||||
return (
|
||||
<CardBody>
|
||||
<DetailList gutter="sm">
|
||||
<VariablesDetail label={t`Facts`} rows="auto" value={facts} />
|
||||
<VariablesDetail
|
||||
label={t`Facts`}
|
||||
rows="auto"
|
||||
value={facts}
|
||||
name="facts"
|
||||
/>
|
||||
</DetailList>
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
@ -81,6 +81,7 @@ function ContainerGroupDetails({ instanceGroup }) {
|
||||
: instanceGroup.pod_spec_override
|
||||
}
|
||||
rows={6}
|
||||
name="pod_spec_override"
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
|
||||
@ -104,6 +104,7 @@ function InventoryDetail({ inventory }) {
|
||||
label={t`Variables`}
|
||||
value={inventory.variables}
|
||||
rows={4}
|
||||
name="variables"
|
||||
/>
|
||||
<UserDateDetail
|
||||
label={t`Created`}
|
||||
|
||||
@ -37,7 +37,12 @@ function InventoryGroupDetail({ inventoryGroup }) {
|
||||
dataCy="inventory-group-detail-name"
|
||||
/>
|
||||
<Detail label={t`Description`} value={description} />
|
||||
<VariablesDetail label={t`Variables`} value={variables} rows={4} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
value={variables}
|
||||
rows={4}
|
||||
name="variables"
|
||||
/>
|
||||
<UserDateDetail label={t`Created`} date={created} user={created_by} />
|
||||
<UserDateDetail
|
||||
label={t`Last Modified`}
|
||||
|
||||
@ -86,7 +86,12 @@ function InventoryHostDetail({ host }) {
|
||||
label={t`Last Modified`}
|
||||
user={modified_by}
|
||||
/>
|
||||
<VariablesDetail label={t`Variables`} rows={4} value={variables} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={variables}
|
||||
name="variables"
|
||||
/>
|
||||
</DetailList>
|
||||
<CardActionsRow>
|
||||
{user_capabilities?.edit && (
|
||||
|
||||
@ -35,7 +35,12 @@ function InventoryHostFacts({ host }) {
|
||||
return (
|
||||
<CardBody>
|
||||
<DetailList gutter="sm">
|
||||
<VariablesDetail label={t`Facts`} rows="auto" value={result} />
|
||||
<VariablesDetail
|
||||
label={t`Facts`}
|
||||
rows="auto"
|
||||
value={result}
|
||||
name="facts"
|
||||
/>
|
||||
</DetailList>
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
@ -249,6 +249,7 @@ function InventorySourceDetail({ inventorySource }) {
|
||||
label={t`Source variables`}
|
||||
rows={4}
|
||||
value={source_vars}
|
||||
name="source_vars"
|
||||
/>
|
||||
)}
|
||||
<UserDateDetail date={created} label={t`Created`} user={created_by} />
|
||||
|
||||
@ -131,7 +131,12 @@ function SmartInventoryDetail({ inventory }) {
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<VariablesDetail label={t`Variables`} value={variables} rows={4} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
value={variables}
|
||||
rows={4}
|
||||
name="variables"
|
||||
/>
|
||||
<UserDateDetail label={t`Created`} date={created} user={created_by} />
|
||||
<UserDateDetail
|
||||
label={t`Last modified`}
|
||||
|
||||
@ -51,7 +51,12 @@ function SmartInventoryHostDetail({ host }) {
|
||||
label={t`Last modified`}
|
||||
user={modified_by}
|
||||
/>
|
||||
<VariablesDetail label={t`Variables`} rows={4} value={variables} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
rows={4}
|
||||
value={variables}
|
||||
name="variables"
|
||||
/>
|
||||
</DetailList>
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
@ -337,6 +337,7 @@ function JobDetail({ job }) {
|
||||
value={job.extra_vars}
|
||||
rows={4}
|
||||
label={t`Variables`}
|
||||
name="extra_vars"
|
||||
/>
|
||||
)}
|
||||
{job.artifacts && (
|
||||
@ -347,6 +348,7 @@ function JobDetail({ job }) {
|
||||
value={JSON.stringify(job.artifacts)}
|
||||
rows={4}
|
||||
label={t`Artifacts`}
|
||||
name="artifacts"
|
||||
/>
|
||||
)}
|
||||
<CardActionsRow>
|
||||
|
||||
@ -353,6 +353,7 @@ function JobTemplateDetail({ template }) {
|
||||
rows={4}
|
||||
label={t`Variables`}
|
||||
dataCy={`jt-details-${template.id}`}
|
||||
name="extra_vars"
|
||||
/>
|
||||
</DetailList>
|
||||
<CardActionsRow>
|
||||
|
||||
@ -217,7 +217,12 @@ function WorkflowJobTemplateDetail({ template }) {
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<VariablesDetail label={t`Variables`} value={extra_vars} rows={4} />
|
||||
<VariablesDetail
|
||||
label={t`Variables`}
|
||||
value={extra_vars}
|
||||
rows={4}
|
||||
name="extra_vars"
|
||||
/>
|
||||
</DetailList>
|
||||
<CardActionsRow>
|
||||
{summary_fields.user_capabilities &&
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user