Fix compliance update display

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/trust/src/components/Skeletons/MainSkeleton.tsx

@@ -16,6 +16,7 @@ export function MainSkeleton() {
           <TabLink to={getTrustCenterUrl("subprocessors")}>
             {__("Subprocessors")}
           </TabLink>
+          <TabLink to={getTrustCenterUrl("updates")}>{__("Updates")}</TabLink>
         </Tabs>
         <TabSkeleton />
       </main>

apps/trust/src/pages/UpdatesPage.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
+import { Rows } from "#/components/Rows";
 import type { UpdatesPageQuery } from "#/pages/__generated__/UpdatesPageQuery.graphql";
 
 export const currentTrustUpdatesQuery = graphql`
@@ -41,14 +42,26 @@ export function UpdatesPage({ queryRef }: Props) {
   return (
     <div>
       <h2 className="font-medium mb-1">{__("Updates")}</h2>
-      <p className="text-sm text-txt-secondary mb-4">
+      {items.length === 0
-        {__("Latest compliance and security updates:")}
+        ? (
-      </p>
+            <Rows>
-      <div className="space-y-0">
+              <div className="text-sm text-txt-tertiary text-center py-5">
-        {items.map(item => (
+                {__("No updates have been published yet.")}
-          <UpdateItem key={item.id} item={item} />
+              </div>
-        ))}
+            </Rows>
-      </div>
+          )
+        : (
+            <>
+              <p className="text-sm text-txt-secondary mb-4">
+                {__("Latest compliance and security updates")}
+              </p>
+              <div className="space-y-0">
+                {items.map(item => (
+                  <UpdateItem key={item.id} item={item} />
+                ))}
+              </div>
+            </>
+          )}
     </div>
   );
 }