feat(website): add banner on restricted sequences (#1362)

loculus-project · Mar 15, 2024 · 608d656 · 608d656
1 parent 9f5547f
commit 608d656
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 15 deletions.
diff --git a/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro b/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro
@@ -9,6 +9,7 @@ import { GroupManagementClient } from '../../services/groupManagementClient';
 import { type DataUseTermsHistoryEntry } from '../../types/backend';
 import { type Group } from '../../types/backend.ts';
 import { getAccessToken } from '../../utils/getAccessToken';
+import ErrorBox from '../common/ErrorBox.astro';
 import MdiEye from '~icons/mdi/eye';
 
 interface Props {
@@ -20,6 +21,7 @@ interface Props {
 
 const { tableData, organism, accessionVersion, dataUseTermsHistory } = Astro.props;
 const group = tableData.find((entry) => entry.name === 'group')?.value;
+const isRestricted = tableData.find((entry) => entry.name === 'dataUseTerms')?.value === 'RESTRICTED';
 
 const runtimeConfig = getRuntimeConfig();
 
@@ -42,6 +44,17 @@ const isMyGroup =
     groupsResult.value.some((myGroupItem: Group) => myGroupItem.groupName === group);
 ---
 
+{
+    isRestricted && (
+        <ErrorBox title='Restricted sequence' level='warning'>
+            This sequence is only available under the Restricted Use Terms. If you make use of this data, you must
+            follow the{' '}
+            <a href='#TODO-MVP' class='underline'>
+                terms of use.
+            </a>
+        </ErrorBox>
+    )
+}
 <DataTable tableData={tableData} dataUseTermsHistory={dataUseTermsHistory} />
 <div>
     <a

diff --git a/website/src/components/User/UserPage.astro b/website/src/components/User/UserPage.astro
@@ -80,7 +80,7 @@ const groupOfUsersResult = await GroupManagementClient.create().getGroupsOfUser(
                         client:load
                     />
                 ),
-                (error) => <ErrorBox title='Failed loading list of groups' message={error.detail} />,
+                (error) => <ErrorBox title='Failed loading list of groups'>{error.detail}</ErrorBox>,
             )
         }
         <div class='mt-4'>

diff --git a/website/src/components/common/ErrorBox.astro b/website/src/components/common/ErrorBox.astro
@@ -1,20 +1,24 @@
 ---
-import DangerousTwoToneIcon from '~icons/ic/twotone-dangerous';
+import DangerousTwoToneIcon from '~icons/material-symbols/error-outline';
+import WarningTwoToneIcon from '~icons/material-symbols/warning-outline';
 
 interface Props {
     title?: string;
-    message: string;
+    level?: 'error' | 'warning';
 }
 
-const { title, message } = Astro.props;
+const { title, level = 'error' } = Astro.props;
 ---
 
 <div>
-    <div class='alert alert-error my-8'>
-        <DangerousTwoToneIcon />
+    <div class:list={['my-8', 'alert', { 'alert-error': level === 'error', 'alert-warning': level === 'warning' }]}>
+        {level === 'error' && <DangerousTwoToneIcon />}
+        {level === 'warning' && <WarningTwoToneIcon />}
         <div class='grid-flow-row'>
             <p class='text-lg font-bold'>{title}</p>
-            <p>{message}</p>
+            <p>
+                <slot />
+            </p>
         </div>
     </div>
 </div>
diff --git a/website/src/pages/[organism]/my_sequences/[group].astro b/website/src/pages/[organism]/my_sequences/[group].astro
@@ -113,7 +113,7 @@ const {
                         </div>
                     </div>
                 ),
-                (error) => <ErrorBox title='Failed searching sequences' message={error.detail} />,
+                (error) => <ErrorBox title='Failed searching sequences'>{error.detail}</ErrorBox>,
             )
         }
     </div>

diff --git a/website/src/pages/[organism]/search/index.astro b/website/src/pages/[organism]/search/index.astro
@@ -83,7 +83,7 @@ const {
                         </div>
                     </div>
                 ),
-                (error) => <ErrorBox title='Failed searching sequences' message={error.detail} />,
+                (error) => <ErrorBox title='Failed searching sequences'>{error.detail}</ErrorBox>,
             )
         }
     </div>

diff --git a/website/src/pages/group/[groupName]/index.astro b/website/src/pages/group/[groupName]/index.astro
@@ -34,7 +34,7 @@ const groupDetailsResult = await GroupManagementClient.create().getGroupDetails(
                         client:load
                     />
                 ),
-                () => <ErrorBox message='Failed to fetch group details, sorry for the inconvenience!' />,
+                () => <ErrorBox>Failed to fetch group details, sorry for the inconvenience!</ErrorBox>,
             )
         )
     }

diff --git a/website/src/pages/seq/[accessionVersion]/index.astro b/website/src/pages/seq/[accessionVersion]/index.astro
@@ -100,10 +100,7 @@ if (
     }
     {
         !sequenceDetailsTableData.isOk() && (
-            <ErrorBox
-                title='Sequence entry not found'
-                message={'No data found for accession version ' + accessionVersion}
-            />
+            <ErrorBox title='Sequence entry not found'>No data found for accession version {accessionVersion}</ErrorBox>
         )
     }
 </BaseLayout>
diff --git a/website/src/pages/seq/[accessionVersion]/versions.astro b/website/src/pages/seq/[accessionVersion]/versions.astro
@@ -69,7 +69,7 @@ for (const query of queries) {
                     ));
                 },
                 (error) => {
-                    return <ErrorBox title='Request for sequence history failed' message={error.detail} />;
+                    return <ErrorBox title='Request for sequence history failed'>{error.detail}</ErrorBox>;
                 },
             )
         }