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

add expand button to VariablesDetail

Browse Source
This commit is contained in:
Keith J. Grant
2021-02-23 16:33:11 -08:00
parent b1ce5e24e3
commit d6a5a1e0d0
1 changed files with 117 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
View File

@@ -1,13 +1,14 @@
import 'styled-components/macro';
import React, { useState, useEffect } from 'react';
import { node, number, oneOfType, shape, string, arrayOf } from 'prop-types';
import { Trans, withI18n } from '@lingui/react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Split,
SplitItem,
TextListItemVariants,
Button,
Modal,
} from '@patternfly/react-core';
import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
import { DetailName, DetailValue } from '../DetailList';
@@ -36,15 +37,7 @@ function getValueAsMode(value, mode) {
return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
}
function VariablesDetail({
dataCy,
helpText,
value,
label,
rows,
fullHeight,
i18n,
}) {
function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
const [mode, setMode] = useState(
isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE
);
@@ -76,51 +69,18 @@ function VariablesDetail({
fullWidth
css="grid-column: 1 / -1"
>
<Split hasGutter>
<SplitItem isFilled>
<Split hasGutter>
<SplitItem>
<div className="pf-c-form__label">
<span
className="pf-c-form__label-text"
css="font-weight: var(--pf-global--FontWeight--bold)"
>
{label}
</span>
{helpText && (
<Popover header={label} content={helpText} id={dataCy} />
)}
</div>
</SplitItem>
<SplitItem>
<MultiButtonToggle
buttons={[
[YAML_MODE, 'YAML'],
[JSON_MODE, 'JSON'],
]}
value={mode}
onChange={newMode => {
try {
setCurrentValue(getValueAsMode(currentValue, newMode));
setMode(newMode);
} catch (err) {
setError(err);
}
}}
/>
</SplitItem>
</Split>
</SplitItem>
<SplitItem>
<Button
variant="plain"
aria-label={i18n._(t`Expand input`)}
onClick={() => setIsExpanded(true)}
>
<ExpandArrowsAltIcon />
</Button>
</SplitItem>
</Split>
<ModeToggle
label={label}
helpText={helpText}
dataCy={dataCy}
mode={mode}
setMode={setMode}
currentValue={currentValue}
setCurrentValue={setCurrentValue}
setError={setError}
onExpand={() => setIsExpanded(true)}
i18n={i18n}
/>
</DetailName>
<DetailValue
data-cy={valueCy}
@@ -133,7 +93,6 @@ function VariablesDetail({
value={currentValue}
readOnly
rows={rows}
fullHeight={fullHeight}
css="margin-top: 10px"
/>
{error && (
@@ -141,10 +100,48 @@ function VariablesDetail({
css="color: var(--pf-global--danger-color--100);
font-size: var(--pf-global--FontSize--sm"
>
<Trans>Error:</Trans> {error.message}
{i18n._(t`Error:`)} {error.message}
</div>
)}
</DetailValue>
<Modal
variant="xlarge"
title={label}
isOpen={isExpanded}
onClose={() => setIsExpanded(false)}
actions={[
<Button
aria-label={i18n._(t`Done`)}
key="select"
variant="primary"
onClick={() => setIsExpanded(false)}
>
{i18n._(t`Done`)}
</Button>,
]}
>
<div className="pf-c-form">
<ModeToggle
label={label}
helpText={helpText}
dataCy={dataCy}
mode={mode}
setMode={setMode}
currentValue={currentValue}
setCurrentValue={setCurrentValue}
setError={setError}
i18n={i18n}
/>
<CodeEditor
mode={mode}
value={currentValue}
readOnly
rows={rows}
fullHeight
css="margin-top: 10px"
/>
</div>
</Modal>
</>
);
}
@@ -161,4 +158,67 @@ VariablesDetail.defaultProps = {
helpText: '',
};
function ModeToggle({
label,
helpText,
dataCy,
currentValue,
setCurrentValue,
mode,
setMode,
setError,
onExpand,
i18n,
}) {
return (
<Split hasGutter>
<SplitItem isFilled>
<Split hasGutter css="align-items: baseline">
<SplitItem>
<div className="pf-c-form__label">
<span
className="pf-c-form__label-text"
css="font-weight: var(--pf-global--FontWeight--bold)"
>
{label}
</span>
{helpText && (
<Popover header={label} content={helpText} id={dataCy} />
)}
</div>
</SplitItem>
<SplitItem>
<MultiButtonToggle
buttons={[
[YAML_MODE, 'YAML'],
[JSON_MODE, 'JSON'],
]}
value={mode}
onChange={newMode => {
try {
setCurrentValue(getValueAsMode(currentValue, newMode));
setMode(newMode);
} catch (err) {
setError(err);
}
}}
/>
</SplitItem>
</Split>
</SplitItem>
{onExpand && (
<SplitItem>
<Button
variant="plain"
aria-label={i18n._(t`Expand input`)}
onClick={onExpand}
>
<ExpandArrowsAltIcon />
</Button>
</SplitItem>
)}
</Split>
);
}
export default withI18n()(VariablesDetail);