External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-23 16:47:45 -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 'styled-components/macro';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { node, number, oneOfType, shape, string, arrayOf } from 'prop-types'; 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 { t } from '@lingui/macro';
import { import {
Split, Split,
SplitItem, SplitItem,
TextListItemVariants, TextListItemVariants,
Button, Button,
Modal,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ExpandArrowsAltIcon } from '@patternfly/react-icons'; import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
import { DetailName, DetailValue } from '../DetailList'; import { DetailName, DetailValue } from '../DetailList';
@@ -36,15 +37,7 @@ function getValueAsMode(value, mode) {
return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value); return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
} }
function VariablesDetail({ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
dataCy,
helpText,
value,
label,
rows,
fullHeight,
i18n,
}) {
const [mode, setMode] = useState( const [mode, setMode] = useState(
isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE
); );
@@ -76,51 +69,18 @@ function VariablesDetail({
fullWidth fullWidth
css="grid-column: 1 / -1" css="grid-column: 1 / -1"
> >
<Split hasGutter> <ModeToggle
<SplitItem isFilled> label={label}
<Split hasGutter> helpText={helpText}
<SplitItem> dataCy={dataCy}
<div className="pf-c-form__label"> mode={mode}
<span setMode={setMode}
className="pf-c-form__label-text" currentValue={currentValue}
css="font-weight: var(--pf-global--FontWeight--bold)" setCurrentValue={setCurrentValue}
> setError={setError}
{label} onExpand={() => setIsExpanded(true)}
</span> i18n={i18n}
{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>
</DetailName> </DetailName>
<DetailValue <DetailValue
data-cy={valueCy} data-cy={valueCy}
@@ -133,7 +93,6 @@ function VariablesDetail({
value={currentValue} value={currentValue}
readOnly readOnly
rows={rows} rows={rows}
fullHeight={fullHeight}
css="margin-top: 10px" css="margin-top: 10px"
/> />
{error && ( {error && (
@@ -141,10 +100,48 @@ function VariablesDetail({
css="color: var(--pf-global--danger-color--100); css="color: var(--pf-global--danger-color--100);
font-size: var(--pf-global--FontSize--sm" font-size: var(--pf-global--FontSize--sm"
> >
<Trans>Error:</Trans> {error.message} {i18n._(t`Error:`)} {error.message}
</div> </div>
)} )}
</DetailValue> </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: '', 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); export default withI18n()(VariablesDetail);