From 0c61dee07ba6bc6d871fe7331dac651fb2e37622 Mon Sep 17 00:00:00 2001 From: Gabe Lyons Date: Fri, 15 Apr 2022 09:37:08 -0700 Subject: [PATCH] set custom logo without rebuilding (#4674) --- .../datahub/graphql/GmsGraphQLEngine.java | 11 ++++++--- .../resolvers/config/AppConfigResolver.java | 8 ++++++- .../src/main/resources/app.graphql | 15 ++++++++++++ datahub-web-react/README.md | 5 ++++ .../src/app/home/HomePageHeader.tsx | 8 ++++++- .../src/app/search/SearchHeader.tsx | 7 +++++- datahub-web-react/src/appConfigContext.tsx | 3 +++ datahub-web-react/src/graphql/app.graphql | 3 +++ .../factory/common/VisualConfigFactory.java | 24 +++++++++++++++++++ .../factory/graphql/GraphQLEngineFactory.java | 11 +++++++-- .../src/main/resources/application.yml | 4 ++++ 11 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 metadata-service/factories/src/main/java/com/linkedin/gms/factory/common/VisualConfigFactory.java diff --git a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java index 699c6d2d9537aa..a149f2c541b1aa 100644 --- a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java +++ b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java @@ -52,6 +52,7 @@ import com.linkedin.datahub.graphql.generated.SearchResult; import com.linkedin.datahub.graphql.generated.UsageQueryResult; import com.linkedin.datahub.graphql.generated.UserUsageCounts; +import com.linkedin.datahub.graphql.generated.VisualConfiguration; import com.linkedin.datahub.graphql.resolvers.AuthenticatedResolver; import com.linkedin.datahub.graphql.resolvers.MeResolver; import com.linkedin.datahub.graphql.resolvers.assertion.AssertionRunEventResolver; @@ -221,6 +222,7 @@ public class GmsGraphQLEngine { private final IngestionConfiguration ingestionConfiguration; private final AuthorizationConfiguration authorizationConfiguration; + private final VisualConfiguration visualConfiguration; private final DatasetType datasetType; private final CorpUserType corpUserType; @@ -286,7 +288,8 @@ public GmsGraphQLEngine() { null, null, null, - false); + false, + null); } public GmsGraphQLEngine( @@ -303,7 +306,8 @@ public GmsGraphQLEngine( final IngestionConfiguration ingestionConfiguration, final AuthorizationConfiguration authorizationConfiguration, final GitVersion gitVersion, - final boolean supportsImpactAnalysis + final boolean supportsImpactAnalysis, + final VisualConfiguration visualConfiguration ) { this.entityClient = entityClient; @@ -322,6 +326,7 @@ public GmsGraphQLEngine( this.ingestionConfiguration = Objects.requireNonNull(ingestionConfiguration); this.authorizationConfiguration = Objects.requireNonNull(authorizationConfiguration); + this.visualConfiguration = visualConfiguration; this.datasetType = new DatasetType(entityClient); this.corpUserType = new CorpUserType(entityClient); @@ -558,7 +563,7 @@ private void configureQueryResolvers(final RuntimeWiring.Builder builder) { new AppConfigResolver(gitVersion, analyticsService != null, this.ingestionConfiguration, this.authorizationConfiguration, - supportsImpactAnalysis)) + supportsImpactAnalysis, this.visualConfiguration)) .dataFetcher("me", new AuthenticatedResolver<>( new MeResolver(this.entityClient))) .dataFetcher("search", new AuthenticatedResolver<>( diff --git a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/config/AppConfigResolver.java b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/config/AppConfigResolver.java index 33160ee62fca5c..d692ddf10ecd16 100644 --- a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/config/AppConfigResolver.java +++ b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/resolvers/config/AppConfigResolver.java @@ -11,6 +11,7 @@ import com.linkedin.datahub.graphql.generated.PoliciesConfig; import com.linkedin.datahub.graphql.generated.Privilege; import com.linkedin.datahub.graphql.generated.ResourcePrivileges; +import com.linkedin.datahub.graphql.generated.VisualConfiguration; import com.linkedin.metadata.config.IngestionConfiguration; import com.linkedin.metadata.version.GitVersion; import graphql.schema.DataFetcher; @@ -29,18 +30,21 @@ public class AppConfigResolver implements DataFetcher get(final DataFetchingEnvironment environmen appConfig.setIdentityManagementConfig(identityManagementConfig); appConfig.setManagedIngestionConfig(ingestionConfig); + appConfig.setVisualConfig(_visualConfiguration); + return CompletableFuture.completedFuture(appConfig); } diff --git a/datahub-graphql-core/src/main/resources/app.graphql b/datahub-graphql-core/src/main/resources/app.graphql index ffa699669f8193..bd4bec148ab251 100644 --- a/datahub-graphql-core/src/main/resources/app.graphql +++ b/datahub-graphql-core/src/main/resources/app.graphql @@ -102,6 +102,21 @@ type AppConfig { Configurations related to Lineage """ lineageConfig: LineageConfig! + + """ + Configurations related to visual appearance, allows styling the UI without rebuilding the bundle + """ + visualConfig: VisualConfiguration! +} + +""" +Configurations related to visual appearance of the app +""" +type VisualConfiguration { + """ + Custom logo url for the homepage & top banner + """ + logoUrl: String } """ diff --git a/datahub-web-react/README.md b/datahub-web-react/README.md index e767c76488eea7..ff838328ca9181 100644 --- a/datahub-web-react/README.md +++ b/datahub-web-react/README.md @@ -72,6 +72,11 @@ The best workaround is to revert to the Active LTS version of Node, 16.13.0 with ### Theming +#### Customizing your App without rebuilding assets + +To see the results of any change to a theme, you will need to rebuild your datahub-frontend-react container. While this may work for some users, if you don't want to rebuild your container +you can still customize the homepage's logo without rebuilding. You can do this by setting the REACT_APP_LOGO_URL env variable when deploying GMS. + #### Selecting a theme Theme configurations are stored in `./src/conf/theme`. To select a theme, choose one and update the `REACT_APP_THEME_CONFIG` env variable stored in `.env`. diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx index 7209facad1dcfb..200ead64cb5789 100644 --- a/datahub-web-react/src/app/home/HomePageHeader.tsx +++ b/datahub-web-react/src/app/home/HomePageHeader.tsx @@ -16,6 +16,7 @@ import { EntityType } from '../../types.generated'; import analytics, { EventType } from '../analytics'; import { AdminHeaderLinks } from '../shared/admin/AdminHeaderLinks'; import { ANTD_GRAY } from '../entity/shared/constants'; +import { useAppConfig } from '../useAppConfig'; const Background = styled.div` width: 100%; @@ -115,6 +116,7 @@ export const HomePageHeader = () => { const [getAutoCompleteResultsForMultiple, { data: suggestionsData }] = useGetAutoCompleteMultipleResultsLazyQuery(); const user = useGetAuthenticatedUser()?.corpUser; const themeConfig = useTheme(); + const appConfig = useAppConfig(); const onSearch = (query: string, type?: EntityType) => { if (!query || query.trim().length === 0) { @@ -193,7 +195,11 @@ export const HomePageHeader = () => { - + {!!themeConfig.content.subtitle && ( {themeConfig.content.subtitle} )} diff --git a/datahub-web-react/src/app/search/SearchHeader.tsx b/datahub-web-react/src/app/search/SearchHeader.tsx index a19dbdfcd796b3..cbfe984fcbc218 100644 --- a/datahub-web-react/src/app/search/SearchHeader.tsx +++ b/datahub-web-react/src/app/search/SearchHeader.tsx @@ -9,6 +9,7 @@ import { AutoCompleteResultForEntity, EntityType } from '../../types.generated'; import EntityRegistry from '../entity/EntityRegistry'; import { ANTD_GRAY } from '../entity/shared/constants'; import { AdminHeaderLinks } from '../shared/admin/AdminHeaderLinks'; +import { useAppConfig } from '../useAppConfig'; const { Header } = Layout; @@ -74,12 +75,16 @@ export const SearchHeader = ({ entityRegistry, }: Props) => { const themeConfig = useTheme(); + const appConfig = useAppConfig(); return (
- +