From a9b4fc8da64c9f612e2912011f12a7b7dae102d2 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Tue, 30 Apr 2024 15:17:32 -0500
Subject: [PATCH] [TASK][Security Serverless]: Add semantic headings to Fleet
 Integration forms (#181922)

Refactored the Fleet "Add Integration" form to properly nest headings by level.
---
 .../agent_policy_advanced_fields/index.tsx    | 44 +++++++++----------
 .../components/agent_policy_integration.tsx   |  4 +-
 .../components/package_policy_input_panel.tsx |  7 +--
 .../steps/step_define_package_policy.tsx      |  4 +-
 .../single_page_layout/index.tsx              |  2 +
 5 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
index 08049f6d81669..b3f3236772ffd 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
@@ -117,12 +117,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
     () => (
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.tamperingLabel"
               defaultMessage="Agent tamper protection"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -209,12 +209,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
     <>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.descriptionFieldLabel"
               defaultMessage="Description"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -254,12 +254,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4 data-test-subj="defaultNamespaceHeader">
+          <h3 data-test-subj="defaultNamespaceHeader">
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.namespaceFieldLabel"
               defaultMessage="Default namespace"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -305,12 +305,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.monitoringLabel"
               defaultMessage="Agent monitoring"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -403,7 +403,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
 
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.inactivityTimeoutLabel"
               defaultMessage="Inactivity timeout"
@@ -428,7 +428,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
                 </EuiToolTip>
               </>
             )}
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -464,12 +464,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.fleetServerHostsLabel"
               defaultMessage="Fleet Server"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -504,12 +504,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.dataOutputLabel"
               defaultMessage="Output for integrations"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -544,12 +544,12 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.monitoringOutputLabel"
               defaultMessage="Output for agent monitoring"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -584,13 +584,13 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.downloadSourceLabel"
               defaultMessage="Agent Binary Download"
               data-test-subj="agentPolicyForm.downloadSource.label"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -626,7 +626,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutLabel"
               defaultMessage="Unenrollment timeout"
@@ -646,7 +646,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
                 size="s"
               />
             </EuiToolTip>
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
@@ -682,14 +682,14 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.hostnameFormatLabel"
               defaultMessage="Host name format"
             />
             &nbsp;
             <EuiBetaBadge label="beta" size="s" color="accent" />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
index 5de23cd555198..889b70d1d136d 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
@@ -48,12 +48,12 @@ export const AgentPolicyIntegrationForm: React.FunctionComponent<Props> = ({
     <EuiForm>
       <EuiDescribedFormGroup
         title={
-          <h4>
+          <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.createAgentPolicyLabel"
               defaultMessage="Create agent policy"
             />
-          </h4>
+          </h3>
         }
         description={
           <FormattedMessage
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
index 89df8d0074f71..f3ef27474cb0f 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
@@ -13,6 +13,7 @@ import {
   EuiFlexItem,
   EuiSwitch,
   EuiText,
+  EuiTitle,
   EuiHorizontalRule,
   EuiSpacer,
   EuiButtonEmpty,
@@ -139,9 +140,9 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
               label={
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
-                    <EuiText>
-                      <h4 id={titleElementId}>{packageInput.title || packageInput.type}</h4>
-                    </EuiText>
+                    <EuiTitle size="xs">
+                      <h3 id={titleElementId}>{packageInput.title || packageInput.type}</h3>
+                    </EuiTitle>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               }
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
index 289508b516fcc..4f50a0c1cc5f2 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
@@ -106,12 +106,12 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
         )}
         <FormGroupResponsiveFields
           title={
-            <h4>
+            <h3>
               <FormattedMessage
                 id="xpack.fleet.createPackagePolicy.stepConfigure.integrationSettingsSectionTitle"
                 defaultMessage="Integration settings"
               />
-            </h4>
+            </h3>
           }
           description={
             <FormattedMessage
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
index de2c5f1201734..6093f7b327b17 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
@@ -403,6 +403,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
       }),
       'data-test-subj': 'dataCollectionSetupStep',
       children: replaceStepConfigurePackagePolicy || stepConfigurePackagePolicy,
+      headingElement: 'h2',
     },
   ];
 
@@ -412,6 +413,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
         defaultMessage: 'Where to add this integration?',
       }),
       children: stepSelectAgentPolicy,
+      headingElement: 'h2',
     });
   }