-
Notifications
You must be signed in to change notification settings - Fork 8.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Share Modal #179037
Merged
rshen91
merged 41 commits into
elastic:main
from
eokoneyo:rshen-embed-modal-link-logic-rework
Apr 4, 2024
Merged
Share Modal #179037
Changes from 36 commits
Commits
Show all changes
41 commits
Select commit
Hold shift + click to select a range
75209df
initial commit
rshen91 bd1a7a7
wip
rshen91 9cf504f
working link preview
rshen91 ce80ba8
link
rshen91 9902e8a
tsconfig
rshen91 f26df8a
tsconfig
rshen91 5e96f80
copy link on click
rshen91 cfc5b51
wip
rshen91 4a5f9b6
working on embed modal hooks
rshen91 50752ff
fix embed behavior in url
rshen91 0d20b3b
[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…
kibanamachine 617c54c
design chx
rshen91 de0ffd1
[CI] Auto-commit changed files from 'node scripts/generate codeowners'
kibanamachine b309fe3
fix order of tabs to match figma
rshen91 9198c22
short urls when click copy link
rshen91 1711f0f
add package to i18n
rshen91 1f7c5e7
add padding right to code block
rshen91 c41e945
fix
rshen91 5b84a4f
wip adapt eyos work to pr
rshen91 f6c5a84
wip refactor to use tabbedModal
rshen91 4be2b6d
wip
rshen91 6abb25c
wip for collab
rshen91 114520c
rework implementation for v2 share
eokoneyo 07fdb87
fix issue with switching state within tabbed modal
eokoneyo 95ae238
integrate link and embed modal into modal to receive correct value on…
eokoneyo 6481f73
visual styling for share modal
eokoneyo caab0d3
incorporate work for export tab
eokoneyo 1587c6b
remove kbn-share-modal package
eokoneyo 9f42f17
remove unused share modal impl and related
eokoneyo 09c9517
rework storybook setup to match new component expectation
eokoneyo 00fef70
rework tab modal component
eokoneyo c0cf1e6
lens unsaved state changes
rshen91 7b788ea
Merge remote-tracking branch 'upstream/main' into rshen-embed-modal-l…
rshen91 484fcef
make style optional
rshen91 228487e
[CI] Auto-commit changed files from 'node scripts/generate codeowners'
kibanamachine f8ca1c0
fix id for formatted message in embed
rshen91 da70776
Merge remote-tracking branch 'upstream/main' into rshen-embed-modal-l…
rshen91 d5b0155
check types fix
rshen91 975f43d
Merge branch 'main' into rshen-embed-modal-link-logic-rework
rshen91 d87de2c
remove nulls from tabs
rshen91 f6dfe9d
Merge remote-tracking branch 'refs/remotes/eokoneyo/rshen-embed-modal…
rshen91 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| --- | ||
| id: sharedUX/Page/TabbedModal | ||
| slug: /shared-ux/modal/tabbed | ||
| title: Kibana Tabbed Modal | ||
| description: A component for rendering tabs within a modal. | ||
| tags: ['shared-ux', 'component'] | ||
| date: 2024-04-28 | ||
| --- | ||
|
|
||
| ## API | ||
|
|
||
| | Export | Description | | ||
| |---|---| | | ||
| | `TabbedModal` | component that renders tab content within a modal in kibana. | ||
| | `IModalTabDeclaration` | type definition for defining the content of a modal tab, also provides support to make the tab content controlled and have it's state if needed be managed by the modal. | ||
|
|
||
| ## EUI Promotion Status | ||
|
|
||
| This component is not currently considered for promotion to EUI. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| export { TabbedModal, type IModalTabDeclaration } from './src/tabbed_modal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| module.exports = { | ||
| preset: '@kbn/test', | ||
| rootDir: '../../../..', | ||
| roots: ['<rootDir>/packages/shared-ux/modal/tabbed'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "type": "shared-common", | ||
| "id": "@kbn/shared-ux-tabbed-modal", | ||
| "owner": "@elastic/appex-sharedux" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "name": "@kbn/shared-ux-tabbed-modal", | ||
| "private": true, | ||
| "version": "1.0.0", | ||
| "license": "SSPL-1.0 OR Elastic License 2.0" | ||
| } |
110 changes: 110 additions & 0 deletions
110
packages/shared-ux/modal/tabbed/src/context/index.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React, { type ComponentProps, type ComponentType } from 'react'; | ||
| import { renderHook, act } from '@testing-library/react-hooks'; | ||
| import { useModalContext, ModalContextProvider } from '.'; | ||
|
|
||
| type ModalContextProviderProps = ComponentProps<typeof ModalContextProvider>; | ||
|
|
||
| function createModalContextWrapper<T extends ComponentType>(props: ModalContextProviderProps) { | ||
| return function CreatedWrapper({ children }) { | ||
| return <ModalContextProvider {...props}>{children}</ModalContextProvider>; | ||
| }; | ||
| } | ||
|
|
||
| describe('tabbed modal provider', () => { | ||
| it('creates a default internal state of specific shape', () => { | ||
| const props: ModalContextProviderProps = { | ||
| tabs: [ | ||
| { | ||
| id: 'test', | ||
| name: 'Test', | ||
| }, | ||
| ], | ||
| defaultSelectedTabId: 'test', | ||
| }; | ||
|
|
||
| const { result } = renderHook(useModalContext, { | ||
| wrapper: createModalContextWrapper(props), | ||
| }); | ||
|
|
||
| expect(result.current).toHaveProperty( | ||
| 'tabs', | ||
| ([] as ModalContextProviderProps['tabs']).concat(props.tabs).map((tab) => { | ||
| if (tab.initialState) { | ||
| delete tab.initialState; | ||
| } | ||
|
|
||
| return tab; | ||
| }) | ||
| ); | ||
|
|
||
| expect(result.current).toHaveProperty( | ||
| 'state', | ||
| expect.objectContaining({ | ||
| meta: expect.objectContaining({ selectedTabId: props.defaultSelectedTabId }), | ||
| test: {}, | ||
| }) | ||
| ); | ||
|
|
||
| expect(result.current).toHaveProperty('dispatch', expect.any(Function)); | ||
| }); | ||
|
|
||
| it('invocating the context dispatch function causes state changes for the selected tab state', () => { | ||
| const SUT_DISPATCH_ACTION = { | ||
| type: 'TEST_ACTION', | ||
| payload: 'state_update', | ||
| }; | ||
|
|
||
| const props: ModalContextProviderProps = { | ||
| tabs: [ | ||
| { | ||
| id: 'test', | ||
| name: 'Test', | ||
| reducer: (state = {}, action) => { | ||
| switch (action.type) { | ||
| case SUT_DISPATCH_ACTION.type: | ||
| return { | ||
| ...state, | ||
| sut: action.payload, | ||
| }; | ||
| default: | ||
| return state; | ||
| } | ||
| }, | ||
| }, | ||
| ], | ||
| defaultSelectedTabId: 'test', | ||
| }; | ||
|
|
||
| const { result } = renderHook(useModalContext, { | ||
| wrapper: createModalContextWrapper(props), | ||
| }); | ||
|
|
||
| expect(result.current).toHaveProperty( | ||
| 'state', | ||
| expect.objectContaining({ | ||
| test: {}, | ||
| }) | ||
| ); | ||
|
|
||
| act(() => { | ||
| result.current.dispatch(SUT_DISPATCH_ACTION); | ||
| }); | ||
|
|
||
| expect(result.current).toHaveProperty( | ||
| 'state', | ||
| expect.objectContaining({ | ||
| test: { | ||
| sut: SUT_DISPATCH_ACTION.payload, | ||
| }, | ||
| }) | ||
| ); | ||
| }); | ||
| }); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit