add expand button to VariablesDetail

awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx

@@ -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,9 +69,111 @@ function VariablesDetail({
         fullWidth
         css="grid-column: 1 / -1"
       >
+        <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}
+        component={TextListItemVariants.dd}
+        fullWidth
+        css="grid-column: 1 / -1; margin-top: -20px"
+      >
+        <CodeEditor
+          mode={mode}
+          value={currentValue}
+          readOnly
+          rows={rows}
+          css="margin-top: 10px"
+        />
+        {error && (
+          <div
+            css="color: var(--pf-global--danger-color--100);
+            font-size: var(--pf-global--FontSize--sm"
+          >
+            {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>
+    </>
+  );
+}
+VariablesDetail.propTypes = {
+  value: oneOfType([shape({}), arrayOf(string), string]).isRequired,
+  label: node.isRequired,
+  rows: oneOfType(number, string),
+  dataCy: string,
+  helpText: string,
+};
+VariablesDetail.defaultProps = {
+  rows: null,
+  dataCy: '',
+  helpText: '',
+};
+
+function ModeToggle({
+  label,
+  helpText,
+  dataCy,
+  currentValue,
+  setCurrentValue,
+  mode,
+  setMode,
+  setError,
+  onExpand,
+  i18n,
+}) {
+  return (
     <Split hasGutter>
       <SplitItem isFilled>
-            <Split hasGutter>
+        <Split hasGutter css="align-items: baseline">
           <SplitItem>
             <div className="pf-c-form__label">
               <span
@@ -111,54 +206,19 @@ function VariablesDetail({
           </SplitItem>
         </Split>
       </SplitItem>
+      {onExpand && (
         <SplitItem>
           <Button
             variant="plain"
             aria-label={i18n._(t`Expand input`)}
-              onClick={() => setIsExpanded(true)}
+            onClick={onExpand}
           >
             <ExpandArrowsAltIcon />
           </Button>
         </SplitItem>
-        </Split>
-      </DetailName>
-      <DetailValue
-        data-cy={valueCy}
-        component={TextListItemVariants.dd}
-        fullWidth
-        css="grid-column: 1 / -1; margin-top: -20px"
-      >
-        <CodeEditor
-          mode={mode}
-          value={currentValue}
-          readOnly
-          rows={rows}
-          fullHeight={fullHeight}
-          css="margin-top: 10px"
-        />
-        {error && (
-          <div
-            css="color: var(--pf-global--danger-color--100);
-            font-size: var(--pf-global--FontSize--sm"
-          >
-            <Trans>Error:</Trans> {error.message}
-          </div>
       )}
-      </DetailValue>
-    </>
+    </Split>
   );
 }
-VariablesDetail.propTypes = {
-  value: oneOfType([shape({}), arrayOf(string), string]).isRequired,
-  label: node.isRequired,
-  rows: oneOfType(number, string),
-  dataCy: string,
-  helpText: string,
-};
-VariablesDetail.defaultProps = {
-  rows: null,
-  dataCy: '',
-  helpText: '',
-};
 
 export default withI18n()(VariablesDetail);