fix(ui/checks): checks render once they've been created

[asalem1]

Closes #15554

Problem

Newly created checks without labels were not rendering on the checks list.

Steps for reproduction can be found on #15554

Solution

Ensure that check labels exist before mapping the values. Added testing to ensure that the checks list page should render a check once it has been created

• CHANGELOG.md updated with a link to the PR (not the Issue)

[asalem1]

the reason why this refactor into a request was punted is because this bug was blocking #15518 I felt it was important to get this merged and move forward with the current work we have since this seems like a pretty low-priority refactor

[hoorayimhelping]

had a comment, let me know if it's too pedantic :)

[hoorayimhelping]

if this is too nitpicky, tell me to stfu and i'll gladly do it! 😃

from what i've seen in the codebase, i think the more idiomatic way to do this is something like:

import {get} from 'lodash'

//...

const labels = get(check, 'labels', [])

const data = {
  ...check,
  name: clonedName,
  labels: labels.map(l => l.id),
} as PostCheck

lodash's get will check the first argument (check) for the second argument ('labels'). it'll do the falsey checks you're doing as it goes down the property list. if it can't find the property you're looking for, it returns the third property - an empty array.

(it's not a huge deal for a single property object, but it's super valuable when there are deeply nested properties, like here,).

using get like above, it'll guard against falsey values (null, undefined, false, '', etc), and includes the ) || [] that ensures labels stays an array. but it won't guard against truthy values, so if labels is anything but an array, like a string or an object, this will fail. but if you search src/client/generatedRoutes for export type Labels, you'll see it's typed as an array Label[], so i think this check is safe.

the reason i bring it up is i think it's probably a little bit safer and less likely to get tripped up on an edge case, and because we use this pattern (using get) in quite a few places i've seen in the code base, it's fairly well understood.

[ebb-tide]

I ❤️ get too

[hoorayimhelping]

Awesome work!!

[ebb-tide]

🍰 🍰 🍰

[ebb-tide]

❤️ for testing!