[Fleet] fix text wrapping in output error callout + hide cancel chang…

…e btn (#173149) ## Summary 1. Fixed text wrapping in output error callout when the hostname is very long. <img width="676" alt="image" src="https://github.com/elastic/kibana/assets/90178898/4680f8ab-cf7c-4b95-899e-456a3f467e6f"> 2. Hiding Cancel X change button when creating secret for the first time Closes #173034 <img width="667" alt="image" src="https://github.com/elastic/kibana/assets/90178898/c644f19b-0f9b-49f7-af88-b2a01d042730">
elastic · Dec 12, 2023 · f8fb553 · f8fb553
1 parent 6443b57
commit f8fb553
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/...leet/sections/settings/components/edit_output_flyout/output_form_secret_form_row.test.tsx b/...leet/sections/settings/components/edit_output_flyout/output_form_secret_form_row.test.tsx
@@ -75,4 +75,20 @@ describe('SecretFormRow', () => {
 
     expect(onUsePlainText).toHaveBeenCalled();
   });
+
+  it('should not display the cancel change button when no initial value is provided', () => {
+    const { queryByTestId } = render(
+      <SecretFormRow
+        title={title}
+        clear={clear}
+        onUsePlainText={onUsePlainText}
+        cancelEdit={cancelEdit}
+        initialValue={''}
+      >
+        <input type="text" />
+      </SecretFormRow>
+    );
+
+    expect(queryByTestId('secretCancelChangeBtn')).not.toBeInTheDocument();
+  });
 });
diff --git a/...ons/fleet/sections/settings/components/edit_output_flyout/output_form_secret_form_row.tsx b/...ons/fleet/sections/settings/components/edit_output_flyout/output_form_secret_form_row.tsx
@@ -41,7 +41,7 @@ export const SecretFormRow: React.FC<{
   onUsePlainText,
   cancelEdit,
 }) => {
-  const hasInitialValue = initialValue !== undefined;
+  const hasInitialValue = !!initialValue;
   const [editMode, setEditMode] = useState(!initialValue);
   const valueHiddenPanel = (
     <EuiPanel color="subdued" borderRadius="none" hasShadow={false}>
@@ -98,7 +98,7 @@ export const SecretFormRow: React.FC<{
     <>
       {children}
       {hasInitialValue && (
-        <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexGroup justifyContent="flexEnd" data-test-subj="secretCancelChangeBtn">
           <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
         </EuiFlexGroup>
       )}

diff --git a/...applications/fleet/sections/settings/components/edit_output_flyout/output_health.test.tsx b/...applications/fleet/sections/settings/components/edit_output_flyout/output_health.test.tsx
@@ -72,7 +72,7 @@ describe('OutputHealth', () => {
 
     await waitFor(async () => {
       expect(utils.getByTestId('outputHealthDegradedCallout').textContent).toContain(
-        'Unable to connect to "Remote ES" at https://remote-es:443. Please check the details are correct.'
+        'Unable to connect to "Remote ES" at https://remote-es:443.Please check the details are correct.'
       );
     });
   });

diff --git a/...blic/applications/fleet/sections/settings/components/edit_output_flyout/output_health.tsx b/...blic/applications/fleet/sections/settings/components/edit_output_flyout/output_health.tsx
@@ -51,15 +51,15 @@ export const OutputHealth: React.FunctionComponent<Props> = ({ output, showBadge
         iconType="error"
         data-test-subj="outputHealthDegradedCallout"
       >
-        <p>
+        <p className="eui-textBreakWord">
           {i18n.translate('xpack.fleet.output.calloutText', {
             defaultMessage: 'Unable to connect to "{name}" at {host}.',
             values: {
               name: output.name,
               host: output.hosts?.join(',') ?? '',
             },
           })}
-        </p>{' '}
+        </p>
         <p>
           {i18n.translate('xpack.fleet.output.calloutPromptText', {
             defaultMessage: 'Please check the details are correct.',