TRE UI does not update when an action on a VM completes

CHANGELOG.md

@@ -11,7 +11,7 @@ BUG FIXES:
 * Upgrade unresticted and airlock base template versions due to diagnostic settings retention period being depreciated ([#3704](https://github.com/microsoft/AzureTRE/pull/3704))
 * Fix shared services list return restricted resource for admins causing issues with updates ([#3716](https://github.com/microsoft/AzureTRE/issues/3716))
 * Fix grey box appearing on resource card when costs are not available. ([#3254](https://github.com/microsoft/AzureTRE/issues/3254))
-
+* Fix notification panel not passing the workspace scope id to the API hence UI not updating ([#3353](https://github.com/microsoft/AzureTRE/issues/3353))
 
 ## 0.14.1 (September 1, 2023)
 

ui/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tre-ui",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": true,
   "dependencies": {
     "@azure/msal-browser": "^2.35.0",

ui/app/src/components/shared/notifications/NotificationItem.tsx

@@ -16,7 +16,7 @@ import { useAppDispatch } from '../../../hooks/customReduxHooks';
 
 interface NotificationItemProps {
   operation: Operation,
-  showCallout: (o: Operation, r: Resource) => void
+  showCallout: (o: Operation, r: Resource) => void;
 }
 
 export const NotificationItem: React.FunctionComponent<NotificationItemProps> = (props: NotificationItemProps) => {
@@ -32,30 +32,28 @@ export const NotificationItem: React.FunctionComponent<NotificationItemProps> =
 
   const getRelativeTime = (createdWhen: number) => {
     return (moment.utc(moment.unix(createdWhen))).from(now);
-  }
+  };
 
   useEffect(() => {
     const setupNotification = async (op: Operation) => {
       // ignore if we've already set this operation up
       if (notification.resource) return;
 
-      let isWs = false;
       let ws = null;
       let resource = null;
 
       try {
+        // is this a workspace, or workspace child resource operation?
         if (op.resourcePath.indexOf(ApiEndpoint.Workspaces) !== -1) {
-          // we need the workspace to get auth details
           const wsId = op.resourcePath.split('/')[2];
-          ws = (await apiCall(`${ApiEndpoint.Workspaces}/${wsId}`, HttpMethod.Get)).workspace;
+          let scopeId = (await apiCall(`${ApiEndpoint.Workspaces}/${wsId}/scopeid`, HttpMethod.Get)).workspaceAuth.scopeId;
 
+          // is actually a workspace operation or workspace child resource operation
           if (op.resourcePath.split('/').length === 3) {
-            isWs = true;
+            ws = (await apiCall(`${ApiEndpoint.Workspaces}/${wsId}`, HttpMethod.Get, scopeId)).workspace;
             resource = ws;
-          }
-
-          if (!isWs) {
-            let r = await apiCall(op.resourcePath, HttpMethod.Get, ws.properties.scope_id);
+          } else {
+            let r = await apiCall(op.resourcePath, HttpMethod.Get, scopeId);
             resource = getResourceFromResult(r);
           }
         } else {
@@ -64,12 +62,12 @@ export const NotificationItem: React.FunctionComponent<NotificationItemProps> =
         }
         setNotification({ operation: op, resource: resource, workspace: ws });
       } catch (err: any) {
-        err.userMessage = `Error retrieving operation details for ${props.operation.id}`
+        err.userMessage = `Error retrieving operation details for ${props.operation.id}`;
         setApiError(err);
         setErrorNotification(true);
       }
       setLoadingNotification(false);
-    }
+    };
 
     setupNotification(props.operation);
 
@@ -85,14 +83,14 @@ export const NotificationItem: React.FunctionComponent<NotificationItemProps> =
     if (completedStates.includes(status)) return ['SkypeCheck', 'green'];
     if (awaitingStates.includes(status)) return ['Clock', '#cccccc'];
     return ['ProgressLoopInner', DefaultPalette.themePrimary];
-  }
+  };
 
   const updateOperation = (operation: Operation) => {
     dispatch(addUpdateOperation(operation));
     if (completedStates.includes(operation.status)) {
       props.showCallout(operation, notification.resource);
     }
-  }
+  };
 
   return (
     <>
@@ -133,7 +131,7 @@ export const NotificationItem: React.FunctionComponent<NotificationItemProps> =
                   <Stack.Item grow={5}>
                     {
                       props.operation.steps && props.operation.steps.length > 0 && !(props.operation.steps.length === 1 && props.operation.steps[0].templateStepId === 'main') ?
-                        <FluentLink title={isExpanded ? 'Show less' : 'Show more'} href="#" onClick={() => { setIsExpanded(!isExpanded) }} style={{ position: 'relative', top: '2px' }}>{isExpanded ? <Icon iconName='ChevronUp' aria-label='Expand Steps' /> : <Icon iconName='ChevronDown' aria-label='Collapse Steps' />}</FluentLink>
+                        <FluentLink title={isExpanded ? 'Show less' : 'Show more'} href="#" onClick={() => { setIsExpanded(!isExpanded); }} style={{ position: 'relative', top: '2px' }}>{isExpanded ? <Icon iconName='ChevronUp' aria-label='Expand Steps' /> : <Icon iconName='ChevronDown' aria-label='Collapse Steps' />}</FluentLink>
                         :
                         ' '
                     }
@@ -154,7 +152,7 @@ export const NotificationItem: React.FunctionComponent<NotificationItemProps> =
                                 <>{notification.resource.properties.display_name}: {props.operation.action}</> :
                                 s.stepTitle
                             }
-                          </li>)
+                          </li>);
                       })
                       }
                     </ul>

ui/app/src/components/workspaces/WorkspaceLeftNav.tsx

@@ -25,7 +25,7 @@ export const WorkspaceLeftNav: React.FunctionComponent<WorkspaceLeftNavProps> =
   useEffect(() => {
     const getWorkspaceServices = async () => {
       // get the workspace services
-
+      if(!workspaceCtx.workspace.id) return;
       let serviceLinkArray: Array<any> = [];
       props.workspaceServices.forEach((service: WorkspaceService) => {
         serviceLinkArray.push(
@@ -74,7 +74,7 @@ export const WorkspaceLeftNav: React.FunctionComponent<WorkspaceLeftNavProps> =
       ];
 
       // Only show airlock link if enabled for workspace
-      if (workspaceCtx.workspace.properties.enable_airlock) {
+      if (workspaceCtx.workspace.properties.enable_airlock !== undefined && workspaceCtx.workspace.properties.enable_airlock) {
         serviceNavLinks[0].links.push({
           name: 'Airlock',
           key: ApiEndpoint.AirlockRequests,

ui/app/src/components/workspaces/WorkspaceServiceItem.tsx

@@ -48,6 +48,8 @@ export const WorkspaceServiceItem: React.FunctionComponent<WorkspaceServiceItemP
 
   useEffect(() => {
     const getData = async () => {
+      if(!workspaceCtx.workspace.id) return;
+
       setHasUserResourceTemplates(false);
       try {
         let svc = props.workspaceService || {} as WorkspaceService;