feat(ui) Show Acryl information with button and banner behind flag (#8330)

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/featureflags/FeatureFlags.java

@@ -14,4 +14,5 @@ public class FeatureFlags {
   private boolean showSearchFiltersV2 = false;
   private boolean showBrowseV2 = false;
   private PreProcessHooks preProcessHooks;
+  private boolean showAcrylInfo = false;
 }

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

@@ -151,6 +151,7 @@ public class AppConfigResolver implements DataFetcher<CompletableFuture<AppConfi
       .setShowSearchFiltersV2(_featureFlags.isShowSearchFiltersV2())
       .setReadOnlyModeEnabled(_featureFlags.isReadOnlyModeEnabled())
       .setShowBrowseV2(_featureFlags.isShowBrowseV2())
+      .setShowAcrylInfo(_featureFlags.isShowAcrylInfo())
       .build();
 
     appConfig.setFeatureFlags(featureFlagsConfig);

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

@@ -389,6 +389,11 @@ type FeatureFlagsConfig {
   Whether browse V2 sidebar should be shown
   """
   showBrowseV2: Boolean!
+
+  """
+  Whether we should show CTAs in the UI related to moving to Managed DataHub by Acryl.
+  """
+  showAcrylInfo: Boolean!
 }
 
 """

datahub-web-react/src/app/entity/shared/components/styled/DemoButton.tsx

@@ -0,0 +1,22 @@
+import { Button } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+    padding: 8px;
+    font-size: 14px;
+    margin-left: 18px;
+`;
+
+export default function DemoButton() {
+    return (
+        <StyledButton
+            type="primary"
+            href="https://www.acryldata.io/datahub-sign-up"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            Schedule a Demo
+        </StyledButton>
+    );
+}

datahub-web-react/src/app/home/AcrylDemoBanner.tsx

@@ -0,0 +1,56 @@
+import Link from 'antd/lib/typography/Link';
+import React from 'react';
+import styled from 'styled-components';
+import AcrylLogo from '../../images/acryl-light-mark.svg';
+
+const BannerWrapper = styled.div`
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #262626;
+    background-color: #e6f4ff;
+    width: 100%;
+    margin-bottom: 24px;
+`;
+
+const Logo = styled.img`
+    margin-right: 12px;
+    height: 40px;
+    width: 40px;
+`;
+
+const TextWrapper = styled.div`
+    font-size: 14px;
+`;
+
+const Title = styled.div`
+    font-weight: 700;
+`;
+
+const StyledLink = styled(Link)`
+    color: #1890ff;
+    font-weight: 700;
+`;
+
+export default function AcrylDemoBanner() {
+    return (
+        <BannerWrapper>
+            <Logo src={AcrylLogo} />
+            <TextWrapper>
+                <Title>Schedule a Demo of Managed Datahub</Title>
+                <span>
+                    DataHub is already the industries #1 Open Source Data Catalog.{' '}
+                    <StyledLink
+                        href="https://www.acryldata.io/datahub-sign-up"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Schedule a demo
+                    </StyledLink>{' '}
+                    of Acryl DataHub to see the advanced features that take it to the next level!
+                </span>
+            </TextWrapper>
+        </BannerWrapper>
+    );
+}

datahub-web-react/src/app/home/HomePageHeader.tsx

@@ -16,12 +16,14 @@ import { EntityType, FacetFilterInput } from '../../types.generated';
 import analytics, { EventType } from '../analytics';
 import { HeaderLinks } from '../shared/admin/HeaderLinks';
 import { ANTD_GRAY } from '../entity/shared/constants';
-import { useAppConfig } from '../useAppConfig';
+import { useAppConfig, useIsShowAcrylInfoEnabled } from '../useAppConfig';
 import { DEFAULT_APP_CONFIG } from '../../appConfigContext';
 import { HOME_PAGE_SEARCH_BAR_ID } from '../onboarding/config/HomePageOnboardingConfig';
 import { useQuickFiltersContext } from '../../providers/QuickFiltersContext';
 import { getAutoCompleteInputFromQuickFilter } from '../search/utils/filterUtils';
 import { useUserContext } from '../context/useUserContext';
+import AcrylDemoBanner from './AcrylDemoBanner';
+import DemoButton from '../entity/shared/components/styled/DemoButton';
 
 const Background = styled.div`
     width: 100%;
@@ -147,6 +149,7 @@ export const HomePageHeader = () => {
     const appConfig = useAppConfig();
     const [newSuggestionData, setNewSuggestionData] = useState<GetAutoCompleteMultipleResultsQuery | undefined>();
     const { selectedQuickFilter } = useQuickFiltersContext();
+    const showAcrylInfo = useIsShowAcrylInfoEnabled();
     const { user } = userContext;
     const viewUrn = userContext.localState?.selectedViewUrn;
 
@@ -243,9 +246,11 @@ export const HomePageHeader = () => {
                         pictureLink={user?.editableProperties?.pictureLink || ''}
                         name={(user && entityRegistry.getDisplayName(EntityType.CorpUser, user)) || undefined}
                     />
+                    {showAcrylInfo && <DemoButton />}
                 </NavGroup>
             </Row>
             <HeaderContainer>
+                {showAcrylInfo && <AcrylDemoBanner />}
                 <Image
                     src={
                         appConfig.config !== DEFAULT_APP_CONFIG

datahub-web-react/src/app/search/SearchHeader.tsx

@@ -9,9 +9,10 @@ import { AutoCompleteResultForEntity, EntityType } from '../../types.generated';
 import EntityRegistry from '../entity/EntityRegistry';
 import { ANTD_GRAY } from '../entity/shared/constants';
 import { HeaderLinks } from '../shared/admin/HeaderLinks';
-import { useAppConfig } from '../useAppConfig';
+import { useAppConfig, useIsShowAcrylInfoEnabled } from '../useAppConfig';
 import { DEFAULT_APP_CONFIG } from '../../appConfigContext';
 import { ViewSelect } from '../entity/view/select/ViewSelect';
+import DemoButton from '../entity/shared/components/styled/DemoButton';
 
 const { Header } = Layout;
 
@@ -82,6 +83,7 @@ export const SearchHeader = ({
 }: Props) => {
     const [isSearchBarFocused, setIsSearchBarFocused] = useState(false);
     const themeConfig = useTheme();
+    const showAcrylInfo = useIsShowAcrylInfoEnabled();
     const appConfig = useAppConfig();
     const viewsEnabled = appConfig.config?.viewsConfig?.enabled;
 
@@ -118,6 +120,7 @@ export const SearchHeader = ({
                 )}
                 <HeaderLinks areLinksHidden={isSearchBarFocused} />
                 <ManageAccount urn={authenticatedUserUrn} pictureLink={authenticatedUserPictureLink || ''} />
+                {showAcrylInfo && <DemoButton />}
             </NavGroup>
         </Header>
     );

datahub-web-react/src/app/useAppConfig.ts

@@ -7,3 +7,8 @@ import { AppConfigContext } from '../appConfigContext';
 export function useAppConfig() {
     return useContext(AppConfigContext);
 }
+
+export function useIsShowAcrylInfoEnabled() {
+    const appConfig = useAppConfig();
+    return appConfig.config.featureFlags.showAcrylInfo;
+}

datahub-web-react/src/appConfigContext.tsx

@@ -41,6 +41,7 @@ export const DEFAULT_APP_CONFIG = {
         readOnlyModeEnabled: false,
         showSearchFiltersV2: true,
         showBrowseV2: true,
+        showAcrylInfo: false,
     },
 };
 

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

@@ -54,6 +54,7 @@ query appConfig {
             readOnlyModeEnabled
             showSearchFiltersV2
             showBrowseV2
+            showAcrylInfo
         }
     }
 }

datahub-web-react/src/images/acryl-light-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.71 125.19"><defs><style>.cls-1{fill:#b0cad2;}.cls-2{fill:#67bcbd;}.cls-3{fill:#20d3bd;}</style></defs><g id="artwork"><path class="cls-1" d="M96.39,34.23,79.87,11.08a26.43,26.43,0,0,0-43,0L20.32,34.23A26.42,26.42,0,0,0,41.83,76h33A26.42,26.42,0,0,0,96.39,34.23ZM74.87,68h-33a18.42,18.42,0,0,1-15-29.12L43.35,15.72a18.43,18.43,0,0,1,30,0L89.87,38.88A18.42,18.42,0,0,1,74.87,68Z"/><path class="cls-2" d="M105.89,72.32,73,26.24a18,18,0,0,0-29.31,0L10.82,72.32a18,18,0,0,0,14.65,28.46H91.24a18,18,0,0,0,14.65-28.46ZM91.24,92.78H25.47A10,10,0,0,1,17.33,77L50.21,30.88a10,10,0,0,1,16.28,0L99.38,77A10,10,0,0,1,91.24,92.78Z"/><path class="cls-3" d="M114.83,109.26,66.56,41.61a10.07,10.07,0,0,0-16.41,0L1.88,109.26a10.08,10.08,0,0,0,8.2,15.93h96.55a10.08,10.08,0,0,0,8.2-15.93Zm-8.2,7.93H10.08a2.08,2.08,0,0,1-1.69-3.29L56.66,46.25a2.08,2.08,0,0,1,1.69-.87,2.05,2.05,0,0,1,1.69.87l48.28,67.65A2.08,2.08,0,0,1,106.63,117.19Z"/></g></svg>

metadata-service/factories/src/main/resources/application.yml

@@ -289,6 +289,7 @@ featureFlags:
   showBrowseV2: ${SHOW_BROWSE_V2:true} # Enables showing the browse v2 sidebar experience.
   preProcessHooks:
     uiEnabled: ${PRE_PROCESS_HOOKS_UI_ENABLED:true} # Circumvents Kafka for processing index updates for UI changes sourced from GraphQL to avoid processing delays
+  showAcrylInfo: ${SHOW_ACRYL_INFO:false} # Show different CTAs within DataHub around moving to Managed DataHub. Set to true for the demo site.
 
 entityChangeEvents:
   enabled: ${ENABLE_ENTITY_CHANGE_EVENTS_HOOK:true}