feat(ui): split arrays in yaml to fix ambiguous collapse when array items have nested objects

[aali309]

Fixes: #20905

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

Motivation

see link

Description of the change

Improve YAML array formatting in the UI to avoid ambiguous collapse behavior. When an array item contains nested objects, the dash (-) is now placed on its own line, making it clear which elements can be collapsed independently.

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[aali309]

Before

in collapse

After

in collapse

[keithchong]

Note also that the user can edit the yaml and put the item on the same line as the dash.

Did you check if the formatting will affect the diff?

[keithchong]

I think it'll be nicer if only the first item (which is a sub-array) is placed on the next line. As an example, from your screenshot, if you look at the element env starting at line 123, if you collapse them all, then each item will be 'blank' and it's not very meaningful. Something like this:

It'll be good if we can keep these items all on the same line, like before, so it'll be something like this:

What do you think about using these search and replace strings instead, respectively?

:(\s*)\n(\s*)-(\s+)(\w+):(\s*)\n(\s*)-

and

:$1\n$2-\n$2 $4:$5\n$6-

[aali309]

[aali309]

@jsoref, please review this for me.

[jsoref]

/bns:deploy

[jsoref]

It seems good. I'm hoping to play with it, but that'd require someone to poke bunny

[aali309]

@jsoref PING!

[crenshaw-dev]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

/bns:start

[jsoref]

https://argocd-77zpnz.bunnyenv.com/applications/env-77zpnz/guestbook-77zpnz?view=tree&resource=&node=apps%2FDeployment%2Fenv-77zpnz-guestbook%2Fguestbook-ui%2F0

    spec:
      containers:
        - image: gcr.io/heptio-images/ks-guestbook-demo:0.2
          imagePullPolicy: IfNotPresent
          name: guestbook-ui
          ports:
            - containerPort: 80
              protocol: TCP
          resources: {}
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
        - command:
            - /shared/argocd-dex
            - rundex
          env:
            - name: ARGOCD_DEX_SERVER_LOGFORMAT
              valueFrom:
                configMapKeyRef:
                  key: dexserver.log.format
                  name: argocd-cmd-params-cm
                  optional: true
          image: gcr.io/heptio-images/ks-guestbook-demo:0.2
          imagePullPolicy: IfNotPresent
          name: guestbook-ui-sidecar
          resources: {}
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File

I don't think it's doing what I want:

specifically, I can't collapse command without collapsing the entire sidecar container.

That said, I can't tell if this bunny deployment updated or not ☹️.

If someone could provide pictures/videos for the above, that'd be great.

[aali309]

My.Movie.mp4

@jsoref, how about now?