Software Template Array Inputs Not Working As Expected

Expected Behavior

Current Behavior

Consider the following software template:

apiVersion: backstage.io/v1beta2
kind: Template
metadata:
  name: add-addon
  title: Addon
  description: Add addon
spec:
  owner: users
  type: website

  parameters:
    - title: Values
      properties:
       should-be-list:
          title: This is a title and is huge
          description: "this is a description you can't see"
          type: array
          items:
            type: string
  steps:
    - id: fetch-repo
      name: Fetch repo
      action: fetch:plain
      input:
        url: 'https://github.com/asummers/backstage/tree/master'

    - id: fetch-template
      name: Fetch Template
      action: fetch:template
      input:
        url: ./template2
        values:
          list: '{{parameters.should-be-list}}'

    - id: publish
      name: Publish
      action: publish:github:pull-request
      input:
        repoUrl: 'github.com?owner=asummers&repo=backstage'
        title: 'feat: Add addon'
        branchName: 'add-addon'
        description: |
          Add addon

  output:
    links:
      - url: '{{steps.publish.output.remoteUrl}}'
        text: 'Go to PR'

The resulting summary appears as expected with two separate elements and not a combined value

But if we consider the template file

[
{% set comma = joiner() %}
{% for value in values.list -%}
${{ comma() }}${{ value }}
{%- endfor %}
]

[
{% for value in values.list -%}
${{ value }},
{%- endfor %}
]

we get

[

a,.,b,.,c,.,d,:,1,2,3,4,,,w,.,x,.,y,.,z,:,9,8,7,6
]

[
a,.,b,.,c,.,d,:,1,2,3,4,,,w,.,x,.,y,.,z,:,9,8,7,6,
]

This means that the array is being converted to a string somewhere under the hood, which results in arrays disappearing.

Possible Solution

Fix CSS for form and pass along array as is.

Steps to Reproduce

See ## Current Behavior

Context

This makes array forms in software templates impossible as nunjucks does not provide split functionality, to correct the comma joining happening prematurely.

Your Environment

• NodeJS Version (v12): 14
• Operating System and Version (e.g. Ubuntu 14.04): Ubuntu 18.04
• Browser Information: Chrome

[mtlewis]

Probably the first one if that’s alright with you!

[mtlewis]

Hi @asummers! Thanks so much for the detailed description of the situation you’re facing. The awkwardness of dealing with non-string values in template parameters is something we’re aware of - https://github.com/backstage/backstage/issues/6437 includes a proposal to improve this.

The good news is that it’s possible today to deal with non-string values, as long as they’re convertible to JSON - it’s mentioned in the RFC above, but in short, your template files should receive the list parameter as an array if you convert the parameter to JSON in your template.yaml file like so:

   - id: fetch-template
      name: Fetch Template
      action: fetch:template
      input:
        url: ./template2
        values:
-          list: '{{ parameters.should-be-list }}'
+          list: '{{ json parameters.should-be-list }}'

Hoping this will get you unblocked to use arrays in your templates!

Thanks also for flagging the issue with the styling of array fields. Since this likely requires some code changes to get fixed, can I suggest we create a separate issue to track that part?