recommendations prototype

src/Explorer/Explorer.ts

@@ -37,6 +37,7 @@ import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import { RecommendationsAdapter } from "./Recommendations/RecommendationsAdapter";
 import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
@@ -207,6 +208,7 @@ export default class Explorer {
   public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isSettingsV2Enabled: ko.Observable<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
+  public isRecosEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
@@ -261,6 +263,7 @@ export default class Explorer {
   private _dialogProps: ko.Observable<DialogProps>;
   private addSynapseLinkDialog: DialogComponentAdapter;
   private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
+  private recommendationsAdapter: RecommendationsAdapter
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
@@ -415,6 +418,7 @@ export default class Explorer {
     //this.isSettingsV2Enabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSettingsV2));
     this.isSettingsV2Enabled = ko.observable(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
+    this.isRecosEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
@@ -888,7 +892,7 @@ export default class Explorer {
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
     this.notificationConsoleComponentAdapter = new NotificationConsoleComponentAdapter(this);
-
+    
     this._initSettings();
 
     TelemetryProcessor.traceSuccess(
@@ -915,6 +919,7 @@ export default class Explorer {
 
         this.gitHubReposPane = this.notebookManager.gitHubReposPane;
         this.isGitHubPaneEnabled(true);
+        this.isRecosEnabled(true);
       }
 
       this.refreshCommandBarButtons();
@@ -1001,6 +1006,8 @@ export default class Explorer {
     });
     this.addSynapseLinkDialog = new DialogComponentAdapter();
     this.addSynapseLinkDialog.parameters = this._addSynapseLinkDialogProps;
+    this.recommendationsAdapter = new RecommendationsAdapter(this);
+    
   }
 
   public openEnableSynapseLinkDialog(): void {

src/Explorer/Recommendations/RecommendationsAdapter.tsx

@@ -0,0 +1,50 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { MessageBar, MessageBarType, Text} from "office-ui-fabric-react";
+import { StyleConstants } from "../../Common/Constants";
+import Explorer from "../Explorer";
+// import {getRecommendations} from "./api";
+import { configContext } from "../../ConfigContext";
+import { JunoClient } from "../../Juno/JunoClient";
+import { ICardTokens, Card } from "@uifabric/react-cards";
+import {Recommendations, RecommendationProps} from "./RecommendationsComponent";
+// import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+
+export class RecommendationsAdapter implements ReactAdapter {
+public parameters: ko.Observable<number>;
+  public container: Explorer;
+  
+  
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.parameters = ko.observable<number>(Date.now());
+  
+  }
+
+  public forceRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+
+  public renderComponent(): JSX.Element {
+    //const backgroundColor = StyleConstants.BaseLight;
+    
+    
+    return (
+      <Recommendations explorer={this.container}/>
+    );
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+
+  
+}

src/Explorer/Recommendations/RecommendationsComponent.tsx

@@ -0,0 +1,89 @@
+import { ICardTokens, Card } from "@uifabric/react-cards";
+import React from "react";
+import { JunoClient } from "../../Juno/JunoClient";
+import Explorer from "../Explorer";
+import { MessageBar, MessageBarButton, MessageBarType, IMessageBarStyles, Spinner } from "office-ui-fabric-react";
+import { FontSize } from "../Controls/GitHub/GitHubStyleConstants";
+
+export interface RecommendationProps {
+    explorer: Explorer;
+
+  }
+
+  export const recoStyles: Partial<IMessageBarStyles> = { root: { backgroundColor: "#0078d4" ,
+   color:"white", fontSize: "16px"}, text: {fontSize: "16px"}, icon: {display: "none"}};
+
+   export const recoButtonStyles = {root: {fontSize: "10px"}};
+
+export class Recommendations extends React.Component<RecommendationProps> {
+
+    public state: { recoMessage: string; loadingInfo: boolean;};
+    container: Explorer;
+    
+        
+    constructor(props: RecommendationProps) {
+        super(props);
+        //this.container = this.container;
+        this.state = {
+          recoMessage:"",
+          loadingInfo: false
+        }
+        this.loadInfo();
+      }
+
+      private async loadInfo(){
+        this.setState({loadingInfo: true});
+        let junoClient = new JunoClient(this.props.explorer.databaseAccount);
+      
+        let resp = await junoClient.getRecos();
+        // this.state.recoMessage = resp.description;
+      
+        this.setState({recoMessage: resp.description});
+        this.setState({loadingInfo: false});
+      }
+
+      private clear = () => {
+        this.setState({recoMessage: null})
+      };
+
+      private clear1()
+      {
+        this.setState({recoMessage: null})
+      }
+
+    render() {
+      if (this.state.loadingInfo)
+      {
+        return (<React.Fragment> <Spinner/> Loading your Recommendation </React.Fragment>);
+      }
+      else
+      {
+        if (this.state.recoMessage)
+        {
+        return (
+          <React.Fragment>
+            <MessageBar           
+              dismissButtonAriaLabel="Close"
+              messageBarType={MessageBarType.warning}
+              actions={
+                <div>
+                   <MessageBarButton onClick={this.clear} styles={recoButtonStyles}>Remind me later</MessageBarButton>
+                  <MessageBarButton onClick={this.clear} styles={recoButtonStyles}>Got it</MessageBarButton>
+                </div>
+              }
+              styles={recoStyles}
+            >
+            {this.state.recoMessage}
+             </MessageBar>
+
+          </React.Fragment>);
+        }
+        else
+        {
+            return null;
+        }
+      
+      }
+    
+  }
+}

src/Explorer/Recommendations/api.ts

@@ -0,0 +1,10 @@
+import { JunoClient } from "../../Juno/JunoClient";
+
+export const getRecommendations(endpoint: string): string {
+    let url = `${endpoint}/api/notebooks/recos`;
+    const response = await window.fetch(url, {
+        method: "GET",
+        headers: JunoClient.getHeaders()
+      });
+  
+ }