Add onblur check to validation for s3 link

Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
opensearch-project · Oct 26, 2023 · 1f28a3c · 1f28a3c
1 parent c337aee
commit 1f28a3c
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/public/components/integrations/components/setup_integration.tsx b/public/components/integrations/components/setup_integration.tsx
@@ -188,6 +188,7 @@ export function SetupIntegrationForm({
  [] as Array<{ label: string }>
  );
  const [isSuggestionsLoading, setIsSuggestionsLoading] = useState(true);
+ const [isBlurred, setIsBlurred] = useState(false);
  useEffect(() => {
  const updateDataSources = async () => {
  const data = await suggestDataSources(config.connectionType);
@@ -293,14 +294,17 @@ export function SetupIntegrationForm({
  </EuiFormRow>
  <EuiFormRow
  label="S3 Bucket Location"
- isInvalid={!config.connectionLocation.startsWith('s3://')}
+ isInvalid={isBlurred && !config.connectionLocation.startsWith('s3://')}
  error={["Must be a URL starting with 's3://'."]}
  >
  <EuiFieldText
  value={config.connectionLocation}
  onChange={(event) => updateConfig({ connectionLocation: event.target.value })}
  placeholder="s3://"
- isInvalid={!config.connectionLocation.startsWith('s3://')}
+ isInvalid={isBlurred && !config.connectionLocation.startsWith('s3://')}
+ onBlur={() => {
+ setIsBlurred(true);
+ }}
  />
  </EuiFormRow>
  </>