/* * SPDX-License-Identifier: Apache-2.0 * * The OpenSearch Contributors require contributions made to * this file be licensed under the Apache-2.0 license or a * compatible open source license. * * Any modifications Copyright OpenSearch Contributors. See * GitHub history for details. */ /* * Licensed to Elasticsearch B.V. under one or more contributor * license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright * ownership. Elasticsearch B.V. licenses this file to you under * the Apache License, Version 2.0 (the "License"); you may * not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { EuiPage } from '@elastic/eui'; import { EuiButton } from '@elastic/eui'; import { EuiPageBody } from '@elastic/eui'; import { EuiPageContent } from '@elastic/eui'; import { EuiPageContentBody } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; import { EuiText } from '@elastic/eui'; import { EuiFieldText } from '@elastic/eui'; import { EuiPageHeader } from '@elastic/eui'; import { EuiLink } from '@elastic/eui'; import { AppMountParameters } from '../../../src/core/public'; import { UrlGeneratorsService } from '../../../src/plugins/share/public'; import { HELLO_URL_GENERATOR, HELLO_URL_GENERATOR_V1, } from '../../url_generators_examples/public/url_generator'; interface Props { getLinkGenerator: UrlGeneratorsService['getUrlGenerator']; } interface MigratedLink { isDeprecated: boolean; linkText: string; link: string; } const ActionsExplorer = ({ getLinkGenerator }: Props) => { const [migratedLinks, setMigratedLinks] = useState([] as MigratedLink[]); const [buildingLinks, setBuildingLinks] = useState(false); const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); /** * Lets pretend we grabbed these links from a persistent store, like a saved object. * Some of these links were created with older versions of the hello link generator. * They use deprecated generator ids. */ const [persistedLinks, setPersistedLinks] = useState([ { id: HELLO_URL_GENERATOR_V1, linkText: 'Say hello to Mary', state: { name: 'Mary', }, }, { id: HELLO_URL_GENERATOR, linkText: 'Say hello to George', state: { firstName: 'George', lastName: 'Washington', }, }, ]); useEffect(() => { setBuildingLinks(true); const updateLinks = async () => { const updatedLinks = await Promise.all( persistedLinks.map(async (savedLink) => { const generator = getLinkGenerator(savedLink.id); const link = await generator.createUrl(savedLink.state); return { isDeprecated: generator.isDeprecated, linkText: savedLink.linkText, link, }; }) ); setMigratedLinks(updatedLinks); setBuildingLinks(false); }; updateLinks(); }, [getLinkGenerator, persistedLinks]); return ( Access links explorer

Create new links using the most recent version of a url generator.

{ setFirstName(e.target.value); }} /> setLastName(e.target.value)} /> setPersistedLinks([ ...persistedLinks, { id: HELLO_URL_GENERATOR, state: { firstName, lastName }, linkText: `Say hello to ${firstName} ${lastName}`, }, ]) } > Add new link

Existing links retrieved from storage. The links that were generated from legacy generators are in red. This can be useful for developers to know they will have to migrate persisted state or in a future version of OpenSearch Dashboards, these links may no longer work. They still work now because legacy url generators must provide a state migration function.

{buildingLinks ? (
loading...
) : ( migratedLinks.map((link) => ( {link.linkText}
)) )}
); }; export const renderApp = (props: Props, { element }: AppMountParameters) => { ReactDOM.render(, element); return () => ReactDOM.unmountComponentAtNode(element); };