Table of Contents

• Sources
• Install
  • Using
• Modification of the wizard
• Format for sourceType schema
  • Hardcoded component schema
• Additional components
  • CardSelect
  • SourceWizardSummary
  • Others

Sources

This package exports Add Source Wizard and Add Source button, as other components, which wizard uses.

Install

npm install @redhat-cloud-services/frontend-components-sources

Please import styles in your scss files, where are you using AddSource Wizard or CardSelect

@import '~@redhat-cloud-services/frontend-components-sources/index.css';

Using

As a primary button

import { AddSourceButton } from '@redhat-cloud-services/frontend-components-sources';


<AddSourceButton />

As a Wizard

import { AddSourceWizard } from '@redhat-cloud-services/frontend-components-sources';


<AddSourceWizard isOpen={this.state.isOpen} onClose={ () => this.setIsOpen(false)}/>

Props

If you need to set up and support only one application you can provide filtered applicationTypes with the only one application, set up disableAppSelection to false and initialValues to:

{
    application: {
        application_type_id: 'YOUR_APP_ID'
    }
}

Modification of the wizard

Please, if you need to update the wizard, take a look on a guide first.

Format for sourceType schema

schema = {
  :authentication => {
    :name_of_the_authentication_type => {
      :meta => {
        name: 'Token' # Will be shown in the authentication selection step
      },
      :fields => {
        # DDF Fields, will be shown in the authentication selection step
        {
          :component    => "text-field",
          :name         => "authentication.authtype",
          :hideField    => true,
          :initialValue => "username_password",
          :stepKey      => 'openshift-token-additional-field'
        },
      },
    }
  },
  :endpoint => {
    :title => 'Title', # If the endpoint will be on a separate step
    :hidden => true, # If true, the endpoint step will be hidden, use if all components have `:hideField => true`
    :fields => {
      # DDF Fields
      {:component => "checkbox", :name => "endpoint.verify_ssl", :label => "Verify SSL"},
      ...
    }
  }
}

Hardcoded component schema

In hardcodedSchema, there is an object which defines additional UI enhancements of the flow for combinations of sourceTypes and appTypes. The format has following structure: source-type-name.authenication.auth-type.app-name. For generic steps use as the app-name generic. Each of these objects has following keys:

Additional components

This package also uses and exports other components:

CardSelect

Use in schema as component: 'card-select' after you add it to your component mapper of your data driven form renderer. If you want to use this component outside React final form, please provide custom meta and input props. (See React Final Form)

Props

This components accepts all formGroup props (label, helperText, isDisabled, isRequired, ...)

* In the future it could be replaced by data obtained from API

SourceWizardSummary

Adds a summary of formValues to the form.

Props

Others

This package exports some other components and functions, which are used in Sources-UI. They are not intended to be used anywhere else.