Merge pull request #307 from Arnei/event-details-workflow-operations-…

…refresh Fix workflow operations not refreshing
opencast · Apr 3, 2024 · d8f98ba · d8f98ba
2 parents a97a0b4 + e893250
commit d8f98ba
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}
 							/>
 						)) ||