Merge pull request #130 from awoimbee/display-name-fallback-on-name

fallback on name is displayName is emtpy

public/locales/en/translation.json

@@ -109,7 +109,7 @@
   "internalApp": "Internal",
   "inUse": "In use",
   "insufficient-permissions": "Insufficient permissions to perform action.",
-  "invitation-email-placeholder": "for example, Thomas, [email protected]",
+  "invitation-email-placeholder": "[email protected]",
   "invitation-instructions-description": "Add a new member to the organization by entering their email and assigning them a role within the organization. An email will be sent to them with instructions on how to join.",
   "invitation-missing-permission-title": "You lack the 'manage-invitations' role.",
   "invitation-missing-permission-body": "Speak to an admin in order to be granted this role.",

public/locales/fr/translation.json

@@ -108,7 +108,7 @@
   "internalApp": "Interne",
   "inUse": "En cours d'utilisation",
   "insufficient-permissions": "Permissions insuffisante pour réaliser cette action.",
-  "invitation-email-placeholder": "par exemple, Thomas, [email protected]",
+  "invitation-email-placeholder": "[email protected]",
   "invitation-instructions-description": "Ajoutez un nouveau membre à l'organisation en entrant son email et en lui attribuant un rôle au sein de l'organisation. Un email leur sera envoyé avec des instructions pour rejoindre.",
   "invitation-missing-permission-title": "Vous ne pouvez pas gérer les invitations.",
   "invitation-missing-permission-body": "Contactez un administrateur pour obtenir les droits nécessaires.",

src/components/elements/organizations/item.tsx

@@ -78,7 +78,10 @@ const InnerItem = ({
 
 const OrganizationItem: FC<Props> = ({ children, org, viewType }) => {
   const { t } = useTranslation();
-  const { displayName: title, name: subTitle } = org;
+  let { displayName: title, name: subTitle } = org;
+  if (!title) {
+    title = subTitle;
+  }
   const link = `/organizations/${org.id}/details`;
   const { hasViewOrganizationRole: hasViewOrganizationRoleCheck } = useUser();
   const hasViewOrganizationRole = hasViewOrganizationRoleCheck(org.id);

src/components/utils/org-display-name.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next";
+import { OrganizationRepresentation } from "store/apis/orgs";
+
+function useOrgDisplayName(org?: OrganizationRepresentation) {
+  const { t } = useTranslation();
+  const orgName = org?.displayName || org?.name || t("organization");
+
+  return { orgName };
+}
+
+export default useOrgDisplayName;

src/pages/invitation/new.tsx

@@ -17,6 +17,7 @@ import useUser from "components/utils/useUser";
 import Alert from "components/elements/alerts/alert";
 import { useTranslation } from "react-i18next";
 import { DecoratedRole, RolesList } from "pages/member/components";
+import useOrgDisplayName from "components/utils/org-display-name";
 
 const { realm } = config.env;
 
@@ -44,6 +45,8 @@ const NewInvitation = () => {
     realm: config.env.realm,
   });
 
+  const { orgName } = useOrgDisplayName(org);
+
   const {
     register,
     handleSubmit,
@@ -83,9 +86,7 @@ const NewInvitation = () => {
           return P2Toast({
             error: true,
             title:
-              e.status === 401
-                ? t("insufficient-permissions")
-                : e.data.error,
+              e.status === 401 ? t("insufficient-permissions") : e.data.error,
           });
         });
     }
@@ -98,7 +99,7 @@ const NewInvitation = () => {
   return (
     <div className="mt-4 md:mt-16">
       <SectionHeader
-        title={t("invitation-title", [org?.displayName || "Organization"])}
+        title={t("invitation-title", [orgName])}
         description={t("invitation-instructions-description")}
         icon={loadingIcon}
         rightContent={

src/pages/organizations/detail.tsx

@@ -32,6 +32,7 @@ import { useTranslation } from "react-i18next";
 import { ChangeEvent, useEffect, useState } from "react";
 import { toNumber } from "lodash";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import useOrgDisplayName from "components/utils/org-display-name";
 
 export default function OrganizationDetail() {
   const { t } = useTranslation();
@@ -50,6 +51,8 @@ export default function OrganizationDetail() {
     orgId: orgId!,
     realm,
   });
+  const { orgName } = useOrgDisplayName(org);
+
   const {
     data: members = [],
     isLoading,
@@ -114,7 +117,7 @@ export default function OrganizationDetail() {
   return (
     <>
       <TopHeader
-        header={`${org?.displayName || ""}`.trim()}
+        header={orgName}
         collapseOnMobile={true}
         leftAreaItems={
           <Breadcrumbs

src/pages/organizations/settings/index.tsx

@@ -11,6 +11,7 @@ import SettingsDomain from "./domains";
 import SettingsSSO from "./sso";
 import useUser from "components/utils/useUser";
 import { useTranslation } from "react-i18next";
+import useOrgDisplayName from "components/utils/org-display-name";
 
 export type SettingsProps = {
   hasManageOrganizationRole?: boolean;
@@ -28,8 +29,10 @@ export default function OrganizationSettings() {
     orgId: orgId!,
     realm: config.env.realm,
   });
+  const { orgName } = useOrgDisplayName(org);
   const hasManageOrganizationRole = hasManageOrganizationRoleCheck(orgId);
   const hasManageIDPRole = hasManageIdentityProvidersRole(orgId);
+
   return (
     <>
       <TopHeader
@@ -40,9 +43,7 @@ export default function OrganizationSettings() {
             items={[
               { title: t("organizations"), link: `/organizations` },
               {
-                title: `${
-                  org?.displayName || org?.name || t("organization")
-                }`.trim(),
+                title: orgName,
                 link: `/organizations/${orgId}/details`,
               },
             ]}