Open workflow details first

When clicking on the Workflow tab in the event details,
the user is presented with a list of workflows to select
from. Most of the time, the user will selected the latest
workflow. So this patch selects it for them automatically.
The list of workflows can still be accessed through the tab
hierarch navigation.

Author: Arnei

src/components/events/partials/ModalTabsAndPages/EventDetailsTabHierarchyNavigation.tsx

@@ -19,6 +19,8 @@ const EventDetailsTabHierarchyNavigation = <T, >({
 	subTabArgument1,
 	translationKey2,
 	subTabArgument2,
+	translationKey3,
+	subTabArgument3,
 }: {
 	openSubTab: (tabType: T) => void,
 	hierarchyDepth: number,
@@ -28,6 +30,8 @@ const EventDetailsTabHierarchyNavigation = <T, >({
 	subTabArgument1?: T,
 	translationKey2?: ParseKeys,
 	subTabArgument2?: T,
+	translationKey3?: ParseKeys,
+	subTabArgument3?: T,
 }) => {
 	const { t } = useTranslation();
 
@@ -67,12 +71,25 @@ const EventDetailsTabHierarchyNavigation = <T, >({
 			{hierarchyDepth > 1 && subTabArgument2 && (
 				<ButtonLikeAnchor
 					extraClassName="breadcrumb-link scope"
-					style={styleNavHierarchy}
+					style={
+						hierarchyDepth === 2
+							? styleNavHierarchy
+							: styleNavHierarchyInactive
+					}
 					onClick={() => openSubTab(subTabArgument2)}
 				>
 					{translationKey2 && t(translationKey2)}
 				</ButtonLikeAnchor>
 			)}
+			{hierarchyDepth > 2 && subTabArgument3 && (
+				<ButtonLikeAnchor
+					extraClassName="breadcrumb-link scope"
+					style={styleNavHierarchy}
+					onClick={() => openSubTab(subTabArgument3)}
+				>
+					{translationKey3 && t(translationKey3)}
+				</ButtonLikeAnchor>
+			)}
 		</nav>
 	);
 };

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx

@@ -14,6 +14,8 @@ import {
 	fetchWorkflowDetails,
 	fetchWorkflowOperationDetails,
 	fetchWorkflowOperations,
+	fetchWorkflows,
+	setModalWorkflowId,
 	setModalWorkflowTabHierarchy,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
@@ -43,8 +45,18 @@ const EventDetailsWorkflowDetails = ({
 	const isFetching = useAppSelector(state => isFetchingWorkflowDetails(state));
 
 	useEffect(() => {
-		dispatch(fetchWorkflowDetails({ eventId, workflowId }));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		if (!workflowId) {
+			dispatch(fetchWorkflows(eventId)).unwrap()
+				.then(workflows => {
+					const currentWorkflow = workflows.entries[workflows.entries.length - 1];
+					dispatch(fetchWorkflowDetails({ eventId, workflowId: currentWorkflow.id }));
+					dispatch(setModalWorkflowId(currentWorkflow.id));
+				},
+			);
+		} else {
+			dispatch(fetchWorkflowDetails({ eventId, workflowId }));
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	const openSubTab = (tabType: WorkflowTabHierarchy) => {
@@ -63,9 +75,11 @@ const EventDetailsWorkflowDetails = ({
 				/* Hierarchy navigation */
 			<EventDetailsTabHierarchyNavigation
 				openSubTab={openSubTab}
-				hierarchyDepth={0}
-				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
-				subTabArgument0={"workflow-details"}
+				hierarchyDepth={1}
+				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_INSTANCES.TITLE"}
+				subTabArgument0={"workflows"}
+				translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
+				subTabArgument1={"workflow-details"}
 			/>
 			}
 		>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx

@@ -34,13 +34,13 @@ const EventDetailsWorkflowErrorDetails = () => {
 				/* Hierarchy navigation */
 				<EventDetailsTabHierarchyNavigation
 				openSubTab={openSubTab}
-				hierarchyDepth={1}
-				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
-				subTabArgument0={"workflow-details"}
-				translationKey1={
-					"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER"
-				}
-				subTabArgument1={"workflow-error-details"}
+				hierarchyDepth={2}
+				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_INSTANCES.TITLE"}
+				subTabArgument0={"workflows"}
+				translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
+				subTabArgument1={"workflow-details"}
+				translationKey2={"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER"}
+				subTabArgument2={"workflow-error-details"}
 			/>
 			}
 			modalBodyChildren={<Notifications context="not_corner" />}

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx

@@ -34,13 +34,15 @@ const EventDetailsWorkflowOperationDetails = () => {
 				/* Hierarchy navigation */
 			<EventDetailsTabHierarchyNavigation
 				openSubTab={openSubTab}
-				hierarchyDepth={2}
-				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
-				subTabArgument0={"workflow-details"}
-				translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE"}
-				subTabArgument1={"workflow-operations"}
-				translationKey2={"EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE"}
-				subTabArgument2={"workflow-operation-details"}
+				hierarchyDepth={3}
+				translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_INSTANCES.TITLE"}
+				subTabArgument0={"workflows"}
+				translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
+				subTabArgument1={"workflow-details"}
+				translationKey2={"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE"}
+				subTabArgument2={"workflow-operations"}
+				translationKey3={"EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE"}
+				subTabArgument3={"workflow-operation-details"}
 			/>
 			}
 			modalBodyChildren={<Notifications context="not_corner" />}

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx

@@ -60,11 +60,13 @@ const EventDetailsWorkflowOperations = ({
 				/* Hierarchy navigation */
 				<EventDetailsTabHierarchyNavigation
 					openSubTab={openSubTab}
-					hierarchyDepth={1}
-					translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
-					subTabArgument0={"workflow-details"}
-					translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE"}
-					subTabArgument1={"workflow-operations"}
+					hierarchyDepth={2}
+					translationKey0={"EVENTS.EVENTS.DETAILS.WORKFLOW_INSTANCES.TITLE"}
+					subTabArgument0={"workflows"}
+					translationKey1={"EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"}
+					subTabArgument1={"workflow-details"}
+					translationKey2={"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE"}
+					subTabArgument2={"workflow-operations"}
 				/>
 			}
 			modalBodyChildren={<Notifications context="not_corner" />}