Adds unique ouiaId to MultiButtonToggle

This commit is contained in:
mabashian 2021-06-02 14:43:23 -04:00
parent 5707d65d0f
commit 134d84ded9
25 changed files with 103 additions and 15 deletions

View File

@ -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>

View File

@ -230,6 +230,7 @@ function VariablesFieldInternals({
]}
value={mode}
onChange={setMode}
name={name}
/>
</SplitItem>
</Split>

View File

@ -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,

View File

@ -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;

View File

@ -250,6 +250,7 @@ function PromptDetail({ resource, launchConfig = {}, overrides = {} }) {
label={t`Variables`}
rows={4}
value={overrides.extra_vars}
name="extra_vars"
/>
)}
</PromptDetailList>

View File

@ -168,6 +168,7 @@ function PromptInventorySourceDetail({ resource }) {
label={t`Source Variables`}
rows={4}
value={source_vars}
name="source_vars"
/>
)}
</>

View File

@ -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"
/>
)}
</>
);

View File

@ -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"
/>
)}
</>
);

View File

@ -369,6 +369,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
value={jsonToYaml(JSON.stringify(extra_data))}
rows={4}
label={t`Variables`}
name="extra_vars"
/>
)}
</PromptDetailList>

View File

@ -51,6 +51,7 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] } }) {
]}
value={mode}
onChange={newMode => setMode(newMode)}
name="timezone"
/>
</SplitItem>
</Split>

View File

@ -55,6 +55,7 @@ function ActivityStreamDetailButton({ streamItem, user, description }) {
value={
streamItem?.changes ? JSON.stringify(streamItem.changes) : ''
}
name="changes"
/>
)}
</DetailList>

View File

@ -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`}

View File

@ -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 && (

View File

@ -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>
);

View File

@ -81,6 +81,7 @@ function ContainerGroupDetails({ instanceGroup }) {
: instanceGroup.pod_spec_override
}
rows={6}
name="pod_spec_override"
/>
)}
</DetailList>

View File

@ -104,6 +104,7 @@ function InventoryDetail({ inventory }) {
label={t`Variables`}
value={inventory.variables}
rows={4}
name="variables"
/>
<UserDateDetail
label={t`Created`}

View File

@ -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`}

View File

@ -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 && (

View File

@ -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>
);

View File

@ -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} />

View File

@ -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`}

View File

@ -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>
);

View File

@ -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>

View File

@ -353,6 +353,7 @@ function JobTemplateDetail({ template }) {
rows={4}
label={t`Variables`}
dataCy={`jt-details-${template.id}`}
name="extra_vars"
/>
</DetailList>
<CardActionsRow>

View File

@ -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 &&