Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 499x 499x 499x 499x 499x 499x 499x 7x 7x 7x 7x 3x 7x 1x 9x 7x 1x 1x 1x 1x 1x 7x 7x 3x 7x 27x 499x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { Icon } from '@wings-software/uicore'
import type { YamlSnippetMetaData, GetYamlSchemaQueryParams } from 'services/cd-ng'
import type { SnippetFetchResponse } from '@common/interfaces/YAMLBuilderProps'
import i18n from './SnippetDetails.i18n'
import Snippet from './Snippet'
import css from './SnippetDetails.module.scss'
interface SnippetDetailsProps {
entityType: GetYamlSchemaQueryParams['entityType']
selectedIcon?: string
snippets?: YamlSnippetMetaData[]
onSnippetCopy?: (identifier: string) => Promise<void>
snippetFetchResponse?: SnippetFetchResponse
}
const SnippetDetails: React.FC<SnippetDetailsProps> = props => {
const { entityType, onSnippetCopy, snippetFetchResponse, selectedIcon } = props
const [snippets, setSnippets] = useState<YamlSnippetMetaData[]>()
const [searchedSnippet, setSearchedSnippet] = useState('')
useEffect(() => {
setSearchedSnippet('')
}, [selectedIcon])
const onSnippetSearch = (query: string): void => {
const snippetsClone = props.snippets as YamlSnippetMetaData[]
setSnippets(snippetsClone.filter(snippet => snippet.name?.toLowerCase().includes(query.toLowerCase())))
}
const handleSnippetSearch = (event: React.ChangeEvent<HTMLInputElement>): void => {
event.preventDefault()
const query = event.target.value
Eif (query) {
setSearchedSnippet(query)
onSnippetSearch(query)
} else onSearchClear()
}
const onSearchClear = (event?: React.MouseEvent<HTMLElement>): void => {
event?.preventDefault()
setSnippets(props.snippets)
setSearchedSnippet('')
}
useEffect(() => {
setSnippets(props.snippets)
}, [props.snippets])
return (
<div className={css.main}>
<div className={css.title}>
<span style={{ textTransform: 'capitalize' }}>{entityType.replace(/s$/, '')}</span>
{i18n.title}
</div>
<div className={css.searchBar}>
<span className={css.searchIcon}>
<Icon name={'main-search'} size={20} />
</span>
<input
placeholder="Search"
name="snippet-search"
className={css.search}
onChange={handleSnippetSearch}
value={searchedSnippet}
/>
{searchedSnippet ? (
<span className={css.closeIcon}>
<Icon name={'main-close'} size={10} onClick={onSearchClear} />
</span>
) : null}
</div>
{snippets && snippets?.length > 0 ? (
<div className={css.snippets}>
{snippets?.map(snippet => (
<Snippet
key={snippet.name}
{...snippet}
onSnippetCopy={onSnippetCopy}
snippetFetchResponse={snippetFetchResponse}
/>
))}
</div>
) : (
<div className={cx(css.noSnippets, css.fillSpace)}>No snippets found.</div>
)}
</div>
)
}
export default SnippetDetails
|