renderForm()

in components/vam-ui/packages/vam-ui/src/parts/appstream-images/CreateAppstreamImage.js [107:210]
100 lines of code
3 McCabe index (conditional complexity)

  renderForm() {
    const model = this.getModel();
    let applicationsValue = [];
    let imageName = '';
    if (model) {
      applicationsValue = model.applications.map(a => a.infoPath);
      imageName = `${model.name}-Copy`;
    }

    const imageBuilderIDs = this.props.appstreamImageBuildersStore.dropdownOptions;
    imageBuilderIDs.unshift({
      key: '',
      value: '',
      text: '',
    });

    const baseImageArns = this.props.appstreamImagesStore.dropdownOptionsWithArn;
    baseImageArns.unshift({
      key: '',
      value: '',
      text: '',
    });

    const form = getCreateAppstreamImageForm({ imageName }, { imageBuilderIDs, baseImageArns });
    const applications = this.props.appstreamApplicationsStore.list;

    return (
      <Form form={form} onSuccess={this.handleFormSubmission} onCancel={this.handleCancel}>
        {({ processing, _onSubmit, _onCancel }) => {
          return (
            <>
              <Input field={form.$('imageName')} data-testid="image-name" />
              <DropDown field={form.$('instanceType')} fluid selection data-testid="instance-type" />
              <CustomInput field={form.$('applications')}>
                <SelectableTable
                  defaultValue={applicationsValue}
                  rowData={applications}
                  data-testid="applications"
                  headerRenderer={() => {
                    return [i18n(keys.ICON), i18n(keys.NAME)];
                  }}
                  rowRenderer={row => {
                    return [<Image src={row.iconUrl} width="20" height="20" />, row.displayName];
                  }}
                  valueMethod={row => {
                    return row.id;
                  }}
                />
              </CustomInput>
              {adJoined && (
                <div className="mb2">
                  <Checkbox
                    toggle
                    defaultChecked={this.componentStore.dapEnabled}
                    label={i18n(keys.DAP_ENABLED)}
                    field={form.$('dapEnabled')}
                    data-testid="dap-enabled"
                    onClick={this.handleToggleChange('dapEnabled')}
                  />
                </div>
              )}
              <Header as="h3">{i18n(keys.ADVANCED_SETTINGS)}</Header>
              <DropDown field={form.$('baseImageArn')} fluid selection data-testid="base-image-arn" />
              <DropDown field={form.$('imageBuilderID')} fluid selection data-testid="image-builder-id" />
              <div className="m2">
                <Checkbox
                  toggle
                  defaultChecked={this.componentStore.snapshotImage}
                  label={i18n(keys.SNAPSHOT_IMAGE)}
                  field={form.$('snapshotImage')}
                  data-testid="snapshot-enabled"
                  onClick={this.handleToggleChange('snapshotImage')}
                />
              </div>
              <div className="m2">
                <Checkbox
                  toggle
                  defaultChecked={this.componentStore.deleteImageBuilder}
                  label={i18n(keys.DELETE_IMAGE_BUILDER)}
                  field={form.$('deleteImageBuilder')}
                  data-testid="delete-image-builder-enabled"
                  onClick={this.handleToggleChange('deleteImageBuilder')}
                />
              </div>
              <Button
                className="ml2 mb3"
                floated="right"
                color="blue"
                icon
                disabled={processing}
                type="submit"
                data-testid="create-image-button"
              >
                {i18n(keys.CREATE_IMAGE)}
              </Button>
              <Button className="mb3" floated="right" disabled={processing} onClick={this.handleCancel}>
                {i18n(baseKeys.CANCEL)}
              </Button>
            </>
          );
        }}
      </Form>
    );
  }