[Fleet] Fix max width issue in policy editor (#145917)

## Summary Closes #145909 Fix max width issue with Fleet policy editor, likely due to upstream EUI change and some custom CSS we had to fiddle with some flex widths. https://user-images.githubusercontent.com/6766512/203139932-76055157-6c7c-4374-b723-109390084ad6.mov Also fixed some typos/leftover code that was floating around here.
elastic · Nov 21, 2022 · 1b1a2e9 · 1b1a2e9
1 parent 95dd368
commit 1b1a2e9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
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
@@ -6,7 +6,6 @@
  */
 
 import React, { useState, Fragment, memo, useMemo } from 'react';
-import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
  EuiFlexGrid,
@@ -23,10 +22,6 @@ import { isAdvancedVar, validationHasErrors } from '../../../services';
 
 import { PackagePolicyInputVarField } from './package_policy_input_var_field';
 
-const FlexItemWithMaxWidth = styled(EuiFlexItem)`
- max-width: calc(50% - ${(props) => props.theme.eui.euiSizeL});
-`;
-
 export const PackagePolicyInputConfig: React.FunctionComponent<{
  hasInputStreams: boolean;
  packageInputVars?: RegistryVarsEntry[];
@@ -101,7 +96,7 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiFlexItem>
- <FlexItemWithMaxWidth>
+ <EuiFlexItem>
  <EuiFlexGroup direction="column" gutterSize="m">
  {requiredVars.map((varDef) => {
  const { name: varName, type: varType } = varDef;
@@ -191,7 +186,7 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
  </Fragment>
  ) : null}
  </EuiFlexGroup>
- </FlexItemWithMaxWidth>
+ </EuiFlexItem>
  </EuiFlexGrid>
  );
  }

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
@@ -42,11 +42,8 @@ import { PackagePolicyEditorDatastreamMappings } from '../../datastream_mappings
 import { PackagePolicyInputVarField } from './package_policy_input_var_field';
 import { useDataStreamId } from './hooks';
 
-const FlexItemWithMaxWidth = styled(EuiFlexItem)`
- max-width: calc(50% - ${(props) => props.theme.eui.euiSizeL});
-`;
-
 const ScrollAnchor = styled.div`
+ display: none;
  scroll-margin-top: ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px;
 `;
 
@@ -78,21 +75,21 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
  const defaultDataStreamId = useDataStreamId();
  const containerRef = useRef<HTMLDivElement>(null);
 
- const isDefaultDatstream =
+ const isDefaultDatastream =
  !!defaultDataStreamId &&
  !!packagePolicyInputStream.id &&
  packagePolicyInputStream.id === defaultDataStreamId;
  const isPackagePolicyEdit = !!packagePolicyId;
  const isInputOnlyPackage = packageInfo.type === 'input';
 
  useEffect(() => {
- if (isDefaultDatstream && containerRef.current) {
+ if (isDefaultDatastream && containerRef.current) {
  containerRef.current.scrollIntoView();
  }
- }, [isDefaultDatstream, containerRef]);
+ }, [isDefaultDatastream, containerRef]);
 
  // Showing advanced options toggle state
- const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(isDefaultDatstream);
+ const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(isDefaultDatastream);
 
  // Errors state
  const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);
@@ -180,7 +177,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
 
  return (
  <>
- <EuiFlexGrid columns={2} id={isDefaultDatstream ? 'test123' : 'asas'}>
+ <EuiFlexGrid columns={2}>
  <ScrollAnchor ref={containerRef} />
  <EuiFlexItem>
  <EuiFlexGroup gutterSize="none" alignItems="flexStart">
@@ -227,7 +224,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiFlexItem>
- <FlexItemWithMaxWidth>
+ <EuiFlexItem>
  <EuiFlexGroup direction="column" gutterSize="m">
  {requiredVars.map((varDef) => {
  if (!packagePolicyInputStream?.vars) return null;
@@ -415,7 +412,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
  ) : null}
  </Fragment>
  </EuiFlexGroup>
- </FlexItemWithMaxWidth>
+ </EuiFlexItem>
  </EuiFlexGrid>
  </>
  );