Set State Modal

[ThatGalNatalie]

PR Checklist:

• add a short description of what's changed to the top of the CHANGELOG.md
• add/update tests (or don't, for reasons explained below)

Describe this PR

Changes the design of the Set State modal to match the design of the other forms

[znicholasbrown]

This is looking really nice @ThatGalNatalie, 2 initial requests before code review:

1. The autocomplete for the optional state change reason is trying to autocomplete with a geographic state - I think we can use autocomplete="off" so it doesn't do that
2. Could we add a loading state to the Confirm button so that it can't be clicked multiple times?

[znicholasbrown]

Let's differentiate the task run/flow run name here. Also I think this will read:

Change the state of

for task runs without names, so we should add a check for that and use the task name with something like "run of <>" if it's not available.

[ThatGalNatalie]

okay so something like this?

 Change the run of
            {{
              taskRun
                ? taskRun.task.name
                : taskRun && !taskRun.task.name
                ? taskRun.name
                : flowRun.name
            }}

[znicholasbrown]

Hm I think this:

<span v-if="taskRun && taskRun.name">
 Change the state of
            {{ taskRun.name }}
</span>
<span v-else-if="taskRun">
Change the state of this run of
{{ taskRun.task.name }}
</span>
<span v-else>{{ flowRun.name }}</span>

with added checks if there are points where those might loading

[ThatGalNatalie]

Okay I think it's good to go now unless there was something else? @znicholasbrown

[zhen0]

This looks great - really like the new design @ThatGalNatalie One suggestion (possibly cutting some of the tooltip wording) and one requested change (the css that affects other components) from me.

[zhen0]

Suggestion - I actually think we could take all of this out. I know it was in the old version and the tooltip is a great addition for the necessary warnings about child and downstream tasks but I'm not sure this section/warning adds much and possibly detracts from the more important warnings.

[zhen0]

Editing this vuetify class risks affecting every button loader in the app (same for the theme light subheader above). You can see the affect of this in the flow tile if you delete a label from this branch - the loader is not visible (but is in dev). Elsewhere we get around this issue by placing the Vuetify class inside of a parent class - Happy to pair on this if you're not sure what I mean putting it in inside a parent class (or there's examples in other places e.g. the flow summary tile.)

[zhen0]

LGTM @ThatGalNatalie - I'll let @znicholasbrown give final approval.

[znicholasbrown]

LGTM @ThatGalNatalie 👍