import { isUndefined } from 'lodash' ; import { ChangeEvent , useState } from 'react' ; import { Channel , Repository } from '../../../types' ; import { OCI_PREFIX } from '../../../utils/data' ; import ExternalLink from '../../common/ExternalLink' ; import CommandBlock from './CommandBlock' ; import styles from './ContentInstall.module.css' ; interface Props { name : string ; repository : Repository ; channels ? : Channel [ ] | null ; defaultChannel ? : string | null ; } const OLMOCIInstall = ( props ) => { const getActiveChannel = ( ) : string | undefined => { let initialChannel = props . defaultChannel || undefined ; if ( isUndefined ( initialChannel ) && props . channels ) { initialChannel = props . channels [ 0 ] . name ; } return initialChannel ; } ; const [ activeChannel , setActiveChannel ] = useState < string | undefined > ( getActiveChannel ( ) ) ; if ( isUndefined ( props . channels ) ) return null ; const url = props . repository . url . replace ( OCI_PREFIX , '' ) ; const catalog = `apiVersion: operators.coreos.com/v1alpha1
kind: CatalogSource
metadata:
  name: ${ props . repository . name }-catalog
  namespace: default
spec:
  displayName: ${ props . repository . displayName || props . repository . name }
  publisher: ${ props . repository . userAlias || props . repository . organizationDisplayName || props . repository . organizationName }
  sourceType: grpc
  image: ${ url }` ; const subscription = `apiVersion: operators.coreos.com/v1alpha1
kind: Subscription
metadata:
  name: ${ props . name }-subscription
  namespace: default
spec:
  channel: ${ activeChannel }
  name: ${ props . name }
  source: ${ props . repository . name }-catalog
  sourceNamespace: default` ; return ( < > < div className = "my-2" > < small className = "text-muted mt-2 mb-1" > Channel < /small> < /div> < div className = " w-50" > < select className = "form-select form-select-sm mb-1" aria - label = "channel-select" value = { activeChannel } onChange = { ( e ) => setActiveChannel ( e . target . value ) } > { props . channels ! . map ( ( channel ) => ( < option key = { `channel_${ channel . name }` } value = { channel . name } > { channel . name } < /option>))} < /select> < /div> < CommandBlock command = { catalog } title = "Install catalog" language = "yaml" filename = { `${ props . repository . name }-catalog.yaml` } /> < CommandBlock command = { `kubectl apply -f ${ props . repository . name }-catalog.yaml` } /> < CommandBlock command = { subscription } title = "Create subscription" language = "yaml" filename = { `${ props . name }-subscription.yaml` } /> < CommandBlock command = { `kubectl apply -f ${ props . name }-subscription.yaml` } /> { props . repository . private && ( < div className = { `alert alert-warning my-4 ${ styles . alert }` } role = "alert" > < span className = "fw-bold text-uppercase" > Important : < /span> This repository is{' '} < span className = "fw-bold" > private < /span> and requires some credentials. < /div>)} < div className = "mt-2" > < ExternalLink href = "https://github.com/operator-framework/operator-lifecycle-manager/blob/master/doc/install/install.md" className = "btn btn-link ps-0" label = "Download OLM" > Need OLM ? < /ExternalLink> < /div> < />); } ; export default OLMOCIInstall ;