From b56769d91f26d86f61b1af82f3d4f46911f3d7be Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 3 Sep 2024 02:26:43 +0000 Subject: [PATCH] Making fit and finish changes for ISM policy & Composable template pages (#1150) * Fit and finish changes ISM Signed-off-by: Shubh Sahu * more fit changes Signed-off-by: Shubh Sahu * final fit n finish changes Signed-off-by: Shubh Sahu * final fit n finish changes Signed-off-by: Shubh Sahu * few more small changes Signed-off-by: Shubh Sahu * more fit changes Signed-off-by: Shubh Sahu * final fit n finish changes Signed-off-by: Shubh Sahu * final fitnfinsh changes complete Signed-off-by: Shubh Sahu * adding plus icon Signed-off-by: Shubh Sahu * rebaseing Signed-off-by: Shubh Sahu * rebasing 2.0 Signed-off-by: Shubh Sahu --------- Signed-off-by: Shubh Sahu Co-authored-by: Shubh Sahu (cherry picked from commit 44260f640fb141be17a6e673d3242696eec0e1d3) Signed-off-by: github-actions[bot] --- public/components/BottomBar/BottomBar.tsx | 6 +- .../__snapshots__/BottomBar.test.tsx.snap | 3 +- .../CreatePolicyModal/CreatePolicyModal.tsx | 10 +- .../CreatePolicyModal.test.tsx.snap | 32 +- .../components/IndexMapping/IndexMapping.tsx | 2 +- .../UnsavedChangesBottomBar.test.tsx | 17 +- .../UnsavedChangesBottomBar.tsx | 9 +- .../UnsavedChangesBottomBar.test.tsx.snap | 12 +- .../IndexControls/IndexControls.tsx | 5 +- .../__snapshots__/IndexControls.test.tsx.snap | 2 +- .../ComposableTemplates.tsx | 43 +- .../ComposableTemplates.test.tsx.snap | 5 +- .../DeleteComposableTemplatesModal.tsx | 23 +- ...leteComposableTemplatesModal.test.tsx.snap | 18 +- .../IndexSettings/IndexSettings.tsx | 42 +- .../CreateComposableTemplate.tsx | 8 +- .../CreateComposableTemplate.test.tsx.snap | 521 ++++++------- .../DefineTemplate/DefineTemplate.tsx | 27 +- .../containers/IndexAlias/IndexAlias.tsx | 18 +- .../TemplateDetail/TemplateDetail.tsx | 282 +++---- .../TemplateDetail.test.tsx.snap | 562 +++++++------ .../TemplateMappings/TemplateMappings.tsx | 13 +- .../containers/IndexForm/IndexForm.test.tsx | 5 + .../TemplateDetail/TemplateDetail.test.tsx | 5 + .../TemplateDetail.test.tsx.snap | 79 ++ .../ConfigurePolicy/ConfigurePolicy.tsx | 56 +- .../ConfigurePolicy.test.tsx.snap | 110 ++- .../components/DefinePolicy/DefinePolicy.tsx | 69 +- .../__snapshots__/DefinePolicy.test.tsx.snap | 246 +++--- .../containers/CreatePolicy/CreatePolicy.tsx | 31 +- .../__snapshots__/CreatePolicy.test.tsx.snap | 226 +++--- .../Notifications/Notifications.test.tsx | 5 + .../PolicyEmptyPrompt/PolicyEmptyPrompt.tsx | 4 +- .../PolicyEmptyPrompt.test.tsx.snap | 3 +- .../Policies/containers/Policies/Policies.tsx | 11 +- .../__snapshots__/Policies.test.tsx.snap | 2 +- .../components/DeleteModal/DeleteModal.tsx | 8 +- .../__snapshots__/DeleteModal.test.tsx.snap | 8 +- .../PolicySettings/PolicySettings.tsx | 17 +- .../PolicySettings.test.tsx.snap | 161 ++-- .../PolicyDetails/PolicyDetails.tsx | 23 +- .../ChannelNotification.tsx | 2 - .../ChannelNotification.test.tsx.snap | 31 +- .../EuiFormCustomLabel/EuiFormCustomLabel.tsx | 44 +- .../EuiFormCustomLabel.test.tsx.snap | 39 +- .../components/FlyoutFooter/FlyoutFooter.tsx | 13 +- .../components/ISMTemplate/ISMTemplate.tsx | 3 +- .../components/ISMTemplates/ISMTemplates.tsx | 77 +- .../__snapshots__/ISMTemplates.test.tsx.snap | 163 ++-- .../components/PolicyInfo/PolicyInfo.tsx | 77 +- .../__snapshots__/PolicyInfo.test.tsx.snap | 182 +++-- .../components/States/State.tsx | 16 +- .../components/States/States.tsx | 62 +- .../States/__snapshots__/State.test.tsx.snap | 38 +- .../States/__snapshots__/States.test.tsx.snap | 738 +++++++++--------- .../TimeoutRetrySettings.test.tsx.snap | 156 ++-- .../components/Transition/Transition.tsx | 3 +- .../Transition/TransitionContent.tsx | 2 +- .../__snapshots__/Transition.test.tsx.snap | 39 +- .../TransitionContent.test.tsx.snap | 2 +- .../containers/CreateAction/CreateAction.tsx | 15 +- .../__snapshots__/CreateAction.test.tsx.snap | 351 +++++---- .../containers/CreateState/Actions.tsx | 3 +- .../containers/CreateState/CreateState.tsx | 27 +- .../containers/CreateState/Transitions.tsx | 2 - .../__snapshots__/Actions.test.tsx.snap | 39 +- .../__snapshots__/Transitions.test.tsx.snap | 39 +- .../CreateTransition/CreateTransition.tsx | 6 +- .../CreateTransition.test.tsx.snap | 117 +-- .../ErrorNotification/ErrorNotification.tsx | 61 +- .../ErrorNotification.test.tsx.snap | 295 ++++--- .../VisualCreatePolicy/VisualCreatePolicy.tsx | 60 +- 72 files changed, 2867 insertions(+), 2564 deletions(-) diff --git a/public/components/BottomBar/BottomBar.tsx b/public/components/BottomBar/BottomBar.tsx index 30945f899..eb710b5d2 100644 --- a/public/components/BottomBar/BottomBar.tsx +++ b/public/components/BottomBar/BottomBar.tsx @@ -29,5 +29,9 @@ export default function BottomBar(props: CustomFormRowProps) { }; }, []); - return {props.children}; + return ( + + {props.children} + + ); } diff --git a/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap b/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap index 4695fc0f2..82e56192c 100644 --- a/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap +++ b/public/components/BottomBar/__snapshots__/BottomBar.test.tsx.snap @@ -2,11 +2,10 @@ exports[` spec render the component 1`] = ` HTMLCollection [ -
,

= ({ isEdit = false, // @ts-ignore */} - Configuration method + + +

Configuration method

+ + - Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON. +

+ Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON. +

diff --git a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap index 3b4365950..550e8ec6f 100644 --- a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap +++ b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap @@ -35,7 +35,13 @@ exports[` spec renders the component 1`] = `
- Configuration method +
+

+ Configuration method +

+

spec renders the component 1`] = ` class="euiText euiText--small" style="margin-top: 0px;" > - Choose how you would like to - define - your policy, either using a visual editor or writing JSON. +

+ Choose how you would like to + define + your policy, either using a visual editor or writing JSON. +

spec renders the component w/ edit 1`] = `
- Configuration method +
+

+ Configuration method +

+
spec renders the component w/ edit 1`] = ` class="euiText euiText--small" style="margin-top: 0px;" > - Choose how you would like to - modify - your policy, either using a visual editor or writing JSON. +

+ Choose how you would like to + modify + your policy, either using a visual editor or writing JSON. +

) => { const value = propsValue?.properties || []; diff --git a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx index cd47064be..eed7cd76e 100644 --- a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx +++ b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.test.tsx @@ -4,10 +4,25 @@ */ import React from "react"; -import { render } from "@testing-library/react"; +import { render, cleanup } from "@testing-library/react"; import UnsavedChangesBottomBar from "./index"; describe(" spec", () => { + let appWrapper: HTMLDivElement; + + beforeEach(() => { + // Create a mock DOM element with the ID 'app-wrapper' + appWrapper = document.createElement("div"); + appWrapper.setAttribute("id", "app-wrapper"); + document.body.appendChild(appWrapper); + }); + + afterEach(() => { + // Clean up the mock DOM element after each test + document.body.removeChild(appWrapper); + cleanup(); + }); + it("render the component", () => { render( {}} onClickSubmit={async () => {}} />); expect(document.body.children).toMatchSnapshot(); diff --git a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx index 52ef06dc4..7d9e021db 100644 --- a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx +++ b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx @@ -7,6 +7,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty, EuiButtonPro import classNames from "classnames"; import BottomBar from "../BottomBar"; import "./index.scss"; +import { createPortal } from "react-dom"; export type CustomFormRowProps = { unsavedCount: number; @@ -67,7 +68,7 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) { iconType="check" color="primary" fill - size="m" + size="s" children="Save" {...props.confirmButtonProps} /> @@ -116,9 +117,9 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) { )); - return ( + const bottomBar = ( - + {renderProps({ renderCancel, renderConfirm, @@ -128,4 +129,6 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) { ); + + return createPortal(bottomBar, document.getElementById("app-wrapper")!); } diff --git a/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap b/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap index cf8474e50..e057260e5 100644 --- a/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap +++ b/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap @@ -2,11 +2,12 @@ exports[` spec render the component 1`] = ` HTMLCollection [ -
, -
+

, +
, ] `; diff --git a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx index 1aee780c6..1d42c0020 100644 --- a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx +++ b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx @@ -14,6 +14,7 @@ export interface SearchControlsProps { selectedTypes: string[]; }; onSearchChange: (args: SearchControlsProps["value"]) => void; + useNewUx?: boolean; } export default function SearchControls(props: SearchControlsProps) { @@ -29,10 +30,12 @@ export default function SearchControls(props: SearchControlsProps) { useEffect(() => { setState(props.value); }, [props.value]); + const paddingStyle = props.useNewUx ? { padding: "0px 0px" } : { padding: "0px 5px" }; return ( - + spec renders the component 1`] = `
- Component templates are reusable building blocks for composing index or data stream templates. -
You can define component templates with common index configurations and associate them to an index template.{" "} - - Learn more - - - ), - }, + description: + "Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template.", + links: { + label: "Learn more", + href: (this.context as CoreStart).docLinks.links.opensearch.indexTemplates.composable, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; return useNewUX ? ( @@ -430,16 +439,16 @@ class ComposableTemplates extends MDSEnabledComponent - + - - + Create component template , @@ -500,7 +510,7 @@ class ComposableTemplates extends MDSEnabledComponent - + ) : ( <> @@ -515,9 +525,10 @@ class ComposableTemplates extends MDSEnabledComponent - + spec renders the component 1`] = ` style="padding: initial;" >
spec renders the component 1`] = `
+
- Delete {selectedItems[0]} + + +

Delete {selectedItems[0]}

+ + @@ -108,13 +113,15 @@ export default function DeleteTemplateModal(props: DeleteTemplateModalProps) { ) : (
-

- {!linkedIndexItemCount - ? "The following component template will be permanently deleted. This action cannot be undone." - : `The component template ${selectedItems.join( - ", " - )} will be permanently deleted. The component template will be unlinked from ${linkedIndexItemCount} index templates:`} -

+ +

+ {!linkedIndexItemCount + ? "The following component template will be permanently deleted. This action cannot be undone." + : `The component template ${selectedItems.join( + ", " + )} will be permanently deleted. The component template will be unlinked from ${linkedIndexItemCount} index templates:`} +

+ {!linkedIndexItemCount ? (
    {selectedItems.map((item) => ( diff --git a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap index fb83e969d..95a0ee7a4 100644 --- a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap +++ b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap @@ -39,7 +39,13 @@ HTMLCollection [
    - Delete +
    +

    + Delete +

    +
-

- The following component template will be permanently deleted. This action cannot be undone. -

+
+

+ The following component template will be permanently deleted. This action cannot be undone. +

+
    diff --git a/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx b/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx index 654329e82..4506b6727 100644 --- a/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx +++ b/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { EuiLink, EuiSpacer } from "@elastic/eui"; +import { EuiLink, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui"; import flat from "flat"; import { ContentPanel } from "../../../../components/ContentPanel"; import CustomFormRow from "../../../../components/CustomFormRow"; @@ -31,7 +31,13 @@ export default function IndexSettings(props: SubDetailProps) { return ( + +

    Index settings

    +     + + } noExtraPadding actions={
    @@ -48,10 +54,15 @@ export default function IndexSettings(props: SubDetailProps) { > {values.includes?.[IndicesUpdateMode.settings] ? ( <> - + +

    Number of primary shards

    + + } + helpText={
    Specify the number of primary shards in the index. Default is 1.
    } direction={isEdit ? "hoz" : "ver"} {...getCommonFormRowProps(["template", "settings", "index.number_of_shards"], field)} > @@ -83,8 +94,12 @@ export default function IndexSettings(props: SubDetailProps) { +

    Number of replicas

    + + } + helpText={
    Specify the number of replicas each primary shard should have. Default is 1.
    } direction={isEdit ? "hoz" : "ver"} {...getCommonFormRowProps(["template", "settings", "index.number_of_replicas"], field)} > @@ -115,8 +130,17 @@ export default function IndexSettings(props: SubDetailProps) {     +

    Refresh interval

    + + } + helpText={ +
    + Specify how often the index should refresh, which publishes its most recent changes and makes them available for search. + Default is 1s. +
    + } direction={isEdit ? "hoz" : "ver"} {...getCommonFormRowProps(["template", "settings", "index.refresh_interval"], field)} > diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx index 9462d9cb6..d1cbffd1f 100644 --- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx +++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx @@ -35,6 +35,7 @@ class CreateComposableTemplate extends Component setBreadCrumb() { const isEdit = this.template; const readonly = this.readonly; + const useNewUx = this.useNewUX; let lastBread: typeof BREADCRUMBS.CREATE_COMPOSABLE_TEMPLATE; if (readonly && this.template) { lastBread = { @@ -49,7 +50,7 @@ class CreateComposableTemplate extends Component } else { lastBread = BREADCRUMBS.CREATE_COMPOSABLE_TEMPLATE; } - this.useNewUX + useNewUx ? this.context.chrome.setBreadcrumbs([BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]) : this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]); } @@ -69,7 +70,8 @@ class CreateComposableTemplate extends Component }; render() { - const paddingStyle = this.useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" }; + const useNewUx = this.useNewUX; + const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "0px 50px" }; return (
    onCancel={this.onCancel} onSubmitSuccess={() => this.props.history.push(ROUTES.COMPOSABLE_TEMPLATES)} dataSourceId={this.props.dataSourceId} - useNewUX={this.useNewUX} + useNewUX={useNewUx} />
    ); diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap index 74facbdd5..584a12512 100644 --- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap +++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap @@ -5,95 +5,79 @@ exports[` spec it goes to templates page when click
    -
    +
    -

    - good_template -

    +

    + good_template +

    +
    -
    -
    - - + +
    -
    -
    -
    +
    -

    +

    Define component template - - - - -

    +

-
-
-
-
spec it goes to templates page when click
-
- Description - - - optional - +
+

+ Description - + + optional + +

spec it goes to templates page when click
-
-
-
+
-
+
- Allow the new indexes to be referenced by existing aliases or specify a new alias. +
+ +
+
+ + + Use configuration + +
+
+ +
+
+
+
+
-
- -
-
-
+
+
+
+
+
+ +
+
- - + class="euiSwitch__body" + > + + + + + + Use configuration - - - Use configuration - +
-
- + +
+
-
-
-
-
-

- Index settings - +

- - - -

+ Index mapping +

+
+
+
+
+
+ Define how documents and their fields are stored and indexed. + + + Learn more + EuiIconMock + + (opens in a new tab or window) + + +
+
+
+
-
-
-
+
@@ -339,118 +433,11 @@ exports[` spec it goes to templates page when click
+
-
-
-
-
-
-
-
- Index mapping -
-
-
-
-
- Define how documents and their fields are stored and indexed. - - - Learn more - EuiIconMock - - (opens in a new tab or window) - - -
-
-
-
-
-
-
-
- -
-
- - - Use configuration - -
-
- -
-
-
-
-
-
`; diff --git a/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx b/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx index 42be6ce96..a8c4939b2 100644 --- a/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx +++ b/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useContext } from "react"; -import { EuiSpacer } from "@elastic/eui"; +import { EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText } from "@elastic/eui"; import { SubDetailProps } from "../../interface"; import { ContentPanel } from "../../../../components/ContentPanel"; import CustomFormRow from "../../../../components/CustomFormRow"; @@ -55,7 +55,11 @@ export default function DefineTemplate(props: SubDetailProps) { <> +

Name

+ + } helpText={
Name cannot be changed after the component template is created.
} > - Description - optional -
+ +

+ Description - optional +

+ } helpText="Describe the purpose or contents to help you identify this component." direction={isEdit ? "hoz" : "ver"} @@ -102,9 +108,14 @@ export default function DefineTemplate(props: SubDetailProps) { } return ( - - + + + +

{`Define component template`}

+ + + {content} - + ); } diff --git a/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx b/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx index 092865246..dea46d462 100644 --- a/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx +++ b/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import { EuiSpacer, EuiText } from "@elastic/eui"; +import { EuiSpacer, EuiText, EuiTitle } from "@elastic/eui"; import { ContentPanel } from "../../../../components/ContentPanel"; import AliasSelect from "../../../../components/AliasSelect"; import CustomFormRow from "../../../../components/CustomFormRow"; @@ -24,7 +24,9 @@ export default function IndexAlias(props: SubDetailProps) { fullWidth label={ -
Index alias
+ +

Index alias

+ } helpText="Allow the new indexes to be referenced by existing aliases or specify a new alias." @@ -48,13 +50,17 @@ export default function IndexAlias(props: SubDetailProps) { > {values.includes?.[IndicesUpdateMode.alias] ? ( <> - + +

Index alias

+ + } + helpText={
Select existing aliases or specify a new alias.
} > - + ) : null} diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx index 91088211d..bbd3336a0 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx +++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react"; +import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState, Fragment } from "react"; import { EuiSmallButton, EuiSmallButtonEmpty, @@ -38,7 +38,12 @@ import { formatTemplate } from "../../hooks"; import UnsavedChangesBottomBar from "../../../../components/UnsavedChangesBottomBar"; import { useCallback } from "react"; import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; -import { TopNavControlButtonData, TopNavControlIconData } from "src/plugins/navigation/public"; +import { + TopNavControlButtonData, + TopNavControlDescriptionData, + TopNavControlIconData, + TopNavControlLinkData, +} from "src/plugins/navigation/public"; import DeleteIndexModal from "../../../ComposableTemplates/containers/DeleteComposableTemplatesModal"; export interface TemplateDetailProps { @@ -141,7 +146,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref - Component templates are reusable building blocks for composing index or data stream templates. -
You can define component templates with common index configurations and associate them to an index template.{" "} - - Learn more - - - ), - }, + description: + "Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template.", + links: { + label: "Learn more", + href: coreServices.docLinks.links.opensearch.indexTemplates.composable, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; return ( - <> - {hideTitle ? null : ( - <> - - - {useNewUX ? ( - <> - ) : ( - {isEdit ?

{templateName}

:

Create component template

} - )} - {isEdit ? null : useNewUX ? ( - - ) : ( - - Component templates are reusable building blocks for composing index or data stream templates. You can define - component templates with common index configurations and associate them to an index template.{" "} - - Learn more - -
- } - > - <> - - )} - - {isEdit ? ( - <> + +
+ {hideTitle ? null : ( + <> + + {useNewUX ? ( - <> - - {deleteModal()} - + <> ) : ( - - - View JSON - - - + + + {isEdit ?

{templateName}

:

Create component template

} + + )} - - ) : null} - - {useNewUX ? <> : } - - )} - - - - {/*{^ Passing dataSourceId as the key to force unmount and remount IndexAlias so as to refresh aliases in case of datasource changes }*/} - - - - - - {isEdit || hideButton ? null : ( - <> - - - - - Cancel - - - - - Create component template - - - - - )} + {isEdit ? null : useNewUX ? ( + + ) : ( + + Component templates are reusable building blocks for composing index or data stream templates. You can define + component templates with common index configurations and associate them to an index template.{" "} + + Learn more + +
+ } + > + <> + + )} + + {isEdit ? ( + <> + {useNewUX ? ( + <> + + {deleteModal()} + + ) : ( + + + View JSON + + + + )} + + ) : null} + + {useNewUX ? <> : } + + )} + + + + {/*{^ Passing dataSourceId as the key to force unmount and remount IndexAlias so as to refresh aliases in case of datasource changes }*/} + + + + + {isEdit || hideButton ? null : ( + <> + + + + + Cancel + + + + + Create component template + + + + + )} +
{diffedNumber ? ( - { - field.resetValues( - formatRemoteTemplateToEditTemplate({ - templateDetail: { - ...oldValue.current, - template: IndexForm.transformIndexDetailToRemote(oldValue.current?.template), - }, - templateName: values.name, - }) - ); - }} - onClickSubmit={async () => { - const result = await onSubmit(); - if (result) { - if (result.ok) { - coreServices.notifications.toasts.addSuccess(`${values.name} has been successfully updated.`); - refreshTemplate(); - } else { - coreServices.notifications.toasts.addDanger(result.error); + <> + { + field.resetValues( + formatRemoteTemplateToEditTemplate({ + templateDetail: { + ...oldValue.current, + template: IndexForm.transformIndexDetailToRemote(oldValue.current?.template), + }, + templateName: values.name, + }) + ); + }} + onClickSubmit={async () => { + const result = await onSubmit(); + if (result) { + if (result.ok) { + coreServices.notifications.toasts.addSuccess(`${values.name} has been successfully updated.`); + refreshTemplate(); + } else { + coreServices.notifications.toasts.addDanger(result.error); + } } - } - }} - /> + }} + /> + ) : null} - + ); }; diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap index 683b58eb3..5f6b8944f 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap +++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap @@ -2,82 +2,67 @@ exports[` spec render component 1`] = `
-
+
-

- Create component template -

-
-
+

+ Create component template +

+
+
-
- Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template. - - +
+
+ Component templates are reusable building blocks for composing index or data stream templates. You can define component templates with common index configurations and associate them to an index template. + + +
-
-
-
+
-

+

Define component template - - - - -

+
-
-
-
-
spec render component 1`] = ` class="euiFormLabel euiFormRow__label" for="some_html_id" > - Name +
+

+ Name +

+
spec render component 1`] = ` class="euiFormLabel euiFormRow__label" for="some_html_id" > -
- Description - - - optional - +
+

+ Description - + + optional + +

@@ -195,145 +190,251 @@ exports[` spec render component 1`] = `
-
-
-
+
-
+
- Allow the new indexes to be referenced by existing aliases or specify a new alias. +
+ +
+
+ + + Use configuration + +
+
+ +
+
+
+
+
-
- -
-
-
+
+
+
+
+
+ +
+
- - + class="euiSwitch__body" + > + + + + + + Use configuration - - - Use configuration - +
-
- + +
+
-
-
-
-
-

- Index settings - +

- - - -

+ Index mapping +

+
+
+
+
+
+ Define how documents and their fields are stored and indexed. + + + Learn more + EuiIconMock + + (opens in a new tab or window) + + +
+
+
+
-
-
-
+
@@ -373,161 +474,54 @@ exports[` spec render component 1`] = `
+
-
-
-
-
-
- Index mapping -
-
-
-
-
- Define how documents and their fields are stored and indexed. - - - Learn more - EuiIconMock - - (opens in a new tab or window) - - -
-
-
-
+ Cancel + + +
-
-
-
-
- - - Use configuration - -
-
+ Create component template -
-
-
-
-
-
-
-
-
-
- -
-
- + +
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx index e6b13d32f..6db7064a6 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx +++ b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx @@ -1,5 +1,5 @@ import React, { useContext, useRef } from "react"; -import { EuiCompressedFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui"; +import { EuiCompressedFormRow, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui"; import { ContentPanel } from "../../../../components/ContentPanel"; import { SubDetailProps } from "../../interface"; import IndexMapping, { IIndexMappingsRef } from "../../../../components/IndexMapping"; @@ -9,7 +9,7 @@ import { AllBuiltInComponents } from "../../../../components/FormGenerator"; import { IndicesUpdateMode } from "../../../../utils/constants"; export default function TemplateMappings(props: SubDetailProps) { - const { field, noPanel, useNewUx } = props; + const { field, noPanel } = props; const values = field.getValues(); const mappingsRef = useRef(null); const coreServices = useContext(CoreServicesContext) as CoreStart; @@ -19,9 +19,11 @@ export default function TemplateMappings(props: SubDetailProps) { color={noPanel ? "ghost" : undefined} title={ <> - -
Index mapping
- + + +

Index mapping

+ + ({ + ...jest.requireActual("react-dom"), + createPortal: (element: React.ReactNode) => element, +})); + describe(" spec", () => { beforeEach(() => { apiCallerMock(browserServicesMock); diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx index 7b9a2dbad..47e16afa8 100644 --- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx +++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx @@ -23,6 +23,11 @@ jest.mock("../../../../services/Services", () => ({ getNavigationUI: jest.fn(), })); +jest.mock("react-dom", () => ({ + ...jest.requireActual("react-dom"), + createPortal: (element: React.ReactNode) => element, +})); + beforeEach(() => { (getUISettings as jest.Mock).mockReturnValue({ get: jest.fn().mockReturnValue(false), // or false, depending on your test case diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap index b610dfde8..11270dbc5 100644 --- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap +++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap @@ -1200,5 +1200,84 @@ exports[` spec render component in non-edit-mode 1`] = ` />
+
+

+ Page level controls +

+
+
+ +
+
+ +
+
+ +
+
+
+

+ There is a new region landmark with page level controls at the end of the document. +

`; diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx index e91f498c4..18adb7c49 100644 --- a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx +++ b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx @@ -4,7 +4,7 @@ */ import React, { ChangeEvent } from "react"; -import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiText } from "@elastic/eui"; +import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiText, EuiPanel, EuiHorizontalRule, EuiFlexGroup } from "@elastic/eui"; import { ContentPanel } from "../../../../components/ContentPanel"; interface ConfigurePolicyProps { @@ -16,32 +16,42 @@ interface ConfigurePolicyProps { } const ConfigurePolicy = ({ isEdit, policyId, policyIdError, onChange, useNewUx }: ConfigurePolicyProps) => ( - -
- {!useNewUx ? ( + + + +

{`Name policy`}

+ + + + {useNewUx ? ( + <> + ) : ( + <>

Policies let you automatically perform administrative operations on indices.

 - ) : ( - <> - )} - - + + )} + +

{"Policy ID"}

+ + } + helpText="Specify a unique ID that is easy to recognize and remember." + isInvalid={!!policyIdError} + error={policyIdError} + > + - - -
- + placeholder="example_policy" + readOnly={isEdit} + value={policyId} + onChange={onChange} + /> + + ); // @ts-ignore diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap index 851d853d2..c791cf2db 100644 --- a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap +++ b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap @@ -3,91 +3,77 @@ exports[` spec renders the component 1`] = `
-
-

- Name policy - - - - -

-
+

+ Name policy +

+

+ Policies let you automatically perform administrative operations on indices. +

+
+
+
-
-

- Policies let you automatically perform administrative operations on indices. -

-
-
-
-
+ +
+
+
-
-
- -
-
-
- Specify a unique ID that is easy to recognize and remember. -
+
+
+ Specify a unique ID that is easy to recognize and remember. +
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx index 24c2b990d..f23e6dce4 100644 --- a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx +++ b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx @@ -14,6 +14,10 @@ import { EuiCopy, EuiLink, EuiIcon, + EuiPanel, + EuiHorizontalRule, + EuiFlexItem, + EuiFlexGroup, } from "@elastic/eui"; import { ContentPanel } from "../../../../components/ContentPanel"; import "brace/theme/github"; @@ -26,39 +30,44 @@ interface DefinePolicyProps { hasJSONError: boolean; onChange: (value: string) => void; onAutoIndent: () => void; - useNewUx?: boolean; } // TODO: Add custom autocomplete for Policy syntax -const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError, useNewUx }: DefinePolicyProps) => ( - - {(copy: () => void) => ( - - Copy - - )} - , - - Auto indent - , - ]} - > -
- -

- You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. - "Transitions" define when to move from one state to another.{" "} - - Learn more - -

+const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: DefinePolicyProps) => ( + + + +

{`Define policy`}

 -
+ + + + + {(copy: () => void) => ( + + Copy + + )} + + + + + Auto indent + + + + + + + +

+ You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. + "Transitions" define when to move from one state to another.{" "} + + Learn more + +

+ {(isDarkMode) => ( @@ -73,7 +82,7 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError, useNew /> )} - + ); export default DefinePolicy; diff --git a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap index 9f24c2534..1f52eef04 100644 --- a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap +++ b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap @@ -3,34 +3,22 @@ exports[` spec renders the component 1`] = `
-
-

- Define policy - - - - -

-
+

+ Define policy +

spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
-
+ You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. "Transitions" define when to move from one state to another. + + + Learn more + EuiIconMock + + (opens in a new tab or window) + + +

+
+
+
+
-
+ Press Enter to start editing. +

+

+ When you're done, press Escape to stop editing. +

+
- + -
-
+ some description +
diff --git a/public/pages/VisualCreatePolicy/components/States/State.tsx b/public/pages/VisualCreatePolicy/components/States/State.tsx index b399302ed..a5dd8998d 100644 --- a/public/pages/VisualCreatePolicy/components/States/State.tsx +++ b/public/pages/VisualCreatePolicy/components/States/State.tsx @@ -32,7 +32,7 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat buttonContent={ - + {state.name} @@ -105,17 +105,19 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat -

Actions

+
Actions
 {!state.actions?.length ? ( - No actions. Edit state to add actions. + No actions. Edit state to add actions. ) : ( {state.actions.map((action, index) => ( - {actionRepoSingleton.getUIActionFromData(action).content()} + + {actionRepoSingleton.getUIActionFromData(action).content()} + ))} @@ -123,17 +125,17 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat -

Transitions

+
Transitions
 {!state.transitions?.length ? ( - No transitions. Edit state to add transitions. + No transitions. Edit state to add transitions. ) : ( {state.transitions.map((transition, index) => ( - + diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx index 51a2ddb38..68ac1d6cc 100644 --- a/public/pages/VisualCreatePolicy/components/States/States.tsx +++ b/public/pages/VisualCreatePolicy/components/States/States.tsx @@ -16,6 +16,7 @@ import { EuiEmptyPrompt, EuiCompressedFormRow, EuiSelect, + EuiPanel, } from "@elastic/eui"; import { ContentPanel } from "../../../../components/ContentPanel"; import "brace/theme/github"; @@ -31,41 +32,33 @@ interface StatesProps { onClickDeleteState: (idx: number) => void; onChangeDefaultState: (event: ChangeEvent) => void; isReadOnly: boolean; - useNewUx?: boolean; } -const States = ({ - onOpenFlyout, - policy, - onClickEditState, - onClickDeleteState, - onChangeDefaultState, - isReadOnly = false, - useNewUx, -}: StatesProps) => { - const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" }; +const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, onChangeDefaultState, isReadOnly = false }: StatesProps) => { return ( - -

- You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. -
- "Transitions" define when to move from one state to another.{" "} - - Learn more - -

+ + + +

{`States (${policy.states.length})`}

 - } - > -
+ + + +

+ You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. +
+ "Transitions" define when to move from one state to another.{" "} + + Learn more + +

+ + + +
{!isReadOnly && ( <> - + - - + )} @@ -105,7 +97,11 @@ const States = ({ ) : ( No states} + title={ + +

No states

+ + } titleSize="s" body={

Your policy currently has no states defined. Add states to manage your index lifecycle.

} actions={ @@ -116,7 +112,7 @@ const States = ({ /> ))}
- + ); }; diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap index b28d1308b..3ff50edab 100644 --- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap @@ -30,7 +30,7 @@ exports[` spec renders the component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
some_name @@ -164,9 +164,9 @@ exports[` spec renders the component 1`] = `
-

+

Actions -
+
spec renders the component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
- Close +
+ Close +
- Open +
+ Open +
- Delete +
+ Delete +
@@ -210,9 +222,9 @@ exports[` spec renders the component 1`] = `
-

+

Transitions -
+
spec renders the component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap index 28a9ad0b2..39b9c6c13 100644 --- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap @@ -3,356 +3,338 @@ exports[` spec renders the component 1`] = `
-
+ States (2) + +
+
+
+
+

-

- States (2) + You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. +
+ "Transitions" define when to move from one state to another. + + + Learn more + EuiIconMock - - + (opens in a new tab or window) -

-
-
-
-

- You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state. -
- "Transitions" define when to move from one state to another. - - - Learn more - EuiIconMock - - (opens in a new tab or window) - - -

-
-
+ +

-
+
+
- + + +
- -
- - EuiIconMock - -
+ EuiIconMock +
+
+
+
-
-
- + + +
-
- - - -
-
+ +
+
+ - - - -
+ EuiIconMock + +
-
-
+
+
+
+
-
-

- Actions -

-
+
+ Actions +
+
+
Set number of replicas to 5
+
+
-
-

- Transitions -

-
+
+ Transitions +
+
+
-
-
-
- Destination state -
-
- cold -
-
- Transition trigger logic -
-
- Minimum index age is 30d -
-
-
+
+
+ Destination state +
+
+ cold +
+
+ Transition trigger logic +
+
+ Minimum index age is 30d +
+
@@ -362,208 +344,212 @@ exports[` spec renders the component 1`] = `
-
+
+
+
- + + +
-
- - - -
-
+ +
+
+ - - - -
+ EuiIconMock + +
-
-
+
+
+
+
-
-

- Actions -

-
+
+ Actions +
+
+
Set number of replicas to 2
+
+
-
-

- Transitions -

-
+
+ Transitions +
+
+
-
- No transitions. Edit state to add transitions. -
+ No transitions. Edit state to add transitions.
-
+
-
- -
+ +
`; diff --git a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap index 27d51c080..1afba5cde 100644 --- a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap @@ -59,25 +59,32 @@ exports[` spec renders the component 1`] = `
-
-
+
- Timeout -
-

- - - The timeout period for the action. Accepts time units, e.g. "5h" or "1d". + Timeout + +

+
+

- -

+ + The timeout period for the action. Accepts time units, e.g. "5h" or "1d". + + +

+
spec renders the component 1`] = `
-
-
+
- Retry count -
-

- - - The number of times the action should be retried if it fails. Must be greater than 0. + Retry count + +

+
+

- -

+ + The number of times the action should be retried if it fails. Must be greater than 0. + + +

+
spec renders the component 1`] = `
-
-
+
- Retry backoff -
-

- - - The backoff policy type to use when retrying. + Retry backoff + +

+
+

- -

+ + The backoff policy type to use when retrying. + + +

+
spec renders the component 1`] = `
-
-
+
- Retry delay -
-

- - - The time to wait between retries. Accepts time units, e.g. "2h" or "1d" + Retry delay + +

+
+

- -

+ + The time to wait between retries. Accepts time units, e.g. "2h" or "1d" + + +

+
void; - useNewUx?: boolean; } -const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionProps) => { +const Transition = ({ uiTransition, onChangeTransition }: TransitionProps) => { // We currently only support one transition condition const conditionType = Object.keys(uiTransition.transition.conditions || []).pop() || "none"; const conditions = uiTransition.transition.conditions; diff --git a/public/pages/VisualCreatePolicy/components/Transition/TransitionContent.tsx b/public/pages/VisualCreatePolicy/components/Transition/TransitionContent.tsx index b9167899f..151dcac67 100644 --- a/public/pages/VisualCreatePolicy/components/Transition/TransitionContent.tsx +++ b/public/pages/VisualCreatePolicy/components/Transition/TransitionContent.tsx @@ -13,7 +13,7 @@ interface TransitionContentProps { } const TransitionContent = ({ transition }: TransitionContentProps) => ( - +
Destination state
{transition.state_name}
diff --git a/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/Transition.test.tsx.snap b/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/Transition.test.tsx.snap index a623686d1..cbbd39745 100644 --- a/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/Transition.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/Transition.test.tsx.snap @@ -1,24 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component 1`] = ` -
-
+
- Condition -
-

- - - Specify the condition needed to be met to transition to the destination state. + Condition + +

+
+

- -

+ + Specify the condition needed to be met to transition to the destination state. + + +

+
`; diff --git a/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/TransitionContent.test.tsx.snap b/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/TransitionContent.test.tsx.snap index 2add182e0..4477ad5f0 100644 --- a/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/TransitionContent.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/components/Transition/__snapshots__/TransitionContent.test.tsx.snap @@ -2,7 +2,7 @@ exports[` spec renders the component 1`] = `
diff --git a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx index af3244981..88e782150 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx +++ b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx @@ -4,7 +4,16 @@ */ import React, { Component, ChangeEvent } from "react"; -import { EuiText, EuiLink, EuiFlyoutBody, EuiFlyoutFooter, EuiTitle, EuiCompressedFormRow, EuiCompressedSelect, EuiSpacer } from "@elastic/eui"; +import { + EuiText, + EuiLink, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiTitle, + EuiCompressedFormRow, + EuiCompressedSelect, + EuiSpacer, +} from "@elastic/eui"; import { UIAction, Action } from "../../../../../models/interfaces"; import TimeoutRetrySettings from "../../components/TimeoutRetrySettings"; import { actionRepoSingleton, getActionOptions } from "../../utils/helpers"; @@ -18,7 +27,6 @@ interface CreateActionProps { editAction: UIAction | null; onClickCancelAction: () => void; onClickSaveAction: (action: UIAction) => void; - useNewUx?: boolean; } interface CreateActionState { @@ -54,7 +62,7 @@ export default class CreateAction extends Component spec renders the component 1`] = `
-
-
+
- Action type -
-

- - - Select the action you want to add to this state. + Action type + +

+
+

- -

+ + Select the action you want to add to this state. + + +

+
spec renders the component 1`] = `
-
-
+
- Minimum index age -
-

- - - The minimum age required to roll over the index. Accepts time units, e.g. "5h" or "1d". + Minimum index age + +

+
+

- -

+ + The minimum age required to roll over the index. Accepts time units, e.g. "5h" or "1d". + + +

+
spec renders the component 1`] = `
-
-
+
- Minimum doc count -
-

- - - The minimum number of documents required to roll over the index. + Minimum doc count + +

+
+

- -

+ + The minimum number of documents required to roll over the index. + + +

+
spec renders the component 1`] = `
-
-
+
- Minimum index size -
-

- - - The minimum size of the total primary shard storage required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb". + Minimum index size + +

+
+

- -

+ + The minimum size of the total primary shard storage required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb". + + +

+
spec renders the component 1`] = `
-
-
+
- Minimum primary shard size -
-

- - - The minimum size of a single primary shard required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb". + Minimum primary shard size + +

+
+

- -

+ + The minimum size of a single primary shard required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb". + + +

+
spec renders the component 1`] = `
-
-
+
- Timeout -
-

- - - The timeout period for the action. Accepts time units, e.g. "5h" or "1d". + Timeout + +

+
+

- -

+ + The timeout period for the action. Accepts time units, e.g. "5h" or "1d". + + +

+
spec renders the component 1`] = `
-
-
+
- Retry count -
-

- - - The number of times the action should be retried if it fails. Must be greater than 0. + Retry count + +

+
+

- -

+ + The number of times the action should be retried if it fails. Must be greater than 0. + + +

+
spec renders the component 1`] = `
-
-
+
- Retry backoff -
-

- - - The backoff policy type to use when retrying. + Retry backoff + +

+
+

- -

+ + The backoff policy type to use when retrying. + + +

+
spec renders the component 1`] = `
-
-
+
- Retry delay -
-

- - - The time to wait between retries. Accepts time units, e.g. "2h" or "1d" + Retry delay + +

+
+

- -

+ + The time to wait between retries. Accepts time units, e.g. "2h" or "1d" + + +

+
) => void; onDragEndActions: (dropResult: DropResult) => void; onClickAddAction: () => void; - useNewUx?: boolean; } -const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndActions, onClickAddAction, useNewUx }: ActionsProps) => { +const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndActions, onClickAddAction }: ActionsProps) => { return ( <> diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx index a0a1235b2..a02cace18 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx +++ b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx @@ -37,7 +37,6 @@ interface CreateStateProps { onSaveState: (state: State, states: State[], order: string, afterBeforeState: string) => void; onCloseFlyout: () => void; state: State | null; - useNewUx?: boolean; } interface CreateStateState { @@ -191,14 +190,14 @@ export default class CreateState extends Component { - const { policy, state, useNewUx } = this.props; + const { policy, state } = this.props; const { actions, name, nameError, afterBeforeState, order, disableOrderSelections } = this.state; // If we are editing a state filter it out from the selectable options const stateOptions = policy.states.map((state) => ({ value: state.name, text: state.name })).filter((s) => s.value !== state?.name); return ( <> - -
State name
+ +

State name

{/* Dummy span to get rid of last child styling on h5 */} @@ -216,8 +215,8 @@ export default class CreateState extends Component - -
Order
+ +

Order

{/* Dummy span to get rid of last child styling on h5 */} @@ -257,7 +256,6 @@ export default class CreateState extends Component @@ -268,14 +266,13 @@ export default class CreateState extends Component ); }; renderDefaultFooter = () => { - const { onCloseFlyout, state, useNewUx } = this.props; + const { onCloseFlyout, state } = this.props; const { name, nameError } = this.state; const isEditing = !!state; return ( @@ -295,7 +292,7 @@ export default class CreateState extends Component ); if (createTransition || editTransition) @@ -325,7 +321,6 @@ export default class CreateState extends Component this.setState({ createTransition: false, editTransition: null })} onClickSaveTransition={this.onClickSaveTransition} - useNewUx={useNewUx} /> ); if (!flyoutContent) @@ -339,9 +334,11 @@ export default class CreateState extends Component - -

{title}

- + + +

{title}

+ + {flyoutContent()} diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx index 6a5c805e9..beeb62dea 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx +++ b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx @@ -16,7 +16,6 @@ interface TransitionsProps { onClickEditTransition: (transition: UITransition) => void; onDragEndTransitions: (dropResult: DropResult) => void; onClickAddTransition: () => void; - useNewUx?: boolean; } const Transitions = ({ @@ -25,7 +24,6 @@ const Transitions = ({ onClickEditTransition, onDragEndTransitions, onClickAddTransition, - useNewUx, }: TransitionsProps) => { return ( <> diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Actions.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Actions.test.tsx.snap index 65a7eb7f8..50b806669 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Actions.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Actions.test.tsx.snap @@ -1,24 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component 1`] = ` -
-
+
- Actions -
-

- - - Actions are the operations ISM performs when an index is in a certain state. + Actions + +

+
+

- -

+ + Actions are the operations ISM performs when an index is in a certain state. + + +

+
`; diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Transitions.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Transitions.test.tsx.snap index e0b566034..e7fafb495 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Transitions.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/containers/CreateState/__snapshots__/Transitions.test.tsx.snap @@ -1,24 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` spec renders the component 1`] = ` -
-
+
- Transitions -
-

- - - Transitions define the conditions that need to be met for a state to change. After all actions in the current state are completed, the policy starts checking the conditions for transitions. + Transitions + +

+
+

- -

+ + Transitions define the conditions that need to be met for a state to change. After all actions in the current state are completed, the policy starts checking the conditions for transitions. + + +

+
`; diff --git a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx index 09ebf2306..b744dac8e 100644 --- a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx +++ b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx @@ -27,7 +27,6 @@ interface CreateTransitionProps { onCloseCreateTransition: () => void; onClickSaveTransition: (uiTransition: UITransition) => void; stateOptions: string[]; - useNewUx?: boolean; } interface CreateTransitionState { @@ -87,7 +86,7 @@ export default class CreateTransition extends Component - {!!uiTransition && } + {!!uiTransition && } spec renders the component 1`] = `
-
-
+
- Destination state -
-

- - - If entering a state that does not exist yet then you must create it before creating the policy. + Destination state + +

+
+

- -

+ + If entering a state that does not exist yet then you must create it before creating the policy. + + +

+
spec renders the component 1`] = `
-
-
+
- Condition -
-

- - - Specify the condition needed to be met to transition to the destination state. + Condition + +

+
+

- -

+ + Specify the condition needed to be met to transition to the destination state. + + +

+
spec renders the component 1`] = `
-
-
+
- Minimum index age -
-

- - - The minimum age required to transition to the next state. + Minimum index age + +

+
+

- -

+ + The minimum age required to transition to the next state. + + +

+
void; onSwitchToChannels: () => void; notificationService: NotificationService; - useNewUx?: boolean; } interface ErrorNotificationState { @@ -72,7 +71,6 @@ export default class ErrorNotification extends Component ); @@ -100,38 +97,32 @@ export default class ErrorNotification extends Component ); } - const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" }; return ( - - - -

Error notification

- - - - - – optional - - - - } - titleSize="s" - subTitleText={ - -

- You can set up an error notification for when a policy execution fails.{" "} - - Learn more - -

- - } - > -
{content}
- + + + + +

Error notification

+ + + + + – optional + + + + + +

+ You can set up an error notification for when a policy execution fails.{" "} + + Learn more + +

+ + +
{content}
+ ); } } diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap index 04365c50a..890097e39 100644 --- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap +++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap @@ -3,233 +3,230 @@ exports[` spec renders the component 1`] = `
-
-
-

- Error notification -

-
-
-
-
-
- - – optional - -
-
-
+

+ Error notification +

+
+
-

- You can set up an error notification for when a policy execution fails. - - - Learn more - EuiIconMock - - (opens in a new tab or window) - - -

+ + – optional +
-
+

+ You can set up an error notification for when a policy execution fails. + + + Learn more + EuiIconMock + + (opens in a new tab or window) + + +

+
+
+
+
+
-
Channel ID -
+ +
+

+
+
-
- -
+ +
+ + - - - EuiIconMock - -
+ EuiIconMock +
-
+
+ -
-
+ + +
+
+ - + EuiIconMock - EuiIconMock - - Manage channels - + Manage channels - -
+ +
+
+
+
-
-
Notification message -
+ +
+

Embed variables in your message using Mustache template.

+
+
-
- -
+ some source message +
diff --git a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx index c50d7fb55..14b4fe4c6 100644 --- a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx +++ b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx @@ -4,7 +4,17 @@ */ import React, { ChangeEvent, Component, useContext } from "react"; -import { EuiText, EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSmallButton, EuiLink, EuiIcon } from "@elastic/eui"; +import { + EuiText, + EuiSpacer, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiSmallButton, + EuiLink, + EuiIcon, + EuiSmallButtonEmpty, +} from "@elastic/eui"; import { RouteComponentProps } from "react-router-dom"; import queryString from "query-string"; import { EMPTY_DEFAULT_POLICY } from "../../utils/constants"; @@ -23,6 +33,7 @@ import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../ser import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; import { Data } from "vega"; import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; +import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public"; interface VisualCreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties { isEdit: boolean; @@ -292,25 +303,30 @@ export class VisualCreatePolicy extends Component - Policies let you automatically perform administrative operations on indices.{" "} - - Learn more - - - ), - }, + description: "Policies let you automatically perform administrative operations on indices.", + links: { + label: "Learn more", + href: POLICY_DOCUMENTATION_URL, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; + const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "25px 50px" }; return (
{!useNewUX ? ( <> - -

{isEdit ? "Edit" : "Create"} policy

- - + + +

{isEdit ? "Edit" : "Create"} policy

+ + +

Policies let you automatically perform administrative operations on indices.{" "} @@ -345,10 +361,9 @@ export class VisualCreatePolicy extends Component - + {showFlyout && ( - + )} - + - Cancel + Cancel