interactionStart('drag', e)}
- onMouseUp={(e) => interactionStart('drop', e)}
- >
-
-
- {/* Resize handle */}
- interactionStart('resize', e)}
- onMouseUp={(e) => interactionStart('drop', e)}
- css={css`
- right: 0;
- bottom: 0;
- opacity: 0;
- margin: -2px;
- position: absolute;
- width: ${euiThemeVars.euiSizeL};
- height: ${euiThemeVars.euiSizeL};
- transition: opacity 0.2s, border 0.2s;
- border-radius: 7px 0 7px 0;
- border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
- border-right: 2px solid ${euiThemeVars.euiColorSuccess};
- :hover {
- background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
- cursor: se-resize;
+ /** Set initial styles based on state at mount to prevent styles from "blipping" */
+ const initialStyles = useMemo(() => {
+ const initialPanel = gridLayoutStateManager.gridLayout$.getValue()[rowIndex].panels[panelId];
+ return css`
+ grid-column-start: ${initialPanel.column + 1};
+ grid-column-end: ${initialPanel.column + 1 + initialPanel.width};
+ grid-row-start: ${initialPanel.row + 1};
+ grid-row-end: ${initialPanel.row + 1 + initialPanel.height};
+ `;
+ }, [gridLayoutStateManager, rowIndex, panelId]);
+
+ useEffect(
+ () => {
+ /** Update the styles of the panel via a subscription to prevent re-renders */
+ const styleSubscription = combineLatest([
+ gridLayoutStateManager.activePanel$,
+ gridLayoutStateManager.gridLayout$,
+ gridLayoutStateManager.runtimeSettings$,
+ ])
+ .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
+ .subscribe(([activePanel, gridLayout, runtimeSettings]) => {
+ const ref = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
+ const panel = gridLayout[rowIndex].panels[panelId];
+ if (!ref || !panel) return;
+
+ const currentInteractionEvent = gridLayoutStateManager.interactionEvent$.getValue();
+ if (panelId === activePanel?.id) {
+ // if the current panel is active, give it fixed positioning depending on the interaction event
+ const { position: draggingPosition } = activePanel;
+
+ ref.style.zIndex = `${euiThemeVars.euiZModal}`;
+ if (currentInteractionEvent?.type === 'resize') {
+ // if the current panel is being resized, ensure it is not shrunk past the size of a single cell
+ ref.style.width = `${Math.max(
+ draggingPosition.right - draggingPosition.left,
+ runtimeSettings.columnPixelWidth
+ )}px`;
+ ref.style.height = `${Math.max(
+ draggingPosition.bottom - draggingPosition.top,
+ runtimeSettings.rowHeight
+ )}px`;
+
+ // undo any "lock to grid" styles **except** for the top left corner, which stays locked
+ ref.style.gridColumnStart = `${panel.column + 1}`;
+ ref.style.gridRowStart = `${panel.row + 1}`;
+ ref.style.gridColumnEnd = ``;
+ ref.style.gridRowEnd = ``;
+ } else {
+ // if the current panel is being dragged, render it with a fixed position + size
+ ref.style.position = 'fixed';
+ ref.style.left = `${draggingPosition.left}px`;
+ ref.style.top = `${draggingPosition.top}px`;
+ ref.style.width = `${draggingPosition.right - draggingPosition.left}px`;
+ ref.style.height = `${draggingPosition.bottom - draggingPosition.top}px`;
+
+ // undo any "lock to grid" styles
+ ref.style.gridColumnStart = ``;
+ ref.style.gridRowStart = ``;
+ ref.style.gridColumnEnd = ``;
+ ref.style.gridRowEnd = ``;
+ }
+ } else {
+ ref.style.zIndex = '0';
+
+ // if the panel is not being dragged and/or resized, undo any fixed position styles
+ ref.style.position = '';
+ ref.style.left = ``;
+ ref.style.top = ``;
+ ref.style.width = ``;
+ ref.style.height = ``;
+
+ // and render the panel locked to the grid
+ ref.style.gridColumnStart = `${panel.column + 1}`;
+ ref.style.gridColumnEnd = `${panel.column + 1 + panel.width}`;
+ ref.style.gridRowStart = `${panel.row + 1}`;
+ ref.style.gridRowEnd = `${panel.row + 1 + panel.height}`;
}
- `}
- />
-
{
+ styleSubscription.unsubscribe();
+ };
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ []
+ );
+
+ return (
+
+
- {renderPanelContents(panelData.id)}
-
-
-
- );
-});
+ {/* drag handle */}
+
interactionStart('drag', e)}
+ onMouseUp={(e) => interactionStart('drop', e)}
+ >
+
+
+ {/* Resize handle */}
+
interactionStart('resize', e)}
+ onMouseUp={(e) => interactionStart('drop', e)}
+ css={css`
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ margin: -2px;
+ position: absolute;
+ width: ${euiThemeVars.euiSizeL};
+ height: ${euiThemeVars.euiSizeL};
+ transition: opacity 0.2s, border 0.2s;
+ border-radius: 7px 0 7px 0;
+ border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
+ border-right: 2px solid ${euiThemeVars.euiColorSuccess};
+ :hover {
+ background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
+ cursor: se-resize;
+ }
+ `}
+ />
+
+ {renderPanelContents(panelId)}
+
+
+
+ );
+ }
+);
diff --git a/packages/kbn-grid-layout/grid/grid_row.tsx b/packages/kbn-grid-layout/grid/grid_row.tsx
index 917f661c91740..e797cd570550a 100644
--- a/packages/kbn-grid-layout/grid/grid_row.tsx
+++ b/packages/kbn-grid-layout/grid/grid_row.tsx
@@ -7,41 +7,23 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/
-import React, { forwardRef, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { combineLatest, map, pairwise, skip } from 'rxjs';
import { EuiButtonIcon, EuiFlexGroup, EuiSpacer, EuiTitle, transparentize } from '@elastic/eui';
import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import { euiThemeVars } from '@kbn/ui-theme';
-import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
+import { DragPreview } from './drag_preview';
import { GridPanel } from './grid_panel';
-import {
- GridLayoutStateManager,
- GridRowData,
- PanelInteractionEvent,
- RuntimeGridSettings,
-} from './types';
-
-const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
-const getGridBackgroundCSS = (settings: RuntimeGridSettings) => {
- const { gutterSize, columnPixelWidth, rowHeight } = settings;
- return css`
- background-position: top -${gutterSize / 2}px left -${gutterSize / 2}px;
- background-size: ${columnPixelWidth + gutterSize}px ${rowHeight + gutterSize}px;
- background-image: linear-gradient(to right, ${gridColor} 1px, transparent 1px),
- linear-gradient(to bottom, ${gridColor} 1px, transparent 1px);
- `;
-};
+import { GridLayoutStateManager, GridRowData, PanelInteractionEvent } from './types';
export const GridRow = forwardRef<
HTMLDivElement,
{
rowIndex: number;
- rowData: GridRowData;
toggleIsCollapsed: () => void;
- targetRowIndex: number | undefined;
- runtimeSettings: RuntimeGridSettings;
renderPanelContents: (panelId: string) => React.ReactNode;
setInteractionEvent: (interactionData?: PanelInteractionEvent) => void;
gridLayoutStateManager: GridLayoutStateManager;
@@ -49,10 +31,7 @@ export const GridRow = forwardRef<
>(
(
{
- rowData,
rowIndex,
- targetRowIndex,
- runtimeSettings,
toggleIsCollapsed,
renderPanelContents,
setInteractionEvent,
@@ -60,19 +39,122 @@ export const GridRow = forwardRef<
},
gridRef
) => {
- const dragPreviewRef = useRef
(null);
- const activePanel = useStateFromPublishingSubject(gridLayoutStateManager.activePanel$);
+ const currentRow = gridLayoutStateManager.gridLayout$.value[rowIndex];
+ const [panelIds, setPanelIds] = useState(Object.keys(currentRow.panels));
+ const [rowTitle, setRowTitle] = useState(currentRow.title);
+ const [isCollapsed, setIsCollapsed] = useState(currentRow.isCollapsed);
- const { gutterSize, columnCount, rowHeight } = runtimeSettings;
- const isGridTargeted = activePanel?.id && targetRowIndex === rowIndex;
+ const getRowCount = useCallback(
+ (row: GridRowData) => {
+ const maxRow = Object.values(row.panels).reduce((acc, panel) => {
+ return Math.max(acc, panel.row + panel.height);
+ }, 0);
+ return maxRow || 1;
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [rowIndex]
+ );
+
+ /** Set initial styles based on state at mount to prevent styles from "blipping" */
+ const initialStyles = useMemo(() => {
+ const initialRow = gridLayoutStateManager.gridLayout$.getValue()[rowIndex];
+ const runtimeSettings = gridLayoutStateManager.runtimeSettings$.getValue();
+ const { gutterSize, columnCount, rowHeight } = runtimeSettings;
+
+ return css`
+ gap: ${gutterSize}px;
+ grid-template-columns: repeat(
+ ${columnCount},
+ calc((100% - ${gutterSize * (columnCount - 1)}px) / ${columnCount})
+ );
+ grid-template-rows: repeat(${getRowCount(initialRow)}, ${rowHeight}px);
+ `;
+ }, [gridLayoutStateManager, getRowCount, rowIndex]);
+
+ useEffect(
+ () => {
+ /** Update the styles of the grid row via a subscription to prevent re-renders */
+ const styleSubscription = combineLatest([
+ gridLayoutStateManager.interactionEvent$,
+ gridLayoutStateManager.gridLayout$,
+ gridLayoutStateManager.runtimeSettings$,
+ ])
+ .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
+ .subscribe(([interactionEvent, gridLayout, runtimeSettings]) => {
+ const rowRef = gridLayoutStateManager.rowRefs.current[rowIndex];
+ if (!rowRef) return;
+
+ const { gutterSize, rowHeight, columnPixelWidth } = runtimeSettings;
- // calculate row count based on the number of rows needed to fit all panels
- const rowCount = useMemo(() => {
- const maxRow = Object.values(rowData.panels).reduce((acc, panel) => {
- return Math.max(acc, panel.row + panel.height);
- }, 0);
- return maxRow || 1;
- }, [rowData]);
+ rowRef.style.gridTemplateRows = `repeat(${getRowCount(
+ gridLayout[rowIndex]
+ )}, ${rowHeight}px)`;
+
+ const targetRow = interactionEvent?.targetRowIndex;
+ if (rowIndex === targetRow && interactionEvent?.type !== 'drop') {
+ // apply "targetted row" styles
+ const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
+ rowRef.style.backgroundPosition = `top -${gutterSize / 2}px left -${
+ gutterSize / 2
+ }px`;
+ rowRef.style.backgroundSize = ` ${columnPixelWidth + gutterSize}px ${
+ rowHeight + gutterSize
+ }px`;
+ rowRef.style.backgroundImage = `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
+ linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`;
+ rowRef.style.backgroundColor = `${transparentize(
+ euiThemeVars.euiColorSuccess,
+ 0.05
+ )}`;
+ } else {
+ // undo any "targetted row" styles
+ rowRef.style.backgroundPosition = ``;
+ rowRef.style.backgroundSize = ``;
+ rowRef.style.backgroundImage = ``;
+ rowRef.style.backgroundColor = `transparent`;
+ }
+ });
+
+ /**
+ * The things that should trigger a re-render are title, collapsed state, and panel ids - panel positions
+ * are being controlled via CSS styles, so they do not need to trigger a re-render. This subscription ensures
+ * that the row will re-render when one of those three things changes.
+ */
+ const rowStateSubscription = gridLayoutStateManager.gridLayout$
+ .pipe(
+ skip(1), // we are initializing all row state with a value, so skip the initial emit
+ map((gridLayout) => {
+ return {
+ title: gridLayout[rowIndex].title,
+ isCollapsed: gridLayout[rowIndex].isCollapsed,
+ panelIds: Object.keys(gridLayout[rowIndex].panels),
+ };
+ }),
+ pairwise()
+ )
+ .subscribe(([oldRowData, newRowData]) => {
+ if (oldRowData.title !== newRowData.title) setRowTitle(newRowData.title);
+ if (oldRowData.isCollapsed !== newRowData.isCollapsed)
+ setIsCollapsed(newRowData.isCollapsed);
+ if (
+ oldRowData.panelIds.length !== newRowData.panelIds.length ||
+ !(
+ oldRowData.panelIds.every((p) => newRowData.panelIds.includes(p)) &&
+ newRowData.panelIds.every((p) => oldRowData.panelIds.includes(p))
+ )
+ ) {
+ setPanelIds(newRowData.panelIds);
+ }
+ });
+
+ return () => {
+ styleSubscription.unsubscribe();
+ rowStateSubscription.unsubscribe();
+ };
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [rowIndex]
+ );
return (
<>
@@ -85,51 +167,43 @@ export const GridRow = forwardRef<
aria-label={i18n.translate('kbnGridLayout.row.toggleCollapse', {
defaultMessage: 'Toggle collapse',
})}
- iconType={rowData.isCollapsed ? 'arrowRight' : 'arrowDown'}
+ iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
onClick={toggleIsCollapsed}
/>
- {rowData.title}
+ {rowTitle}
)}
- {!rowData.isCollapsed && (
+ {!isCollapsed && (
- {Object.values(rowData.panels).map((panelData) => (
+ {panelIds.map((panelId) => (
{
e.preventDefault();
e.stopPropagation();
- const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelData.id];
+ const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
if (!panelRef) return;
const panelRect = panelRef.getBoundingClientRect();
setInteractionEvent({
type,
- id: panelData.id,
+ id: panelId,
panelDiv: panelRef,
targetRowIndex: rowIndex,
mouseOffsets: {
@@ -144,32 +218,12 @@ export const GridRow = forwardRef<
if (!gridLayoutStateManager.panelRefs.current[rowIndex]) {
gridLayoutStateManager.panelRefs.current[rowIndex] = {};
}
- gridLayoutStateManager.panelRefs.current[rowIndex][panelData.id] = element;
+ gridLayoutStateManager.panelRefs.current[rowIndex][panelId] = element;
}}
/>
))}
- {/* render the drag preview if this row is currently being targetted */}
- {isGridTargeted && (
-
- )}
+
{title}
+
+
+ {isLoading && (
+
+ )}
+ {!isLoading && canUpdate && (
+
+
+
+ )}
+
+
+
+ {!isCustomFieldValueDefined && !isEdit && (
+ {NO_CUSTOM_FIELD_SET}
+ )}
+ {!isEdit && isCustomFieldValueDefined && (
+
+
+
+ )}
+ {isEdit && canUpdate && (
+
+
+
+
+
+
+
+
+ {SAVE}
+
+
+
+
+ {CANCEL}
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+EditComponent.displayName = 'Edit';
+
+export const Edit = React.memo(EditComponent);
diff --git a/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.test.tsx
new file mode 100644
index 0000000000000..73e94f9335705
--- /dev/null
+++ b/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { CustomFieldTypes } from '../../../../common/types/domain';
+import type { AppMockRenderer } from '../../../common/mock';
+import { createAppMockRenderer } from '../../../common/mock';
+import { getEuiTableColumn } from './get_eui_table_column';
+
+describe('getEuiTableColumn ', () => {
+ let appMockRender: AppMockRenderer;
+
+ beforeEach(() => {
+ appMockRender = createAppMockRenderer();
+
+ jest.clearAllMocks();
+ });
+
+ it('returns a name and a render function', async () => {
+ const label = 'MockLabel';
+
+ expect(getEuiTableColumn({ label })).toEqual({
+ name: label,
+ render: expect.any(Function),
+ width: '150px',
+ 'data-test-subj': 'number-custom-field-column',
+ });
+ });
+
+ it('render function renders a number column correctly', async () => {
+ const key = 'test_key_1';
+ const value = 1234567;
+ const column = getEuiTableColumn({ label: 'MockLabel' });
+
+ appMockRender.render({column.render({ key, type: CustomFieldTypes.NUMBER, value })}
);
+
+ expect(screen.getByTestId(`number-custom-field-column-view-${key}`)).toBeInTheDocument();
+ expect(screen.getByTestId(`number-custom-field-column-view-${key}`)).toHaveTextContent(
+ String(value)
+ );
+ });
+});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.tsx b/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.tsx
new file mode 100644
index 0000000000000..a5b68364b9758
--- /dev/null
+++ b/x-pack/plugins/cases/public/components/custom_fields/number/get_eui_table_column.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import type { CaseCustomField } from '../../../../common/types/domain';
+import type { CustomFieldEuiTableColumn } from '../types';
+
+export const getEuiTableColumn = ({ label }: { label: string }): CustomFieldEuiTableColumn => ({
+ name: label,
+ width: '150px',
+ render: (customField: CaseCustomField) => {
+ return (
+
+ {customField.value}
+
+ );
+ },
+ 'data-test-subj': 'number-custom-field-column',
+});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/number/view.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/number/view.test.tsx
new file mode 100644
index 0000000000000..cdcc3cdacf534
--- /dev/null
+++ b/x-pack/plugins/cases/public/components/custom_fields/number/view.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CustomFieldTypes } from '../../../../common/types/domain';
+import { View } from './view';
+
+describe('View ', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ const customField = {
+ type: CustomFieldTypes.NUMBER as const,
+ key: 'test_key_1',
+ value: 123 as number,
+ };
+
+ it('renders correctly', async () => {
+ render();
+
+ expect(screen.getByText('123')).toBeInTheDocument();
+ });
+});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/number/view.tsx b/x-pack/plugins/cases/public/components/custom_fields/number/view.tsx
new file mode 100644
index 0000000000000..542ea92def998
--- /dev/null
+++ b/x-pack/plugins/cases/public/components/custom_fields/number/view.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import { EuiText } from '@elastic/eui';
+import type { CaseCustomFieldNumber } from '../../../../common/types/domain';
+import type { CustomFieldType } from '../types';
+
+const ViewComponent: CustomFieldType['View'] = ({ customField }) => {
+ const value = customField?.value ?? '-';
+
+ return (
+
+ {value}
+
+ );
+};
+
+ViewComponent.displayName = 'View';
+
+export const View = React.memo(ViewComponent);
diff --git a/x-pack/plugins/cases/public/components/custom_fields/text/configure_text_field.ts b/x-pack/plugins/cases/public/components/custom_fields/text/configure_text_field.ts
index c0f50820d45f3..0f1595135f9b8 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/text/configure_text_field.ts
+++ b/x-pack/plugins/cases/public/components/custom_fields/text/configure_text_field.ts
@@ -25,5 +25,6 @@ export const configureTextCustomFieldFactory: CustomFieldFactory (value == null ? '' : String(value)),
+ convertNullToEmpty: (value: string | number | boolean | null) =>
+ value == null ? '' : String(value),
});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/translations.ts b/x-pack/plugins/cases/public/components/custom_fields/translations.ts
index 5f1a91765193f..22bafbb80f92f 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/translations.ts
+++ b/x-pack/plugins/cases/public/components/custom_fields/translations.ts
@@ -51,6 +51,10 @@ export const TOGGLE_LABEL = i18n.translate('xpack.cases.customFields.toggleLabel
defaultMessage: 'Toggle',
});
+export const NUMBER_LABEL = i18n.translate('xpack.cases.customFields.textLabel', {
+ defaultMessage: 'Number',
+});
+
export const FIELD_TYPE = i18n.translate('xpack.cases.customFields.fieldType', {
defaultMessage: 'Field type',
});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/types.ts b/x-pack/plugins/cases/public/components/custom_fields/types.ts
index 70caeabd8edd2..ca63caef38748 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/types.ts
+++ b/x-pack/plugins/cases/public/components/custom_fields/types.ts
@@ -55,7 +55,7 @@ export type CustomFieldFactory = () => {
build: () => CustomFieldType;
filterOptions?: CustomFieldFactoryFilterOption[];
getDefaultValue?: () => string | boolean | null;
- convertNullToEmpty?: (value: string | boolean | null) => string;
+ convertNullToEmpty?: (value: string | number | boolean | null) => string;
};
export type CustomFieldBuilderMap = {
diff --git a/x-pack/plugins/cases/public/components/custom_fields/utils.test.ts b/x-pack/plugins/cases/public/components/custom_fields/utils.test.ts
index 5a21319645836..61a77fc941451 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/utils.test.ts
+++ b/x-pack/plugins/cases/public/components/custom_fields/utils.test.ts
@@ -97,5 +97,40 @@ describe('utils ', () => {
}
`);
});
+
+ it('serializes the data correctly if the default value is integer number', async () => {
+ const customField = {
+ key: 'my_test_key',
+ type: CustomFieldTypes.NUMBER,
+ required: true,
+ defaultValue: 1,
+ } as CustomFieldConfiguration;
+
+ expect(customFieldSerializer(customField)).toMatchInlineSnapshot(`
+ Object {
+ "defaultValue": 1,
+ "key": "my_test_key",
+ "required": true,
+ "type": "number",
+ }
+ `);
+ });
+
+ it('serializes the data correctly if the default value is float number', async () => {
+ const customField = {
+ key: 'my_test_key',
+ type: CustomFieldTypes.NUMBER,
+ required: true,
+ defaultValue: 1.5,
+ } as CustomFieldConfiguration;
+
+ expect(customFieldSerializer(customField)).toMatchInlineSnapshot(`
+ Object {
+ "key": "my_test_key",
+ "required": true,
+ "type": "number",
+ }
+ `);
+ });
});
});
diff --git a/x-pack/plugins/cases/public/components/custom_fields/utils.ts b/x-pack/plugins/cases/public/components/custom_fields/utils.ts
index 3842b75b5a7ea..96438a9337265 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/utils.ts
+++ b/x-pack/plugins/cases/public/components/custom_fields/utils.ts
@@ -8,6 +8,7 @@
import { isEmptyString } from '@kbn/es-ui-shared-plugin/static/validators/string';
import { isString } from 'lodash';
import type { CustomFieldConfiguration } from '../../../common/types/domain';
+import { CustomFieldTypes } from '../../../common/types/domain';
export const customFieldSerializer = (
field: CustomFieldConfiguration
@@ -18,5 +19,13 @@ export const customFieldSerializer = (
return otherProperties;
}
+ if (field.type === CustomFieldTypes.NUMBER) {
+ if (defaultValue !== null && Number.isSafeInteger(Number(defaultValue))) {
+ return { ...field, defaultValue: Number(defaultValue) };
+ } else {
+ return otherProperties;
+ }
+ }
+
return field;
};
diff --git a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
index 6e56126708034..81758ea1076c7 100644
--- a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
+++ b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
@@ -61,7 +61,8 @@ const defaultProps = {
editorRef,
};
-describe('EditableMarkdown', () => {
+// FLAKY: https://github.com/elastic/kibana/issues/171177
+describe.skip('EditableMarkdown', () => {
let appMockRender: AppMockRenderer;
beforeEach(() => {
diff --git a/x-pack/plugins/cases/public/components/templates/form.test.tsx b/x-pack/plugins/cases/public/components/templates/form.test.tsx
index bf5f66aaa3e21..349457c2be98f 100644
--- a/x-pack/plugins/cases/public/components/templates/form.test.tsx
+++ b/x-pack/plugins/cases/public/components/templates/form.test.tsx
@@ -589,11 +589,14 @@ describe('TemplateForm', () => {
expect(
await within(customFieldsElement).findAllByTestId('form-optional-field-label')
).toHaveLength(
- customFieldsConfigurationMock.filter((field) => field.type === CustomFieldTypes.TEXT).length
+ customFieldsConfigurationMock.filter(
+ (field) => field.type === CustomFieldTypes.TEXT || field.type === CustomFieldTypes.NUMBER
+ ).length
);
const textField = customFieldsConfigurationMock[0];
const toggleField = customFieldsConfigurationMock[3];
+ const numberField = customFieldsConfigurationMock[4];
const textCustomField = await screen.findByTestId(
`${textField.key}-${textField.type}-create-custom-field`
@@ -608,6 +611,15 @@ describe('TemplateForm', () => {
await screen.findByTestId(`${toggleField.key}-${toggleField.type}-create-custom-field`)
);
+ const numberCustomField = await screen.findByTestId(
+ `${numberField.key}-${numberField.type}-create-custom-field`
+ );
+
+ await user.clear(numberCustomField);
+
+ await user.click(numberCustomField);
+ await user.paste('765');
+
const submitSpy = jest.spyOn(formState!, 'submit');
await user.click(screen.getByText('testSubmit'));
@@ -644,6 +656,16 @@ describe('TemplateForm', () => {
type: 'toggle',
value: true,
},
+ {
+ key: 'test_key_5',
+ type: 'number',
+ value: 1234,
+ },
+ {
+ key: 'test_key_6',
+ type: 'number',
+ value: true,
+ },
],
settings: {
syncAlerts: true,
diff --git a/x-pack/plugins/cases/public/components/templates/form_fields.test.tsx b/x-pack/plugins/cases/public/components/templates/form_fields.test.tsx
index 75cfa58e8d5f8..48c6f956ccc7c 100644
--- a/x-pack/plugins/cases/public/components/templates/form_fields.test.tsx
+++ b/x-pack/plugins/cases/public/components/templates/form_fields.test.tsx
@@ -311,6 +311,7 @@ describe('form fields', () => {
const textField = customFieldsConfigurationMock[0];
const toggleField = customFieldsConfigurationMock[1];
+ const numberField = customFieldsConfigurationMock[4];
const textCustomField = await screen.findByTestId(
`${textField.key}-${textField.type}-create-custom-field`
@@ -324,6 +325,14 @@ describe('form fields', () => {
await screen.findByTestId(`${toggleField.key}-${toggleField.type}-create-custom-field`)
);
+ const numberCustomField = await screen.findByTestId(
+ `${numberField.key}-${numberField.type}-create-custom-field`
+ );
+
+ await userEvent.clear(numberCustomField);
+ await userEvent.click(numberCustomField);
+ await userEvent.paste('987');
+
await userEvent.click(screen.getByText('Submit'));
await waitFor(() => {
@@ -336,6 +345,7 @@ describe('form fields', () => {
test_key_1: 'My text test value 1',
test_key_2: false,
test_key_4: false,
+ test_key_5: '987',
},
syncAlerts: true,
templateTags: [],
diff --git a/x-pack/plugins/cases/public/components/utils.test.ts b/x-pack/plugins/cases/public/components/utils.test.ts
index 005f15b78b3d7..f10590cc9a358 100644
--- a/x-pack/plugins/cases/public/components/utils.test.ts
+++ b/x-pack/plugins/cases/public/components/utils.test.ts
@@ -523,19 +523,46 @@ describe('Utils', () => {
});
it('returns the string when the value is a non-empty string', async () => {
- expect(convertCustomFieldValue('my text value')).toMatchInlineSnapshot(`"my text value"`);
+ expect(
+ convertCustomFieldValue({ value: 'my text value', type: CustomFieldTypes.TEXT })
+ ).toMatchInlineSnapshot(`"my text value"`);
});
it('returns null when value is empty string', async () => {
- expect(convertCustomFieldValue('')).toMatchInlineSnapshot('null');
+ expect(
+ convertCustomFieldValue({ value: '', type: CustomFieldTypes.TEXT })
+ ).toMatchInlineSnapshot('null');
});
it('returns value as it is when value is true', async () => {
- expect(convertCustomFieldValue(true)).toMatchInlineSnapshot('true');
+ expect(
+ convertCustomFieldValue({ value: true, type: CustomFieldTypes.TOGGLE })
+ ).toMatchInlineSnapshot('true');
});
it('returns value as it is when value is false', async () => {
- expect(convertCustomFieldValue(false)).toMatchInlineSnapshot('false');
+ expect(
+ convertCustomFieldValue({ value: false, type: CustomFieldTypes.TOGGLE })
+ ).toMatchInlineSnapshot('false');
+ });
+ it('returns value as integer number when value is integer string and type is number', () => {
+ expect(convertCustomFieldValue({ value: '123', type: CustomFieldTypes.NUMBER })).toEqual(123);
+ });
+
+ it('returns value as null when value is float string and type is number', () => {
+ expect(convertCustomFieldValue({ value: '0.5', type: CustomFieldTypes.NUMBER })).toEqual(
+ null
+ );
+ });
+
+ it('returns value as null when value is null and type is number', () => {
+ expect(convertCustomFieldValue({ value: null, type: CustomFieldTypes.NUMBER })).toEqual(null);
+ });
+
+ it('returns value as null when value is characters string and type is number', () => {
+ expect(convertCustomFieldValue({ value: 'fdgdg', type: CustomFieldTypes.NUMBER })).toEqual(
+ null
+ );
});
});
@@ -575,6 +602,16 @@ describe('Utils', () => {
"type": "toggle",
"value": null,
},
+ Object {
+ "key": "test_key_5",
+ "type": "number",
+ "value": 1234,
+ },
+ Object {
+ "key": "test_key_6",
+ "type": "number",
+ "value": null,
+ },
Object {
"key": "my_test_key",
"type": "text",
@@ -598,6 +635,8 @@ describe('Utils', () => {
{ ...customFieldsMock[1] },
{ ...customFieldsMock[2] },
{ ...customFieldsMock[3] },
+ { ...customFieldsMock[4] },
+ { ...customFieldsMock[5] },
],
`
Array [
@@ -626,6 +665,16 @@ describe('Utils', () => {
"type": "toggle",
"value": null,
},
+ Object {
+ "key": "test_key_5",
+ "type": "number",
+ "value": 1234,
+ },
+ Object {
+ "key": "test_key_6",
+ "type": "number",
+ "value": null,
+ },
]
`
);
@@ -669,6 +718,19 @@ describe('Utils', () => {
"required": false,
"type": "toggle",
},
+ Object {
+ "defaultValue": 123,
+ "key": "test_key_5",
+ "label": "My test label 5",
+ "required": true,
+ "type": "number",
+ },
+ Object {
+ "key": "test_key_6",
+ "label": "My test label 6",
+ "required": false,
+ "type": "number",
+ },
Object {
"key": "my_test_key",
"label": "my_test_label",
@@ -693,6 +755,8 @@ describe('Utils', () => {
{ ...customFieldsConfigurationMock[1] },
{ ...customFieldsConfigurationMock[2] },
{ ...customFieldsConfigurationMock[3] },
+ { ...customFieldsConfigurationMock[4] },
+ { ...customFieldsConfigurationMock[5] },
],
`
Array [
@@ -722,6 +786,19 @@ describe('Utils', () => {
"required": false,
"type": "toggle",
},
+ Object {
+ "defaultValue": 123,
+ "key": "test_key_5",
+ "label": "My test label 5",
+ "required": true,
+ "type": "number",
+ },
+ Object {
+ "key": "test_key_6",
+ "label": "My test label 6",
+ "required": false,
+ "type": "number",
+ },
]
`
);
diff --git a/x-pack/plugins/cases/public/components/utils.ts b/x-pack/plugins/cases/public/components/utils.ts
index 7e1aa54554f50..bcc6be9a7ae9e 100644
--- a/x-pack/plugins/cases/public/components/utils.ts
+++ b/x-pack/plugins/cases/public/components/utils.ts
@@ -13,7 +13,7 @@ import type {
} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
import type { UserProfileWithAvatar } from '@kbn/user-profile-components';
import type { ConnectorTypeFields } from '../../common/types/domain';
-import { ConnectorTypes } from '../../common/types/domain';
+import { ConnectorTypes, CustomFieldTypes } from '../../common/types/domain';
import type { CasesPublicStartDependencies } from '../types';
import { connectorValidator as swimlaneConnectorValidator } from './connectors/swimlane/validator';
import type { CaseActionConnector } from './types';
@@ -234,11 +234,25 @@ export const parseCaseUsers = ({
return { userProfiles, reporterAsArray };
};
-export const convertCustomFieldValue = (value: string | boolean) => {
+export const convertCustomFieldValue = ({
+ value,
+ type,
+}: {
+ value: string | number | boolean | null;
+ type: CustomFieldTypes;
+}) => {
if (typeof value === 'string' && isEmpty(value)) {
return null;
}
+ if (type === CustomFieldTypes.NUMBER) {
+ if (value !== null && Number.isSafeInteger(Number(value))) {
+ return Number(value);
+ } else {
+ return null;
+ }
+ }
+
return value;
};
@@ -288,7 +302,7 @@ export const customFieldsFormDeserializer = (
};
export const customFieldsFormSerializer = (
- customFields: Record,
+ customFields: Record,
selectedCustomFieldsConfiguration: CasesConfigurationUI['customFields']
): CaseUI['customFields'] => {
const transformedCustomFields: CaseUI['customFields'] = [];
@@ -303,7 +317,7 @@ export const customFieldsFormSerializer = (
transformedCustomFields.push({
key: configCustomField.key,
type: configCustomField.type,
- value: convertCustomFieldValue(value),
+ value: convertCustomFieldValue({ value, type: configCustomField.type }),
} as CaseUICustomField);
}
}
diff --git a/x-pack/plugins/cases/public/containers/mock.ts b/x-pack/plugins/cases/public/containers/mock.ts
index 8d2feca6b9be0..c3cee2d60d2b0 100644
--- a/x-pack/plugins/cases/public/containers/mock.ts
+++ b/x-pack/plugins/cases/public/containers/mock.ts
@@ -1158,6 +1158,8 @@ export const customFieldsMock: CaseUICustomField[] = [
{ type: CustomFieldTypes.TOGGLE, key: 'test_key_2', value: true },
{ type: CustomFieldTypes.TEXT, key: 'test_key_3', value: null },
{ type: CustomFieldTypes.TOGGLE, key: 'test_key_4', value: null },
+ { type: CustomFieldTypes.NUMBER, key: 'test_key_5', value: 1234 },
+ { type: CustomFieldTypes.NUMBER, key: 'test_key_6', value: null },
];
export const customFieldsConfigurationMock: CasesConfigurationUICustomField[] = [
@@ -1177,6 +1179,19 @@ export const customFieldsConfigurationMock: CasesConfigurationUICustomField[] =
},
{ type: CustomFieldTypes.TEXT, key: 'test_key_3', label: 'My test label 3', required: false },
{ type: CustomFieldTypes.TOGGLE, key: 'test_key_4', label: 'My test label 4', required: false },
+ {
+ type: CustomFieldTypes.NUMBER,
+ key: 'test_key_5',
+ label: 'My test label 5',
+ required: true,
+ defaultValue: 123,
+ },
+ {
+ type: CustomFieldTypes.NUMBER,
+ key: 'test_key_6',
+ label: 'My test label 6',
+ required: false,
+ },
];
export const templatesConfigurationMock: CasesConfigurationUITemplate[] = [
diff --git a/x-pack/plugins/cases/public/containers/use_replace_custom_field.tsx b/x-pack/plugins/cases/public/containers/use_replace_custom_field.tsx
index 5d2969f6e6d44..f1d0b87ff07e8 100644
--- a/x-pack/plugins/cases/public/containers/use_replace_custom_field.tsx
+++ b/x-pack/plugins/cases/public/containers/use_replace_custom_field.tsx
@@ -16,7 +16,7 @@ import * as i18n from './translations';
interface ReplaceCustomField {
caseId: string;
customFieldId: string;
- customFieldValue: string | boolean | null;
+ customFieldValue: string | number | boolean | null;
caseVersion: string;
}
diff --git a/x-pack/plugins/cases/server/client/utils.test.ts b/x-pack/plugins/cases/server/client/utils.test.ts
index eb7aaea6d6938..680887b82c653 100644
--- a/x-pack/plugins/cases/server/client/utils.test.ts
+++ b/x-pack/plugins/cases/server/client/utils.test.ts
@@ -906,7 +906,7 @@ describe('utils', () => {
...customFieldsConfiguration,
{
key: 'fourth_key',
- type: 'number',
+ type: 'symbol',
label: 'Number field',
required: true,
},
diff --git a/x-pack/plugins/cases/server/common/types/configure.ts b/x-pack/plugins/cases/server/common/types/configure.ts
index faf2517fbe173..27e66ba76eb02 100644
--- a/x-pack/plugins/cases/server/common/types/configure.ts
+++ b/x-pack/plugins/cases/server/common/types/configure.ts
@@ -39,7 +39,7 @@ type PersistedCustomFieldsConfiguration = Array<{
type: string;
label: string;
required: boolean;
- defaultValue?: string | boolean | null;
+ defaultValue?: string | number | boolean | null;
}>;
type PersistedTemplatesConfiguration = Array<{
diff --git a/x-pack/plugins/cases/server/connectors/cases/constants.ts b/x-pack/plugins/cases/server/connectors/cases/constants.ts
index fafd1a3e0eaeb..f1d0e548e1f3a 100644
--- a/x-pack/plugins/cases/server/connectors/cases/constants.ts
+++ b/x-pack/plugins/cases/server/connectors/cases/constants.ts
@@ -12,8 +12,11 @@ export const MAX_OPEN_CASES = 10;
export const DEFAULT_MAX_OPEN_CASES = 5;
export const INITIAL_ORACLE_RECORD_COUNTER = 1;
-export const VALUES_FOR_CUSTOM_FIELDS_MISSING_DEFAULTS: Record =
- {
- [CustomFieldTypes.TEXT]: 'N/A',
- [CustomFieldTypes.TOGGLE]: false,
- };
+export const VALUES_FOR_CUSTOM_FIELDS_MISSING_DEFAULTS: Record<
+ CustomFieldTypes,
+ string | boolean | number
+> = {
+ [CustomFieldTypes.TEXT]: 'N/A',
+ [CustomFieldTypes.TOGGLE]: false,
+ [CustomFieldTypes.NUMBER]: 0,
+};
diff --git a/x-pack/plugins/cases/server/custom_fields/factory.ts b/x-pack/plugins/cases/server/custom_fields/factory.ts
index d9e1bc86671fe..3b42dcfd6eddb 100644
--- a/x-pack/plugins/cases/server/custom_fields/factory.ts
+++ b/x-pack/plugins/cases/server/custom_fields/factory.ts
@@ -9,10 +9,12 @@ import { CustomFieldTypes } from '../../common/types/domain';
import type { ICasesCustomField, CasesCustomFieldsMap } from './types';
import { getCasesTextCustomField } from './text';
import { getCasesToggleCustomField } from './toggle';
+import { getCasesNumberCustomField } from './number';
const mapping: Record = {
[CustomFieldTypes.TEXT]: getCasesTextCustomField(),
[CustomFieldTypes.TOGGLE]: getCasesToggleCustomField(),
+ [CustomFieldTypes.NUMBER]: getCasesNumberCustomField(),
};
export const casesCustomFields: CasesCustomFieldsMap = {
diff --git a/x-pack/plugins/cases/server/custom_fields/number.ts b/x-pack/plugins/cases/server/custom_fields/number.ts
new file mode 100644
index 0000000000000..f036a01cbe1b8
--- /dev/null
+++ b/x-pack/plugins/cases/server/custom_fields/number.ts
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+import Boom from '@hapi/boom';
+
+export const getCasesNumberCustomField = () => ({
+ isFilterable: false,
+ isSortable: false,
+ savedObjectMappingType: 'long',
+ validateFilteringValues: (values: Array) => {
+ values.forEach((value) => {
+ if (value !== null && !Number.isSafeInteger(value)) {
+ throw Boom.badRequest('Unsupported filtering value for custom field of type number.');
+ }
+ });
+ },
+});
diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts
index 4da0244b2ec5e..67dfa03dc3705 100644
--- a/x-pack/plugins/enterprise_search/common/constants.ts
+++ b/x-pack/plugins/enterprise_search/common/constants.ts
@@ -218,50 +218,6 @@ export const CREATE_CONNECTOR_PLUGIN = {
--index-language en
--from-file config.yml
`,
- CONSOLE_SNIPPET: dedent`# Create an index
-PUT /my-index-000001
-{
- "settings": {
- "index": {
- "number_of_shards": 3,
- "number_of_replicas": 2
- }
- }
-}
-
-# Create an API key
-POST /_security/api_key
-{
- "name": "my-api-key",
- "expiration": "1d",
- "role_descriptors":
- {
- "role-a": {
- "cluster": ["all"],
- "indices": [
- {
- "names": ["index-a*"],
- "privileges": ["read"]
- }
- ]
- },
- "role-b": {
- "cluster": ["all"],
- "indices": [
- {
- "names": ["index-b*"],
- "privileges": ["all"]
- }]
- }
- }, "metadata":
- { "application": "my-application",
- "environment": {
- "level": 1,
- "trusted": true,
- "tags": ["dev", "staging"]
- }
- }
- }`,
};
export const LICENSED_SUPPORT_URL = 'https://support.elastic.co';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
index 13273266a2068..825f47920d256 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
@@ -6,16 +6,27 @@
*/
import React, { useState } from 'react';
+import { css } from '@emotion/react';
+import dedent from 'dedent';
+
+import { useValues } from 'kea';
+
import {
EuiButtonIcon,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiPopover,
useGeneratedHtmlId,
+ useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { NATIVE_CONNECTOR_DEFINITIONS, NativeConnector } from '@kbn/search-connectors';
+import { TryInConsoleButton } from '@kbn/try-in-console';
+import { KibanaDeps } from '../../../../../../../common/types';
+import { NewConnectorLogic } from '../../../new_index/method_connector/new_connector_logic';
import { SelfManagePreference } from '../create_connector';
import { ManualConfigurationFlyout } from './manual_configuration_flyout';
@@ -25,10 +36,18 @@ export interface ManualConfigurationProps {
selfManagePreference: SelfManagePreference;
}
+interface ConnectorConfiguration {
+ [key: string]: {
+ value: string;
+ };
+}
+
export const ManualConfiguration: React.FC = ({
isDisabled,
selfManagePreference,
}) => {
+ const { euiTheme } = useEuiTheme();
+ const { services } = useKibana();
const [isPopoverOpen, setPopover] = useState(false);
const splitButtonPopoverId = useGeneratedHtmlId({
prefix: 'splitButtonPopover',
@@ -40,9 +59,104 @@ export const ManualConfiguration: React.FC = ({
const closePopover = () => {
setPopover(false);
};
-
+ const { selectedConnector, rawName } = useValues(NewConnectorLogic);
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [flyoutContent, setFlyoutContent] = useState<'manual_config' | 'client'>();
+ const getCodeSnippet = (): string => {
+ const connectorInfo: NativeConnector | undefined = selectedConnector?.serviceType
+ ? NATIVE_CONNECTOR_DEFINITIONS[selectedConnector.serviceType]
+ : undefined;
+ if (!connectorInfo) {
+ return '';
+ }
+
+ const dynamicConfigValues = Object.entries(
+ connectorInfo.configuration as ConnectorConfiguration
+ )
+ .map(([key, config]) => {
+ const defaultValue = config ? JSON.stringify(config.value) : null;
+ return ` "${key}": ${defaultValue}`;
+ })
+ .join(',\n');
+ const CONSOLE_SNIPPET = dedent` # Example of how to create a ${connectorInfo?.name} connector using the API
+# This also creates related resources like an index and an API key.
+# This is an alternative to using the UI creation flow.
+
+# 1. Create an index
+PUT connector-${rawName}
+{
+ "settings": {
+ "index": {
+ "number_of_shards": 3,
+ "number_of_replicas": 2
+ }
+ }
+}
+# 2. Create a connector
+PUT _connector/${rawName}
+{
+ "name": "My ${connectorInfo?.name} connector",
+ "index_name": "connector-${rawName}",
+ "service_type": "${selectedConnector?.serviceType}"
+}
+# 3. Create an API key
+POST /_security/api_key
+{
+ "name": "${rawName}-api-key",
+ "role_descriptors": {
+ "${selectedConnector?.serviceType}-api-key-role": {
+ "cluster": [
+ "monitor",
+ "manage_connector"
+ ],
+ "indices": [
+ {
+ "names": [
+ "connector-${rawName}",
+ ".search-acl-filter-connector-${rawName}",
+ ".elastic-connectors*"
+ ],
+ "privileges": [
+ "all"
+ ],
+ "allow_restricted_indices": false
+ }
+ ]
+ }
+ }
+}
+
+# 🔧 Configure your connector
+# NOTE: Configuration keys differ per service type.
+PUT _connector/${rawName}/_configuration
+{
+ "values": {
+${dynamicConfigValues}
+ }
+}
+
+# 🔌 Verify your connector is connected
+GET _connector/${rawName}
+
+# 🔄 Sync data
+POST _connector/_sync_job
+{
+ "id": "${rawName}",
+ "job_type": "full"
+}
+
+# ⏳ Check sync status
+GET _connector/_sync_job?connector_id=${rawName}&size=1
+
+# Once the job completes, the status should return completed
+# 🎉 Verify that data is present in the index with the following API call
+GET connector-${rawName}/_count
+
+# 🔎 Elasticsearch stores data in documents, which are JSON objects. List the individual documents with the following API call
+GET connector-${rawName}/_search
+`;
+ return CONSOLE_SNIPPET;
+ };
const items = [
= ({
{ defaultMessage: 'Manual configuration' }
)}
,
+ {
+ closePopover();
+ }}
+ css={css`
+ .euiLink {
+ color: ${euiTheme.colors.text};
+ font-weight: ${euiTheme.font.weight.regular};
+ }
+ `}
+ >
+
+ ,
= ({ title, setCurrentStep }) => {
const { connector } = useValues(ConnectorViewLogic);
const { updateConnectorConfiguration } = useActions(ConnectorViewLogic);
+ const { setFormDirty } = useActions(NewConnectorLogic);
const { status } = useValues(ConnectorConfigurationApiLogic);
const isSyncing = false;
@@ -109,7 +111,10 @@ export const ConfigurationStep: React.FC = ({ title, set
setCurrentStep('finish')}
+ onClick={() => {
+ setFormDirty(false);
+ setCurrentStep('finish');
+ }}
fill
>
{Constants.NEXT_BUTTON_LABEL}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx
index e8cef81662096..a4ed43e2a8fcd 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx
@@ -28,6 +28,11 @@ import {
import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
+
+import { HttpLogic } from '../../../../shared/http';
+import { KibanaLogic } from '../../../../shared/kibana';
import { AddConnectorApiLogic } from '../../../api/connector/add_connector_api_logic';
import { EnterpriseSearchContentPageTemplate } from '../../layout';
@@ -47,11 +52,16 @@ import { StartStep } from './start_step';
export type ConnectorCreationSteps = 'start' | 'deployment' | 'configure' | 'finish';
export type SelfManagePreference = 'native' | 'selfManaged';
export const CreateConnector: React.FC = () => {
+ const { overlays } = useKibana().services;
+
+ const { http } = useValues(HttpLogic);
+ const { application, history } = useValues(KibanaLogic);
+
const { error } = useValues(AddConnectorApiLogic);
const { euiTheme } = useEuiTheme();
const [selfManagePreference, setSelfManagePreference] = useState('native');
- const { selectedConnector, currentStep } = useValues(NewConnectorLogic);
+ const { selectedConnector, currentStep, isFormDirty } = useValues(NewConnectorLogic);
const { setCurrentStep } = useActions(NewConnectorLogic);
const stepStates = generateStepState(currentStep);
@@ -137,6 +147,33 @@ export const CreateConnector: React.FC = () => {
),
};
+ useUnsavedChangesPrompt({
+ cancelButtonText: i18n.translate(
+ 'xpack.enterpriseSearch.createConnector.unsavedPrompt.cancel',
+ {
+ defaultMessage: 'Continue setup',
+ }
+ ),
+ confirmButtonText: i18n.translate(
+ 'xpack.enterpriseSearch.createConnector.unsavedPrompt.confirm',
+ {
+ defaultMessage: 'Leave the page',
+ }
+ ),
+ hasUnsavedChanges: isFormDirty,
+ history,
+ http,
+ messageText: i18n.translate('xpack.enterpriseSearch.createConnector.unsavedPrompt.body', {
+ defaultMessage:
+ 'Your connector is created but missing some details. You can complete the setup later in the connector configuration page, but this guided flow offers more help.',
+ }),
+ navigateToUrl: application.navigateToUrl,
+ openConfirm: overlays?.openConfirm ?? (() => Promise.resolve(false)),
+ titleText: i18n.translate('xpack.enterpriseSearch.createConnector.unsavedPrompt.title', {
+ defaultMessage: 'Your connector is not fully configured',
+ }),
+ });
+
return (
= ({
isGenerateLoading,
isCreateLoading,
} = useValues(NewConnectorLogic);
- const { setRawName, createConnector, generateConnectorName } = useActions(NewConnectorLogic);
+ const { setRawName, createConnector, generateConnectorName, setFormDirty } =
+ useActions(NewConnectorLogic);
const { connector } = useValues(ConnectorViewLogic);
const handleNameChange = (e: ChangeEvent) => {
@@ -236,6 +237,7 @@ export const StartStep: React.FC = ({
createConnector({
isSelfManaged: true,
});
+ setFormDirty(true);
setCurrentStep('deployment');
}
}}
@@ -294,7 +296,9 @@ export const StartStep: React.FC = ({
setCurrentStep('configure')}
+ onClick={() => {
+ setCurrentStep('configure');
+ }}
>
{Constants.NEXT_BUTTON_LABEL}
@@ -310,6 +314,7 @@ export const StartStep: React.FC = ({
iconType="sparkles"
isLoading={isGenerateLoading || isCreateLoading}
onClick={() => {
+ setFormDirty(true);
createConnector({
isSelfManaged: false,
});
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts
index 796a2a64ab56c..0d21db6e03baf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts
@@ -56,6 +56,7 @@ export interface NewConnectorValues {
| undefined;
generatedNameData: GenerateConnectorNamesApiResponse | undefined;
isCreateLoading: boolean;
+ isFormDirty: boolean;
isGenerateLoading: boolean;
rawName: string;
selectedConnector: ConnectorDefinition | null;
@@ -85,6 +86,7 @@ type NewConnectorActions = {
createConnectorApi: AddConnectorApiLogicActions['makeRequest'];
fetchConnector: ConnectorViewActions['fetchConnector'];
setCurrentStep(step: ConnectorCreationSteps): { step: ConnectorCreationSteps };
+ setFormDirty: (isDirty: boolean) => { isDirty: boolean };
setRawName(rawName: string): { rawName: string };
setSelectedConnector(connector: ConnectorDefinition | null): {
connector: ConnectorDefinition | null;
@@ -103,6 +105,7 @@ export const NewConnectorLogic = kea ({ step }),
+ setFormDirty: (isDirty) => ({ isDirty }),
setRawName: (rawName) => ({ rawName }),
setSelectedConnector: (connector) => ({ connector }),
},
@@ -214,6 +217,13 @@ export const NewConnectorLogic = kea step,
},
],
+ isFormDirty: [
+ false, // Initial state (form is not dirty)
+ {
+ // @ts-expect-error upgrade typescript v5.1.6
+ setFormDirty: (_, { isDirty }) => isDirty,
+ },
+ ],
rawName: [
'',
{
diff --git a/x-pack/plugins/enterprise_search/tsconfig.json b/x-pack/plugins/enterprise_search/tsconfig.json
index fa0751078c0f7..7b7556729a76c 100644
--- a/x-pack/plugins/enterprise_search/tsconfig.json
+++ b/x-pack/plugins/enterprise_search/tsconfig.json
@@ -82,6 +82,7 @@
"@kbn/navigation-plugin",
"@kbn/security-plugin-types-common",
"@kbn/core-security-server",
- "@kbn/core-security-server-mocks"
+ "@kbn/core-security-server-mocks",
+ "@kbn/unsaved-changes-prompt"
]
}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
index f4f519b0a9c95..88dd00546e51f 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
@@ -137,13 +137,22 @@ export const AgentPolicyActionMenu = memo<{
const copyPolicyItem = (
{
setIsContextMenuOpen(false);
copyAgentPolicyPrompt(agentPolicy, onCopySuccess);
}}
key="copyPolicy"
+ toolTipContent={
+ hasManagedPackagePolicy ? (
+
+ ) : undefined
+ }
>