fix some spacing; add helper text in export (#332) (#334)

Signed-off-by: Tyler Ohlsen <[email protected]> (cherry picked from commit 29eb275) Co-authored-by: Tyler Ohlsen <[email protected]>
opensearch-project · Aug 30, 2024 · 469d235 · 469d235
1 parent c5142fe
commit 469d235
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">