Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TASK][Security Serverless]: Add semantic headings to Fleet Integration forms #181922

Merged
merged 2 commits into from
Apr 30, 2024
+32 −29
Merged

[TASK][Security Serverless]: Add semantic headings to Fleet Integration forms #181922

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04082d2
Updated Fleet Add integration heading nesting.
1Copenut Apr 26, 2024
e385170
Merge branch 'main' into tpierce/security-integrations-headings
1Copenut Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions ...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
Comment on lines +143 to +145
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opted to switch this out for <EuiTitle/> because I could pass a size prop and ensure the headings were the same size as other H3s on the page without custom CSS.

</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
Open in desktop
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
Open in desktop
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