Skip to content

Commit

Permalink
[TASK][Security Serverless]: Add semantic headings to Fleet Integrati…
Browse files Browse the repository at this point in the history 
…on forms (elastic#181922)

Refactored the Fleet "Add Integration" form to properly nest headings by level.
  • Loading branch information
@1Copenut
1Copenut authored Apr 30, 2024
1 parent 390628d commit a9b4fc8
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 29 deletions.
44 changes: 22 additions & 22 deletions ...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -403,7 +403,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =

<EuiDescribedFormGroup
title={
<h4>
<h3>
<FormattedMessage
id="xpack.fleet.agentPolicyForm.inactivityTimeoutLabel"
defaultMessage="Inactivity timeout"
Expand All @@ -428,7 +428,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiToolTip>
</>
)}
</h4>
</h3>
}
description={
<FormattedMessage
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -626,7 +626,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
title={
<h4>
<h3>
<FormattedMessage
id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutLabel"
defaultMessage="Unenrollment timeout"
Expand All @@ -646,7 +646,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
size="s"
/>
</EuiToolTip>
</h4>
</h3>
}
description={
<FormattedMessage
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions ...t/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions ...icy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
EuiFlexItem,
EuiSwitch,
EuiText,
EuiTitle,
EuiHorizontalRule,
EuiSpacer,
EuiButtonEmpty,
Expand Down Expand Up @@ -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>
}
Expand Down
4 changes: 2 additions & 2 deletions ...s/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions ...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
}),
'data-test-subj': 'dataCollectionSetupStep',
children: replaceStepConfigurePackagePolicy || stepConfigurePackagePolicy,
headingElement: 'h2',
},
];

Expand All @@ -412,6 +413,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
defaultMessage: 'Where to add this integration?',
}),
children: stepSelectAgentPolicy,
headingElement: 'h2',
});
}

Expand Down

0 comments on commit a9b4fc8

Please sign in to comment.