fix(topbar): support no orgs + custom content (#61)

Hides a wrapper div and a Divider if there is custom content e.g.
"Create organization", but no organizations.

This supports the case where the user has not yet created an
organization or accepted an invitation, and the one where the
organization list is still loading.

components/topbar/src/organization-menu.tsx

@@ -31,6 +31,7 @@ export const OrganizationMenu = (
   const checkedValues = { org: [value] };
   const noDropDownContent = options?.length === 1 && !customContent
     && currentOrganization;
+  const onlyCustomContent = !options?.length && !!customContent;
 
   return (
     <Menu checkedValues={checkedValues}>
@@ -52,25 +53,27 @@ export const OrganizationMenu = (
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
-          <div className={styles.organizationSelection}>
-            {options?.map(({ id, label }) => {
-              return (
-                <MenuItemRadio
-                  data-testid={`organization-menu-item-${id}`}
-                  key={id}
-                  name="org"
-                  // eslint-disable-next-line react/jsx-no-bind
-                  onClick={() => onChange(id)}
-                  value={id}
-                >
-                  {label}
-                </MenuItemRadio>
-              );
-            })}
-          </div>
+          {!onlyCustomContent && (
+            <div className={styles.organizationSelection}>
+              {options?.map(({ id, label }) => {
+                return (
+                  <MenuItemRadio
+                    data-testid={`organization-menu-item-${id}`}
+                    key={id}
+                    name="org"
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={() => onChange(id)}
+                    value={id}
+                  >
+                    {label}
+                  </MenuItemRadio>
+                );
+              })}
+            </div>
+          )}
           {customContent !== undefined && (
             <>
-              <MenuDivider />
+              {!onlyCustomContent && <MenuDivider />}
               {customContent}
             </>
           )}

examples/src/components/top-bar.tsx

@@ -73,7 +73,7 @@ export const Navbar = () => {
   const [selectedApp, setSelectedApp] = useState(applications[0].id);
 
   const [currentOrganizationId, setCurrentOrganizationId] = useState<string>(
-    () => organizations[0].id
+    () => organizations[0]?.id ?? ""
   );
   const selectedTheme = useAppContext((context) => context.theme);
   const setTheme = useAppContext((context) => context.setTheme);