Improve online runner check

[Zettat123]

This PR moves "no online runner" warning to the runs list.

A job's runs-on may contain expressions like runs-on: [self-hosted, "${{ inputs.chosen-os }}"] so the value of runs-on may be different in each run. We cannot check it through the workflow file.

Screenshots

Before:

After:

This PR also splits prepareWorkflowDispatchTemplate function into 2 functions:

• prepareWorkflowTemplate get and check all of the workflows
• prepareWorkflowDispatchTemplate only prepare workflow dispatch config for workflow_dispatch workflows.

[ChristopherHX]

I actually missed a placeholder job log of all queued (waiting) jobs that contains the actual runner label.

The advantage over could be run-list performance, on the other hand it is also nice to not need to go into the job list at all.

[Zettat123]

I actually missed a placeholder job log of all queued (waiting) jobs that contains the actual runner label.

The advantage over could be run-list performance, on the other hand it is also nice to not need to go into the job list at all.

Maybe we can add this warning to the job list later as well.

[silverwind]

The icon is slightly off-center vertically. I think we can potentially fix it by adding flex-text-block to the flex-item-body element. The icon in the sidebar would need similar treatment as per your screenshot.

[Zettat123]

I tried adding flex-text-block to flex-item-body but it does not work. In 29652f7, I added two span to vertically center the icons but I'm not sure if this is the correct solution.

New screenshot:

[silverwind]

Looks better, but still like 1px too high, but I guess that's acceptable.

One last request: Can you add like tw-ml-2 to the elements so they have a bit more space from the text?

[wxiaoguang]

No tw-ml-2, correct flex-text-block should be able to correctly add the gap

[silverwind]

Yep, probably best to make a structure like this:

<div class="flex-text-block">
  <span>text</span>
  <span><svg/></span>
</div>

That may likely also solve the icon vertical centering.

[Zettat123]

Fixed in 07fee46

I used this structure:

<span class="flex-text-block" data-tooltip-content="{{$errMsg}}">
	{{svg "octicon-alert" 16 "text red"}}
</span>

But I don't see the gap change. Maybe I'm still incorrectly using flex-text-block and flex-text-inline, or I need to add tw-ml-2?

[wxiaoguang]

I think it's worth to spend some time to learn some frontend layouts, how the "display" works, how "flex" works.

If you need to use "align-items: center", then the children nodes should also have "flex" related layout.

The rule is: flex every SVG parent if you used it to align.

<div class="flex-text-block">
  <span>text</span>
  <span class="flex-text-inline"><svg/></span>
</div>

[Zettat123]

Thanks for pointing out this rule. Fixed in fb296a3. I realize that I should use <div class="flex-text-block"> to wrap all the children nodes instead of just the SVG parent. Now the gap and vertical centering should be corrent, see the following screenshot: