-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add tooltip Signed-off-by: suzhou <[email protected]> * feat: fix json order Signed-off-by: suzhou <[email protected]> * feat: update containers Signed-off-by: suzhou <[email protected]> * feat: update unit test Signed-off-by: suzhou <[email protected]> * feat: update unit test Signed-off-by: suzhou <[email protected]> * feat: update function test Signed-off-by: suzhou <[email protected]> * fix: table selection when reload table Signed-off-by: suzhou <[email protected]> * feat: update function test case Signed-off-by: suzhou <[email protected]> Signed-off-by: suzhou <[email protected]>
- Loading branch information
1 parent
7e717cf
commit e93d5f9
Showing
25 changed files
with
1,488 additions
and
1,159 deletions.
There are no files selected for viewing
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
32 changes: 32 additions & 0 deletions
32
public/components/EuiToolTipWrapper/EuiToolTipWrapper.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,32 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React from "react"; | ||
| import { render, waitFor, act } from "@testing-library/react"; | ||
| import { fireEvent } from "@testing-library/dom"; | ||
| import EuiToolTipWrapper from "./index"; | ||
|
|
||
| const WrappedInput = EuiToolTipWrapper((props: any) => <input {...props} />); | ||
|
|
||
| describe("<FormGenerator /> spec", () => { | ||
| it("render the component", async () => { | ||
| render(<WrappedInput />); | ||
| await waitFor(() => {}); | ||
| expect(document.body.children).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("render the error", async () => { | ||
| const { queryByText, container } = render(<WrappedInput disabledReason="test error" disabled data-test-subj="test" />); | ||
| const anchorDOM = container.querySelector(".euiToolTipAnchor") as Element; | ||
| await act(async () => { | ||
| await fireEvent.mouseOver(anchorDOM, { | ||
| bubbles: true, | ||
| }); | ||
| }); | ||
| await waitFor(() => { | ||
| expect(queryByText("test error")).not.toBeNull(); | ||
| }); | ||
| }); | ||
| }); |
13 changes: 13 additions & 0 deletions
13
public/components/EuiToolTipWrapper/__snapshots__/EuiToolTipWrapper.test.tsx.snap
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 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<FormGenerator /> spec render the component 1`] = ` | ||
| HTMLCollection [ | ||
| <div> | ||
| <span | ||
| class="euiToolTipAnchor euiToolTipAnchor--displayBlock" | ||
| > | ||
| <input /> | ||
| </span> | ||
| </div>, | ||
| ] | ||
| `; |
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,79 @@ | ||
| import React, { forwardRef } from "react"; | ||
| import { EuiToolTip } from "@elastic/eui"; | ||
|
|
||
| interface IEuiToolTipWrapperOptions { | ||
| disabledKey?: string; | ||
| } | ||
|
|
||
| export interface IEuiToolTipWrapperProps { | ||
| disabledReason?: | ||
| | string | ||
| | { | ||
| visible: boolean; | ||
| message: string; | ||
| }[]; | ||
| } | ||
|
|
||
| export default function EuiToolTipWrapper<T>( | ||
| Component: React.ComponentType<T>, | ||
| options?: IEuiToolTipWrapperOptions | ||
| ): React.ComponentType<T & IEuiToolTipWrapperProps> { | ||
| return forwardRef(({ disabledReason, children, ...others }, ref) => { | ||
| const finalOptions: Required<IEuiToolTipWrapperOptions> = { | ||
| ...{ | ||
| disabledKey: "disabled", | ||
| }, | ||
| ...options, | ||
| }; | ||
| let formattedReason: IEuiToolTipWrapperProps["disabledReason"]; | ||
| if (typeof disabledReason === "string") { | ||
| formattedReason = [ | ||
| { | ||
| visible: true, | ||
| message: disabledReason, | ||
| }, | ||
| ]; | ||
| } else { | ||
| formattedReason = disabledReason; | ||
| } | ||
| formattedReason = formattedReason?.filter((item) => item.visible); | ||
| const propsDisabled = (others as Record<string, any>)[finalOptions.disabledKey]; | ||
| const disabled = propsDisabled === undefined ? !!formattedReason?.length : propsDisabled; | ||
| const finalProps: IEuiToolTipWrapperProps = { | ||
| ...others, | ||
| [finalOptions.disabledKey]: disabled, | ||
| }; | ||
| return ( | ||
| <EuiToolTip | ||
| content={ | ||
| disabled && formattedReason?.length ? ( | ||
| <> | ||
| This field is disabled because: | ||
| <ol> | ||
| {formattedReason?.map((item, index) => ( | ||
| <li style={{ display: "flex" }} key={item.message}> | ||
| <span | ||
| style={{ | ||
| width: "1.5em", | ||
| textAlign: "right", | ||
| }} | ||
| > | ||
| {index + 1}. | ||
| </span> | ||
| <span>{item.message}</span> | ||
| </li> | ||
| ))} | ||
| </ol> | ||
| </> | ||
| ) : undefined | ||
| } | ||
| display="block" | ||
| position="right" | ||
| > | ||
| <> | ||
| <Component {...(finalProps as T)} ref={ref} /> | ||
| </> | ||
| </EuiToolTip> | ||
| ); | ||
| }) as React.ComponentType<T & IEuiToolTipWrapperProps>; | ||
| } |
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
37 changes: 25 additions & 12 deletions
37
public/components/FormGenerator/built_in_components/index.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 |
|---|---|---|
| @@ -1,20 +1,33 @@ | ||
| import React, { forwardRef } from "react"; | ||
| import { EuiFieldNumber, EuiFieldText, EuiSwitch } from "@elastic/eui"; | ||
| import EuiToolTipWrapper, { IEuiToolTipWrapperProps } from "../../EuiToolTipWrapper"; | ||
|
|
||
| type ComponentMapEnum = "Input" | "Number" | "Switch"; | ||
|
|
||
| const componentMap: Record<ComponentMapEnum, React.FC<{ onChange: (val: any) => void; value?: any }>> = { | ||
| Input: forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => ( | ||
| <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} {...others} /> | ||
| )), | ||
| Number: forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => ( | ||
| <EuiFieldNumber inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} /> | ||
| )), | ||
| Switch: forwardRef(({ value, onChange, ...others }, ref: React.Ref<any>) => ( | ||
| <div ref={ref}> | ||
| <EuiSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} /> | ||
| </div> | ||
| )), | ||
| export interface IFieldComponentProps extends IEuiToolTipWrapperProps { | ||
| onChange: (val: IFieldComponentProps["value"]) => void; | ||
| value?: any; | ||
| [key: string]: any; | ||
| } | ||
|
|
||
| const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponentProps>> = { | ||
| Input: EuiToolTipWrapper( | ||
| forwardRef(({ onChange, value, disabledReason, disabled, ...others }, ref: React.Ref<HTMLInputElement>) => ( | ||
| <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} disabled={disabled} {...others} /> | ||
| )) as React.ComponentType<IFieldComponentProps> | ||
| ), | ||
| Number: EuiToolTipWrapper( | ||
| forwardRef(({ onChange, value, ...others }, ref: React.Ref<HTMLInputElement>) => ( | ||
| <EuiFieldNumber inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} /> | ||
| )) as React.ComponentType<IFieldComponentProps> | ||
| ), | ||
| Switch: EuiToolTipWrapper( | ||
| forwardRef(({ value, onChange, ...others }, ref: React.Ref<any>) => ( | ||
| <div ref={ref}> | ||
| <EuiSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} /> | ||
| </div> | ||
| )) as React.ComponentType<IFieldComponentProps> | ||
| ), | ||
| }; | ||
|
|
||
| export default componentMap; |
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
Oops, something went wrong.