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 103 104 105 106 107 108 109 110 111 112 113 114 | 101x 101x 101x 101x 101x 101x 101x 101x 101x 17x 17x 3x 3x 17x 2x 2x 2x 17x 17x 21x 17x 23x | /* * 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, { useMemo } from 'react' import { Button, ButtonVariation, Text, Container, Formik, IconName, Layout, StepProps, ThumbnailSelect } from '@wings-software/uicore' import { Form } from 'formik' import * as Yup from 'yup' import { FontVariation } from '@harness/design-system' import { useStrings } from 'framework/strings' import type { ConnectorConfigDTO } from 'services/cd-ng' import { ArtifactIconByType, ArtifactTitleIdByType } from '../ArtifactHelper' import type { ArtifactType, InitialArtifactDataType } from '../ArtifactInterface' import css from './ArtifactConnector.module.scss' interface ArtifactPropType { changeArtifactType: (selected: ArtifactType) => void artifactTypes: Array<ArtifactType> selectedArtifact: ArtifactType | null artifactInitialValue: InitialArtifactDataType stepName: string } export function ArtifactoryRepoType({ selectedArtifact, artifactTypes, changeArtifactType, stepName, artifactInitialValue, nextStep }: StepProps<ConnectorConfigDTO> & ArtifactPropType): React.ReactElement { const [selectedArtifactType, setSelectedArtifactType] = React.useState(selectedArtifact) const handleOptionSelection = (selected: ArtifactType): void => { setSelectedArtifactType(selected) changeArtifactType(selected) } const gotoNextStep = (): void => { changeArtifactType(selectedArtifactType as ArtifactType) Eif (selectedArtifactType !== artifactInitialValue.submittedArtifact) { nextStep?.({ connectorId: '' }) } else { nextStep?.() } } const { getString } = useStrings() const supportedArtifactTypes = useMemo( () => artifactTypes.map(artifact => ({ label: getString(ArtifactTitleIdByType[artifact]), icon: ArtifactIconByType[artifact] as IconName, value: artifact })), [artifactTypes] ) return ( <Container className={css.optionsViewContainer}> <Text font={{ variation: FontVariation.H3 }} margin={{ bottom: 'medium' }}> {stepName} </Text> <Formik initialValues={{ artifactType: selectedArtifactType }} formName="artifactType" validationSchema={Yup.object().shape({ artifactType: Yup.string().required(getString('pipeline.artifactsSelection.artifactTyperequired')) })} onSubmit={gotoNextStep} enableReinitialize={true} > {() => ( <Form> <div className={css.headerContainer}> <Layout.Horizontal spacing="large"> <ThumbnailSelect className={css.thumbnailSelect} name={'artifactType'} items={supportedArtifactTypes} onChange={handleOptionSelection} /> </Layout.Horizontal> </div> <Layout.Horizontal> <Button variation={ButtonVariation.PRIMARY} type="submit" disabled={selectedArtifact === null} text={getString('continue')} rightIcon="chevron-right" /> </Layout.Horizontal> </Form> )} </Formik> </Container> ) } |