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

|Prop|Type|Default|Description| |----|:--:|:-----:|----------:| |isOpen|bool|false|You need to control yourselves if the wizard is open or not. (Not needed for the button version)| |afterSuccess|function|null|This function will be executed after successful creation of a source. In Sources-UI this method is used for updating the list of sources.| |onClose|function|null|This function will be executed after closing the wizard. Eg. set isOpen to false. In case of closing wizard before submitting, form values are passed as the first argument. If source has been successfully created, the source is passed as the second argument.| |successfulMessage|node|'Your source has been successfully added.'|A message shown on the last page of the wizard. Can be customized when accessing from different app (eg. 'Source was added to Cost Management')| |sourceTypes|array|null|SourceTypes array. This prop can be used on pages, which have already loaded the source types, so there is no need to load them in this component.| |applicationTypes|array|null|applicationTypes array. This prop can be used on pages, which have already loaded the application types, so there is no need to load them in this component.| |initialValues|object|{}|Object with initialValues of the form.| |disableAppSelection|bool|false|Flag to disable appSelection.| |hideSourcesButton|bool|false|hide 'Take me to sources' button.| |returnButtonTitle|node|'Go back to sources'|Title of the button shown after success submit. Put your own application name if you neeed.| |selectedType|string|undefined|A name of source type preselected - this will remove the source type selection. (Only for Cloud types.)| |initialWizardState|object|undefined|An initial state passed to the wizard component. See here.| |submitCallback|function|undefined|An function that is always called when the submit finishes. (state) => ... In case of success, the state is a following object: {createdSource, sourceTypes, isSubmitted: true}, in case of any unhandled error: {values, sourceTypes, isErrored, wizardState, error } |

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:

|key|description| |---|-----------| |additionalFields|These fields are appended to the authType selection page.| |name of field (ex. authentication.password|This defines additional props for the field (can be used for enhancing of API fields).| |additionalSteps|Defines additional steps.| |skipSelection|If there is only one authType, this flag will cause to skip the selection page.| |skipEndpoint|If it is set to true, all endpoint.* and authentications.* values will be ignored and no endpoint step will be shown to user.| |useApplicationAuth|If it is set to true, the authentication record will be linked to a application, not endpoint. Use if you want to avoid using topology for checking source status.|

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, ...)

|Prop|Type|Description| |----|:--:|----------:| |options|array|Array of options with keys value, label, isDisabled| |DefaultIcon|element, node, func|Default icon (default is ServerIcon)| |iconMapper*|func|You can use your own mapper (value, DefaultIcon) => ... | |multi/isMulti|bool|Allows to select more items| |mutator|func|(option, formOptions) => option, func which mutates options|

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

SourceWizardSummary

Adds a summary of formValues to the form.

Props

|Prop|Type|Description| |----|:--:|----------:| |sourceTypes|array|SourceTypes array with schemas.| |applicationTypes|array|applicationTypes array with schemas.| |showApp|bool|Default: true, shows the application selection in the summary| |showAuthType|bool|Default: true, shows the authtype selection in the summary|

Others

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