Skip to content

Commit

Permalink
[Search][Connectors] Validating connectors name (elastic#198483)
Browse files Browse the repository at this point in the history 
## Summary

Validating connectors name field before letting press Generate config or
Next.

![CleanShot 2024-10-31 at 10 36
26](https://github.com/user-attachments/assets/3a9a1d93-89a5-425f-a932-666c59a7019c)
  • Loading branch information
@JoseLuisGJ
JoseLuisGJ authored Oct 31, 2024
1 parent 14fa363 commit 7c9bf00
Showing 1 changed file with 80 additions and 9 deletions.
89 changes: 80 additions & 9 deletions ...lications/enterprise_search_content/components/connectors/create_connector/start_step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
import { i18n } from '@kbn/i18n';

import * as Constants from '../../../../shared/constants';
import { isValidIndexName } from '../../../utils/validate_index_name';
import { GeneratedConfigFields } from '../../connector_detail/components/generated_config_fields';

import { ConnectorViewLogic } from '../../connector_detail/connector_view_logic';
Expand Down Expand Up @@ -71,6 +72,18 @@ export const StartStep: React.FC<StartStepProps> = ({
setRawName(e.target.value);
};

const formError = isValidIndexName(rawName)
? error
: i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.euiFormRow.nameInputHelpText.lineOne',
{
defaultMessage: '{connectorName} is an invalid index name',
values: {
connectorName: rawName,
},
}
);

return (
<EuiForm component="form" id="enterprise-search-create-connector">
<EuiFlexGroup gutterSize="m" direction="column">
Expand Down Expand Up @@ -100,6 +113,22 @@ export const StartStep: React.FC<StartStepProps> = ({
'xpack.enterpriseSearch.createConnector.startStep.euiFormRow.connectorNameLabel',
{ defaultMessage: 'Connector name' }
)}
helpText={
<>
<EuiText size="xs" grow={false} color="danger">
{formError}
</EuiText>
<EuiText size="xs" grow={false}>
{i18n.translate(
'xpack.enterpriseSearch.startStep.namesShouldBeLowercaseTextLabel',
{
defaultMessage:
'The connector name should be lowercase and cannot contain spaces or special characters.',
}
)}
</EuiText>
</>
}
>
<EuiFieldText
data-test-subj="enterpriseSearchStartStepFieldText"
Expand Down Expand Up @@ -128,6 +157,14 @@ export const StartStep: React.FC<StartStepProps> = ({
'xpack.enterpriseSearch.createConnector.startStep.euiFormRow.descriptionLabel',
{ defaultMessage: 'Description' }
)}
labelAppend={
<EuiText size="xs">
{i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.euiFormRow.descriptionLabelAppend',
{ defaultMessage: 'Optional' }
)}
</EuiText>
}
>
<EuiFieldText
data-test-subj="enterpriseSearchStartStepFieldText"
Expand Down Expand Up @@ -205,9 +242,17 @@ export const StartStep: React.FC<StartStepProps> = ({
hasShadow={false}
hasBorder
paddingSize="l"
color={selectedConnector?.name ? 'plain' : 'subdued'}
color={
selectedConnector?.name && isValidIndexName(rawName) && !error ? 'plain' : 'subdued'
}
>
<EuiText color={selectedConnector?.name ? 'default' : 'subdued'}>
<EuiText
color={
selectedConnector?.name && isValidIndexName(rawName) && !error
? 'default'
: 'subdued'
}
>
<h3>
{i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.h4.deploymentLabel',
Expand All @@ -218,7 +263,10 @@ export const StartStep: React.FC<StartStepProps> = ({
</h3>
</EuiText>
<EuiSpacer size="m" />
<EuiText color={selectedConnector?.name ? 'default' : 'subdued'} size="s">
<EuiText
color={selectedConnector?.name && isValidIndexName(rawName) ? 'default' : 'subdued'}
size="s"
>
<p>
{i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.p.youWillStartTheLabel',
Expand All @@ -242,7 +290,7 @@ export const StartStep: React.FC<StartStepProps> = ({
}
}}
fill
disabled={!canConfigureConnector}
disabled={!canConfigureConnector || !isValidIndexName(rawName) || Boolean(error)}
isLoading={isCreateLoading || isGenerateLoading}
>
{Constants.NEXT_BUTTON_LABEL}
Expand All @@ -252,12 +300,20 @@ export const StartStep: React.FC<StartStepProps> = ({
) : (
<EuiFlexItem>
<EuiPanel
color={selectedConnector?.name ? 'plain' : 'subdued'}
color={
selectedConnector?.name && isValidIndexName(rawName) && !error ? 'plain' : 'subdued'
}
hasShadow={false}
hasBorder
paddingSize="l"
>
<EuiText color={selectedConnector?.name ? 'default' : 'subdued'}>
<EuiText
color={
selectedConnector?.name && isValidIndexName(rawName) && !error
? 'default'
: 'subdued'
}
>
<h3>
{i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.h4.configureIndexAndAPILabel',
Expand All @@ -268,7 +324,14 @@ export const StartStep: React.FC<StartStepProps> = ({
</h3>
</EuiText>
<EuiSpacer size="m" />
<EuiText color={selectedConnector?.name ? 'default' : 'subdued'} size="s">
<EuiText
color={
selectedConnector?.name && isValidIndexName(rawName) && !error
? 'default'
: 'subdued'
}
size="s"
>
<p>
{i18n.translate(
'xpack.enterpriseSearch.createConnector.startStep.p.thisProcessWillCreateLabel',
Expand Down Expand Up @@ -309,7 +372,9 @@ export const StartStep: React.FC<StartStepProps> = ({
<EuiButton
data-test-subj="entSearchContent-connector-configuration-generateConfigButton"
data-telemetry-id="entSearchContent-connector-configuration-generateConfigButton"
disabled={!canConfigureConnector}
disabled={
!canConfigureConnector || !isValidIndexName(rawName) || Boolean(error)
}
fill
iconType="sparkles"
isLoading={isGenerateLoading || isCreateLoading}
Expand All @@ -330,7 +395,13 @@ export const StartStep: React.FC<StartStepProps> = ({
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ManualConfiguration
isDisabled={isGenerateLoading || isCreateLoading || !canConfigureConnector}
isDisabled={
isGenerateLoading ||
isCreateLoading ||
!canConfigureConnector ||
!isValidIndexName(rawName) ||
Boolean(error)
}
selfManagePreference={selfManagePreference}
/>
</EuiFlexItem>
Expand Down

0 comments on commit 7c9bf00

Please sign in to comment.