Change invocation step state display selector to fix styling

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

That unfortunately adds CSS styling from `base.scss` to the text in there. Therefore, I have changed the selector to `data-step-state`.

Author: ahmedhamidawan

client/src/components/WorkflowInvocationState/InvocationStepStateDisplay.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
     <span
         class="d-flex align-items-center"
         data-description="invocation step state counter"
-        :data-state="state"
+        :data-step-state="state"
         :data-count="jobCount">
         <FontAwesomeIcon
             v-if="iconClasses[props.state]"

client/src/utils/navigation/navigation.yml

@@ -1052,7 +1052,7 @@ invocations:
       selector: '//span[contains(@class, "content-title name")][text()="${element_identifier}"]'
     step_output_collection_element_datatype: '[data-step="${order_index}"] .invocation-step-output-collection-details .not-loading .datatype .value'
     step_job_details: '[data-step="${order_index}"] .invocation-step-job-details'
-    step_job_details_state_counter: '[data-description="invocation step state counter"][data-state="${state}"]'
+    step_job_details_state_counter: '[data-description="invocation step state counter"][data-step-state="${state}"]'
     step_job_information: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table'
     step_job_information_tool_id: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table #galaxy-tool-id'
     export_tab: '.invocation-export-tab'