yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-29 01:42:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Chris Collins 2023-06-29 17:13:50 -04:00 committed by GitHub
parent 08d4e904a8
commit c051ea00b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 104 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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);

5
datahub-graphql-core/src/main/resources/app.graphql
View File

@ -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!
}
"""

22
datahub-web-react/src/app/entity/shared/components/styled/DemoButton.tsx Normal file
View File

@ -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>
);
}

56
datahub-web-react/src/app/home/AcrylDemoBanner.tsx Normal file
View File

@ -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>
);
}

7
datahub-web-react/src/app/home/HomePageHeader.tsx
View File

@ -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

5
datahub-web-react/src/app/search/SearchHeader.tsx
View File

@ -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>
);

5
datahub-web-react/src/app/useAppConfig.ts
View File

@ -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;
}

1
datahub-web-react/src/appConfigContext.tsx
View File

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

1
datahub-web-react/src/graphql/app.graphql
View File

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

1
datahub-web-react/src/images/acryl-light-mark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 985 B

1
metadata-service/factories/src/main/resources/application.yml
View File

@ -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}