Add ability to set custom message via webpage plugin (#288)

#288

datahub/webapp/components/App/App.tsx

@@ -12,7 +12,15 @@ import { NotificationManager } from 'components/NotificationManager/Notification
 import { reduxStore } from 'redux/store';
 
 // Make debugging easier
-(window as any).reduxStore = reduxStore;
+declare global {
+    /* tslint:disable:interface-name */
+    interface Window {
+        reduxStore?: typeof reduxStore;
+        receiveChildMessage?: () => void;
+        NO_ENVIRONMENT_MESSAGE?: string;
+    }
+}
+window.reduxStore = reduxStore;
 
 const AppInner = () => (
     <DndProvider backend={HTML5Backend}>

datahub/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx

@@ -36,11 +36,12 @@ interface IEnvironmentsRouterState {
     environmentsLoaded: boolean;
 }
 
-const blank: React.FunctionComponent = () => (
-    <div className="empty-message">
-        No Environment Available. Please contact DataHub Admin for more info.
-    </div>
-);
+const blank: React.FunctionComponent = () => {
+    const message =
+        window.NO_ENVIRONMENT_MESSAGE ??
+        'No Environment Available. Please contact DataHub Admin for more info.';
+    return <div className="empty-message">{message}</div>;
+};
 
 class EnvironmentsRouterComponent extends React.PureComponent<
     IEnvironmentsRouterProps,

datahub/webapp/lib/result-export.ts

@@ -24,11 +24,11 @@ export function getExporterAuthentication(
         const authWindow = window.open(url);
         const receiveMessage = () => {
             authWindow.close();
-            delete (window as any).receiveChildMessage;
+            delete window.receiveChildMessage;
             window.removeEventListener('message', receiveMessage, false);
             resolve();
         };
-        (window as any).receiveChildMessage = receiveMessage;
+        window.receiveChildMessage = receiveMessage;
 
         // If window is closed without having received message
         const timer = setInterval(() => {

docs/admin_guide/customize_html.md

@@ -0,0 +1,35 @@
+---
+id: customize_html
+title: Customize HTML
+sidebar_label: Customize HTML
+---
+
+DataHub allows for some basic customization in the frontend. You can use the web plugin to inject custom javascript into DataHub frontend. Please check [Plugins Guide](./plugins.md) to see how to get started.
+
+Right now there are two use cases for custom javascript:
+
+1. Inject trackers such as google analytics. For example:
+
+```typescript
+const script = document.createElement('script');
+script.innerHTML = `
+    ...
+`;
+document.body.appendChild(script);
+```
+
+2. Customize some of the messages in DataHub. Currently DataHub allows the plugin to set the following messages:
+
+```typescript
+interface Window {
+    // Users will see this message if they cannot
+    // access any
+    NO_ENVIRONMENT_MESSAGE?: string;
+}
+```
+
+You can set the message directly in the custom_script.ts:
+
+```typescript
+window.NO_ENVIRONMENT_MESSAGE = 'Lorem ipsum dolor sit amet.';
+```

docs/admin_guide/plugins.md

@@ -24,12 +24,10 @@ If you are extending the default query engine, you can create a new engine execu
 
 Auth plugin can be used to add different authentication methods to DataHub as well as adding custom behavior behaviors after a user authenticates. An example of the latter case is to automatically add users to different environments based on additional user permission queries. Please check [Add Auth guide](../developer_guide/add_auth.md) to learn how to add a new auth plugin.
 
-
 ### Engine Status Checker
 
 Engine status checker plugin lets you customize how you want to expose the backend query engine information to the frontend user. Place your custom logic under engine_status_checker_plugin/. Please check [Add Engine Status Checker guide](../developer_guide/add_engine_status_checker.md) to learn how to add a new engine status checker.
 
-
 ### Exporter Plugin
 
 Exporters are ways to provide a quick way for user to move their query results to external websites. DataHub by default provides "python exporter" and "r exporter" code but they need to included in the plugin exporter to be used. Please check [Add Exporter guide](../developer_guide/add_exporter.md) to learn how to add a new exporter and different types of exporters.
@@ -46,20 +44,17 @@ Admins can use job plugin to add new job schedules to DataHub. DataHub provides
 
 Similar to Query engine, metastore plugins provides a way for admins to configure how a metastore can be populated. Users can use it add new ways to load table information. Please check [Add Metastore guide](../developer_guide/add_metastore.md) to learn how to add a new metastore loader.
 
-
 ### Result Store Plugin
 
 By default, datahub supports storing query results/logs to and from s3 and sqlalchemy database. If other store is needed (such as local file system or google cloud), you can add a custom result store exporter. Please check [Add Result Store guide](../developer_guide/add_result_store.md) for more details.
 
-
 ### Task Plugin
 
 Task plugin lets you implement custom async tasks on datahub. For example, you can add a task which refreshes user's profile pic from an external source or add a task that checks if a user still has their access to an environment.
 
 ### Web Page Plugin
 
-Web page plugin allows you to inject custom js, css to DataHub. Place your custom logic under webpage_plugin/custom_script.js to inject it into the Datahub webapp.
-
+Web page plugin allows you to inject custom js, css to DataHub. Place your custom logic under webpage_plugin/custom_script.ts to inject it into the Datahub webapp.
 
 ## Installing Plugins
 

plugins/webpage_plugin/custom_script.ts

@@ -0,0 +1,14 @@
+// Place your custom css/js logic here
+
+export {};
+
+// Use the following definitions to override default DataHub
+// behavior
+declare global {
+    /* tslint:disable:interface-name */
+    interface Window {
+        // Users will see this message if they cannot
+        // access any
+        NO_ENVIRONMENT_MESSAGE?: string;
+    }
+}

webpack.config.js

@@ -89,7 +89,7 @@ module.exports = (env) => {
     const customScriptPath = !!process.env.DATAHUB_PLUGIN
         ? path.resolve(
               process.env.DATAHUB_PLUGIN,
-              './webpage_plugin/custom_script.js'
+              './webpage_plugin/custom_script.ts'
           )
         : null;
     if (customScriptPath != null && fs.existsSync(customScriptPath)) {
@@ -207,9 +207,9 @@ module.exports = (env) => {
             new HtmlWebpackPlugin({
                 title: 'DataHub',
                 template: './datahub/webapp/index.html',
-                chunks: ['react_hot_loader', 'vendor', 'react_app'].concat(
-                    entry.custom ? ['custom'] : []
-                ),
+                chunks: ['react_hot_loader', 'vendor']
+                    .concat(entry.custom ? ['custom'] : [])
+                    .concat(['react_app']),
                 chunksSortMode: 'manual',
             }),
             new webpack.SourceMapDevToolPlugin({