diff --git a/changelogs/fragments/7708.yml b/changelogs/fragments/7708.yml new file mode 100644 index 000000000000..56ead27a3644 --- /dev/null +++ b/changelogs/fragments/7708.yml @@ -0,0 +1,2 @@ +feat: +- Support workspace initial page ([#7708](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7708)) \ No newline at end of file diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts index 5eae709784f3..c8582d2439de 100644 --- a/src/plugins/workspace/common/constants.ts +++ b/src/plugins/workspace/common/constants.ts @@ -10,6 +10,7 @@ export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error'; export const WORKSPACE_CREATE_APP_ID = 'workspace_create'; export const WORKSPACE_LIST_APP_ID = 'workspace_list'; export const WORKSPACE_DETAIL_APP_ID = 'workspace_detail'; +export const WORKSPACE_INITIAL_APP_ID = 'workspace_initial'; /** * Since every workspace always have overview and update page, these features will be selected by default * and can't be changed in the workspace form feature selector diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx index 31965012d16c..cbc45c938586 100644 --- a/src/plugins/workspace/public/application.tsx +++ b/src/plugins/workspace/public/application.tsx @@ -5,7 +5,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; +import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import { AppMountParameters, ScopedHistory } from '../../../core/public'; import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public'; import { WorkspaceFatalError } from './components/workspace_fatal_error'; @@ -15,7 +15,7 @@ import { Services } from './types'; import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator'; import { WorkspaceDetailApp } from './components/workspace_detail_app'; import { WorkspaceDetailProps } from './components/workspace_detail/workspace_detail'; -import { DetailTab } from './components/workspace_form/constants'; +import { WorkspaceInitialApp } from './components/workspace_initial_app'; export const renderCreatorApp = ( { element }: AppMountParameters, @@ -87,3 +87,18 @@ export const renderDetailApp = ( ReactDOM.unmountComponentAtNode(element); }; }; + +export const renderInitialApp = ({}: AppMountParameters, services: Services) => { + const rootElement = document.getElementById('opensearch-dashboards-body'); + + ReactDOM.render( + + + , + rootElement + ); + + return () => { + ReactDOM.unmountComponentAtNode(rootElement!); + }; +}; diff --git a/src/plugins/workspace/public/assets/background_dark.svg b/src/plugins/workspace/public/assets/background_dark.svg new file mode 100644 index 000000000000..0e6de636d08d --- /dev/null +++ b/src/plugins/workspace/public/assets/background_dark.svg @@ -0,0 +1,363 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/plugins/workspace/public/assets/background_light.svg b/src/plugins/workspace/public/assets/background_light.svg new file mode 100644 index 000000000000..7e33b6ceff7f --- /dev/null +++ b/src/plugins/workspace/public/assets/background_light.svg @@ -0,0 +1,363 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap b/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap new file mode 100644 index 000000000000..2c2b25a1e116 --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap @@ -0,0 +1,1048 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WorkspaceInitial render workspace initial page normally when theme is dark mode 1`] = ` +
+
+
+
+
+
+ OpenSearch +
+
+
+
+
+
+
+

+ Getting started with OpenSearch +

+
+
+
+ OpenSearch is a flexible, scalable, open-source way to build solutions for data-intensive search and analytics applications. Explore, enrich, and visualize your data, using developer-friendly tools and powerful integrations for machine learning, data processing, and more. +
+
+
+ + + + +
+ Learn more from documentation and more. +
+ + + +
+
+
+
+ +   Explore live demo environment at + + + playground.opensearch.org + +
+
+
+
+
+
+
+
+ + Create a workspace + +
+

+ + Organize projects by use case in a collaborative workspace. + +

+
+
+
+ +
+
+
+
+
+
+ + Try OpenSearch + +
+

+ Explore sample data before adding your own. +

+
+
+
+
+
+ with Sample Datasets +
+
+
+
+
+
+
+
+ + Add your data + +
+

+ Start collecting and analyzing your data. +

+
+
+
+
+
+ with Getting Started Guide +
+
+
+
+
+
+
+
+ + Discover insights + +
+

+ Explore data interactively to uncover insights. +

+
+
+
+
+
+ with Discover +
+
+
+
+
+
+
+
+ +
+

+ And much more... +

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; + +exports[`WorkspaceInitial render workspace initial page normally when user is dashboard admin 1`] = ` +
+
+
+
+
+
+ OpenSearch +
+
+
+
+
+
+
+

+ Getting started with OpenSearch +

+
+
+
+ OpenSearch is a flexible, scalable, open-source way to build solutions for data-intensive search and analytics applications. Explore, enrich, and visualize your data, using developer-friendly tools and powerful integrations for machine learning, data processing, and more. +
+
+
+ + + + +
+ Learn more from documentation and more. +
+ + + +
+
+
+
+ +   Explore live demo environment at + + + playground.opensearch.org + +
+
+
+
+
+
+
+
+ + Create a workspace + +
+

+ + Organize projects by use case in a collaborative workspace. + +

+
+
+
+ +
+
+
+
+
+
+ + Try OpenSearch + +
+

+ Explore sample data before adding your own. +

+
+
+
+
+
+ with Sample Datasets +
+
+
+
+
+
+
+
+ + Add your data + +
+

+ Start collecting and analyzing your data. +

+
+
+
+
+
+ with Getting Started Guide +
+
+
+
+
+
+
+
+ + Discover insights + +
+

+ Explore data interactively to uncover insights. +

+
+
+
+
+
+ with Discover +
+
+
+
+
+
+
+
+ +
+

+ And much more... +

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; + +exports[`WorkspaceInitial render workspace initial page normally when user is non dashboard admin 1`] = ` +
+
+
+
+
+
+ OpenSearch +
+
+
+
+
+
+
+

+ Getting started with OpenSearch +

+
+
+
+ OpenSearch is a flexible, scalable, open-source way to build solutions for data-intensive search and analytics applications. Explore, enrich, and visualize your data, using developer-friendly tools and powerful integrations for machine learning, data processing, and more. +
+
+
+ + + + +
+ Learn more from documentation and more. +
+ + + +
+
+
+
+ +   Explore live demo environment at + + + playground.opensearch.org + +
+
+
+
+
+
+
+
+ + Create a workspace + +
+

+ + Organize projects by use case in a collaborative workspace. + +

+
+
+
+
+
+
+
+ + Try OpenSearch + +
+

+ Explore sample data before adding your own. +

+
+
+
+
+
+ with Sample Datasets +
+
+
+
+
+
+
+
+ + Add your data + +
+

+ Start collecting and analyzing your data. +

+
+
+
+
+
+ with Getting Started Guide +
+
+
+
+
+
+
+
+ + Discover insights + +
+

+ Explore data interactively to uncover insights. +

+
+
+
+
+
+ with Discover +
+
+
+
+
+
+
+
+ +
+

+ And much more... +

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.test.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.test.tsx new file mode 100644 index 000000000000..698a4c109cfd --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.test.tsx @@ -0,0 +1,53 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { render } from '@testing-library/react'; +import React from 'react'; +import { WorkspaceInitial } from './workspace_initial'; +import { coreMock } from '../../../../../core/public/mocks'; +import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public'; + +const mockCoreStart = coreMock.createStart(); +const WorkspaceInitialPage = (props: { isDashboardAdmin: boolean }) => { + const { isDashboardAdmin } = props; + const { Provider } = createOpenSearchDashboardsReactContext({ + ...mockCoreStart, + ...{ + application: { + ...mockCoreStart.application, + capabilities: { + ...mockCoreStart.application.capabilities, + dashboards: { + isDashboardAdmin, + }, + }, + }, + }, + }); + + return ( + + + + ); +}; + +describe('WorkspaceInitial', () => { + it('render workspace initial page normally when user is dashboard admin', async () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('render workspace initial page normally when user is non dashboard admin', async () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('render workspace initial page normally when theme is dark mode', async () => { + mockCoreStart.uiSettings.get.mockReturnValue(true); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx new file mode 100644 index 000000000000..7d88210820f4 --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx @@ -0,0 +1,237 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { + EuiLink, + EuiPage, + EuiIcon, + EuiText, + EuiCard, + EuiImage, + EuiPanel, + EuiTitle, + EuiSpacer, + EuiPageBody, + EuiFlexItem, + EuiFlexGroup, + EuiButtonEmpty, + EuiPageContent, + EuiSmallButton, + EuiToolTip, +} from '@elastic/eui'; +import { i18n } from '@osd/i18n'; +import BackgroundLightSVG from '../../assets/background_light.svg'; +import BackgroundDarkSVG from '../../assets/background_light.svg'; +import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants'; +import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; + +export const WorkspaceInitial = () => { + const { + services: { application, chrome, uiSettings }, + } = useOpenSearchDashboards(); + const isDashboardAdmin = application.capabilities.dashboards?.isDashboardAdmin; + const logos = chrome.logos; + const createWorkspaceUrl = application.getUrlForApp(WORKSPACE_CREATE_APP_ID, { absolute: true }); + const settingsAndSetupUrl = application.getUrlForApp('settings_landing', { absolute: true }); + const isDarkTheme = uiSettings.get('theme:darkMode'); + const backGroundUrl = isDarkTheme ? BackgroundDarkSVG : BackgroundLightSVG; + + const noAdminToolTip = i18n.translate('workspace.initial.card.createWorkspace.toolTip', { + defaultMessage: + 'Contact your administrator to create a workspace or to be added to an existing one.', + }); + + const createButton = ( + + {i18n.translate('workspace.initial.card.createWorkspace.button', { + defaultMessage: 'Create Workspace', + })} + + ); + + const cards = ( + + + + <> + {i18n.translate('workspace.initial.card.createWorkspace.description', { + defaultMessage: 'Organize projects by use case in a collaborative workspace.', + })} + + + } + footer={isDashboardAdmin && createButton} + /> + + + + {i18n.translate('workspace.initial.card.tryOpenSearch.footer', { + defaultMessage: 'with Sample Datasets', + })} + + } + /> + + + + {i18n.translate('workspace.initial.card.addData.footer', { + defaultMessage: 'with Getting Started Guide', + })} + + } + /> + + + + {i18n.translate('workspace.initial.card.discoverInsights.footer', { + defaultMessage: 'with Discover', + })} + + } + /> + + + + + + ); + + const content = ( + + + +

+ {i18n.translate('workspace.initial.title', { + defaultMessage: 'Getting started with OpenSearch', + })} +

+ + + + + {i18n.translate('workspace.initial.description', { + defaultMessage: + 'OpenSearch is a flexible, scalable, open-source way to build solutions for data-intensive search and analytics applications. Explore, enrich, and visualize your data, using developer-friendly tools and powerful integrations for machine learning, data processing, and more.', + })} + + + + + + {i18n.translate('workspace.initial.button.openSearch', { + defaultMessage: 'Learn more from documentation and more.', + })} + + + + + + + + +   Explore live demo environment at{' '} + playground.opensearch.org + + + + {cards} + + ); + + return ( + + + + + + + + + + {content} + + + + {i18n.translate('workspace.initial.button.settingsAndSetup', { + defaultMessage: 'Settings and setup', + })} + + + + + + + ); +}; diff --git a/src/plugins/workspace/public/components/workspace_initial_app.tsx b/src/plugins/workspace/public/components/workspace_initial_app.tsx new file mode 100644 index 000000000000..553a41cb5110 --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_initial_app.tsx @@ -0,0 +1,16 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { I18nProvider } from '@osd/i18n/react'; +import { WorkspaceInitial } from './workspace_initial/workspace_initial'; + +export const WorkspaceInitialApp = () => { + return ( + + + + ); +}; diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts index 2fc7d41b50ca..41f779911876 100644 --- a/src/plugins/workspace/public/plugin.test.ts +++ b/src/plugins/workspace/public/plugin.test.ts @@ -40,7 +40,7 @@ describe('Workspace plugin', () => { savedObjectsManagement: savedObjectManagementSetupMock, management: managementPluginMock.createSetupContract(), }); - expect(setupMock.application.register).toBeCalledTimes(4); + expect(setupMock.application.register).toBeCalledTimes(5); expect(WorkspaceClientMock).toBeCalledTimes(1); expect(savedObjectManagementSetupMock.columns.register).toBeCalledTimes(1); }); @@ -53,7 +53,7 @@ describe('Workspace plugin', () => { workspacePlugin.start(coreStart, mockDependencies); coreStart.workspaces.currentWorkspaceId$.next('foo'); expect(coreStart.savedObjects.client.setCurrentWorkspace).toHaveBeenCalledWith('foo'); - expect(setupMock.application.register).toBeCalledTimes(4); + expect(setupMock.application.register).toBeCalledTimes(5); expect(WorkspaceClientMock).toBeCalledTimes(1); expect(workspaceClientMock.enterWorkspace).toBeCalledTimes(0); }); @@ -90,7 +90,7 @@ describe('Workspace plugin', () => { await workspacePlugin.setup(setupMock, { management: managementPluginMock.createSetupContract(), }); - expect(setupMock.application.register).toBeCalledTimes(4); + expect(setupMock.application.register).toBeCalledTimes(5); expect(WorkspaceClientMock).toBeCalledTimes(1); expect(workspaceClientMock.enterWorkspace).toBeCalledWith('workspaceId'); expect(setupMock.getStartServices).toBeCalledTimes(2); @@ -202,6 +202,19 @@ describe('Workspace plugin', () => { ); }); + it('#setup should register workspace initial with a visible application', async () => { + const setupMock = coreMock.createSetup(); + const workspacePlugin = new WorkspacePlugin(); + await workspacePlugin.setup(setupMock, {}); + + expect(setupMock.application.register).toHaveBeenCalledWith( + expect.objectContaining({ + id: 'workspace_initial', + navLinkStatus: AppNavLinkStatus.hidden, + }) + ); + }); + it('#start add workspace detail page to breadcrumbs when start', async () => { const startMock = coreMock.createStart(); const workspaceObject = { diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts index cdebba4afa99..d19ceee6270f 100644 --- a/src/plugins/workspace/public/plugin.ts +++ b/src/plugins/workspace/public/plugin.ts @@ -30,6 +30,7 @@ import { WORKSPACE_CREATE_APP_ID, WORKSPACE_LIST_APP_ID, WORKSPACE_USE_CASES, + WORKSPACE_INITIAL_APP_ID, } from '../common/constants'; import { getWorkspaceIdFromUrl } from '../../../core/public/utils'; import { Services, WorkspaceUseCase } from './types'; @@ -358,6 +359,20 @@ export class WorkspacePlugin }, }); + // workspace initial page + core.application.register({ + id: WORKSPACE_INITIAL_APP_ID, + title: i18n.translate('workspace.settings.workspaceInitial', { + defaultMessage: 'Workspace Initial', + }), + navLinkStatus: AppNavLinkStatus.hidden, + async mount(params: AppMountParameters) { + const { renderInitialApp } = await import('./application'); + return mountWorkspaceApp(params, renderInitialApp); + }, + workspaceAvailability: WorkspaceAvailability.outsideWorkspace, + }); + // workspace list core.application.register({ id: WORKSPACE_LIST_APP_ID, diff --git a/src/plugins/workspace/server/plugin.test.ts b/src/plugins/workspace/server/plugin.test.ts index e3e094b94a46..d5aad60ac88d 100644 --- a/src/plugins/workspace/server/plugin.test.ts +++ b/src/plugins/workspace/server/plugin.test.ts @@ -176,6 +176,63 @@ describe('Workspace server plugin', () => { }); }); + describe('#setUpRedirectPage', () => { + const setupMock = coreMock.createSetup(); + const initializerContextConfigMock = coreMock.createPluginInitializerContext({ + enabled: true, + permission: { + enabled: true, + }, + }); + let registerOnPostAuthFn: OnPostAuthHandler = () => httpServerMock.createResponseFactory().ok(); + setupMock.http.registerOnPostAuth.mockImplementation((fn) => { + registerOnPostAuthFn = fn; + return fn; + }); + const workspacePlugin = new WorkspacePlugin(initializerContextConfigMock); + const response = httpServerMock.createResponseFactory(); + + it('with / request path', async () => { + const request = httpServerMock.createOpenSearchDashboardsRequest({ + path: '/', + }); + await workspacePlugin.setup(setupMock); + const toolKitMock = httpServerMock.createToolkit(); + + await registerOnPostAuthFn(request, response, toolKitMock); + expect(response.redirected).toBeCalledWith({ + headers: { location: '/mock-server-basepath/app/workspace_initial' }, + }); + }); + + it('without / request path', async () => { + const request = httpServerMock.createOpenSearchDashboardsRequest({ + path: '/foo', + }); + await workspacePlugin.setup(setupMock); + const toolKitMock = httpServerMock.createToolkit(); + + await registerOnPostAuthFn(request, response, toolKitMock); + expect(toolKitMock.next).toBeCalledTimes(1); + }); + + it('with more than one workspace', async () => { + const request = httpServerMock.createOpenSearchDashboardsRequest({ + path: '/', + }); + const workspaceSetup = await workspacePlugin.setup(setupMock); + const client = workspaceSetup.client; + jest.spyOn(client, 'list').mockResolvedValue({ + success: true, + result: { total: 1 }, + }); + const toolKitMock = httpServerMock.createToolkit(); + + await registerOnPostAuthFn(request, response, toolKitMock); + expect(toolKitMock.next).toBeCalledTimes(1); + }); + }); + it('#start', async () => { const setupMock = coreMock.createSetup(); const startMock = coreMock.createStart(); diff --git a/src/plugins/workspace/server/plugin.ts b/src/plugins/workspace/server/plugin.ts index 6e7a29322aa0..6d9c46ed9dc8 100644 --- a/src/plugins/workspace/server/plugin.ts +++ b/src/plugins/workspace/server/plugin.ts @@ -22,6 +22,7 @@ import { PRIORITY_FOR_PERMISSION_CONTROL_WRAPPER, WORKSPACE_UI_SETTINGS_CLIENT_WRAPPER_ID, PRIORITY_FOR_WORKSPACE_UI_SETTINGS_WRAPPER, + WORKSPACE_INITIAL_APP_ID, } from '../common/constants'; import { IWorkspaceClientImpl, WorkspacePluginSetup, WorkspacePluginStart } from './types'; import { WorkspaceClient } from './workspace_client'; @@ -108,6 +109,26 @@ export class WorkspacePlugin implements Plugin { + const path = request.url.pathname; + if (path === '/') { + const workspaceListResponse = await this.client?.list( + { request, logger: this.logger }, + { page: 1, perPage: 1 } + ); + if (workspaceListResponse?.success && workspaceListResponse.result.total > 0) { + return toolkit.next(); + } + const basePath = core.http.basePath.serverBasePath; + return response.redirected({ + headers: { location: `${basePath}/app/${WORKSPACE_INITIAL_APP_ID}` }, + }); + } + return toolkit.next(); + }); + } + constructor(initializerContext: PluginInitializerContext) { this.logger = initializerContext.logger.get(); this.globalConfig$ = initializerContext.config.legacy.globalConfig$; @@ -172,6 +193,8 @@ export class WorkspacePlugin implements Plugin { const result = await client.list( { - context, request: req, logger, }, @@ -139,7 +138,6 @@ export function registerRoutes({ const { id } = req.params; const result = await client.get( { - context, request: req, logger, }, @@ -183,7 +181,6 @@ export function registerRoutes({ const result = await client.create( { - context, request: req, logger, }, @@ -211,7 +208,6 @@ export function registerRoutes({ const result = await client.update( { - context, request: req, logger, }, @@ -239,7 +235,6 @@ export function registerRoutes({ const result = await client.delete( { - context, request: req, logger, }, diff --git a/src/plugins/workspace/server/types.ts b/src/plugins/workspace/server/types.ts index 5e88e5acb3ae..b21f31e3accd 100644 --- a/src/plugins/workspace/server/types.ts +++ b/src/plugins/workspace/server/types.ts @@ -32,7 +32,6 @@ export interface WorkspaceFindOptions { export interface IRequestDetail { request: OpenSearchDashboardsRequest; - context: RequestHandlerContext; logger: Logger; }