Change readonly fields into codeblock

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Oct 18, 2024 · af16923 · af16923
1 parent 3bf513a
commit af16923
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
@@ -22,6 +22,7 @@ import {
   EuiSmallFilterButton,
   EuiSuperSelectOption,
   EuiCompressedSuperSelect,
+  EuiCodeBlock,
 } from '@elastic/eui';
 import { JsonField } from '../input_fields';
 import {
@@ -311,15 +312,21 @@ export function SourceData(props: SourceDataProps) {
           </EuiSmallButton>
         </EuiFlexItem>
         {docsPopulated && (
-          <EuiFlexItem grow={false}>
-            <JsonField
-              label="Documents to be imported"
-              fieldPath={'ingest.docs'}
-              helpText="Documents should be formatted as a valid JSON array."
-              editorHeight="25vh"
-              readOnly={true}
-            />
-          </EuiFlexItem>
+          <>
+            <EuiSpacer size="s" />
+            <EuiFlexItem grow={true}>
+              <EuiCodeBlock
+                fontSize="s"
+                language="json"
+                overflowHeight={300}
+                isCopyable={false}
+                whiteSpace="pre"
+                paddingSize="none"
+              >
+                {getIn(values, 'ingest.docs')}
+              </EuiCodeBlock>
+            </EuiFlexItem>
+          </>
         )}
       </EuiFlexGroup>
     </>

diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx
@@ -5,7 +5,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useFormikContext } from 'formik';
+import { getIn, useFormikContext } from 'formik';
 import {
   EuiSmallButton,
   EuiCompressedFieldText,
@@ -16,13 +16,13 @@ import {
   EuiSuperSelectOption,
   EuiText,
   EuiSpacer,
+  EuiCodeBlock,
 } from '@elastic/eui';
 import {
   SearchHit,
   WorkflowFormValues,
   customStringify,
 } from '../../../../../common';
-import { JsonField } from '../input_fields';
 import { AppState, searchIndex, useAppDispatch } from '../../../../store';
 import { getDataSourceId } from '../../../../utils/utils';
 import { EditQueryModal } from './edit_query_modal';
@@ -124,13 +124,17 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
             Edit
           </EuiSmallButton>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <JsonField
-            label="Query"
-            fieldPath={'search.request'}
-            editorHeight="25vh"
-            readOnly={true}
-          />
+        <EuiFlexItem grow={true}>
+          <EuiCodeBlock
+            fontSize="s"
+            language="json"
+            overflowHeight={300}
+            isCopyable={false}
+            whiteSpace="pre"
+            paddingSize="none"
+          >
+            {getIn(values, 'search.request')}
+          </EuiCodeBlock>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <>