fix(git): file path background [EE-5114] (#8573)

* fix(git): file path background [EE-5114]

also disabled url check on CE because
the http handler wasn't available and raised errors

* fix(git): highlight hovered path option

* feat(git): hide path options when choosing
pull/8609/head
Chaim Lev-Ari 2023-03-06 09:13:22 +02:00 committed by GitHub
parent 4c6f5f961e
commit 07100258cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 4 deletions

View File

@ -7,6 +7,7 @@ import {
} from '@reach/combobox'; } from '@reach/combobox';
import '@reach/combobox/styles.css'; import '@reach/combobox/styles.css';
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import clsx from 'clsx';
import { useSearch } from '@/react/portainer/gitops/queries/useSearch'; import { useSearch } from '@/react/portainer/gitops/queries/useSearch';
import { useDebounce } from '@/react/hooks/useDebounce'; import { useDebounce } from '@/react/hooks/useDebounce';
@ -41,7 +42,7 @@ export function PathSelector({
const enabled = Boolean( const enabled = Boolean(
model.RepositoryURL && model.RepositoryURLValid && searchTerm model.RepositoryURL && model.RepositoryURLValid && searchTerm
); );
const { data: searchResult } = useSearch(payload, enabled); const { data: searchResults } = useSearch(payload, enabled);
const { ref, updateCaret } = useCaretPosition(); const { ref, updateCaret } = useCaretPosition();
return ( return (
@ -58,14 +59,18 @@ export function PathSelector({
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
/> />
{searchResult && searchResult.length > 0 && searchTerm !== '' && ( {searchResults && searchResults.length > 0 && (
<ComboboxPopover> <ComboboxPopover>
<ComboboxList> <ComboboxList>
{searchResult.map((result: string, index: number) => ( {searchResults.map((result: string, index: number) => (
<ComboboxOption <ComboboxOption
key={index} key={index}
value={result} value={result}
className={`[&[aria-selected="true"]]:th-highcontrast:!bg-black [&[aria-selected="true"]]:th-dark:!bg-black`} className={clsx(
`[&[aria-selected="true"]]:th-highcontrast:!bg-black [&[aria-selected="true"]]:th-dark:!bg-black`,
`hover:th-highcontrast:!bg-black hover:th-dark:!bg-black`,
'th-highcontrast:bg-gray-10 th-dark:bg-gray-10 '
)}
/> />
))} ))}
</ComboboxList> </ComboboxList>

View File

@ -16,6 +16,8 @@ import { TextTip } from '@@/Tip/TextTip';
import { Button } from '@@/buttons'; import { Button } from '@@/buttons';
import { useCachedValidation } from '@@/form-components/useCachedTest'; import { useCachedValidation } from '@@/form-components/useCachedTest';
import { isBE } from '../feature-flags/feature-flags.service';
import { GitFormModel } from './types'; import { GitFormModel } from './types';
import { getAuthentication } from './utils'; import { getAuthentication } from './utils';
@ -43,6 +45,8 @@ export function GitFormUrlField({
onChangeRepositoryValid(!!isValid); onChangeRepositoryValid(!!isValid);
setForce(false); setForce(false);
}, },
// disabled check on CE since it's not supported
enabled: isBE,
}); });
const [debouncedValue, debouncedOnChange] = useDebounce(value, onChange); const [debouncedValue, debouncedOnChange] = useDebounce(value, onChange);