[UII] Make Fleet & Integrations layouts full width (#186056)

## Summary Resolves elastic/ingest-dev#2602. This PR makes global changes to Fleet and Integrations: 1. Layout expands to 100% of available screen width when screen size is < 1600px wide 2. Layout expands to 80% when screen size is >= 1600px 3. Sets all flyouts to `medium` size with a max width of 800px no matter the screen size Exceptions: - Create/edit integration policy page is restricted to 1200px when screen size is >= 1600px - Agent policy settings page is restricted to 1200px no matter the screen size ### Screenshots <details> <summary>On 1920px screen</summary> ![image](https://github.com/elastic/kibana/assets/1965714/96198a5c-b247-4339-940b-134693fc7643) ![image](https://github.com/elastic/kibana/assets/1965714/425e531f-6b02-4895-8478-ab42af6bd696) ![image](https://github.com/elastic/kibana/assets/1965714/325b6dcf-f3e6-44a0-9baf-bfa9f4722b9b) ![image](https://github.com/elastic/kibana/assets/1965714/cbab07a4-5bfe-480c-b8f9-0685615cf471) ![image](https://github.com/elastic/kibana/assets/1965714/7c0852e6-ccd1-4b37-bb67-9e3d7a84941e) ![image](https://github.com/elastic/kibana/assets/1965714/f16aa397-d695-4f86-b9e1-8fa1440ef5aa) </details> <details> <summary>On smaller screen</summary> ![image](https://github.com/elastic/kibana/assets/1965714/6d077af4-c792-4058-b957-9dbe425ba3dd) ![image](https://github.com/elastic/kibana/assets/1965714/6ed144be-b410-4b26-ab6e-4aeb20bed038) ![image](https://github.com/elastic/kibana/assets/1965714/673965b0-f46f-426b-ae95-6eb258f76ec4) ![image](https://github.com/elastic/kibana/assets/1965714/2e0f5f23-29b0-4a90-a855-5e1767d93f7c) ![image](https://github.com/elastic/kibana/assets/1965714/73c0a806-d0b1-40d3-aa99-a44e4fe9b4c0) ![image](https://github.com/elastic/kibana/assets/1965714/fc3e15c8-4992-4808-8e15-4cf91acf5acc) </details> ### Testing Fire up the PR and click around everything :)
elastic · Jun 13, 2024 · 5000201 · 5000201
1 parent ad71568
commit 5000201
Show file tree

Hide file tree

Showing 39 changed files with 189 additions and 140 deletions.
diff --git a/x-pack/plugins/fleet/dev_docs/react_query.md b/x-pack/plugins/fleet/dev_docs/react_query.md
@@ -155,21 +155,18 @@ There's a bit of setup involved to actually get `react-query` up and running. Fi
 
 ```tsx
 //...
-
-<EuiThemeProvider darkMode={isDarkMode}>
-  <QueryClientProvider client={queryClient}>
-    <ReactQueryDevtools initialIsOpen={true} />
-    <UIExtensionsContext.Provider value={extensions}>
-      <FleetStatusProvider>
-        <Router history={history}>
-          <PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
-            <FlyoutContextProvider>{children}</FlyoutContextProvider>
-          </PackageInstallProvider>
-        </Router>
-      </FleetStatusProvider>
-    </UIExtensionsContext.Provider>
-  </QueryClientProvider>
-</EuiThemeProvider>
+<QueryClientProvider client={queryClient}>
+  <ReactQueryDevtools initialIsOpen={true} />
+  <UIExtensionsContext.Provider value={extensions}>
+    <FleetStatusProvider>
+      <Router history={history}>
+        <PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
+          <FlyoutContextProvider>{children}</FlyoutContextProvider>
+        </PackageInstallProvider>
+      </Router>
+    </FleetStatusProvider>
+  </UIExtensionsContext.Provider>
+</QueryClientProvider>
 ```
 
 We also set up `react-query`'s [dev tools](https://tanstack.com/query/v4/docs/react/devtools), which provide a useful developer console for debugging query and mutation state across the whole application.

diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -18,9 +18,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { css } from '@emotion/css';
-
 import type { TopNavMenuData } from '@kbn/navigation-plugin/public';
-
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
@@ -186,11 +184,20 @@ export const FleetAppContext: React.FC<{
     routerHistory: _routerHistory,
     fleetStatus,
   }) => {
+    const XXL_BREAKPOINT = 1600;
     const darkModeObservable = useObservable(startServices.theme.theme$);
     const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
 
     return (
-      <KibanaRenderContextProvider {...startServices}>
+      <KibanaRenderContextProvider
+        {...startServices}
+        theme={startServices.theme}
+        modify={{
+          breakpoint: {
+            xxl: XXL_BREAKPOINT,
+          },
+        }}
+      >
         <RedirectAppLinks
           coreStart={{
             application: startServices.application,
@@ -199,6 +206,8 @@ export const FleetAppContext: React.FC<{
           <KibanaContextProvider services={{ ...startServices }}>
             <ConfigContext.Provider value={config}>
               <KibanaVersionContext.Provider value={kibanaVersion}>
+                {/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
+                however, removing this breaks usages of `props.theme.eui` in styled components */}
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />

diff --git a/...ck/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx b/...ck/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
@@ -23,6 +23,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import styled from 'styled-components';
 
+import { MAX_FLYOUT_WIDTH } from '../../constants';
 import { useStartServices, useFlyoutContext, useCheckPermissions } from '../../hooks';
 import { FleetServerMissingESPrivileges } from '../../sections/agents/components';
 
@@ -133,7 +134,7 @@ export const FleetServerFlyout: React.FunctionComponent<Props> = ({ onClose }) =
   }
 
   return (
-    <EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} size="m">
+    <EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder aria-labelledby="FleetAddFleetServerFlyoutTitle">
         <Header
           tabs={tabs}

diff --git a/...eet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx b/...eet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx
@@ -57,6 +57,7 @@ export const CustomFields: React.FunctionComponent<Props> = ({
 
   return (
     <EuiDescribedFormGroup
+      fullWidth
       title={
         <h3>
           <FormattedMessage

diff --git a/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
@@ -118,6 +118,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
   const AgentTamperProtectionSectionContent = useMemo(
     () => (
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -210,6 +211,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
   return (
     <>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -255,6 +257,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3 data-test-subj="defaultNamespaceHeader">
             <FormattedMessage
@@ -307,6 +310,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <CustomFields updateAgentPolicy={updateAgentPolicy} agentPolicy={agentPolicy} />
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -405,6 +409,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       {AgentTamperProtectionSection}
 
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -466,6 +471,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -506,6 +512,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -546,6 +553,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -586,6 +594,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -628,6 +637,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -712,6 +722,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage

diff --git a/...ns/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx b/...ns/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx
@@ -75,13 +75,14 @@ export const AgentPolicyForm: React.FunctionComponent<Props> = ({
 
   const generalSettingsWrapper = (children: JSX.Element[]) => (
     <EuiDescribedFormGroup
+      fullWidth
       title={
-        <h4>
+        <h3>
           <FormattedMessage
             id="xpack.fleet.policyForm.generalSettingsGroupTitle"
             defaultMessage="General settings"
           />
-        </h4>
+        </h3>
       }
       description={
         <FormattedMessage

diff --git a/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx b/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
@@ -47,6 +47,7 @@ export const AgentPolicyIntegrationForm: React.FunctionComponent<Props> = ({
   return (
     <EuiForm>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage

diff --git a/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_yaml_flyout.tsx b/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_yaml_flyout.tsx
@@ -24,6 +24,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
+import { MAX_FLYOUT_WIDTH } from '../../../constants';
 import { useGetOneAgentPolicyFull, useGetOneAgentPolicy, useStartServices } from '../../../hooks';
 import { Loading } from '../../../components';
 import { fullAgentPolicyToYaml, agentPolicyRouteService } from '../../../services';
@@ -71,7 +72,7 @@ export const AgentPolicyYamlFlyout = memo<{ policyId: string; onClose: () => voi
       `?apiVersion=${API_VERSIONS.public.v1}`;
 
     return (
-      <EuiFlyout onClose={onClose} size="l" maxWidth={640}>
+      <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
         <EuiFlyoutHeader hasBorder aria-labelledby="IngestManagerAgentPolicyYamlFlyoutTitle">
           <EuiTitle size="m">
             <h2 id="IngestManagerAgentPolicyYamlFlyoutTitle">

diff --git a/...cy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx b/...cy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx
@@ -14,6 +14,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
 import type { NewPackagePolicyInput, RegistryVarsEntry } from '../../../../../../types';
@@ -68,12 +69,15 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
       [advancedVars, inputVarsValidationResults.vars]
     );
 
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const flexWidth = isBiggerScreen ? 7 : 5;
+
     return (
       <EuiFlexGrid columns={2}>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="none" alignItems="flexStart">
             <EuiFlexItem grow={1} />
-            <EuiFlexItem grow={5}>
+            <EuiFlexItem grow={flexWidth}>
               <EuiText>
                 <h4>
                   <FormattedMessage

diff --git a/...cy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/...cy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { useRouteMatch } from 'react-router-dom';
 
@@ -163,14 +164,17 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
       showPipelinesAndMappings,
     ]);
 
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const flexWidth = isBiggerScreen ? 7 : 5;
+
     return (
       <>
         <EuiFlexGrid columns={2} data-test-subj="streamOptions.inputStreams">
           <ScrollAnchor ref={containerRef} />
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="none" alignItems="flexStart">
               <EuiFlexItem grow={1} />
-              <EuiFlexItem grow={5}>
+              <EuiFlexItem grow={flexWidth}>
                 <EuiFlexGroup
                   gutterSize="none"
                   alignItems="flexStart"

diff --git a/...s/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx b/...s/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
@@ -105,6 +105,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
           </>
         )}
         <FormGroupResponsiveFields
+          fullWidth
           title={
             <h3>
               <FormattedMessage
@@ -124,6 +125,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
             {/* Name */}
             <EuiFlexItem>
               <EuiFormRow
+                fullWidth
                 isInvalid={!!validationResults.name}
                 error={validationResults.name}
                 label={
@@ -134,6 +136,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
                 }
               >
                 <EuiFieldText
+                  fullWidth
                   readOnly={isManaged}
                   value={packagePolicy.name}
                   onChange={(e) =>
@@ -149,6 +152,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
             {/* Description */}
             <EuiFlexItem>
               <EuiFormRow
+                fullWidth
                 label={
                   <FormattedMessage
                     id="xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDescriptionInputLabel"
@@ -167,6 +171,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
                 error={validationResults.description}
               >
                 <EuiFieldText
+                  fullWidth
                   readOnly={isManaged}
                   value={packagePolicy.description}
                   onChange={(e) =>

diff --git a/...ons/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx b/...ons/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx
@@ -369,7 +369,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
             }
           >
             <AgentPolicyFormRow
-              fullWidth={true}
+              fullWidth
               label={
                 <EuiFlexGroup justifyContent="spaceBetween">
                   <EuiFlexItem>

diff --git a/...tions/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx b/...tions/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
@@ -16,7 +16,7 @@ import { FLEET_KUBERNETES_PACKAGE } from '../../../../../../../../common';
 
 const CenteredRoundedBottomBar = styled(EuiBottomBar)`
   max-width: 820px;
-  margin: 0 auto;
+  margin: 0 auto !important; /* !important is needed for serverless */
   border-radius: 8px 8px 0px 0px;
 `;
 const NoAnimationCenteredRoundedBottomBar = styled(CenteredRoundedBottomBar)`
@@ -50,7 +50,7 @@ export const CreatePackagePolicyBottomBar: React.FC<{
 }) => {
   const Bar = noAnimation ? NoAnimationCenteredRoundedBottomBar : CenteredRoundedBottomBar;
   return (
-    <Bar position="sticky">
+    <Bar>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiFlexItem grow={false}>

diff --git a/...sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx b/...sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx
@@ -17,6 +17,7 @@ import {
   EuiDescriptionListDescription,
   EuiButtonEmpty,
   EuiSpacer,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
 import { useAgentless } from '../hooks/setup_technology';
@@ -251,7 +252,8 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
       </EuiDescriptionList>
     ) : undefined;
 
-    const maxWidth = 770;
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const maxWidth = isBiggerScreen ? 1200 : 800;
     return (
       <WithHeaderLayout
         restrictHeaderWidth={maxWidth}

diff --git a/...ublic/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx b/...ublic/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx
@@ -57,7 +57,7 @@ const pickAgentPolicyKeysToSend = (agentPolicy: AgentPolicy) =>
   ]);
 
 const FormWrapper = styled.div`
-  max-width: 800px;
+  max-width: 1200px;
   margin-right: auto;
   margin-left: auto;
 `;

diff --git a/.../applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx b/.../applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx
@@ -36,6 +36,7 @@ import type {
 
 import type { UpgradePackagePolicyDryRunResponse } from '../../../../../../../common/types/rest_spec';
 import { useStartServices } from '../../../../hooks';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 
 const FlyoutBody = styled(EuiFlyoutBody)`
   .euiFlyoutBody__overflowContent {
@@ -167,7 +168,10 @@ export const UpgradeStatusCallout: React.FunctionComponent<{
     <>
       {isPreviousVersionFlyoutOpen && currentPackagePolicy && (
         <EuiPortal>
-          <EuiFlyout onClose={() => setIsPreviousVersionFlyoutOpen(false)} size="l" maxWidth={640}>
+          <EuiFlyout
+            onClose={() => setIsPreviousVersionFlyoutOpen(false)}
+            maxWidth={MAX_FLYOUT_WIDTH}
+          >
             <EuiFlyoutHeader hasBorder>
               <EuiTitle size="m">
                 <h2 id="FleetPackagePolicyPreviousVersionFlyoutTitle">