forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Search] Moving search-empty-prompt to a shared package (elastic#204545)
## Summary The goal for this PR is to move the `search-empty-propmpt` we use as a Empty states and coming soon pages in Serverless to a shared package in order to be able to reuse this layout and some parts of the content either in Stack or Serverless. After merging this PR, next one will bring this content to Stack: [[Search][Stack] Web Crawlers coming soon pages](elastic#204768) References: - [Packages / Internal Dependency Management](https://docs.elastic.dev/kibana-dev-docs/ops/packages) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
3 people
authored
Dec 19, 2024
1 parent
5599174
commit 4f4772f
Showing
25 changed files
with
956 additions
and
960 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
27 changes: 27 additions & 0 deletions
27
x-pack/packages/search/shared_ui/src/connector_icon/connector_icon.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,27 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiToolTip, EuiIcon } from '@elastic/eui'; | ||
|
|
||
| interface ConnectorIconProps { | ||
| name: string; | ||
| serviceType: string; | ||
| iconPath?: string; | ||
| showTooltip?: boolean; | ||
| } | ||
|
|
||
| export const ConnectorIcon: React.FC<ConnectorIconProps> = ({ | ||
| name, | ||
| serviceType, | ||
| iconPath, | ||
| showTooltip = true, | ||
| }) => { | ||
| const icon = <EuiIcon size="l" title={name} id={serviceType} type={iconPath || 'defaultIcon'} />; | ||
|
|
||
| return showTooltip ? <EuiToolTip content={name}>{icon}</EuiToolTip> : icon; | ||
| }; |
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,8 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export * from './connector_icon'; |
46 changes: 46 additions & 0 deletions
46
...ages/search/shared_ui/src/decorative_horizontal_stepper/decorative_horizontal_stepper.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,46 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiStepsHorizontal, EuiStepsHorizontalProps } from '@elastic/eui'; | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| interface DecorativeHorizontalStepperProps { | ||
| stepCount?: number; | ||
| } | ||
|
|
||
| export const DecorativeHorizontalStepper: React.FC<DecorativeHorizontalStepperProps> = ({ | ||
| stepCount = 2, | ||
| }) => { | ||
| // Generate the steps dynamically based on the stepCount prop | ||
| const horizontalSteps: EuiStepsHorizontalProps['steps'] = Array.from( | ||
| { length: stepCount }, | ||
| (_, index) => ({ | ||
| title: '', | ||
| status: 'incomplete', | ||
| onClick: () => {}, | ||
| }) | ||
| ); | ||
|
|
||
| return ( | ||
| /* This is a presentational component, not intended for user interaction: | ||
| pointer-events: none, prevents user interaction with the component. | ||
| inert prevents click, focus, and other interactive events, removing it from the tab order. | ||
| role="presentation" indicates that this component is purely decorative and not interactive for assistive technologies. | ||
| Together, these attributes help ensure the component is accesible. */ | ||
| <EuiStepsHorizontal | ||
| css={css` | ||
| pointer-events: none; | ||
| `} | ||
| steps={horizontalSteps} | ||
| size="s" | ||
| role="presentation" | ||
| // @ts-ignore due to React 18 and TypeScript doesn't have native HTML inert attribute support yet | ||
| inert="" | ||
| /> | ||
| ); | ||
| }; |
7 changes: 7 additions & 0 deletions
7
x-pack/packages/search/shared_ui/src/decorative_horizontal_stepper/index.ts
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,7 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| export * from './decorative_horizontal_stepper'; |
8 changes: 8 additions & 0 deletions
8
x-pack/packages/search/shared_ui/src/search_empty_prompt/index.ts
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,8 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export * from './search_empty_prompt'; |
90 changes: 90 additions & 0 deletions
90
x-pack/packages/search/shared_ui/src/search_empty_prompt/search_empty_prompt.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,90 @@ | ||
| /* | ||
| * 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; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiPanel, | ||
| EuiIcon, | ||
| EuiTitle, | ||
| EuiText, | ||
| EuiButtonEmpty, | ||
| EuiBadge, | ||
| } from '@elastic/eui'; | ||
|
|
||
| interface BackButtonProps { | ||
| label: string; | ||
| onClickBack: () => void; | ||
| } | ||
| interface SearchEmptyPromptProps { | ||
| actions?: React.ReactNode; | ||
| backButton?: BackButtonProps; | ||
| body?: React.ReactNode; | ||
| description?: string; | ||
| icon?: string | React.JSXElementConstructor<any>; | ||
| isComingSoon?: boolean; | ||
| comingSoonLabel?: string; | ||
| title: string; | ||
| } | ||
|
|
||
| export const SearchEmptyPrompt: React.FC<SearchEmptyPromptProps> = ({ | ||
| actions, | ||
| backButton, | ||
| body, | ||
| description, | ||
| icon, | ||
| isComingSoon, | ||
| comingSoonLabel, | ||
| title, | ||
| }) => { | ||
| return ( | ||
| <EuiPanel paddingSize="l" hasShadow={false} hasBorder> | ||
| <EuiFlexGroup alignItems="center" justifyContent="center" direction="column" gutterSize="l"> | ||
| {backButton && ( | ||
| <EuiFlexItem> | ||
| <EuiButtonEmpty | ||
| data-test-subj="serverlessSearchElasticManagedWebCrawlerEmptyBackButton" | ||
| iconType="arrowLeft" | ||
| onClick={backButton.onClickBack} | ||
| > | ||
| {backButton.label} | ||
| </EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| )} | ||
| {icon && ( | ||
| <EuiFlexItem> | ||
| <EuiIcon size="xxl" type={icon} /> | ||
| </EuiFlexItem> | ||
| )} | ||
| <EuiFlexItem> | ||
| <EuiTitle> | ||
| <h2>{title}</h2> | ||
| </EuiTitle> | ||
| </EuiFlexItem> | ||
| {isComingSoon && ( | ||
| <EuiFlexItem> | ||
| <EuiBadge color="accent">{comingSoonLabel}</EuiBadge> | ||
| </EuiFlexItem> | ||
| )} | ||
| {description && ( | ||
| <EuiFlexItem> | ||
| <EuiText textAlign="center" color="subdued"> | ||
| <p>{description}</p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| )} | ||
| {body && <>{body}</>} | ||
| {actions && ( | ||
| <EuiFlexGroup direction="row" gutterSize="m"> | ||
| {actions} | ||
| </EuiFlexGroup> | ||
| )} | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| ); | ||
| }; |
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
Oops, something went wrong.