diff --git a/x-pack/plugins/fleet/dev_docs/react_query.md b/x-pack/plugins/fleet/dev_docs/react_query.md index 55eca8669c1e..1ae8fbadcf44 100644 --- 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 //... - - - - - - - - - {children} - - - - - - + + + + + + + {children} + + + + + ``` 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 index faaf08adf4db..5d3dee34339c 100644 --- 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 ( - + + {/* This should be removed since theme is passed to `KibanaRenderContextProvider`, + however, removing this breaks usages of `props.theme.eui` in styled components */} diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx index 511f5d05154f..b46d4f206066 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx +++ b/x-pack/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 = ({ onClose }) = } return ( - +
= ({ return ( = const AgentTamperProtectionSectionContent = useMemo( () => ( = return ( <> = = = {AgentTamperProtectionSection} = = = = = = = ({ const generalSettingsWrapper = (children: JSX.Element[]) => ( +

-

+ } description={ = ({ return ( voi `?apiVersion=${API_VERSIONS.public.v1}`; return ( - +

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx index fd4a3a752eac..247f908668ea 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/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 ( - +

( showPipelinesAndMappings, ]); + const isBiggerScreen = useIsWithinMinBreakpoint('xxl'); + const flexWidth = isBiggerScreen ? 7 : 5; + return ( <> @@ -170,7 +174,7 @@ export const PackagePolicyInputStreamConfig = memo( - + )} @@ -149,6 +152,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{ {/* Description */} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx index 262efea5e32f..6156e81a133d 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx @@ -369,7 +369,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{ } > diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx index 4ed07b65448f..90d25a35be87 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/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 ( - + diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx index 21d08d71eb5f..445a0bcf9428 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/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<{ ) : undefined; - const maxWidth = 770; + const isBiggerScreen = useIsWithinMinBreakpoint('xxl'); + const maxWidth = isBiggerScreen ? 1200 : 800; return ( ]); const FormWrapper = styled.div` - max-width: 800px; + max-width: 1200px; margin-right: auto; margin-left: auto; `; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx index f81fb532f6bf..15b2b3c6af8e 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx +++ b/x-pack/plugins/fleet/public/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 && ( - setIsPreviousVersionFlyoutOpen(false)} size="l" maxWidth={640}> + setIsPreviousVersionFlyoutOpen(false)} + maxWidth={MAX_FLYOUT_WIDTH} + >

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx index 1c953620519d..39b30b601714 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx @@ -25,6 +25,7 @@ import { } from '@elastic/eui'; import type { NewAgentPolicy, AgentPolicy } from '../../../../types'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; import { useAuthz, useStartServices, sendCreateAgentPolicy } from '../../../../hooks'; import { AgentPolicyForm, agentPolicyFormValidation } from '../../components'; import { DevtoolsRequestFlyoutButton } from '../../../../components'; @@ -191,7 +192,7 @@ export const CreateAgentPolicyFlyout: React.FunctionComponent = ({ ); return ( - onClose()} size="l" maxWidth={400} {...restOfProps}> + onClose()} {...restOfProps} maxWidth={MAX_FLYOUT_WIDTH}> {header} {body} {footer} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx index f1b5e628b531..72dec15f970b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx @@ -25,6 +25,7 @@ import { import type { Agent } from '../../../../types'; import { useStartServices } from '../../../../hooks'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void }>( ({ agent, onClose }) => { @@ -44,7 +45,7 @@ export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void } const { docLinks } = useStartServices(); return ( - +

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx index ed9a211db012..e9bfbbef49d9 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx @@ -28,7 +28,7 @@ import { useStartServices, sendPostRetrieveAgentsByActions, } from '../../../../../hooks'; -import { SO_SEARCH_LIMIT } from '../../../../../constants'; +import { SO_SEARCH_LIMIT, MAX_FLYOUT_WIDTH } from '../../../../../constants'; import { getKuery } from '../../utils/get_kuery'; @@ -129,8 +129,8 @@ export const AgentActivityFlyout: React.FunctionComponent<{ refreshAgentActivity = false; onClose(); }} - size="m" paddingSize="none" + maxWidth={MAX_FLYOUT_WIDTH} > diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx index b6c2ef272d81..8249fd6fc82f 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx @@ -28,7 +28,7 @@ import { import { i18n } from '@kbn/i18n'; import type { DownloadSource, FleetProxy } from '../../../../types'; -import { FLYOUT_MAX_WIDTH } from '../../constants'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; import { useBreadcrumbs, useStartServices } from '../../../../hooks'; import { ProxyWarning } from '../fleet_proxies_table/proxy_warning'; @@ -54,7 +54,7 @@ export const EditDownloadSourceFlyout: React.FunctionComponent +

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx index 864112d2c71e..664519c441bd 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx @@ -22,8 +22,8 @@ import { EuiSpacer, } from '@elastic/eui'; -import { FLYOUT_MAX_WIDTH } from '../../constants'; import type { FleetProxy } from '../../../../types'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; import { TextInput, TextAreaInput } from '../form'; import { ProxyWarning } from '../fleet_proxies_table/proxy_warning'; @@ -43,7 +43,7 @@ export const FleetProxyFlyout: React.FunctionComponent = const { inputs } = form; return ( - +

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx index 74e14248f553..413375273326 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx @@ -45,8 +45,9 @@ import { ExperimentalFeaturesService } from '../../../../../../services'; import { outputType, RESERVED_CONFIG_YML_KEYS } from '../../../../../../../common/constants'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; + import type { Output, FleetProxy } from '../../../../types'; -import { FLYOUT_MAX_WIDTH } from '../../constants'; import { useBreadcrumbs, useFleetStatus, useStartServices } from '../../../../hooks'; @@ -230,7 +231,7 @@ export const EditOutputFlyout: React.FunctionComponent = }; return ( - +

@@ -437,6 +438,7 @@ export const EditOutputFlyout: React.FunctionComponent = } > inputs.presetInput.setValue(e.target.value)} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx index bb018b936648..12b5bceb9fc3 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx @@ -29,8 +29,8 @@ import { } from '@elastic/eui'; import { MultiRowInput } from '../multi_row_input'; +import { MAX_FLYOUT_WIDTH } from '../../../../constants'; import { useStartServices } from '../../../../hooks'; -import { FLYOUT_MAX_WIDTH } from '../../constants'; import type { FleetServerHost, FleetProxy } from '../../../../types'; import { TextInput } from '../form'; import { ProxyWarning } from '../fleet_proxies_table/proxy_warning'; @@ -61,7 +61,7 @@ export const FleetServerHostsFlyout: React.FunctionComponent + <> diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/constants/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/constants/index.tsx deleted file mode 100644 index 8d29433e7232..000000000000 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/constants/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -export const FLYOUT_MAX_WIDTH = 670; diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx index fdd924799255..8c052523c31a 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx @@ -11,14 +11,13 @@ import { EuiPortal } from '@elastic/eui'; import type { History } from 'history'; import { Redirect } from 'react-router-dom'; import { Router, Routes, Route } from '@kbn/shared-ux-router'; -import useObservable from 'react-use/lib/useObservable'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; - +import useObservable from 'react-use/lib/useObservable'; +import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import type { FleetConfigType, FleetStartServices } from '../../plugin'; @@ -73,13 +72,22 @@ export const IntegrationsAppContext: React.FC<{ setHeaderActionMenu, fleetStatus, }) => { - const theme = useObservable(startServices.theme.theme$); - const isDarkMode = theme && theme.darkMode; + const XXL_BREAKPOINT = 1600; + const darkModeObservable = useObservable(startServices.theme.theme$); + const isDarkMode = darkModeObservable && darkModeObservable.darkMode; const CloudContext = startServices.cloud?.CloudContextProvider || EmptyContext; return ( - + + {/* This should be removed since theme is passed to `KibanaRenderContextProvider`, + however, removing this breaks usages of `props.theme.eui` in styled components */} diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx index 9206de2d48f1..15cff2645e9e 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx @@ -99,7 +99,7 @@ export const SearchBox: FunctionComponent = ({ onChange={(e) => onQueryChange(e)} isClearable={true} incremental={true} - fullWidth={true} + fullWidth prepend={ selectedCategoryTitle ? ( - + {fetchError && ( <> = ({ packageInfo }) => { return ( - + {isLoading && !configs ? ( ) : ( @@ -122,7 +117,7 @@ export const Configs: React.FC = ({ packageInfo }) => { )} - + ); }; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx index b59804cea173..824ceb0d569f 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx @@ -25,7 +25,7 @@ export const CustomViewPage: React.FC = memo(({ packageInfo }) => { return customViewExtension ? ( - + diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx index c44982a26114..40a87bde535b 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx @@ -68,52 +68,44 @@ export const DocumentationPage: React.FunctionComponent = ({ packageInfo, const { docLinks } = useStartServices(); const showDocumentation = hasDocumentation({ packageInfo, integration }); - const content = ( - <> - - - - - - - ), - }} - /> - - - - - {showDocumentation ? ( - <> - - - - ) : ( - - } - /> - )} - - - ); - return ( - {content} + + + + + + ), + }} + /> + + + {showDocumentation ? ( + <> + + + + ) : ( + + } + /> + )} + + ); }; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index 0e69b6fc2917..c6ed4d80a9d8 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -355,7 +355,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps - + = memo(({ packageInfo, startServices <> - +

diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx index df8f8d23dc89..e7f951f9c427 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx @@ -96,7 +96,7 @@ export const AgentPolicySelection: React.FC = (props) => { diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx index 9902bf4f5349..57b3a8e0e0ff 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx @@ -29,7 +29,7 @@ import { useAgentEnrollmentFlyoutData, useFleetServerHostsForPolicy, } from '../../hooks'; -import { FLEET_SERVER_PACKAGE } from '../../constants'; +import { FLEET_SERVER_PACKAGE, MAX_FLYOUT_WIDTH } from '../../constants'; import type { PackagePolicy, AgentPolicy } from '../../types'; import { Loading } from '..'; @@ -106,7 +106,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent = ({ const { cloudSecurityIntegration } = useCloudSecurityIntegration(selectedPolicy ?? undefined); return ( - +

diff --git a/x-pack/plugins/fleet/public/components/header.tsx b/x-pack/plugins/fleet/public/components/header.tsx index 5443477c976b..d32a96ee26cd 100644 --- a/x-pack/plugins/fleet/public/components/header.tsx +++ b/x-pack/plugins/fleet/public/components/header.tsx @@ -22,8 +22,12 @@ const Container = styled.div` } `; -const Wrapper = styled.div<{ maxWidth?: number }>` - max-width: ${(props) => props.maxWidth || 1200}px; +const Wrapper = styled.div<{ maxWidth?: number | string }>` + max-width: ${(props) => + typeof props.maxWidth === 'number' + ? `${props.maxWidth || 1200}px` || props.maxWidth + : props.maxWidth}; + margin-left: auto; margin-right: auto; padding-top: ${(props) => props.theme.eui.euiSizeXL}; @@ -39,7 +43,7 @@ const Tabs = styled(EuiTabs)` `; export interface HeaderProps { - maxWidth?: number; + maxWidth?: number | string; leftColumn?: JSX.Element; rightColumn?: JSX.Element; rightColumnGrow?: EuiFlexItemProps['grow']; diff --git a/x-pack/plugins/fleet/public/components/index.ts b/x-pack/plugins/fleet/public/components/index.ts index 06805679892f..3b076bd8c18a 100644 --- a/x-pack/plugins/fleet/public/components/index.ts +++ b/x-pack/plugins/fleet/public/components/index.ts @@ -16,7 +16,6 @@ export { Header } from './header'; export { NewEnrollmentTokenModal } from './new_enrollment_key_modal'; export { AgentPolicyPackageBadge } from './agent_policy_package_badge'; export { AgentPolicyPackageBadges } from './agent_policy_package_badges'; -export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; export { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; export { PackagePolicyActionsMenu } from './package_policy_actions_menu'; export { AddAgentHelpPopover } from './add_agent_help_popover'; diff --git a/x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx b/x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx index 447a6c2dc787..7b21cabffc90 100644 --- a/x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx +++ b/x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx @@ -31,6 +31,7 @@ import { useGetUninstallToken, useGetUninstallTokens, } from '../../hooks/use_request/uninstall_tokens'; +import { MAX_FLYOUT_WIDTH } from '../../constants'; import { UninstallCommandsPerPlatform } from './uninstall_commands_per_platform'; import type { UninstallCommandTarget } from './types'; @@ -185,7 +186,11 @@ export const UninstallCommandFlyout: React.FunctionComponent { return ( - +

diff --git a/x-pack/plugins/fleet/public/constants/index.ts b/x-pack/plugins/fleet/public/constants/index.ts index 0af765a9912a..ee01037f25a7 100644 --- a/x-pack/plugins/fleet/public/constants/index.ts +++ b/x-pack/plugins/fleet/public/constants/index.ts @@ -60,3 +60,5 @@ export type TourKey = keyof typeof TOUR_STORAGE_KEYS; export type TOUR_STORAGE_CONFIG = { [k in TourKey]: TourConfig; }; + +export const MAX_FLYOUT_WIDTH = 800; diff --git a/x-pack/plugins/fleet/public/layouts/with_header.tsx b/x-pack/plugins/fleet/public/layouts/with_header.tsx index 71f9b598c642..81ccc6b92aa7 100644 --- a/x-pack/plugins/fleet/public/layouts/with_header.tsx +++ b/x-pack/plugins/fleet/public/layouts/with_header.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { EuiPageBody, EuiSpacer } from '@elastic/eui'; +import { EuiPageBody, EuiSpacer, useIsWithinMinBreakpoint } from '@elastic/eui'; import type { HeaderProps } from '../components'; import { Header } from '../components'; @@ -26,23 +26,28 @@ export const WithHeaderLayout: React.FC = ({ children, 'data-test-subj': dataTestSubj, ...rest -}) => ( - -
- - - - - {children} - - - - -); +}) => { + const isBiggerScreen = useIsWithinMinBreakpoint('xxl'); + const fullWidthSize = isBiggerScreen ? '80%' : '100%'; + + return ( + +
+ + + + + {children} + + + + + ); +};