Fix workflow operations not refreshing

In the event details workflow tab, this fixes workflow operations not refreshing (again, was broken by redux modernization). Furthermore, this fixes the rather harsh rerender whenever the workflow operations were fetched again.
opencast · Mar 15, 2024 · e893250 · e893250
1 parent 5583f3e
commit e893250
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 60 deletions.
diff --git a/app/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx b/app/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx
@@ -3,33 +3,31 @@ import Notifications from "../../../shared/Notifications";
 import {
 	getWorkflow,
 	getWorkflowOperations,
-	isFetchingWorkflowOperations,
 } from "../../../../selectors/eventDetailsSelectors";
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { fetchWorkflowOperationDetails, fetchWorkflowOperations } from "../../../../slices/eventDetailsSlice";
+import { useTranslation } from "react-i18next";
 
 /**
  * This component manages the workflow operations for the workflows tab of the event details modal
  */
 const EventDetailsWorkflowOperations = ({
 // @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message
 	eventId,
-// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type.
-	t,
 // @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message
 	setHierarchy,
 }) => {
+	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const workflow = useAppSelector(state => getWorkflow(state));
 	const operations = useAppSelector(state => getWorkflowOperations(state));
-	const isFetching = useAppSelector(state => isFetchingWorkflowOperations(state));
 
   const loadWorkflowOperations = async () => {
 		// Fetching workflow operations from server
-		await fetchWorkflowOperations({eventId, workflowId: workflow.wiid});
+		dispatch(fetchWorkflowOperations({eventId, workflowId: workflow.wiid}));
 	};
 
   useEffect(() => {
@@ -78,64 +76,60 @@ const EventDetailsWorkflowOperations = ({
 						</header>
 						<div className="obj-container">
 							<table className="main-tbl">
-								{isFetching || (
-									<>
-										<thead>
-											<tr>
-												<th>
-													{
-														t(
-															"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS"
-														) /* Status */
-													}
-												</th>
-												<th>
-													{
-														t(
-															"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE"
-														) /* Title */
+								<thead>
+									<tr>
+										<th>
+											{
+												t(
+													"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS"
+												) /* Status */
+											}
+										</th>
+										<th>
+											{
+												t(
+													"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE"
+												) /* Title */
+											}
+											<i />
+										</th>
+										<th>
+											{
+												t(
+													"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION"
+												) /* Description */
+											}
+											<i />
+										</th>
+										<th className="medium" />
+									</tr>
+								</thead>
+								<tbody>
+									{/* workflow operation details */}
+									{operations.entries.map((item, key) => (
+										<tr key={key}>
+											<td>{t(item.status)}</td>
+											<td>{item.title}</td>
+											<td>{item.description}</td>
+
+											{/* link to 'Operation Details'  sub-Tab */}
+											<td>
+												<button
+													className="button-like-anchor details-link"
+													onClick={() =>
+														openSubTab("workflow-operation-details", key)
 													}
-													<i />
-												</th>
-												<th>
+												>
 													{
 														t(
-															"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION"
-														) /* Description */
+															"EVENTS.EVENTS.DETAILS.MEDIA.DETAILS"
+														) /* Details */
 													}
-													<i />
-												</th>
-												<th className="medium" />
-											</tr>
-										</thead>
-										<tbody>
-											{/* workflow operation details */}
-											{operations.entries.map((item, key) => (
-												<tr key={key}>
-													<td>{t(item.status)}</td>
-													<td>{item.title}</td>
-													<td>{item.description}</td>
-
-													{/* link to 'Operation Details'  sub-Tab */}
-													<td>
-														<button
-															className="button-like-anchor details-link"
-															onClick={() =>
-																openSubTab("workflow-operation-details", key)
-															}
-														>
-															{
-																t(
-																	"EVENTS.EVENTS.DETAILS.MEDIA.DETAILS"
-																) /* Details */
-															}
-														</button>
-													</td>
-												</tr>
-											))}
-										</tbody>
-									</>
-								)}
+												</button>
+											</td>
+										</tr>
+									))}
+								</tbody>
 							</table>
 						</div>
 					</div>

diff --git a/app/src/components/events/partials/modals/EventDetails.tsx b/app/src/components/events/partials/modals/EventDetails.tsx
@@ -328,7 +328,6 @@ const EventDetails : React.FC<{
 						(workflowTabHierarchy === "workflow-operations" && (
 							<EventDetailsWorkflowOperations
 								eventId={eventId}
-								t={t}
 								setHierarchy={setWorkflowTabHierarchy}
 							/>
 						)) ||