Merge branch 'master' of github.com:elastic/kibana into telemetry/for…

…ce_staging_urls_in_tests

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/index.js

@@ -12,7 +12,7 @@ import { fitToLayerExtent, updateSourceProp } from '../../actions/map_actions';
 function mapStateToProps(state = {}) {
   const selectedLayer = getSelectedLayer(state);
   return {
-    key: selectedLayer ? selectedLayer.getId() : '',
+    key: selectedLayer ? `${selectedLayer.getId()}${selectedLayer.isJoinable()}` : '',
     selectedLayer,
   };
 }

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/enrollment_instructions/shell/index.tsx

@@ -43,7 +43,7 @@ export const ShellEnrollmentInstructions: React.FunctionComponent<Props> = ({
   //   apiKey.api_key
   // } sh -c "$(curl ${kibanaUrl}/api/ingest_manager/fleet/install/${currentPlatform})"`;
 
-  const quickInstallInstructions = `./agent enroll ${kibanaUrl} ${apiKey.api_key}`;
+  const quickInstallInstructions = `./elastic-agent enroll ${kibanaUrl} ${apiKey.api_key}`;
 
   return (
     <>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx

@@ -7,14 +7,15 @@ import React, { memo } from 'react';
 import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab, EuiSpacer } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
+import { EuiFlexItemProps } from '@elastic/eui/src/components/flex/flex_item';
 
 const Container = styled.div`
   border-bottom: ${props => props.theme.eui.euiBorderThin};
   background-color: ${props => props.theme.eui.euiPageBackgroundColor};
 `;
 
-const Wrapper = styled.div`
-  max-width: 1200px;
+const Wrapper = styled.div<{ maxWidth?: number }>`
+  max-width: ${props => props.maxWidth || 1200}px;
   margin-left: auto;
   margin-right: auto;
   padding-top: ${props => props.theme.eui.paddingSizes.xl};
@@ -30,22 +31,36 @@ const Tabs = styled(EuiTabs)`
 `;
 
 export interface HeaderProps {
+  restrictHeaderWidth?: number;
   leftColumn?: JSX.Element;
   rightColumn?: JSX.Element;
+  rightColumnGrow?: EuiFlexItemProps['grow'];
   tabs?: EuiTabProps[];
 }
 
-const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(({ leftColumn, rightColumn }) => (
-  <EuiFlexGroup alignItems="center">
-    {leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
-    {rightColumn ? <EuiFlexItem>{rightColumn}</EuiFlexItem> : null}
-  </EuiFlexGroup>
-));
+const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(
+  ({ leftColumn, rightColumn, rightColumnGrow }) => (
+    <EuiFlexGroup alignItems="center">
+      {leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
+      {rightColumn ? <EuiFlexItem grow={rightColumnGrow}>{rightColumn}</EuiFlexItem> : null}
+    </EuiFlexGroup>
+  )
+);
 
-export const Header: React.FC<HeaderProps> = ({ leftColumn, rightColumn, tabs }) => (
+export const Header: React.FC<HeaderProps> = ({
+  leftColumn,
+  rightColumn,
+  rightColumnGrow,
+  tabs,
+  restrictHeaderWidth,
+}) => (
   <Container>
-    <Wrapper>
-      <HeaderColumns leftColumn={leftColumn} rightColumn={rightColumn} />
+    <Wrapper maxWidth={restrictHeaderWidth}>
+      <HeaderColumns
+        leftColumn={leftColumn}
+        rightColumn={rightColumn}
+        rightColumnGrow={rightColumnGrow}
+      />
       <EuiFlexGroup>
         {tabs ? (
           <EuiFlexItem>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/confirm_modal.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiCallOut, EuiOverlayMask, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { AgentConfig } from '../../../../types';
+
+export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
+  onConfirm: () => void;
+  onCancel: () => void;
+  agentCount: number;
+  agentConfig: AgentConfig;
+}> = ({ onConfirm, onCancel, agentCount, agentConfig }) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalTitle"
+            defaultMessage="Save and deploy changes"
+          />
+        }
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel"
+            defaultMessage="Cancel"
+          />
+        }
+        confirmButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalConfirmButtonLabel"
+            defaultMessage="Save and deploy changes"
+          />
+        }
+        buttonColor="primary"
+      >
+        <EuiCallOut
+          iconType="iInCircle"
+          title={i18n.translate('xpack.ingestManager.createDatasource.confirmModalCalloutTitle', {
+            defaultMessage:
+              'This action will update {agentCount, plural, one {# agent} other {# agents}}',
+            values: {
+              agentCount,
+            },
+          })}
+        >
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalCalloutDescription"
+            defaultMessage="Fleet has detected that the selected agent configuration, {configName}, is already in use by
+            some of your agents. As a result of this action, Fleet will deploy updates to all agents
+            that use this configuration."
+            values={{
+              configName: <b>{agentConfig.name}</b>,
+            }}
+          />
+        </EuiCallOut>
+        <EuiSpacer size="l" />
+        <FormattedMessage
+          id="xpack.ingestManager.createDatasource.confirmModalDescription"
+          defaultMessage="This action can not be undone. Are you sure you wish to continue?"
+        />
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts

@@ -5,4 +5,5 @@
  */
 export { CreateDatasourcePageLayout } from './layout';
 export { DatasourceInputPanel } from './datasource_input_panel';
+export { ConfirmCreateDatasourceModal } from './confirm_modal';
 export { DatasourceInputVarField } from './datasource_input_var_field';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx

@@ -19,108 +19,107 @@ import { WithHeaderLayout } from '../../../../layouts';
 import { AgentConfig, PackageInfo } from '../../../../types';
 import { PackageIcon } from '../../../../components/package_icon';
 import { CreateDatasourceFrom, CreateDatasourceStep } from '../types';
-import { CreateDatasourceStepsNavigation } from './navigation';
 
 export const CreateDatasourcePageLayout: React.FunctionComponent<{
   from: CreateDatasourceFrom;
   basePath: string;
   cancelUrl: string;
   maxStep: CreateDatasourceStep | '';
-  currentStep: CreateDatasourceStep;
   agentConfig?: AgentConfig;
   packageInfo?: PackageInfo;
-  restrictWidth?: number;
-}> = ({
-  from,
-  basePath,
-  cancelUrl,
-  maxStep,
-  currentStep,
-  agentConfig,
-  packageInfo,
-  restrictWidth,
-  children,
-}) => {
-  return (
-    <WithHeaderLayout
-      restrictWidth={restrictWidth}
-      leftColumn={
-        <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
-          <EuiFlexItem>
-            <EuiButtonEmpty size="s" iconType="cross" flush="left" href={cancelUrl}>
+}> = ({ from, basePath, cancelUrl, maxStep, agentConfig, packageInfo, children }) => {
+  const leftColumn = (
+    <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
+      <EuiFlexItem>
+        <EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.cancelLinkText"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText>
+          <h1>
+            <FormattedMessage
+              id="xpack.ingestManager.createDatasource.pageTitle"
+              defaultMessage="Add data source"
+            />
+          </h1>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiSpacer size="s" />
+        <EuiText color="subdued" size="s">
+          {from === 'config' ? (
+            <FormattedMessage
+              id="xpack.ingestManager.createDatasource.pageDescriptionfromConfig"
+              defaultMessage="Follow the instructions below to add an integration to this agent configuration."
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.ingestManager.createDatasource.pageDescriptionfromPackage"
+              defaultMessage="Follow the instructions below to add this integration to an agent configuration."
+            />
+          )}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+  const rightColumn = (
+    <EuiFlexGroup justifyContent="flexEnd" direction={'row'} gutterSize="xl">
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="s" />
+        {agentConfig && from === 'config' ? (
+          <EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
+            <EuiDescriptionListTitle>
+              <FormattedMessage
+                id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
+                defaultMessage="Configuration"
+              />
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              {agentConfig?.name || '-'}
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+        ) : null}
+        {packageInfo && from === 'package' ? (
+          <EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
+            <EuiDescriptionListTitle>
               <FormattedMessage
-                id="xpack.ingestManager.createDatasource.cancelLinkText"
-                defaultMessage="Cancel"
+                id="xpack.ingestManager.createDatasource.packageNameLabel"
+                defaultMessage="Integration"
               />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText>
-              <h1>
-                <FormattedMessage
-                  id="xpack.ingestManager.createDatasource.pageTitle"
-                  defaultMessage="Create data source"
-                />
-              </h1>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup direction={from === 'config' ? 'row' : 'rowReverse'} gutterSize="xl">
-              {agentConfig || from === 'config' ? (
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">
                 <EuiFlexItem grow={false}>
-                  <EuiDescriptionList textStyle="reverse">
-                    <EuiDescriptionListTitle>
-                      <FormattedMessage
-                        id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
-                        defaultMessage="Configuration"
-                      />
-                    </EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      {agentConfig?.name || '-'}
-                    </EuiDescriptionListDescription>
-                  </EuiDescriptionList>
+                  <PackageIcon
+                    packageName={packageInfo?.name || ''}
+                    version={packageInfo?.version || ''}
+                    icons={packageInfo?.icons}
+                    size="m"
+                  />
                 </EuiFlexItem>
-              ) : null}
-              {packageInfo || from === 'package' ? (
                 <EuiFlexItem grow={false}>
-                  <EuiDescriptionList textStyle="reverse">
-                    <EuiDescriptionListTitle>
-                      <FormattedMessage
-                        id="xpack.ingestManager.createDatasource.packageNameLabel"
-                        defaultMessage="Integration"
-                      />
-                    </EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      <EuiFlexGroup alignItems="center" gutterSize="s">
-                        <EuiFlexItem grow={false}>
-                          <PackageIcon
-                            packageName={packageInfo?.name || ''}
-                            version={packageInfo?.version || ''}
-                            icons={packageInfo?.icons}
-                            size="m"
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          {packageInfo?.title || packageInfo?.name || '-'}
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </EuiDescriptionListDescription>
-                  </EuiDescriptionList>
+                  {packageInfo?.title || packageInfo?.name || '-'}
                 </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
-      rightColumn={
-        <CreateDatasourceStepsNavigation
-          from={from}
-          basePath={basePath}
-          maxStep={maxStep}
-          currentStep={currentStep}
-        />
-      }
+              </EuiFlexGroup>
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+        ) : null}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const maxWidth = 770;
+  return (
+    <WithHeaderLayout
+      restrictHeaderWidth={maxWidth}
+      restrictWidth={maxWidth}
+      leftColumn={leftColumn}
+      rightColumn={rightColumn}
+      rightColumnGrow={false}
     >
       {children}
     </WithHeaderLayout>