[Upgrade Assistant] Add note about compatibility headers

src/core/public/doc_links/doc_links_service.ts

@@ -210,6 +210,7 @@ export class DocLinksService {
           deprecationLogging: `${ELASTICSEARCH_DOCS}logging.html#deprecation-logging`,
           setupUpgrade: `${ELASTICSEARCH_DOCS}setup-upgrade.html`,
           releaseHighlights: `${ELASTICSEARCH_DOCS}release-highlights.html`,
+          apiCompatibilityHeader: `${ELASTICSEARCH_DOCS}api-conventions.html#api-compatibility`,
         },
         siem: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/index.html`,

x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/fix_logs_step/fix_logs_step.test.tsx

@@ -182,6 +182,7 @@ describe('Overview - Fix deprecation logs step', () => {
 
       expect(exists('externalLinksTitle')).toBe(false);
       expect(exists('deprecationsCountTitle')).toBe(false);
+      expect(exists('apiCompatibilityNoteTitle')).toBe(false);
     });
   });
 
@@ -370,4 +371,22 @@ describe('Overview - Fix deprecation logs step', () => {
       });
     });
   });
+
+  describe('Step 4 - API compatibility header', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadDeprecationLoggingResponse(getLoggingResponse(true));
+    });
+
+    test('It shows copy with compatibility api header advice', async () => {
+      await act(async () => {
+        testBed = await setupOverviewPage();
+      });
+
+      const { exists, component } = testBed;
+
+      component.update();
+
+      expect(exists('apiCompatibilityNoteTitle')).toBe(true);
+    });
+  });
 });

x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_logs_step/fix_logs_step.tsx

@@ -8,9 +8,11 @@
 import React, { FunctionComponent, useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { EuiText, EuiSpacer, EuiPanel, EuiCallOut } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiText, EuiSpacer, EuiPanel, EuiLink, EuiCallOut } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 
+import { useAppContext } from '../../../app_context';
 import { ExternalLinks } from './external_links';
 import { DeprecationsCountCheckpoint } from './deprecations_count_checkpoint';
 import { useDeprecationLogging } from './use_deprecation_logging';
@@ -34,6 +36,25 @@ const i18nTexts = {
       defaultMessage: 'Resolve deprecation issues and verify your changes',
     }
   ),
+  apiCompatibilityNoteTitle: i18n.translate(
+    'xpack.upgradeAssistant.overview.apiCompatibilityNoteTitle',
+    {
+      defaultMessage: 'Apply API compatibility headers (optional)',
+    }
+  ),
+  apiCompatibilityNoteBody: (docLink: string) => (
+    <FormattedMessage
+      id="xpack.upgradeAssistant.overview.apiCompatibilityNoteBody"
+      defaultMessage="We recommend you resolve all deprecation issues before upgrading. However, it can be challenging to ensure all requests are fixed. For additional safety, include API version compatibility headers in your requests. {learnMoreLink}."
+      values={{
+        learnMoreLink: (
+          <EuiLink href={docLink} target="_blank">
+            Learn more
+          </EuiLink>
+        ),
+      }}
+    />
+  ),
   onlyLogWritingEnabledTitle: i18n.translate(
     'xpack.upgradeAssistant.overview.deprecationLogs.deprecationWarningTitle',
     {
@@ -55,6 +76,11 @@ interface Props {
 
 const FixLogsStep: FunctionComponent<Props> = ({ setIsComplete }) => {
   const state = useDeprecationLogging();
+  const {
+    services: {
+      core: { docLinks },
+    },
+  } = useAppContext();
   const [checkpoint, setCheckpoint] = useState(loadLogsCheckpoint());
 
   useEffect(() => {
@@ -113,6 +139,19 @@ const FixLogsStep: FunctionComponent<Props> = ({ setIsComplete }) => {
             setCheckpoint={setCheckpoint}
             setHasNoDeprecationLogs={setIsComplete}
           />
+
+          <EuiSpacer size="xl" />
+          <EuiText data-test-subj="apiCompatibilityNoteTitle">
+            <h4>{i18nTexts.apiCompatibilityNoteTitle}</h4>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiText>
+            <p>
+              {i18nTexts.apiCompatibilityNoteBody(
+                docLinks.links.elasticsearch.apiCompatibilityHeader
+              )}
+            </p>
+          </EuiText>
         </>
       )}
     </>