mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
# Backport This will backport the following commits from `main` to `8.12`: - [[Enterprise Search] Fix visual issues with Select a connector page (#173374)](https://github.com/elastic/kibana/pull/173374) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Efe Gürkan YALAMAN","email":"efeguerkan.yalaman@elastic.co"},"sourceCommit":{"committedDate":"2023-12-19T09:15:12Z","message":"[Enterprise Search] Fix visual issues with Select a connector page (#173374)\n\n## Summary\r\n\r\nThis fixes the visual issues that were different in between designs and\r\nimplementation on Select a connector page.\r\n\r\n<img width=\"1041\" alt=\"Screenshot 2023-12-14 at 13 35 27\"\r\nsrc=\"2206dd86-3602-4198-a046-e072478567cf\">\r\n<img width=\"1708\" alt=\"Screenshot 2023-12-14 at 13 35 34\"\r\nsrc=\"9ec093d4-2634-4fa2-aed2-05ab4c6ae737\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [ ] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>","sha":"1095cb25ff0db0d58cfaa9cbfc31ee92155ee8e2","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:EnterpriseSearch","v8.12.0","v8.13.0"],"number":173374,"url":"https://github.com/elastic/kibana/pull/173374","mergeCommit":{"message":"[Enterprise Search] Fix visual issues with Select a connector page (#173374)\n\n## Summary\r\n\r\nThis fixes the visual issues that were different in between designs and\r\nimplementation on Select a connector page.\r\n\r\n<img width=\"1041\" alt=\"Screenshot 2023-12-14 at 13 35 27\"\r\nsrc=\"2206dd86-3602-4198-a046-e072478567cf\">\r\n<img width=\"1708\" alt=\"Screenshot 2023-12-14 at 13 35 34\"\r\nsrc=\"9ec093d4-2634-4fa2-aed2-05ab4c6ae737\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [ ] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>","sha":"1095cb25ff0db0d58cfaa9cbfc31ee92155ee8e2"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173374","number":173374,"mergeCommit":{"message":"[Enterprise Search] Fix visual issues with Select a connector page (#173374)\n\n## Summary\r\n\r\nThis fixes the visual issues that were different in between designs and\r\nimplementation on Select a connector page.\r\n\r\n<img width=\"1041\" alt=\"Screenshot 2023-12-14 at 13 35 27\"\r\nsrc=\"2206dd86-3602-4198-a046-e072478567cf\">\r\n<img width=\"1708\" alt=\"Screenshot 2023-12-14 at 13 35 34\"\r\nsrc=\"9ec093d4-2634-4fa2-aed2-05ab4c6ae737\">\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [ ] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>","sha":"1095cb25ff0db0d58cfaa9cbfc31ee92155ee8e2"}}]}] BACKPORT--> Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
d6e2907755
commit
8ec5588603
3 changed files with 378 additions and 176 deletions
|
|
@ -12,16 +12,16 @@ import { css } from '@emotion/react';
|
|||
import {
|
||||
EuiBadge,
|
||||
EuiButtonIcon,
|
||||
EuiCard,
|
||||
EuiContextMenuItem,
|
||||
EuiContextMenuPanel,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiIcon,
|
||||
EuiLink,
|
||||
EuiPanel,
|
||||
EuiPopover,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiThemeComputed,
|
||||
EuiTitle,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
|
|
@ -30,7 +30,6 @@ import { i18n } from '@kbn/i18n';
|
|||
|
||||
import { BETA_LABEL, NATIVE_LABEL, CONNECTOR_CLIENT_LABEL } from '../../../../shared/constants';
|
||||
|
||||
import './connector_checkable.scss';
|
||||
import { PlatinumLicensePopover } from '../../shared/platinum_license_popover/platinum_license_popover';
|
||||
|
||||
export interface ConnectorCheckableProps {
|
||||
|
|
@ -45,6 +44,22 @@ export interface ConnectorCheckableProps {
|
|||
showNativeBadge: boolean;
|
||||
}
|
||||
|
||||
const getCss = (
|
||||
euiTheme: EuiThemeComputed,
|
||||
isDisabled: ConnectorCheckableProps['isDisabled'],
|
||||
showNativeBadge: ConnectorCheckableProps['showNativeBadge']
|
||||
) => {
|
||||
return css`
|
||||
${showNativeBadge &&
|
||||
`box-shadow: 8px 9px 0px -1px ${euiTheme.colors.lightestShade},
|
||||
8px 9px 0px 0px ${euiTheme.colors.lightShade};`}
|
||||
${isDisabled &&
|
||||
`background-color: ${euiTheme.colors.lightestShade};
|
||||
color: ${euiTheme.colors.disabledText};
|
||||
`}
|
||||
`;
|
||||
};
|
||||
|
||||
export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
|
||||
isDisabled,
|
||||
documentationUrl,
|
||||
|
|
@ -60,175 +75,176 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
|
|||
const [isLicensePopoverOpen, setIsLicensePopoverOpen] = useState(false);
|
||||
const [isNativePopoverOpen, setIsNativePopoverOpen] = useState(false);
|
||||
return (
|
||||
<EuiCard
|
||||
{...(!isDisabled
|
||||
? {
|
||||
onClick: () => {
|
||||
if (isDisabled) return;
|
||||
onConnectorSelect(showNativeBadge);
|
||||
},
|
||||
}
|
||||
: {})}
|
||||
hasBorder
|
||||
<EuiPanel
|
||||
onClick={() => {
|
||||
if (isDisabled && showNativeBadge) return;
|
||||
onConnectorSelect(showNativeBadge);
|
||||
}}
|
||||
id={`checkableCard-${serviceType}`}
|
||||
css={
|
||||
showNativeBadge
|
||||
? css`
|
||||
box-shadow: 8px 9px 0px -1px ${euiTheme.colors.lightestShade},
|
||||
8px 9px 0px 0px ${euiTheme.colors.lightShade};
|
||||
`
|
||||
: undefined
|
||||
}
|
||||
layout="horizontal"
|
||||
css={getCss(euiTheme, isDisabled, showNativeBadge)}
|
||||
hasBorder
|
||||
data-telemetry-id={`entSearchContent-connector-selectConnector-${serviceType}-select`}
|
||||
icon={iconType ? <EuiIcon type={iconType} size="l" /> : undefined}
|
||||
title={
|
||||
<EuiFlexGroup gutterSize="s" responsive={false} justifyContent="spaceAround">
|
||||
<EuiFlexItem grow>
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
{isDisabled ? (
|
||||
<EuiText color="disabledText" size="xs">
|
||||
<h3>{name}</h3>
|
||||
</EuiText>
|
||||
) : (
|
||||
<EuiTitle size="xs">
|
||||
<h2>{name}</h2>
|
||||
</EuiTitle>
|
||||
>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>
|
||||
{iconType ? <EuiIcon type={iconType} size="l" /> : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="s" responsive={false} justifyContent="spaceAround">
|
||||
<EuiFlexItem grow>
|
||||
<EuiFlexGroup gutterSize="s" alignItems="flexStart" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
{isDisabled ? (
|
||||
<EuiText color="disabledText" size="xs">
|
||||
<h3>{name}</h3>
|
||||
</EuiText>
|
||||
) : (
|
||||
<EuiTitle size="xs">
|
||||
<h2>{name}</h2>
|
||||
</EuiTitle>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
{isDisabled && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<PlatinumLicensePopover
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
aria-label={i18n.translate(
|
||||
'xpack.enterpriseSearch.content.newIndex.selectConnector.openPopoverLabel',
|
||||
{
|
||||
defaultMessage: 'Open licensing popover',
|
||||
}
|
||||
)}
|
||||
iconType="questionInCircle"
|
||||
onClick={(event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setIsLicensePopoverOpen(!isLicensePopoverOpen);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
closePopover={() => setIsLicensePopoverOpen(false)}
|
||||
isPopoverOpen={isLicensePopoverOpen}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
{showNativeBadge && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiPopover
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
display="base"
|
||||
isDisabled={isDisabled}
|
||||
color="primary"
|
||||
iconType="boxesHorizontal"
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setIsNativePopoverOpen(true);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
isOpen={isNativePopoverOpen}
|
||||
closePopover={() => {
|
||||
setIsNativePopoverOpen(false);
|
||||
}}
|
||||
>
|
||||
<EuiContextMenuPanel
|
||||
size="xs"
|
||||
items={[
|
||||
<EuiContextMenuItem
|
||||
key="native"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onConnectorSelect(true);
|
||||
}}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorCheckable.setupANativeConnectorContextMenuItemLabel',
|
||||
{ defaultMessage: 'Setup a Native Connector' }
|
||||
)}
|
||||
</EuiContextMenuItem>,
|
||||
<EuiContextMenuItem
|
||||
key="client"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onConnectorSelect(false);
|
||||
}}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorCheckable.setupAConnectorClientContextMenuItemLabel',
|
||||
{ defaultMessage: 'Setup a Connector Client' }
|
||||
)}
|
||||
</EuiContextMenuItem>,
|
||||
]}
|
||||
/>
|
||||
</EuiPopover>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
{isDisabled && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<PlatinumLicensePopover
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
aria-label={i18n.translate(
|
||||
'xpack.enterpriseSearch.content.newIndex.selectConnector.openPopoverLabel',
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" gutterSize="xs">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge>
|
||||
<EuiText size="xs">
|
||||
{showNativeBadge ? NATIVE_LABEL : CONNECTOR_CLIENT_LABEL}
|
||||
</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
{isBeta && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow">
|
||||
<EuiText size="xs">{BETA_LABEL}</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{isTechPreview && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow" iconType="beaker">
|
||||
<EuiText size="xs">
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.techPreviewLabel',
|
||||
{
|
||||
defaultMessage: 'Tech preview',
|
||||
}
|
||||
)}
|
||||
</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
{documentationUrl && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText size="xs">
|
||||
<EuiLink target="_blank" href={documentationUrl}>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.documentationLinkLabel',
|
||||
{
|
||||
defaultMessage: 'Open licensing popover',
|
||||
defaultMessage: 'Documentation',
|
||||
}
|
||||
)}
|
||||
iconType="questionInCircle"
|
||||
onClick={() => setIsLicensePopoverOpen(!isLicensePopoverOpen)}
|
||||
/>
|
||||
}
|
||||
closePopover={() => setIsLicensePopoverOpen(false)}
|
||||
isPopoverOpen={isLicensePopoverOpen}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
{showNativeBadge && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiPopover
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
display="base"
|
||||
isDisabled={isDisabled}
|
||||
color="primary"
|
||||
iconType="boxesHorizontal"
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setIsNativePopoverOpen(true);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
isOpen={isNativePopoverOpen}
|
||||
closePopover={() => {
|
||||
setIsNativePopoverOpen(false);
|
||||
}}
|
||||
>
|
||||
<EuiContextMenuPanel
|
||||
size="xs"
|
||||
items={[
|
||||
<EuiContextMenuItem
|
||||
key="native"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onConnectorSelect(true);
|
||||
}}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorCheckable.setupANativeConnectorContextMenuItemLabel',
|
||||
{ defaultMessage: 'Setup a Native Connector' }
|
||||
)}
|
||||
</EuiContextMenuItem>,
|
||||
<EuiContextMenuItem
|
||||
key="client"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onConnectorSelect(false);
|
||||
}}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorCheckable.setupAConnectorClientContextMenuItemLabel',
|
||||
{ defaultMessage: 'Setup a Connector Client' }
|
||||
)}
|
||||
</EuiContextMenuItem>,
|
||||
]}
|
||||
/>
|
||||
</EuiPopover>
|
||||
</EuiLink>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
}
|
||||
>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiFlexGroup direction="column" gutterSize="m">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge isDisabled={isDisabled}>
|
||||
<EuiText size="xs">
|
||||
{showNativeBadge ? NATIVE_LABEL : CONNECTOR_CLIENT_LABEL}
|
||||
</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
{isBeta && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow" isDisabled={isDisabled}>
|
||||
<EuiText size="xs">{BETA_LABEL}</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{isTechPreview && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow" iconType="beaker" isDisabled={isDisabled}>
|
||||
<EuiText size="xs">
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.techPreviewLabel',
|
||||
{
|
||||
defaultMessage: 'Tech preview',
|
||||
}
|
||||
)}
|
||||
</EuiText>
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
{documentationUrl && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText size="xs">
|
||||
<EuiLink target="_blank" href={documentationUrl}>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.documentationLinkLabel',
|
||||
{
|
||||
defaultMessage: 'Documentation',
|
||||
}
|
||||
)}
|
||||
</EuiLink>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</EuiCard>
|
||||
</EuiPanel>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
/*
|
||||
* 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, { useState } from 'react';
|
||||
|
||||
import {
|
||||
EuiBadge,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiIcon,
|
||||
EuiPanel,
|
||||
EuiPopover,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import connectorLogo from '../../../../../assets/source_icons/network_drive.svg';
|
||||
|
||||
const nativePopoverPanels = [
|
||||
{
|
||||
description: i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorDescriptionBadge.native.chooseADataSourceLabel',
|
||||
{ defaultMessage: "Choose a data source you'd like to sync" }
|
||||
),
|
||||
icons: [<EuiIcon type="documents" />],
|
||||
id: 'native-choose-source',
|
||||
},
|
||||
{
|
||||
description: i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorDescriptionBadge.native.configureConnectorLabel',
|
||||
{ defaultMessage: 'Configure your connector using our Kibana UI' }
|
||||
),
|
||||
icons: [<EuiIcon type={connectorLogo} />, <EuiIcon type="logoElastic" />],
|
||||
id: 'native-configure-connector',
|
||||
},
|
||||
];
|
||||
|
||||
const connectorClientPopoverPanels = [
|
||||
{
|
||||
description: i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorDescriptionBadge.client.chooseADataSourceLabel',
|
||||
{ defaultMessage: "Choose a data source you'd like to sync" }
|
||||
),
|
||||
icons: [<EuiIcon type="documents" />],
|
||||
id: 'client-choose-source',
|
||||
},
|
||||
{
|
||||
description: i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorDescriptionBadge.client.configureConnectorLabel',
|
||||
{
|
||||
defaultMessage:
|
||||
'Deploy connector code on your own infrastructure by running from source, or using Docker',
|
||||
}
|
||||
),
|
||||
icons: [
|
||||
<EuiIcon type={connectorLogo} />,
|
||||
<EuiIcon type="sortRight" />,
|
||||
<EuiIcon type="launch" />,
|
||||
],
|
||||
id: 'client-deploy',
|
||||
},
|
||||
{
|
||||
description: i18n.translate(
|
||||
'xpack.enterpriseSearch.connectorDescriptionBadge.client.enterDetailsLabel',
|
||||
{
|
||||
defaultMessage: 'Enter access and connection details for your data source',
|
||||
}
|
||||
),
|
||||
icons: [
|
||||
<EuiIcon type="documents" />,
|
||||
<EuiIcon type="sortRight" />,
|
||||
<EuiIcon type={connectorLogo} />,
|
||||
<EuiIcon type="sortRight" />,
|
||||
<EuiIcon type="logoElastic" />,
|
||||
],
|
||||
id: 'client-configure-connector',
|
||||
},
|
||||
];
|
||||
|
||||
export interface ConnectorDescriptionBadgeProps {
|
||||
isNative: boolean;
|
||||
}
|
||||
|
||||
export const ConnectorDescriptionBadge: React.FC<ConnectorDescriptionBadgeProps> = ({
|
||||
isNative,
|
||||
}) => {
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const panels = isNative ? nativePopoverPanels : connectorClientPopoverPanels;
|
||||
return (
|
||||
<EuiPopover
|
||||
button={
|
||||
<EuiBadge
|
||||
iconSide="right"
|
||||
iconType="iInCircle"
|
||||
onClick={() => setIsPopoverOpen(true)}
|
||||
onClickAriaLabel={i18n.translate(
|
||||
'xpack.enterpriseSearch.selectConnector.badgeOnClick.ariaLabel',
|
||||
{
|
||||
defaultMessage: 'Click to open connector explanation popover',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isNative
|
||||
? i18n.translate('xpack.enterpriseSearch.selectConnector.nativeBadgeLabel', {
|
||||
defaultMessage: 'Native',
|
||||
})
|
||||
: i18n.translate('xpack.enterpriseSearch.selectConnector.connectorClientBadgeLabel', {
|
||||
defaultMessage: 'Connector client',
|
||||
})}
|
||||
</EuiBadge>
|
||||
}
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={() => {
|
||||
setIsPopoverOpen(false);
|
||||
}}
|
||||
>
|
||||
<EuiPanel hasBorder={false} hasShadow={false}>
|
||||
<EuiFlexGroup>
|
||||
{panels.map((panel) => {
|
||||
return (
|
||||
<EuiFlexItem grow={false} key={panel.id}>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
gutterSize="s"
|
||||
style={{ maxWidth: 240 }}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup responsive={false} gutterSize="s">
|
||||
{panel.icons.map((icon, index) => (
|
||||
<EuiFlexItem grow={false} key={index}>
|
||||
{icon}
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText size="s" grow={false} textAlign="center">
|
||||
<p>{panel.description}</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
})}
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiPopover>
|
||||
);
|
||||
};
|
||||
|
|
@ -13,8 +13,8 @@ import { css } from '@emotion/react';
|
|||
import { useValues } from 'kea';
|
||||
|
||||
import {
|
||||
EuiBadge,
|
||||
EuiButton,
|
||||
EuiCallOut,
|
||||
EuiFacetButton,
|
||||
EuiFacetGroup,
|
||||
EuiFieldSearch,
|
||||
|
|
@ -32,6 +32,7 @@ import {
|
|||
} from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
||||
import {
|
||||
CONNECTOR_CLIENTS_TYPE,
|
||||
|
|
@ -55,6 +56,7 @@ import { CONNECTORS } from '../../search_index/connector/constants';
|
|||
import { baseBreadcrumbs } from '../../search_indices';
|
||||
|
||||
import { ConnectorCheckable } from './connector_checkable';
|
||||
import { ConnectorDescriptionBadge } from './connector_description_badge_popout';
|
||||
|
||||
export type ConnectorFilter = typeof CONNECTOR_NATIVE_TYPE | typeof CONNECTOR_CLIENTS_TYPE;
|
||||
|
||||
|
|
@ -108,7 +110,12 @@ export const SelectConnector: React.FC = () => {
|
|||
|
||||
return (
|
||||
<EnterpriseSearchContentPageTemplate
|
||||
pageChrome={[...baseBreadcrumbs, 'Select connector']}
|
||||
pageChrome={[
|
||||
...baseBreadcrumbs,
|
||||
i18n.translate('xpack.enterpriseSearch.content.indices.selectConnector.breadcrumb', {
|
||||
defaultMessage: 'Select connector',
|
||||
}),
|
||||
]}
|
||||
pageViewTelemetry="select_connector"
|
||||
isLoading={false}
|
||||
pageHeader={{
|
||||
|
|
@ -210,11 +217,7 @@ export const SelectConnector: React.FC = () => {
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiBadge iconSide="right" iconType="iInCircle">
|
||||
{i18n.translate('xpack.enterpriseSearch.selectConnector.nativeBadgeLabel', {
|
||||
defaultMessage: 'Native',
|
||||
})}
|
||||
</EuiBadge>
|
||||
<ConnectorDescriptionBadge isNative />
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText size="xs" grow={false}>
|
||||
<p>
|
||||
|
|
@ -248,12 +251,7 @@ export const SelectConnector: React.FC = () => {
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiBadge iconSide="right" iconType="iInCircle">
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.selectConnector.connectorClientBadgeLabel',
|
||||
{ defaultMessage: 'Connector client' }
|
||||
)}
|
||||
</EuiBadge>
|
||||
<ConnectorDescriptionBadge isNative={false} />
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText size="xs" grow={false}>
|
||||
<p>
|
||||
|
|
@ -327,6 +325,41 @@ export const SelectConnector: React.FC = () => {
|
|||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGrid>
|
||||
{!hasNativeAccess && useNativeFilter && (
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<EuiCallOut
|
||||
size="m"
|
||||
title={i18n.translate(
|
||||
'xpack.enterpriseSearch.content.indices.selectConnector.cloudCallout.title',
|
||||
{
|
||||
defaultMessage: 'Elastic Cloud',
|
||||
}
|
||||
)}
|
||||
iconType="iInCircle"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.content.indices.selectConnector.cloudCallout.description"
|
||||
defaultMessage="Native connectors are hosted on Elastic Cloud. Get started with a free day trial."
|
||||
/>
|
||||
</p>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill
|
||||
href="https://www.elastic.co/cloud/cloud-trial-overview"
|
||||
iconType="popout"
|
||||
iconSide="right"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.content.indices.selectConnector.cloudCallout.trialLink"
|
||||
defaultMessage="Elastic Cloud Trial"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiCallOut>
|
||||
</>
|
||||
)}
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||
<EuiFlexItem>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue