feat(ui) Add user role to custom home page behind feature flag

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/config/AppConfigResolver.java

@@ -284,6 +284,7 @@ public CompletableFuture<AppConfig> get(final DataFetchingEnvironment environmen
             .setShowProductUpdates(_featureFlags.isShowProductUpdates())
             .setLineageGraphV3(_featureFlags.isLineageGraphV3())
             .setLogicalModelsEnabled(_featureFlags.isLogicalModelsEnabled())
+            .setShowHomepageUserRole(_featureFlags.isShowHomepageUserRole())
             .build();
 
     appConfig.setFeatureFlags(featureFlagsConfig);

datahub-graphql-core/src/main/resources/app.graphql

@@ -762,6 +762,11 @@ type FeatureFlagsConfig {
   Enables logical models feature
   """
   logicalModelsEnabled: Boolean!
+
+  """
+  Enables displaying the homepage user role underneath the name. Only available for custom home page.
+  """
+  showHomepageUserRole: Boolean!
 }
 
 """

datahub-web-react/src/alchemy-components/components/PageTitle/PageTitle.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import { OverflowText } from '@components/components/OverflowText/OverflowText';
 import { Container, SubTitle, Title } from '@components/components/PageTitle/components';
 import { PageTitleProps } from '@components/components/PageTitle/types';
 import { Pill } from '@components/components/Pills';
 
-const StyledSubTitle = styled(SubTitle)`
-    margin-top: 4px;
-`;
-
 export const PageTitle = ({ title, subTitle, pillLabel, variant = 'pageHeader' }: PageTitleProps) => {
     return (
         <Container>
@@ -18,7 +13,7 @@ export const PageTitle = ({ title, subTitle, pillLabel, variant = 'pageHeader' }
                 {pillLabel ? <Pill label={pillLabel} size="sm" clickable={false} /> : null}
             </Title>
 
-            {subTitle ? <StyledSubTitle variant={variant}>{subTitle}</StyledSubTitle> : null}
+            {subTitle ? <SubTitle variant={variant}>{subTitle}</SubTitle> : null}
         </Container>
     );
 };

datahub-web-react/src/app/homeV3/header/components/GreetingText.tsx

@@ -3,7 +3,9 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { useUserContext } from '@app/context/useUserContext';
+import { useUserPersonaTitle } from '@app/homeV2/persona/useUserPersona';
 import { getGreetingText } from '@app/homeV2/reference/header/getGreetingText';
+import { useAppConfig } from '@app/useAppConfig';
 import { useEntityRegistryV2 } from '@app/useEntityRegistry';
 
 import { EntityType } from '@types';
@@ -18,6 +20,12 @@ export default function GreetingText() {
     const greetingText = getGreetingText();
     const { user } = useUserContext();
     const entityRegistry = useEntityRegistryV2();
+    const maybeRole = useUserPersonaTitle();
+    const {
+        config: {
+            featureFlags: { showHomepageUserRole },
+        },
+    } = useAppConfig();
 
     const finalText = useMemo(() => {
         if (!user) return `${greetingText}!`;
@@ -26,7 +34,7 @@ export default function GreetingText() {
 
     return (
         <Container>
-            <PageTitle title={finalText} />
+            <PageTitle title={finalText} subTitle={showHomepageUserRole ? maybeRole : null} />
         </Container>
     );
 }

datahub-web-react/src/appConfigContext.tsx

@@ -84,6 +84,7 @@ export const DEFAULT_APP_CONFIG = {
         showProductUpdates: false,
         lineageGraphV3: false,
         logicalModelsEnabled: false,
+        showHomepageUserRole: false,
     },
     chromeExtensionConfig: {
         enabled: false,

datahub-web-react/src/graphql/app.graphql

@@ -106,6 +106,7 @@ query appConfig {
             showProductUpdates
             lineageGraphV3
             logicalModelsEnabled
+            showHomepageUserRole
         }
         chromeExtensionConfig {
             enabled

metadata-service/configuration/src/main/java/com/linkedin/datahub/graphql/featureflags/FeatureFlags.java

@@ -46,4 +46,5 @@ public class FeatureFlags {
   private boolean lineageGraphV3 = true;
   private boolean showProductUpdates = false;
   private boolean logicalModelsEnabled = false;
+  private boolean showHomepageUserRole = false;
 }

metadata-service/configuration/src/main/resources/application.yaml

@@ -642,6 +642,7 @@ featureFlags:
   lineageGraphV3: ${LINEAGE_GRAPH_V3:false}  # Enables the redesign of the lineage v2 graph
   showProductUpdates: ${SHOW_PRODUCT_UPDATES:true} # Whether to show in-product update popover on new updates.
   logicalModelsEnabled: ${LOGICAL_MODELS_ENABLED:false}  # Enables logical models feature
+  showHomepageUserRole: ${SHOW_HOMEPAGE_USER_ROLE:false}  # Enables displaying the homepage user role underneath the name. Only relevant for custom home page
 
 entityChangeEvents:
   enabled: ${ENABLE_ENTITY_CHANGE_EVENTS_HOOK:true}