From 469d23518107b27356eebd511b9854189d7e3369 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:46:02 -0700
Subject: [PATCH] fix some spacing; add helper text in export (#332) (#334)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
(cherry picked from commit 29eb275054ce0ae0d8ade8ac120165ebc1c46dc1)

Co-authored-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 common/constants.ts                           |  2 ++
 .../components/export_modal.tsx               | 13 ++++++---
 .../workflow_detail/components/header.tsx     |  2 +-
 .../processor_inputs/ml_processor_inputs.tsx  |  4 +--
 .../workflow_detail/workspace/workspace.tsx   | 28 +++++++++++++++++--
 5 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/common/constants.ts b/common/constants.ts
index 0e08055b..8167231f 100644
--- a/common/constants.ts
+++ b/common/constants.ts
@@ -130,6 +130,8 @@ export const TEXT_CHUNKING_PROCESSOR_LINK =
   'https://opensearch.org/docs/latest/ingest-pipelines/processors/text-chunking/';
 export const CREATE_WORKFLOW_LINK =
   'https://opensearch.org/docs/latest/automating-configurations/api/create-workflow/';
+export const WORKFLOW_TUTORIAL_LINK =
+  'https://opensearch.org/docs/latest/automating-configurations/workflow-tutorial/';
 export const NORMALIZATION_PROCESSOR_LINK =
   'https://opensearch.org/docs/latest/search-plugins/search-pipelines/normalization-processor/';
 
diff --git a/public/pages/workflow_detail/components/export_modal.tsx b/public/pages/workflow_detail/components/export_modal.tsx
index 55d20a61..fd5bdba3 100644
--- a/public/pages/workflow_detail/components/export_modal.tsx
+++ b/public/pages/workflow_detail/components/export_modal.tsx
@@ -84,11 +84,16 @@ export function ExportModal(props: ExportModalProps) {
         <EuiFlexGroup direction="column">
           <EuiFlexItem grow={false}>
             <EuiText>
-              Copy the below workflow templates to use in other clusters.
+              {`To build out identical resources in other environments, create and provision a workflow using the below template.`}{' '}
+              <EuiLink href={CREATE_WORKFLOW_LINK} target="_blank">
+                Learn more
+              </EuiLink>
             </EuiText>
-            <EuiLink href={CREATE_WORKFLOW_LINK} target="_blank">
-              Learn more
-            </EuiLink>
+            <EuiText
+              size="s"
+              color="subdued"
+            >{`Note: certain resource IDs in the template, such as model IDs, may be cluster-specific and not work out-of-the-box 
+            in other environments. Ensure these values are updated before attempting to provision in other environments.`}</EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiCompressedRadioGroup
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
index c020614f..9060764a 100644
--- a/public/pages/workflow_detail/components/header.tsx
+++ b/public/pages/workflow_detail/components/header.tsx
@@ -235,7 +235,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
               >
                 Close
               </EuiSmallButtonEmpty>,
-              <EuiText style={{ marginTop: '16px' }} color="subdued" size="s">
+              <EuiText style={{ marginTop: '14px' }} color="subdued" size="s">
                 {`Last updated: ${workflowLastUpdated}`}
               </EuiText>,
             ]}
diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx
index b1ed05a8..52ce7017 100644
--- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx
@@ -201,7 +201,7 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
               >
                 <EuiButtonEmpty
                   disabled={!isInputPreviewAvailable}
-                  style={{ width: '100px' }}
+                  style={{ width: '100px', paddingTop: '8px' }}
                   size="s"
                   onClick={() => {
                     setIsInputTransformModalOpen(true);
@@ -251,7 +251,7 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
               >
                 <EuiButtonEmpty
                   disabled={!isOutputPreviewAvailable}
-                  style={{ width: '100px' }}
+                  style={{ width: '100px', paddingTop: '8px' }}
                   size="s"
                   onClick={() => {
                     setIsOutputTransformModalOpen(true);
diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
index f72a282b..c9186b12 100644
--- a/public/pages/workflow_detail/workspace/workspace.tsx
+++ b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -20,8 +20,16 @@ import {
   EuiFilterGroup,
   EuiFilterButton,
   EuiCodeEditor,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
-import { IComponentData, Workflow, WorkflowConfig } from '../../../../common';
+import {
+  IComponentData,
+  WORKFLOW_TUTORIAL_LINK,
+  Workflow,
+  WorkflowConfig,
+  customStringify,
+} from '../../../../common';
 import {
   IngestGroupComponent,
   SearchGroupComponent,
@@ -58,9 +66,9 @@ export function Workspace(props: WorkspaceProps) {
   // JSON state
   const [provisionTemplate, setProvisionTemplate] = useState<string>('');
   useEffect(() => {
-    if (props.workflow?.workflows.provision) {
+    if (props.workflow?.workflows?.provision) {
       const templateAsObj = props.workflow?.workflows.provision as {};
-      const templateAsStr = JSON.stringify(templateAsObj, undefined, 2);
+      const templateAsStr = customStringify(templateAsObj);
       setProvisionTemplate(templateAsStr);
     }
   }, [props.workflow]);
@@ -141,6 +149,20 @@ export function Workspace(props: WorkspaceProps) {
                 </EuiFilterButton>
               </EuiFilterGroup>
             </EuiFlexItem>
+            <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+              {visualSelected ? (
+                <EuiText>
+                  {`A basic visual view representing the configured ingest & search flows.`}
+                </EuiText>
+              ) : (
+                <EuiText>
+                  {`The Flow Framework provisioning template describing how to build out the configured resources. `}
+                  <EuiLink href={WORKFLOW_TUTORIAL_LINK} target="_blank">
+                    Learn more
+                  </EuiLink>
+                </EuiText>
+              )}
+            </EuiFlexItem>
           </EuiFlexGroup>
         </div>
         <div className="reactflow-parent-wrapper">