Change invocation step state display selector to fix styling

[ahmedhamidawan]

We added a data-state selenium selector for the InvocationStepStateDisplay.vue component in #21058:

galaxy/client/src/components/WorkflowInvocationState/InvocationStepStateDisplay.vue

Lines 13 to 19 in be1ff8c

	<template>
	<span
	class="d-flex align-items-center"
	data-description="invocation step state counter"
	:data-state="state"
	:data-count="jobCount">
	<FontAwesomeIcon

That unfortunately adds CSS styling from base.scss to the text in there:

This is the scss:

galaxy/client/src/style/scss/base.scss

Lines 158 to 163 in be1ff8c

	@each $state in map-keys($galaxy-state-border) {
	.state-color-#{$state},
	[data-state="#{$state}"] {
	border-color: map-get($galaxy-state-border, $state);
	background-color: map-get($galaxy-state-bg, $state);

Therefore, I have changed the selector to data-step-state.

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.