Skip to content
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.

Sign up for GitHub

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

[Search][Ent Search deprecation] Web Crawler tile points out GH repo instead become disabled #194743

Merged
merged 7 commits into from
Oct 14, 2024
Merged

[Search][Ent Search deprecation] Web Crawler tile points out GH repo instead become disabled #194743

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b7bf13c
Showing Web Crawler card pointing out to GH repo when no ent-search n…
JoseLuisGJ Oct 2, 2024
4d4c9a2
Merge branch 'main' into open-crawler-tile
elasticmachine Oct 4, 2024
793dd87
Crawler empty state points out Source code repo when no ent-search in…
JoseLuisGJ Oct 8, 2024
1417bda
IngestionCard condition content
JoseLuisGJ Oct 8, 2024
5e409c1
Merge branch 'main' into open-crawler-tile
elasticmachine Oct 11, 2024
51dec6a
Removing unused i18n elements
JoseLuisGJ Oct 11, 2024
3abc960
Merge branch 'main' into open-crawler-tile
elasticmachine Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions x-pack/plugins/enterprise_search/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,5 +281,9 @@ export const PLUGIN_ID = 'enterpriseSearch';
export const CONNECTOR_NATIVE_TYPE = 'native';
export const CONNECTOR_CLIENTS_TYPE = 'connector_clients';

export const CRAWLER = {
github_repo: 'https://github.com/elastic/crawler',
};

// TODO remove this once the connector service types are no longer in "example" state
export const EXAMPLE_CONNECTOR_SERVICE_TYPES = ['opentext_documentum'];
45 changes: 32 additions & 13 deletions ...blic/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import { useValues } from 'kea';
import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { CRAWLER } from '../../../../../common/constants';
import { HttpLogic } from '../../../shared/http';
import { GithubIcon } from '../../../shared/icons/github_icon';
import { KibanaLogic } from '../../../shared/kibana';
import { NEW_CRAWLER_PATH } from '../../routes';

Expand Down Expand Up @@ -40,19 +42,36 @@ export const CrawlerEmptyState: React.FC = () => {
</p>
}
actions={
<EuiButton
data-test-subj="entSearchContent-crawlers-emptyState-createCrawlerButton"
data-telemetry-id="entSearchContent-crawlers-emptyState-createCrawlerButton"
color="primary"
disabled={Boolean(errorConnectingMessage)}
fill
iconType="plusInCircle"
onClick={() => KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH)}
>
{i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel', {
defaultMessage: 'New web crawler',
})}
</EuiButton>
Boolean(errorConnectingMessage) ? (
<EuiButton
data-test-subj="entSearchContent-crawlers-emptyState-createCrawlerButton"
data-telemetry-id="entSearchContent-crawlers-emptyState-createCrawlerButton"
color="primary"
fill
iconType={GithubIcon}
href={CRAWLER.github_repo}
>
{i18n.translate(
'xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel',
{
defaultMessage: 'Source code',
}
)}
</EuiButton>
) : (
<EuiButton
data-test-subj="entSearchContent-crawlers-emptyState-createCrawlerButton"
data-telemetry-id="entSearchContent-crawlers-emptyState-createCrawlerButton"
color="primary"
fill
iconType="plusInCircle"
onClick={() => KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH)}
>
{i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel', {
defaultMessage: 'New web crawler',
})}
</EuiButton>
)
}
/>
</EuiPanel>
Expand Down
13 changes: 13 additions & 0 deletions ...pplications/enterprise_search_content/components/shared/ingestion_card/ingestion_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,16 @@ import {
IconType,
} from '@elastic/eui';

import { i18n } from '@kbn/i18n';

import { EuiLinkTo } from '../../../../shared/react_router_helpers';

interface IngestionCardProps {
buttonIcon: IconType;
buttonLabel: string;
description: string;
href?: string;
isBeta?: boolean;
isDisabled?: boolean;
logo: IconType;
onClick?: () => void;
Expand All @@ -37,13 +40,23 @@ export const IngestionCard: React.FC<IngestionCardProps> = ({
description,
href,
isDisabled,
isBeta,
logo,
onClick,
title,
}) => {
return (
<EuiCard
hasBorder
betaBadgeProps={
isBeta
? {
label: i18n.translate('xpack.enterpriseSearch.ingestionCard.betaBadgeLabel', {
defaultMessage: 'Beta',
}),
}
: undefined
}
isDisabled={isDisabled}
textAlign="left"
titleElement="h3"
Expand Down
70 changes: 48 additions & 22 deletions ...pplications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { i18n } from '@kbn/i18n';
import {
ENTERPRISE_SEARCH_CONTENT_PLUGIN,
ENTERPRISE_SEARCH_ELASTICSEARCH_URL,
CRAWLER,
} from '../../../../../common/constants';

import apiLogo from '../../../../assets/images/api_image.png';
Expand All @@ -37,6 +38,7 @@ import { HttpLogic } from '../../../shared/http/http_logic';

import { ConnectorIcon } from '../../../shared/icons/connector';
import { CrawlerIcon } from '../../../shared/icons/crawler';
import { GithubIcon } from '../../../shared/icons/github_icon';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well it is just a duplication, but looks like we already break a lot of rules previously 😬 It can stay. If you want to try already existing one

This file has the export for the same svg x-pack/plugins/enterprise_search/public/assets/client_libraries/index.ts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's weird, the Github icon is not exported in the pack/plugins/enterprise_search/public/assets/client_libraries/index.ts file. But semantically makes sense, it's not a language client. Anyway I tried to import directly this SVG and it doesn't get the Fill color value of the button as it does with the one I'm already consuming. For now I think I will use the one I added, but we should review how we should reuse all these assets in a more efficient way.

import { KibanaLogic } from '../../../shared/kibana';

export const IngestionSelector: React.FC = () => {
Expand Down Expand Up @@ -75,28 +77,52 @@ export const IngestionSelector: React.FC = () => {
</EuiFlexItem>
{productFeatures.hasWebCrawler && (
<EuiFlexItem>
<IngestionCard
buttonLabel={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.crawlerButtonLabel',
{
defaultMessage: 'Crawl URL',
}
)}
buttonIcon={CrawlerIcon}
description={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
{
defaultMessage:
'Discover, extract, and index searchable content from websites and knowledge bases.',
}
)}
href={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_CRAWLER_PATH)}
isDisabled={crawlerDisabled}
logo={crawlerLogo}
title={i18n.translate('xpack.enterpriseSearch.ingestSelector.method.crawler', {
defaultMessage: 'Web Crawler',
})}
/>
{crawlerDisabled ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a small change so it can stay like this. It is possible to do the differences on prop level like this

<IngestionCard 
    buttonLabel={!crawlerDisabled? 
i18n.translate('xpack....', { defaultMessage: 'Crawl URL' }) : 
i18n.translate('xpack....', { defaultMessage: 'Source code' })
}

Or for the ones that are repeating, extract them into a variable

const CRAWLER_LABEL  = i18n.translate('xpack.enterpriseSearch.ingestSelector.method.crawler', {
                  defaultMessage: 'Web Crawler',
                })

// and use it like 

<IngestionCard
    title={CRAWLER_LABEL} ...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good tip, it will look like this:

<IngestionCard
              buttonLabel={
                crawlerDisabled
                  ? i18n.translate(
                      'xpack.enterpriseSearch.ingestSelector.method.sourceCodeButtonLabel',
                      {
                        defaultMessage: 'Source code',
                      }
                    )
                  : i18n.translate(
                      'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
                      {
                        defaultMessage:
                          'Discover, extract, and index searchable content from websites and knowledge bases.',
                      }
                    )
              }
              buttonIcon={crawlerDisabled ? GithubIcon : CrawlerIcon}
              description={i18n.translate(
                'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
                {
                  defaultMessage:
                    'Discover, extract, and index searchable content from websites and knowledge bases.',
                }
              )}
              href={
                crawlerDisabled
                  ? CRAWLER.github_repo
                  : generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_CRAWLER_PATH)
              }
              isBeta={crawlerDisabled}
              logo={crawlerLogo}
              title={i18n.translate('xpack.enterpriseSearch.ingestSelector.method.crawler', {
                defaultMessage: 'Web Crawler',
              })}
            />

<IngestionCard
buttonLabel={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.sourceCodeButtonLabel',
{
defaultMessage: 'Source code',
}
)}
buttonIcon={GithubIcon}
description={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
{
defaultMessage:
'Discover, extract, and index searchable content from websites and knowledge bases.',
}
)}
href={CRAWLER.github_repo}
isBeta
logo={crawlerLogo}
title={i18n.translate('xpack.enterpriseSearch.ingestSelector.method.crawler', {
defaultMessage: 'Web Crawler',
})}
/>
) : (
<IngestionCard
buttonLabel={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.crawlerButtonLabel',
{
defaultMessage: 'Crawl URL',
}
)}
buttonIcon={CrawlerIcon}
description={i18n.translate(
'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
{
defaultMessage:
'Discover, extract, and index searchable content from websites and knowledge bases.',
}
)}
href={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_CRAWLER_PATH)}
logo={crawlerLogo}
title={i18n.translate('xpack.enterpriseSearch.ingestSelector.method.crawler', {
defaultMessage: 'Web Crawler',
})}
/>
)}
</EuiFlexItem>
)}
{productFeatures.hasConnectors && (
Expand Down
32 changes: 32 additions & 0 deletions x-pack/plugins/enterprise_search/public/applications/shared/icons/github_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have one github icon in assets folder you can use this one.

* 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';

export const GithubIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<g clipPath="url(#a)">
<path
fill="currentColor"
d="M8 0C3.582 0 0 3.672 0 8.2c0 3.624 2.292 6.697 5.471 7.781.4.075.546-.178.546-.394 0-.196-.007-.842-.011-1.527-2.225.495-2.695-.967-2.695-.967-.364-.947-.888-1.2-.888-1.2-.727-.508.055-.498.055-.498.803.057 1.226.845 1.226.845.714 1.253 1.873.891 2.328.68.073-.528.28-.89.508-1.094-1.776-.207-3.644-.911-3.644-4.053 0-.896.312-1.627.823-2.2-.082-.21-.357-1.043.079-2.172 0 0 .67-.22 2.2.84A7.441 7.441 0 0 1 8 3.967c.68.003 1.364.094 2.003.277 1.526-1.062 2.198-.841 2.198-.841.438 1.13.162 1.963.08 2.17.513.574.822 1.305.822 2.2 0 3.15-1.87 3.845-3.653 4.048.288.254.543.753.543 1.517 0 1.096-.01 1.98-.01 2.25 0 .219.145.474.55.394C13.71 14.895 16 11.821 16 8.201 16 3.67 12.418 0 8 0Z"
/>
</g>
<defs>
<clipPath id="a">
<path fill="currentColor" d="M0 0h16v16H0z" />
</clipPath>
</defs>
</svg>
);
};