fit and finish enhancements (#428) (#430)

(cherry picked from commit 3bf513a)

Signed-off-by: saimedhi <saimedhi@amazon.com>
Signed-off-by: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: opensearch-trigger-bot[bot]

public/general_components/multi_select_filter.tsx

@@ -76,7 +76,7 @@ export function MultiSelectFilter(props: MultiSelectFilterProps) {
           }
           isOpen={isPopoverOpen}
           closePopover={onPopoverClose}
-          panelPaddingSize="none"
+          panelPaddingSize="s"
         >
           <div className="euiFilterSelect__items multi-select-filter--width">
             {filters.map((filter, index) => (

public/general_components/processors_title.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { EuiFlexItem, EuiText } from '@elastic/eui';
 
 interface ProcessorsTitleProps {
   title: string;
@@ -17,17 +17,17 @@ interface ProcessorsTitleProps {
 export function ProcessorsTitle(props: ProcessorsTitleProps) {
   return (
     <EuiFlexItem grow={false}>
-      <EuiTitle size="s">
+      <EuiText size="s">
         <div>
-          <h2
+          <h3
             style={{ display: 'inline-block' }}
-          >{`${props.title} (${props.processorCount}) -`}</h2>
+          >{`${props.title} (${props.processorCount}) -`}</h3>
           &nbsp;
-          <h2 style={{ display: 'inline-block', fontStyle: 'italic' }}>
+          <h3 style={{ display: 'inline-block', fontStyle: 'italic' }}>
             optional
-          </h2>
+          </h3>
         </div>
-      </EuiTitle>
+      </EuiText>
     </EuiFlexItem>
   );
 }

public/general_components/service_card/search_studio_card.tsx

@@ -4,7 +4,12 @@
  */
 
 import React from 'react';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import {
+  EuiSmallButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { PLUGIN_ID } from '../../../common';
 import { ContentManagementPluginStart } from '../../../../../src/plugins/content_management/public';
@@ -26,16 +31,15 @@ export const registerSearchStudioCard = (
   const footer = (
     <EuiFlexGroup justifyContent="flexEnd">
       <EuiFlexItem grow={false}>
-        <EuiButton
-          size="s"
+        <EuiSmallButton
           onClick={() => {
             core.application.navigateToApp(PLUGIN_ID);
           }}
         >
           {i18n.translate('flowFrameworkDashboards.searchStudioCard.footer', {
             defaultMessage: 'Try OpenSearch Studio',
           })}
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

public/pages/workflow_detail/components/export_modal.tsx

@@ -83,7 +83,7 @@ export function ExportModal(props: ExportModalProps) {
       <EuiModalBody>
         <EuiFlexGroup direction="column">
           <EuiFlexItem grow={false}>
-            <EuiText>
+            <EuiText size="s">
               {`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

public/pages/workflow_detail/resizable_workspace.tsx

@@ -276,7 +276,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
           titleSize="s"
           body={
             <>
-              <EuiText>
+              <EuiText size="s">
                 Only valid workflows created from this OpenSearch Dashboards
                 application are editable and viewable.
               </EuiText>

public/pages/workflow_detail/tools/errors/errors.tsx

@@ -19,7 +19,7 @@ export function Errors(props: ErrorsProps) {
   return (
     <>
       {isEmpty(props.errorMessage) ? (
-        <EuiText>There are no errors.</EuiText>
+        <EuiText size="s">There are no errors.</EuiText>
       ) : (
         <EuiCodeBlock fontSize="m" isCopyable={false}>
           {props.errorMessage}

public/pages/workflow_detail/tools/resources/resources.tsx

@@ -40,7 +40,7 @@ export function Resources(props: ResourcesProps) {
           titleSize="s"
           body={
             <>
-              <EuiText>
+              <EuiText size="s">
                 Provision the workflow to generate resources in order to start
                 prototyping.
               </EuiText>

public/pages/workflow_detail/tools/tools.tsx

@@ -13,7 +13,7 @@ import {
   EuiPanel,
   EuiTab,
   EuiTabs,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { Workflow } from '../../../../common';
 import { Resources } from './resources';
@@ -117,9 +117,9 @@ export function Tools(props: ToolsProps) {
         }}
       >
         <EuiFlexItem grow={false}>
-          <EuiTitle>
+          <EuiText size="s">
             <h2>Tools</h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiTabs size="s" expand={false}>

public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { TextField } from '../input_fields';
 import { AdvancedSettings } from './advanced_settings';
 
@@ -17,9 +17,9 @@ export function IngestData(props: IngestDataProps) {
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
-        <EuiTitle size="s">
-          <h2>Ingest data</h2>
-        </EuiTitle>
+        <EuiText size="s">
+          <h3>Ingest data</h3>
+        </EuiText>
       </EuiFlexItem>
       <EuiFlexItem>
         <TextField label="Index name" fieldPath={'ingest.index.name'} />

public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx

@@ -18,7 +18,6 @@ import {
   EuiModalHeaderTitle,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiFilterGroup,
   EuiSmallFilterButton,
   EuiSuperSelectOption,
@@ -253,7 +252,9 @@ export function SourceData(props: SourceDataProps) {
                       (option) =>
                         ({
                           value: option.name,
-                          inputDisplay: <EuiText>{option.name}</EuiText>,
+                          inputDisplay: (
+                            <EuiText size="s">{option.name}</EuiText>
+                          ),
                           disabled: false,
                         } as EuiSuperSelectOption<string>)
                     )}
@@ -288,9 +289,9 @@ export function SourceData(props: SourceDataProps) {
       )}
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h2>Import data</h2>
-          </EuiTitle>
+          <EuiText size="s">
+            <h3>Source data</h3>
+          </EuiText>
         </EuiFlexItem>
         {props.lastIngested !== undefined && (
           <EuiFlexItem grow={false}>

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx

@@ -115,6 +115,7 @@ export function ConfigurePromptModal(props: ConfigurePromptModalProps) {
                 anchorPosition="downLeft"
               >
                 <EuiContextMenu
+                  size="s"
                   initialPanelId={0}
                   panels={[
                     {
@@ -140,7 +141,7 @@ export function ConfigurePromptModal(props: ConfigurePromptModalProps) {
                 />
               </EuiPopover>
               <EuiSpacer size="m" />
-              <EuiText>Prompt</EuiText>
+              <EuiText size="s">Prompt</EuiText>
               <EuiSpacer size="s" />
               <EuiCodeEditor
                 mode="json"
@@ -203,6 +204,7 @@ export function ConfigurePromptModal(props: ConfigurePromptModalProps) {
                       <EuiPopover
                         isOpen={schemaPopoverOpen}
                         closePopover={() => setSchemaPopoverOpen(false)}
+                        panelPaddingSize="s"
                         button={
                           <EuiSmallButtonEmpty
                             onClick={() =>

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx

@@ -26,7 +26,7 @@ import {
   EuiCodeBlock,
   EuiPopoverTitle,
   EuiIconTip,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiCallOut,
 } from '@elastic/eui';
 import {
@@ -281,7 +281,7 @@ export function InputTransformModal(props: InputTransformModalProps) {
                   <EuiSpacer size="s" />
                 </>
               )}
-              <EuiText>Source input</EuiText>
+              <EuiText size="s">Source input</EuiText>
               <EuiSmallButton
                 style={{ width: '100px' }}
                 isLoading={isFetching}
@@ -436,7 +436,7 @@ export function InputTransformModal(props: InputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiText>Define transform</EuiText>
+              <EuiText size="s">Define transform</EuiText>
               <EuiSpacer size="s" />
               <MapArrayField
                 field={props.inputMapField}
@@ -496,10 +496,12 @@ export function InputTransformModal(props: InputTransformModalProps) {
                 )}
                 <EuiFlexItem grow={true}>
                   {transformOptions.length <= 1 ? (
-                    <EuiText>Transformed input</EuiText>
+                    <EuiText size="s">Transformed input</EuiText>
                   ) : (
                     <EuiCompressedSelect
-                      prepend={<EuiText>Transformed input for</EuiText>}
+                      prepend={
+                        <EuiText size="s">Transformed input for</EuiText>
+                      }
                       options={transformOptions}
                       value={selectedTransformOption}
                       onChange={(e) => {
@@ -513,6 +515,7 @@ export function InputTransformModal(props: InputTransformModalProps) {
                     <EuiPopover
                       isOpen={popoverOpen}
                       closePopover={() => setPopoverOpen(false)}
+                      panelPaddingSize="s"
                       button={
                         <EuiSmallButtonEmpty
                           onClick={() => setPopoverOpen(!popoverOpen)}
@@ -562,10 +565,10 @@ export function InputTransformModal(props: InputTransformModalProps) {
               <>
                 <EuiFlexGroup direction="row">
                   <EuiFlexItem grow={false}>
-                    <EuiText>Transformed prompt</EuiText>
+                    <EuiText size="s">Transformed prompt</EuiText>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false} style={{ marginTop: '16px' }}>
-                    <EuiSwitch
+                    <EuiCompressedSwitch
                       label="Show"
                       checked={viewPromptDetails}
                       onChange={() => setViewPromptDetails(!viewPromptDetails)}
@@ -583,7 +586,7 @@ export function InputTransformModal(props: InputTransformModalProps) {
                 {viewPromptDetails && (
                   <>
                     <EuiSpacer size="s" />
-                    <EuiSwitch
+                    <EuiCompressedSwitch
                       label="With transformed inputs"
                       checked={viewTransformedPrompt}
                       onChange={() =>

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx

@@ -203,7 +203,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
               )}
               <EuiFlexGroup direction="row" justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiText>Source output</EuiText>
+                  <EuiText size="s">Source output</EuiText>
                 </EuiFlexItem>
                 {!isEmpty(
                   parseModelOutputsObj(props.modelInterface, fullResponsePath)
@@ -212,6 +212,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
                     <EuiPopover
                       isOpen={popoverOpen}
                       closePopover={() => setPopoverOpen(false)}
+                      panelPaddingSize="s"
                       button={
                         <EuiSmallButtonEmpty
                           onClick={() => setPopoverOpen(!popoverOpen)}
@@ -382,7 +383,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiText>Define transform</EuiText>
+              <EuiText size="s">Define transform</EuiText>
               <EuiSpacer size="s" />
               <MapArrayField
                 field={props.outputMapField}
@@ -418,10 +419,10 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
           <EuiFlexItem>
             <>
               {transformOptions.length <= 1 ? (
-                <EuiText>Transformed output</EuiText>
+                <EuiText size="s">Transformed output</EuiText>
               ) : (
                 <EuiCompressedSelect
-                  prepend={<EuiText>Transformed output for</EuiText>}
+                  prepend={<EuiText size="s">Transformed output for</EuiText>}
                   options={transformOptions}
                   value={selectedTransformOption}
                   onChange={(e) => {

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx

@@ -112,6 +112,7 @@ export function OverrideQueryModal(props: OverrideQueryModalProps) {
                 anchorPosition="downLeft"
               >
                 <EuiContextMenu
+                  size="s"
                   initialPanelId={0}
                   panels={[
                     {

public/pages/workflow_detail/workflow_inputs/processors_list.tsx

@@ -204,6 +204,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
             anchorPosition="downLeft"
           >
             <EuiContextMenu
+              size="s"
               initialPanelId={PANEL_ID}
               panels={[
                 {

public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx

@@ -15,7 +15,6 @@ import {
   EuiCompressedSuperSelect,
   EuiSuperSelectOption,
   EuiText,
-  EuiTitle,
   EuiSpacer,
 } from '@elastic/eui';
 import {
@@ -83,9 +82,9 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
       )}
       <EuiFlexGroup direction="column">
         <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h2>Configure query</h2>
-          </EuiTitle>
+          <EuiText size="s">
+            <h3>Configure query</h3>
+          </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiCompressedFormRow label="Retrieval index">
@@ -100,7 +99,7 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
                   (option) =>
                     ({
                       value: option.name,
-                      inputDisplay: <EuiText>{option.name}</EuiText>,
+                      inputDisplay: <EuiText size="s">{option.name}</EuiText>,
                       disabled: false,
                     } as EuiSuperSelectOption<string>)
                 )}

public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx

@@ -66,6 +66,7 @@ export function EditQueryModal(props: EditQueryModalProps) {
           anchorPosition="downLeft"
         >
           <EuiContextMenu
+            size="s"
             initialPanelId={0}
             panels={[
               {