Merge pull request #207 from IABTechLab/jyg-UID2-1736-show-correct-sh…

…aring-types

Show participant is sharing with DSP when allow_sites is null

src/api/routers/participantsRouter.ts

@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios';
 import express, { Response } from 'express';
 import { z } from 'zod';
 
@@ -208,8 +209,15 @@ export function createParticipantsRouter() {
       if (!participant?.siteId) {
         return res.status(400).send('Site id is not set');
       }
-      const sharingList = await getSharingList(participant.siteId);
-      return res.status(200).json(sharingList);
+      try {
+        const sharingList = await getSharingList(participant.siteId);
+        return res.status(200).json(sharingList);
+      } catch (err) {
+        if (err instanceof AxiosError && err.response?.status === 404) {
+          return res.status(404).send('This site does not have a keyset.');
+        }
+        throw err;
+      }
     }
   );
 

src/api/services/adminServiceClient.ts

@@ -15,21 +15,22 @@ const adminServiceClient = axios.create({
   },
 });
 
+const DEFAULT_SHARING_SETTINGS: Pick<SharingListResponse, 'allowed_sites' | 'allowed_types'> = {
+  allowed_types: ['DSP'],
+  allowed_sites: [],
+};
+
 export const getSharingList = async (siteId: number): Promise<SharingListResponse> => {
   try {
     const response = await adminServiceClient.get<SharingListResponse>(
       `/api/sharing/list/${siteId}`,
       {
-        validateStatus: (status) => (status >= 200 && status < 300) || status === 404,
+        validateStatus: (status) => status >= 200 && status < 300,
       }
     );
-    return response.status === 200
+    return response.data.allowed_sites
       ? response.data
-      : {
-          allowed_sites: [],
-          allowed_types: [],
-          hash: 0,
-        };
+      : { ...response.data, ...DEFAULT_SHARING_SETTINGS };
   } catch (error: unknown) {
     const [logger] = getLoggers();
     logger.error(`Get ACLs failed: ${error}`);
@@ -52,16 +53,12 @@ export const updateSharingList = async (
         hash,
       },
       {
-        validateStatus: (status) => (status >= 200 && status < 300) || status === 404,
+        validateStatus: (status) => status >= 200 && status < 300,
       }
     );
-    return response.status === 200
+    return response.data.allowed_sites
       ? response.data
-      : {
-          allowed_sites: [],
-          allowed_types: [],
-          hash: 0,
-        };
+      : { ...response.data, ...DEFAULT_SHARING_SETTINGS };
   } catch (error: unknown) {
     const [logger] = getLoggers();
     logger.error(`Update ACLs failed: ${error}`);

src/web/App.scss

@@ -23,6 +23,10 @@
     .heading-details {
       margin: 4px 0;
     }
+
+    p[role='alert'] {
+      color: var(--theme-error);
+    }
   }
 
   .app-centralize {

src/web/screens/sharingPermissions.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { ReactNode, useContext, useEffect, useState } from 'react';
 
 import { ClientType } from '../../api/services/adminServiceHelpers';
 import { Collapsible } from '../components/Core/Collapsible';
@@ -14,16 +14,29 @@ import {
   GetSharingList,
   UpdateSharingTypes,
 } from '../services/participant';
+import { ApiError } from '../utils/apiError';
+import { useAsyncError } from '../utils/errorHandler';
 import { PortalRoute } from './routeUtils';
 
 import './sharingPermissions.scss';
 
+function SharingPermissionPageContainer({ children }: { children: ReactNode }) {
+  return (
+    <div className='sharingPermissions'>
+      <h1>Sharing Permissions</h1>
+      {children}
+    </div>
+  );
+}
+
 function SharingPermissions() {
+  const [showNoKeySetError, setNoKeySetError] = useState(false);
   const [showStatusPopup, setShowStatusPopup] = useState(false);
   const { participant, setParticipant } = useContext(ParticipantContext);
   const [sharedSiteIds, setSharedSiteIds] = useState<number[]>([]);
   const [sharedTypes, setSharedTypes] = useState<ClientType[]>([]);
   const [statusPopup, setStatusPopup] = useState<StatusNotificationType>();
+  const throwError = useAsyncError();
 
   const handleSaveSharingType = async (selectedTypes: ClientType[]) => {
     try {
@@ -91,19 +104,41 @@ function SharingPermissions() {
     }
   };
 
-  const loadSharingList = useCallback(async () => {
-    const response = await GetSharingList();
-    setSharedSiteIds(response.allowed_sites);
-    setSharedTypes(response.allowed_types ?? []);
-  }, []);
-
   useEffect(() => {
+    const loadSharingList = async () => {
+      try {
+        const response = await GetSharingList();
+        setSharedSiteIds(response.allowed_sites);
+        setSharedTypes(response.allowed_types ?? []);
+      } catch (e: unknown) {
+        if (e instanceof ApiError) {
+          if (e.statusCode === 404) {
+            setNoKeySetError(true);
+            return;
+          }
+          throwError(e);
+        }
+      }
+    };
     loadSharingList();
-  }, [loadSharingList]);
+  }, [throwError]);
+
+  if (showNoKeySetError) {
+    return (
+      <SharingPermissionPageContainer>
+        <p className='heading-details' role='alert'>
+          We&apos;re experiencing an issue on our end. Access to sharing permissions is currently
+          unavailable for you.
+          <br />
+          <br />
+          Please reach out to our support team for assistance.
+        </p>
+      </SharingPermissionPageContainer>
+    );
+  }
 
   return (
-    <div className='sharingPermissions'>
-      <h1>Sharing Permissions</h1>
+    <SharingPermissionPageContainer>
       <p className='heading-details'>
         Adding a sharing permission allows the participant you’re sharing with to decrypt your UID2
         tokens.
@@ -146,7 +181,7 @@ function SharingPermissions() {
           message={statusPopup!.message}
         />
       )}
-    </div>
+    </SharingPermissionPageContainer>
   );
 }
 

src/web/styles/themes.scss

@@ -35,7 +35,6 @@
   --theme-label-background: #c0d6ff;
   --theme-search-bar-background: rgb(112 133 212 / 15%);
   --theme-scrollbar: #c0d6ff;
-  --theme-error: red;
   --theme-disabled-button-text: #878787;
   --theme-disabled-button: #d9d9d9;
   --theme-label: rgb(120 204 0 / 40%);

src/web/utils/apiError.tsx

@@ -20,7 +20,7 @@ export function backendError(e: unknown, overrideMessage: string) {
 
     return new ApiError(overrideMessage, {
       errorHash: hash,
-      statusCode: e.status,
+      statusCode: e.status || e.response?.status,
     });
   }
   return Error(overrideMessage);