Hide the linked section if no links exist. Also hide the entire secti…

…on if no providers exist Signed-off-by: MTRNord <[email protected]>
element-hq · Nov 8, 2024 · d32ab17 · d32ab17
1 parent 407a721
commit d32ab17
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -42,7 +42,7 @@
         "label": "Password"
       },
       "title": "Your account",
-      "unlinked_upstreams": "Unlinked Upstream Providers"
+      "available_upstreams": "Available Upstream Providers"
     },
     "add_email_form": {
       "email_denied_error": "The entered email is not allowed by the server policy",

diff --git a/frontend/src/components/UserProfile/UpstreamProviderList.tsx b/frontend/src/components/UserProfile/UpstreamProviderList.tsx
@@ -76,9 +76,19 @@ const UpstreamProviderList: React.FC<{}> = () => {
     update({ requestPolicy: "network-only" });
   }, [update]);
 
+  const linkedUpstreams = links.edges.filter((edge) =>
+    edge.node.upstreamOauth2LinksForUser.some(
+      (link) => link.provider.id === edge.node.id,
+    ),
+  );
+
+  if (links.totalCount === 0) {
+    return <></>;
+  }
+
   return (
     <>
-      <H5>{t("frontend.account.unlinked_upstreams")}</H5>
+      <H5>{t("frontend.account.available_upstreams")}</H5>
       {links.edges
         .filter(
           (edge) =>
@@ -92,20 +102,18 @@ const UpstreamProviderList: React.FC<{}> = () => {
             key={edge.cursor}
           />
         ))}
-      <H5>{t("frontend.account.linked_upstreams")}</H5>
-      {links.edges
-        .filter((edge) =>
-          edge.node.upstreamOauth2LinksForUser.some(
-            (link) => link.provider.id === edge.node.id,
-          ),
-        )
-        .map((edge) => (
-          <UnlinkUpstreamProvider
-            upstreamProvider={edge.node}
-            onUnlinked={onUnlinked}
-            key={edge.cursor}
-          />
-        ))}
+      {linkedUpstreams.length > 0 && (
+        <>
+          <H5>{t("frontend.account.linked_upstreams")}</H5>
+          {linkedUpstreams.map((edge) => (
+            <UnlinkUpstreamProvider
+              upstreamProvider={edge.node}
+              onUnlinked={onUnlinked}
+              key={edge.cursor}
+            />
+          ))}
+        </>
+      )}
       <PaginationControls
         autoHide
         count={links.totalCount ?? 0}