fix header ui bug (#16171)

Quick fix to ui with side nav main content headers.

> NOTE: the smtp section was done quick as there is a story
[here](https://app.zenhub.com/workspaces/-drafting-ships-in-6-weeks-6192dd66ea2562000faea25c/issues/gh/fleetdm/fleet/16046)
where we will do a more complete fix.

before:


![image](https://github.com/fleetdm/fleet/assets/1153709/0155d7a6-4862-4e13-9ffb-98e8f716436a)

after:


![image](https://github.com/fleetdm/fleet/assets/1153709/5ba37585-95fe-4a5a-8561-d2ba49e32002)


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

changes/fix-ui-header-bug

@@ -0,0 +1 @@
+- fix UI bug for side navigation content headers

frontend/components/SectionHeader/SectionHeader.tsx

@@ -1,15 +1,19 @@
 import React from "react";
+import classnames from "classnames";
 
 const baseClass = "section-header";
 
 interface ISectionHeaderProps {
   title: string;
   subTitle?: React.ReactNode;
+  className?: string;
 }
 
-const SectionHeader = ({ title, subTitle }: ISectionHeaderProps) => {
+const SectionHeader = ({ title, subTitle, className }: ISectionHeaderProps) => {
+  const classNames = classnames(baseClass, className);
+
   return (
-    <div className={baseClass}>
+    <div className={classNames}>
       <h2>{title}</h2>
       {subTitle && <div className={`${baseClass}__sub-title`}>{subTitle}</div>}
     </div>

frontend/components/SectionHeader/_styles.scss

@@ -9,6 +9,6 @@
   h2 {
     margin: 0;
     font-weight: normal;
-    font-size: 18px; // TODO: update font variables to include 18px;
+    font-size: $medium;
   }
 }

frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx

@@ -94,6 +94,7 @@ const CurrentVersionSection = ({
       <SectionHeader
         title="Current versions"
         subTitle={generateSubTitleText()}
+        className={`${baseClass}__header`}
       />
       {renderTable()}
     </div>

frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/_styles.scss

@@ -8,10 +8,12 @@
     padding-bottom: $pad-medium;
     border-bottom: 1px solid $ui-fleet-black-10;
     margin-bottom: $pad-xxlarge;
+  }
 
+  &__header {
     h2 {
       font-weight: normal;
-      font-size: 18px; // TODO: update font variables to include 18px;
+      font-size: 18px;
     }
   }
 }

frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx

@@ -146,7 +146,7 @@ const TargetSection = ({
 
   return (
     <div className={baseClass}>
-      <SectionHeader title="Target" />
+      <SectionHeader title="Target" className={`${baseClass}__header`} />
       {renderTargetForms()}
     </div>
   );

frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/_styles.scss

@@ -6,7 +6,9 @@
     padding-bottom: $pad-medium;
     border-bottom: 1px solid $ui-fleet-black-10;
     margin-bottom: $pad-xxlarge;
+  }
 
+  &__header {
     h2 {
       font-weight: normal;
       font-size: 18px;

frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/AppleBusinessManagerSection/AppleBusinessManagerSection.tsx

@@ -17,6 +17,7 @@ import CustomLink from "components/CustomLink";
 import TooltipWrapper from "components/TooltipWrapper";
 import DataError from "components/DataError";
 import Spinner from "components/Spinner/Spinner";
+import SectionHeader from "components/SectionHeader";
 
 import EditTeamModal from "../EditTeamModal";
 import WindowsAutomaticEnrollmentCard from "./components/WindowsAutomaticEnrollmentCard/WindowsAutomaticEnrollmentCard";
@@ -232,7 +233,7 @@ const AppleBusinessManagerSection = ({
 
   return (
     <div className={baseClass}>
-      <h2>Apple Business Manager</h2>
+      <SectionHeader title="Apple Business Manager" />
       {isLoadingMdmAppleBm ? <Spinner /> : renderAppleBMInfo()}
       <WindowsAutomaticEnrollmentCard
         viewDetails={navigateToWindowsAutomaticEnrollment}

frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/EulaSection.tsx

@@ -7,6 +7,7 @@ import mdmAPI, { IEulaMetadataResponse } from "services/entities/mdm";
 import { NotificationContext } from "context/notification";
 
 import Spinner from "components/Spinner";
+import SectionHeader from "components/SectionHeader";
 
 import EulaUploader from "./components/EulaUploader/EulaUploader";
 import UploadedEulaView from "./components/UploadedEulaView/UploadedEulaView";
@@ -56,7 +57,7 @@ const EulaSection = () => {
 
   return (
     <div className={baseClass}>
-      <h2>End user license agreement (EULA)</h2>
+      <SectionHeader title="End user license agreement (EULA)" />
       {isLoading ? (
         <Spinner />
       ) : (

frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx

@@ -23,6 +23,7 @@ import TableContainer from "components/TableContainer";
 import TableDataError from "components/DataError";
 import EmptyTable from "components/EmptyTable";
 import CustomLink from "components/CustomLink";
+import SectionHeader from "components/SectionHeader";
 
 import AddIntegrationModal from "./components/AddIntegrationModal";
 import DeleteIntegrationModal from "./components/DeleteIntegrationModal";
@@ -398,7 +399,7 @@ const Integrations = (): JSX.Element => {
 
   return (
     <div className={`${baseClass}`}>
-      <h2 className={`${baseClass}__title`}>Ticket destinations</h2>
+      <SectionHeader title="Ticket destinations" />
       <p className={`${baseClass}__page-description`}>
         Add or edit integrations to create tickets when Fleet detects new
         vulnerabilities.

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx

@@ -11,6 +11,8 @@ import { IMdmApple } from "interfaces/mdm";
 import PATHS from "router/paths";
 
 import Spinner from "components/Spinner";
+import SectionHeader from "components/SectionHeader";
+
 import EndUserMigrationSection from "./components/EndUserMigrationSection/EndUserMigrationSection";
 import WindowsMdmCard from "./components/WindowsMdmCard/WindowsMdmCard";
 import MacOSMdmCard from "./components/MacOSMdmCard/MacOSMdmCard";
@@ -52,7 +54,7 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => {
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section ${baseClass}__mdm-section`}>
-        <h2>Mobile device management (MDM)</h2>
+        <SectionHeader title="Mobile device management (MDM)" />
         {isLoadingMdmApple ? (
           <Spinner />
         ) : (

frontend/pages/admin/OrgSettingsPage/_styles.scss

@@ -49,6 +49,17 @@
         .smtp-header {
           display: flex;
           justify-content: space-between;
+
+          // TODO: remove when we work on story to update header styles. Will
+          // likely have to chage SectionHeader component to take JSX instead of
+          // title string.
+          padding-bottom: $pad-medium;
+          max-width: 100%;
+          font-size: $medium;
+          font-weight: $regular;
+          color: $core-fleet-black;
+          border-bottom: solid 1px $ui-fleet-black-10;
+          margin: 0 0 $pad-xxlarge;
         }
 
         .empty-table__container {

frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx

@@ -4,6 +4,7 @@ import Button from "components/buttons/Button";
 import Checkbox from "components/forms/fields/Checkbox";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
+import SectionHeader from "components/SectionHeader";
 
 import {
   IAppConfigFormProps,
@@ -99,7 +100,7 @@ const Advanced = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Advanced options</h2>
+        <SectionHeader title="Advanced options" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <p className={`${baseClass}__section-description`}>
             Most users do not need to modify these options.

frontend/pages/admin/OrgSettingsPage/cards/Agents/Agents.tsx

@@ -11,6 +11,7 @@ import InfoBanner from "components/InfoBanner/InfoBanner";
 // @ts-ignore
 import YamlAce from "components/YamlAce";
 import CustomLink from "components/CustomLink";
+import SectionHeader from "components/SectionHeader";
 
 import { IAppConfigFormProps, IAppConfigFormErrors } from "../constants";
 
@@ -69,7 +70,7 @@ const Agents = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Agent options</h2>
+        <SectionHeader title="Agent options" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <p className={`${baseClass}__section-description`}>
             Agent options configure the osquery agent. When you update agent

frontend/pages/admin/OrgSettingsPage/cards/FleetDesktop/FleetDesktop.tsx

@@ -6,6 +6,7 @@ import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import validUrl from "components/forms/validators/valid_url";
+import SectionHeader from "components/SectionHeader";
 
 import CustomLink from "components/CustomLink";
 import {
@@ -67,7 +68,7 @@ const FleetDesktop = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Fleet Desktop</h2>
+        <SectionHeader title="Fleet Desktop" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <InputField
             label="Custom transparency URL"

frontend/pages/admin/OrgSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx

@@ -8,6 +8,7 @@ import Dropdown from "components/forms/fields/Dropdown";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import validUrl from "components/forms/validators/valid_url";
+import SectionHeader from "components/SectionHeader";
 
 import Modal from "components/Modal";
 import {
@@ -141,7 +142,7 @@ const HostStatusWebhook = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Host status webhook</h2>
+        <SectionHeader title="Host status webhook" />
         <form className={baseClass} onSubmit={onFormSubmit} autoComplete="off">
           <p className={`${baseClass}__section-description`}>
             Send an alert if a portion of your hosts go offline.

frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx

@@ -7,6 +7,7 @@ import InputField from "components/forms/fields/InputField";
 // @ts-ignore
 import OrgLogoIcon from "components/icons/OrgLogoIcon";
 import validUrl from "components/forms/validators/valid_url";
+import SectionHeader from "components/SectionHeader";
 
 import {
   IAppConfigFormProps,
@@ -92,7 +93,7 @@ const Info = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section ${cardClass}`}>
-        <h2>Organization info</h2>
+        <SectionHeader title="Organization info" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <InputField
             label="Organization name"

frontend/pages/admin/OrgSettingsPage/cards/Sso/Sso.tsx

@@ -6,6 +6,7 @@ import CustomLink from "components/CustomLink";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import validUrl from "components/forms/validators/valid_url";
+import SectionHeader from "components/SectionHeader";
 
 import {
   IAppConfigFormProps,
@@ -121,7 +122,7 @@ const Sso = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Single sign-on options</h2>
+        <SectionHeader title="Single sign-on options" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <Checkbox
             onChange={handleInputChange}

frontend/pages/admin/OrgSettingsPage/cards/Statistics/Statistics.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import Button from "components/buttons/Button";
 import Checkbox from "components/forms/fields/Checkbox";
+import SectionHeader from "components/SectionHeader";
 
 import CustomLink from "components/CustomLink";
 import { IAppConfigFormProps, IFormField } from "../constants";
@@ -43,7 +44,7 @@ const Statistics = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Usage statistics</h2>
+        <SectionHeader title="Usage statistics" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <p className={`${baseClass}__section-description`}>
             Help us improve Fleet by sending us anonymous usage statistics.

frontend/pages/admin/OrgSettingsPage/cards/WebAddress/WebAddress.tsx

@@ -4,6 +4,7 @@ import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import validUrl from "components/forms/validators/valid_url";
+import SectionHeader from "components/SectionHeader";
 
 import {
   IAppConfigFormProps,
@@ -60,7 +61,7 @@ const WebAddress = ({
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__section`}>
-        <h2>Fleet web address</h2>
+        <SectionHeader title="Fleet web address" />
         <form onSubmit={onFormSubmit} autoComplete="off">
           <InputField
             label="Fleet app URL"

frontend/pages/admin/components/SideNav/_styles.scss

@@ -25,15 +25,5 @@
       width: 100%;
       max-width: 754px;
     }
-
-    // Globally style all headers
-    h2 {
-      padding-bottom: $pad-small;
-      font-size: $medium;
-      font-weight: $regular;
-      color: $core-fleet-black;
-      border-bottom: solid 1px $ui-fleet-black-10;
-      margin: 0 0 $pad-xxlarge;
-    }
   }
 }