diff --git a/datahub/webapp/components/App/App.tsx b/datahub/webapp/components/App/App.tsx index e7b5fe9a6..b4a0bf715 100644 --- a/datahub/webapp/components/App/App.tsx +++ b/datahub/webapp/components/App/App.tsx @@ -22,7 +22,17 @@ declare global { interface Window { reduxStore?: typeof reduxStore; receiveChildMessage?: () => void; + + // Web Plugin Variables NO_ENVIRONMENT_MESSAGE?: string; + CUSTOM_LANDING_PAGE?: { + // Two modes of custom landing page + // replace: replace the entire landing page with custom content + // not specified: add the custom content to the middle of the + // landing page + mode?: 'replace'; + renderer: () => React.ReactElement; + }; CUSTOM_COLUMN_STATS_ANALYZERS?: IColumnStatsAnalyzer[]; CUSTOM_COLUMN_DETECTORS?: IColumnDetector[]; CUSTOM_COLUMN_TRANSFORMERS?: IColumnTransformer[]; diff --git a/datahub/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx b/datahub/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx index 65a691af3..c709faed3 100644 --- a/datahub/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx +++ b/datahub/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx @@ -36,7 +36,7 @@ export const InfoMenuRoute: React.FunctionComponent = ({ infoType === 'shortcut' ? 'Keyboard Shortcuts' : infoType === 'tour' - ? 'DataHub Tours' + ? 'DataHub Tutorials' : 'Frequently Asked Questions'; return isModal ? ( diff --git a/datahub/webapp/components/Info/Tours.tsx b/datahub/webapp/components/Info/Tours.tsx index d30ceb24f..9c75419f6 100644 --- a/datahub/webapp/components/Info/Tours.tsx +++ b/datahub/webapp/components/Info/Tours.tsx @@ -41,10 +41,10 @@ export const Tours: React.FunctionComponent = () => { return (
- Welcome to DataHub Tours! + Welcome to the DataHub Tutorial! - Click on a card to start a tour + Click on a card to start the tutorial.
{ }) } > - Tours + Tutorials ); diff --git a/datahub/webapp/components/Landing/Landing.scss b/datahub/webapp/components/Landing/Landing.scss index 8a4f4f307..a9c99878b 100644 --- a/datahub/webapp/components/Landing/Landing.scss +++ b/datahub/webapp/components/Landing/Landing.scss @@ -7,16 +7,16 @@ .Landing-top { .Landing-greeting { - margin-left: 12px; + margin-left: 4px; font-weight: bold; - font-size: var(--xxlarge-text-size); + font-size: var(--xlarge-text-size); } .Landing-desc { - margin-left: 12px; + margin-left: 4px; font-weight: bold; - font-size: var(--xlarge-text-size); + font-size: var(--large-text-size); color: var(--light-text-color); } } diff --git a/datahub/webapp/components/Landing/Landing.tsx b/datahub/webapp/components/Landing/Landing.tsx index d2c089cbb..7f09969ae 100644 --- a/datahub/webapp/components/Landing/Landing.tsx +++ b/datahub/webapp/components/Landing/Landing.tsx @@ -22,12 +22,8 @@ import { Title } from 'ui/Title/Title'; import './Landing.scss'; const datahubHints: string[] = require('config/loading_hints.yaml').hints; -/* - * TODO: clean up the urls so they are open source friendly - */ -export const Landing: React.FunctionComponent = () => { - useBrowserTitle(); +const DefaultLanding: React.FC = ({ children }) => { const { userInfo, recentDataDocs, @@ -81,47 +77,67 @@ export const Landing: React.FunctionComponent = () => { const [hint] = React.useState(sample(datahubHints)); - return ( -
-
-
- Hi {titleize(userInfo.fullname || userInfo.username)}, - welcome to -
-
- -
-
{descriptionDOM}
+ const LandingHeader = ( +
+
+ Hi {titleize(userInfo.fullname || userInfo.username)}, welcome + to
-
- - - - - - - - - Did you know? - -

{hint}

- - - - - - Recent DataDocs - -
{getRecentDOM()}
- - - - Favorite DataDocs - -
{getFavoriteDOM()}
- - +
+
+
{descriptionDOM}
+
+ ); + + const LandingFooter = ( +
+ + + + + + + + + Did you know? + +

{hint}

+ + + + + + Recent DataDocs + +
{getRecentDOM()}
+ + + + Favorite DataDocs + +
{getFavoriteDOM()}
+ + +
+ ); + + return ( +
+ {LandingHeader} +
{children}
+ {LandingFooter}
); }; + +export const Landing: React.FC = () => { + useBrowserTitle(); + + const customLandingConfig = window.CUSTOM_LANDING_PAGE; + if (customLandingConfig?.mode === 'replace') { + return customLandingConfig.renderer(); + } + + return {customLandingConfig?.renderer()}; +}; diff --git a/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx b/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx index 3bbca9fa9..d7be09a34 100644 --- a/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx +++ b/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx @@ -202,7 +202,7 @@ export const DataHubSidebarUIGuide: React.FC = () => { borderless inverted > - Begin Tour + DataHub UI Tutorial React.ReactElement; + }; +} +``` + +The renderer should be treated as the entry point into your customized react view. You can add any default HTML elements you want or import UI elements from DataHub. + +If the mode variable is not provided, then DataHub would show this custom content in the middle section (currently empty) of the default landing page. However, if you specify the mode to be "replace", then the entire landing page will be replaced with your custom content. diff --git a/plugins/webpage_plugin/custom_script.ts b/plugins/webpage_plugin/custom_script.ts index 6225523ab..f30f0ec10 100644 --- a/plugins/webpage_plugin/custom_script.ts +++ b/plugins/webpage_plugin/custom_script.ts @@ -1,6 +1,5 @@ // Place your custom css/js logic here import React from 'react'; - export {}; interface IColumnDetector { @@ -35,6 +34,14 @@ declare global { // Users will see this message if they cannot // access any NO_ENVIRONMENT_MESSAGE?: string; + CUSTOM_LANDING_PAGE?: { + // Two modes of custom landing page + // replace: replace the entire landing page with custom content + // not specified: add the custom content to the middle of the + // landing page + mode?: 'replace'; + renderer: () => React.ReactElement; + }; CUSTOM_COLUMN_STATS_ANALYZERS?: IColumnStatsAnalyzer[]; CUSTOM_COLUMN_DETECTORS?: IColumnDetector[]; CUSTOM_COLUMN_TRANSFORMERS?: IColumnTransformer[];