From f5d19f6e93516f951cb52d345d3d6b88078d9178 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:31:27 +0800 Subject: [PATCH] update newHeader for component template pages (#1122) (#1129) * first commit for Component template * fixing uts * corrected 1 ut * Look good changes --------- (cherry picked from commit c269c85582d315e5eda9b44012c6e8ddfdeb2980) Signed-off-by: Shubh Sahu Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Shubh Sahu --- public/components/FilterGroup/index.tsx | 4 +- .../components/IndexMapping/IndexMapping.tsx | 10 +- public/components/IndexMapping/interfaces.ts | 1 + .../IndexControls/IndexControls.tsx | 12 +- .../ComposableTemplates.test.tsx | 17 + .../ComposableTemplates.tsx | 529 +++++++++++------- .../CreateComposableTemplate.test.tsx | 17 + .../CreateComposableTemplate.tsx | 15 +- .../TemplateDetail/TemplateDetail.test.tsx | 17 + .../TemplateDetail/TemplateDetail.tsx | 176 ++++-- .../TemplateMappings/TemplateMappings.tsx | 3 +- .../CreateComposableTemplate/interface.ts | 1 + public/plugin.ts | 2 +- 13 files changed, 550 insertions(+), 254 deletions(-) diff --git a/public/components/FilterGroup/index.tsx b/public/components/FilterGroup/index.tsx index 858d83775..7dc96e8f9 100644 --- a/public/components/FilterGroup/index.tsx +++ b/public/components/FilterGroup/index.tsx @@ -5,10 +5,11 @@ export interface IFilterGroupProps { options: { label: string }[]; value?: string[]; filterButtonProps?: EuiFilterButtonProps; + useNewUx?: boolean; onChange?: (val: IFilterGroupProps["value"]) => void; } -export default function FilterGroup({ options, value, filterButtonProps, onChange }: IFilterGroupProps) { +export default function FilterGroup({ options, value, filterButtonProps, useNewUx, onChange }: IFilterGroupProps) { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => { @@ -30,6 +31,7 @@ export default function FilterGroup({ options, value, filterButtonProps, onChang numFilters={options?.length} hasActiveFilters={!!value?.length} numActiveFilters={value?.length} + size={useNewUx ? "s" : undefined} {...filterButtonProps} /> } diff --git a/public/components/IndexMapping/IndexMapping.tsx b/public/components/IndexMapping/IndexMapping.tsx index edc775177..71ac99aeb 100644 --- a/public/components/IndexMapping/IndexMapping.tsx +++ b/public/components/IndexMapping/IndexMapping.tsx @@ -20,7 +20,7 @@ export * from "./helper"; export * from "./interfaces"; const IndexMapping = ( - { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion }: IndexMappingProps, + { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion, useNewUx }: IndexMappingProps, ref: Ref ) => { const value = propsValue?.properties || []; @@ -194,10 +194,16 @@ const IndexMapping = ( {readonly ? null : ( <> - addField("")}> + addField("")} + > Add new field addField("", { diff --git a/public/components/IndexMapping/interfaces.ts b/public/components/IndexMapping/interfaces.ts index 02fb4f019..41e8ebe0f 100644 --- a/public/components/IndexMapping/interfaces.ts +++ b/public/components/IndexMapping/interfaces.ts @@ -23,6 +23,7 @@ export interface IndexMappingProps { oldMappingsEditable?: boolean; // in template edit case, existing mappings is editable readonly?: boolean; docVersion: string; + useNewUx?: boolean; } export enum EDITOR_MODE { diff --git a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx index 9e28d475e..8e1b67d2f 100644 --- a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx +++ b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx @@ -4,7 +4,7 @@ */ import React, { useEffect, useState } from "react"; -import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui"; +import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui"; import FilterGroup from "../../../../components/FilterGroup"; import { IndicesUpdateMode } from "../../../../utils/constants"; @@ -13,6 +13,7 @@ export interface SearchControlsProps { search: string; selectedTypes: string[]; }; + useNewUX?: boolean; onSearchChange: (args: SearchControlsProps["value"]) => void; } @@ -32,7 +33,13 @@ export default function SearchControls(props: SearchControlsProps) { return ( - onChange("search", e.target.value)} /> + onChange("search", e.target.value)} + /> onChange("selectedTypes", val || [])} value={state.selectedTypes} + useNewUx={props.useNewUX} options={[ { label: IndicesUpdateMode.alias, diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.test.tsx b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.test.tsx index e3435962e..8dfe1986b 100644 --- a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.test.tsx +++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.test.tsx @@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants"; import { CoreServicesContext } from "../../../../components/core_services"; import userEvent from "@testing-library/user-event"; import { ICatComposableTemplate } from "../../interface"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; + +jest.mock("../../../../services/Services", () => ({ + ...jest.requireActual("../../../../services/Services"), + getUISettings: jest.fn(), + getApplication: jest.fn(), + getNavigationUI: jest.fn(), +})); + +beforeEach(() => { + (getUISettings as jest.Mock).mockReturnValue({ + get: jest.fn().mockReturnValue(false), // or false, depending on your test case + }); + (getApplication as jest.Mock).mockReturnValue({}); + + (getNavigationUI as jest.Mock).mockReturnValue({}); +}); function renderWithRouter() { return { diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx index 368f85d87..821225eae 100644 --- a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx +++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx @@ -23,6 +23,7 @@ import { EuiTableSortingType, EuiButtonIcon, EuiToolTip, + EuiBasicTableColumn, } from "@elastic/eui"; import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel"; import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants"; @@ -40,6 +41,8 @@ import { useComponentMapTemplate } from "../../utils/hooks"; import "./index.scss"; import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext"; import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; +import { TopNavControlButtonData, TopNavControlTextData } from "src/plugins/navigation/public"; interface ComposableTemplatesProps extends RouteComponentProps, DataSourceMenuProperties { commonService: CommonService; @@ -56,6 +59,7 @@ type ComposableTemplatesState = { selectedItems: ICatComposableTemplate[]; composableTemplates: ICatComposableTemplate[]; loading: boolean; + useNewUX: boolean; } & SearchControlsProps["value"] & DataSourceMenuProperties; @@ -67,6 +71,8 @@ class ComposableTemplates extends MDSEnabledComponent this.getComposableTemplates()); }; + onClickCreate = (): void => { + this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); + }; + getFinalItems = (allTemplates: ICatComposableTemplate[]) => { const { from, size, sortDirection, sortField, selectedTypes } = this.state; const fromNumber = Number(from); @@ -230,7 +243,7 @@ class ComposableTemplates extends MDSEnabledComponent = { onSelectionChange: this.onSelectionChange, }; - return ( - item.name)} - onDelete={this.getComposableTemplates} - /> - ), - }, - { - text: "Create component template", - buttonProps: { - fill: true, - onClick: () => { - this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); - }, - }, - }, - ]} + + const contentPanelActions = [ + { + text: "", + children: ( + item.name)} + onDelete={this.getComposableTemplates} /> - } - bodyStyles={{ padding: "initial" }} - title={ - <> - - Component templates - - - 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 - - - } - > - <> - - - } - > - - + ), + }, + { + text: "Create component template", + buttonProps: { + fill: true, + onClick: () => { + this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); + }, + }, + }, + ]; - { - return ( - - {value} - - ); - }, - }, - { - field: "templateTypes", - name: "Type", - truncateText: true, - textOnly: false, - render: (value: string, record: ICatComposableTemplate) => { - return ; - }, - }, - { - field: "component_template._meta.description", - name: "Description", - sortable: true, - render: (value: string, record: ICatComposableTemplate) => { - return record.component_template._meta?.description || "-"; - }, + const contentPanelTitle = ( + <> + + Component templates + + + 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 + + + } + > + <> + + + ); + + const tableColums: EuiBasicTableColumn[] = [ + { + field: "name", + name: "Name", + sortable: true, + render: (value: string) => { + return ( + + {value} + + ); + }, + }, + { + field: "templateTypes", + name: "Type", + truncateText: true, + textOnly: false, + render: (value: string, record: ICatComposableTemplate) => { + return ; + }, + }, + { + field: "component_template._meta.description", + name: "Description", + sortable: true, + render: (value: string, record: ICatComposableTemplate) => { + return record.component_template._meta?.description || "-"; + }, + }, + { + field: "associatedCount", + name: "Associated index templates", + sortable: true, + align: "right", + }, + { + field: "actions", + name: "Actions", + align: "right", + actions: [ + { + render: (record: ICatComposableTemplate) => { + return ( + this.getComposableTemplates()} + renderProps={({ setVisible }) => ( + + setVisible(true)} + className="icon-hover-info" + /> + + )} + /> + ); }, - { - field: "associatedCount", - name: "Associated index templates", - sortable: true, - align: "right", + }, + { + render: (record: ICatComposableTemplate) => { + return ( + { + this.getComposableTemplates(); + }} + renderDeleteButton={({ triggerDelete }) => ( + + + + )} + /> + ); }, + }, + ], + }, + ]; + + const { HeaderControl } = getNavigationUI(); + const { setAppRightControls, setAppDescriptionControls } = getApplication(); + + const descriptionData = [ + { + renderComponent: ( + + 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 + + + ), + }, + ]; + + return useNewUX ? ( + <> + { - return ( - this.getComposableTemplates()} - renderProps={({ setVisible }) => ( - - setVisible(true)} - className="icon-hover-info" - /> - - )} - /> - ); + id: "Create component template", + label: "Create component template", + iconType: "plus", + fill: true, + testId: "createButton", + controlType: "button", + run: this.onClickCreate, + } as TopNavControlButtonData, + ]} + /> + + + + + + { - return ( - { + defaultFilter + ) ? ( + +

You have no templates.

+ + } + actions={[ + { + this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); + }} + data-test-subj="CreateComponentTemplateWhenNoTemplateFound" + size={useNewUX ? "s" : undefined} + > + Create component template + , + ]} + /> + ) : ( + +

There are no templates matching your applied filters. Reset your filters to view your templates.

+ + } + actions={[ + { + this.setState(defaultFilter, () => { this.getComposableTemplates(); - }} - renderDeleteButton={({ triggerDelete }) => ( - - - - )} - /> - ); + }); + }} + > + Reset filters + , + ]} + /> + ) + } + /> + + + ) : ( + <> + } + bodyStyles={useNewUX ? {} : { padding: "initial" }} + title={contentPanelTitle} + > + + + + -

You have no templates.

- - } - actions={[ - { - this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); - }} - data-test-subj="CreateComponentTemplateWhenNoTemplateFound" - > - Create component template - , - ]} - /> - ) : ( - -

There are no templates matching your applied filters. Reset your filters to view your templates.

- - } - actions={[ - { - this.setState(defaultFilter, () => { - this.getComposableTemplates(); - }); - }} - > - Reset filters - , - ]} - /> - ) - } - /> - + defaultFilter + ) ? ( + +

You have no templates.

+ + } + actions={[ + { + this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE); + }} + data-test-subj="CreateComponentTemplateWhenNoTemplateFound" + > + Create component template + , + ]} + /> + ) : ( + +

There are no templates matching your applied filters. Reset your filters to view your templates.

+ + } + actions={[ + { + this.setState(defaultFilter, () => { + this.getComposableTemplates(); + }); + }} + > + Reset filters + , + ]} + /> + ) + } + /> + + ); } } diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.test.tsx b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.test.tsx index 358d28d40..e62e41dc5 100644 --- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.test.tsx +++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.test.tsx @@ -12,6 +12,23 @@ import { ServicesContext } from "../../../../services"; import { browserServicesMock, coreServicesMock, apiCallerMock } from "../../../../../test/mocks"; import { ROUTES } from "../../../../utils/constants"; import { CoreServicesContext } from "../../../../components/core_services"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; + +jest.mock("../../../../services/Services", () => ({ + ...jest.requireActual("../../../../services/Services"), + getUISettings: jest.fn(), + getApplication: jest.fn(), + getNavigationUI: jest.fn(), +})); + +beforeEach(() => { + (getUISettings as jest.Mock).mockReturnValue({ + get: jest.fn().mockReturnValue(false), // or false, depending on your test case + }); + (getApplication as jest.Mock).mockReturnValue({}); + + (getNavigationUI as jest.Mock).mockReturnValue({}); +}); function renderCreateComposableTemplateWithRouter(initialEntries = [ROUTES.CREATE_COMPOSABLE_TEMPLATE] as string[]) { return { diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx index 462dfec12..9462d9cb6 100644 --- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx +++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/CreateComposableTemplate.tsx @@ -11,6 +11,7 @@ import { CoreServicesContext } from "../../../../components/core_services"; import { isEqual } from "lodash"; import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; +import { getUISettings } from "../../../../services/Services"; interface CreateComposableTemplateProps extends RouteComponentProps<{ template?: string; mode?: string }>, DataSourceMenuProperties {} @@ -25,6 +26,12 @@ class CreateComposableTemplate extends Component return this.props.match.params.mode === "readonly"; } + get useNewUX(): boolean { + const uiSettings = getUISettings(); + const useNewUx = uiSettings.get("home:useNewHomePage"); + return useNewUx; + } + setBreadCrumb() { const isEdit = this.template; const readonly = this.readonly; @@ -42,7 +49,9 @@ class CreateComposableTemplate extends Component } else { lastBread = BREADCRUMBS.CREATE_COMPOSABLE_TEMPLATE; } - this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]); + this.useNewUX + ? this.context.chrome.setBreadcrumbs([BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]) + : this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.COMPOSABLE_TEMPLATES, lastBread]); } componentDidUpdate(prevProps: Readonly): void { @@ -60,8 +69,9 @@ class CreateComposableTemplate extends Component }; render() { + const paddingStyle = this.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} />
); diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.test.tsx b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.test.tsx index 7f15f8bc6..92cf17afd 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.test.tsx +++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.test.tsx @@ -12,6 +12,23 @@ import { CoreServicesContext } from "../../../../components/core_services"; import { HashRouter, Route } from "react-router-dom"; import { ROUTES } from "../../../../utils/constants"; import userEvent from "@testing-library/user-event"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; + +jest.mock("../../../../services/Services", () => ({ + ...jest.requireActual("../../../../services/Services"), + getUISettings: jest.fn(), + getApplication: jest.fn(), + getNavigationUI: jest.fn(), +})); + +beforeEach(() => { + (getUISettings as jest.Mock).mockReturnValue({ + get: jest.fn().mockReturnValue(false), // or false, depending on your test case + }); + (getApplication as jest.Mock).mockReturnValue({}); + + (getNavigationUI as jest.Mock).mockReturnValue({}); +}); function renderCreateComposableTemplate(props: Omit) { return { diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx index a475cda3c..f56560474 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx +++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx @@ -4,7 +4,7 @@ */ import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react"; -import { EuiButton, EuiButtonEmpty, EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui"; +import { EuiButton, EuiButtonEmpty, EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui"; import { RouteComponentProps } from "react-router-dom"; import { IComposableTemplate, IComposableTemplateRemote } from "../../../../../models/interfaces"; import useField from "../../../../lib/field"; @@ -27,6 +27,9 @@ import { ComponentTemplateEdit } from "../../interface"; 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 DeleteIndexModal from "../../../ComposableTemplates/containers/DeleteComposableTemplatesModal"; export interface TemplateDetailProps { templateName?: string; @@ -40,6 +43,7 @@ export interface TemplateDetailProps { hideButton?: boolean; noPanel?: boolean; dataSourceId: string; + useNewUX?: boolean; } export interface IComponentTemplateDetailInstance { @@ -47,11 +51,12 @@ export interface IComponentTemplateDetailInstance { } const TemplateDetail = (props: TemplateDetailProps, ref: Ref) => { - const { templateName, onCancel, onSubmitSuccess, hideTitle, hideButton, noPanel } = props; + const { templateName, onCancel, onSubmitSuccess, hideTitle, hideButton, noPanel, useNewUX } = props; const isEdit = !!templateName; const services = useContext(ServicesContext) as BrowserServices; const coreServices = useContext(CoreServicesContext) as CoreStart; const [isSubmitting, setIsSubmitting] = useState(false); + const [deleteIndexModalVisible, setDeleteIndexModalVisible] = useState(false); const oldValue = useRef(undefined); const field = useField({ values: { @@ -126,6 +131,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref { + const showValue: ComponentTemplateEdit = JSON.parse( + JSON.stringify({ + ...values, + template: IndexForm.transformIndexDetailToRemote(values.template), + } as IComposableTemplateRemote) + ); + const { includes, ...others } = showValue; + Modal.show({ + locale: { + ok: "Close", + }, + style: { + width: 800, + }, + "data-test-subj": "templateJSONDetailModal", + title: values.name, + content: ( + + {JSON.stringify(others, null, 2)} + + ), + }); + }; + + const onDelete = () => { + props.history.replace(ROUTES.COMPOSABLE_TEMPLATES); + }; + + const onDeleteIndexModalClose = () => { + setDeleteIndexModalVisible(false); + }; + + const onDeleteIndexModalOpen = () => { + setDeleteIndexModalVisible(true); + }; + + const deleteModal = () => { + return ( + deleteIndexModalVisible && ( + { + onDeleteIndexModalClose(); + onDelete(); + }} + /> + ) + ); + }; + + const { HeaderControl } = getNavigationUI(); + const { setAppRightControls, setAppDescriptionControls } = getApplication(); + + const descriptionData = [ + { + renderComponent: ( + + 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 + + + ), + }, + ]; + return ( <> {hideTitle ? null : ( <> - {isEdit ?

{templateName}

:

Create component template

} - {isEdit ? null : ( + {useNewUX ? ( + <> + ) : ( + {isEdit ?

{templateName}

:

Create component template

} + )} + {isEdit ? null : useNewUX ? ( + + ) : ( {isEdit ? ( - - { - const showValue: ComponentTemplateEdit = JSON.parse( - JSON.stringify({ - ...values, - template: IndexForm.transformIndexDetailToRemote(values.template), - } as IComposableTemplateRemote) - ); - const { includes, ...others } = showValue; - Modal.show({ - locale: { - ok: "Close", - }, - style: { - width: 800, - }, - "data-test-subj": "templateJSONDetailModal", - title: values.name, - content: ( - - {JSON.stringify(others, null, 2)} - - ), - }); - }} - > - View JSON - - props.history.replace(ROUTES.COMPOSABLE_TEMPLATES)} - /> - + <> + {useNewUX ? ( + <> + + {deleteModal()} + + ) : ( + + + View JSON + + + + )} + ) : null} - + {useNewUX ? <> : } )} @@ -215,19 +297,25 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref - + {isEdit || hideButton ? null : ( <> - + Cancel - + Create component template diff --git a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx index e32994cd3..167cdacb9 100644 --- a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx +++ b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx @@ -9,7 +9,7 @@ import { AllBuiltInComponents } from "../../../../components/FormGenerator"; import { IndicesUpdateMode } from "../../../../utils/constants"; export default function TemplateMappings(props: SubDetailProps) { - const { field, noPanel } = props; + const { field, noPanel, useNewUx } = props; const values = field.getValues(); const mappingsRef = useRef(null); const coreServices = useContext(CoreServicesContext) as CoreStart; @@ -76,6 +76,7 @@ export default function TemplateMappings(props: SubDetailProps) { }, ], })} + useNewUx={useNewUx} isEdit ref={mappingsRef} oldMappingsEditable diff --git a/public/pages/CreateComposableTemplate/interface.ts b/public/pages/CreateComposableTemplate/interface.ts index c159c0606..c010e39e2 100644 --- a/public/pages/CreateComposableTemplate/interface.ts +++ b/public/pages/CreateComposableTemplate/interface.ts @@ -15,6 +15,7 @@ export interface SubDetailProps extends TemplateDetailProps { field: FieldInstance; isEdit: boolean; noPanel?: boolean; + useNewUx?: boolean; } export interface ComponentTemplateEdit extends IComposableTemplate { diff --git a/public/plugin.ts b/public/plugin.ts index ca45d4168..1f5a3e464 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -249,7 +249,7 @@ export class IndexManagementPlugin implements Plugin { - return mountWrapper(params, ROUTES.TEMPLATES); + return mountWrapper(params, ROUTES.COMPOSABLE_TEMPLATES); }, });