Added Valo Connect Widget sample

src/extensions/extendValoUi/CustomExtensions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IntranetLocation, IntranetTrigger, IntranetProvider, ExtensionService, TriggerService, ProviderService, ExtensionProvider, IUserProfileProvider, DataSourceService, ExtensionPointToolboxAction, ExtensionPointToolboxPanelCreationAction, MegaMenuItem, StorageType, IClientStorageProvider, IMyToolsProvider, INavigationHierarchyProvider, MegaMenuNavigationItem, InformationMessage, ContextActionType } from '@valo/extensibility';
+import { IntranetLocation, IntranetTrigger, IntranetProvider, ExtensionService, TriggerService, ProviderService, ExtensionProvider, IUserProfileProvider, DataSourceService, ExtensionPointToolboxAction, ExtensionPointToolboxPanelCreationAction, MegaMenuItem, StorageType, IClientStorageProvider, IMyToolsProvider, INavigationHierarchyProvider, MegaMenuNavigationItem, InformationMessage, ContextActionType, ConnectWidgetService, ConnectWidgetSize } from '@valo/extensibility';
 import { IMultilingualProvider } from '@valo/extensibility/lib/providerTypes/IMultilingualProvider';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import Clock from './clock';
@@ -14,6 +14,8 @@ import { CustomGroupHeader } from './customGroupHeader';
 import { Footer } from './footer';
 import { CustomNotifications } from './customNotifications/CustomNotifications';
 import ToolboxComponent from './toolboxComponent/ToolboxComponent';
+import { CustomWidget } from './customWidget/CustomWidget';
+import { CustomWidgetConfigComponent } from './customWidget/CustomWidgetConfig';
 
 export const CustomBreadcrumb: React.SFC<any> = (props: any) => {
   console.log('CustomBreadcrumb', props);
@@ -31,12 +33,14 @@ export default class CustomExtensions {
   private triggerService: TriggerService = null;
   private providerService: ProviderService = null;
   private dataSourceService: DataSourceService = null;
+  private connectWidgetService: ConnectWidgetService = null;
 
   constructor() {
     this.extensionService = ExtensionService.getInstance();
     this.triggerService = TriggerService.getInstance();
     this.providerService = ProviderService.getInstance();
     this.dataSourceService = DataSourceService.getInstance();
+    this.connectWidgetService = ConnectWidgetService.getInstance();
   }
 
   public register(ctx: ApplicationCustomizerContext) {
@@ -173,6 +177,7 @@ export default class CustomExtensions {
     //     } as ExtensionPointToolboxPanelCreationAction
     //   ]
     // });
+    this.registerWidget();
 
     this.extensionService.registerExtension({
       id: "ToolboxPanelCreationAction3",
@@ -265,6 +270,25 @@ export default class CustomExtensions {
     });
   }
 
+  private registerWidget(): void {
+    this.connectWidgetService.registerWidget({
+      id: "custom-widget-sample",
+      size: ConnectWidgetSize.Single,
+      title: "Widget sample",
+      description: "This is a sample widget registered via extension",
+      widgetComponentsFactory: (config) => [
+        {
+          id: "custom-widget-sample-1",
+          title: "Tab 1",
+          content: <CustomWidget widgetConfig={config} />
+        }
+      ],
+      widgetConfigComponentFactory: (currentConfig: any, onConfigUpdated: (config: any) => void) => {
+        return <CustomWidgetConfigComponent onConfigurationUpdated={onConfigUpdated} widgetConfiguration={currentConfig} />;
+      }
+    });
+  }
+
 
   private async fetchProviders() {
     const configProvider = await this.providerService.getProvider<any>(IntranetProvider.Config);

src/extensions/extendValoUi/customWidget/CustomWidget.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ICustomWidgetConfig } from './CustomWidgetConfig';
+
+export interface ICustomWidgetProps {
+    widgetConfig: ICustomWidgetConfig;
+}
+
+export class CustomWidget extends React.Component<ICustomWidgetProps, {}> {
+    public render() {
+        return this.props.widgetConfig ? <div>
+            <h2>{this.props.widgetConfig.title}</h2>
+            <p>{this.props.widgetConfig.text}</p>
+            <a href="https://valointranet.com">Valo Intranet</a>
+        </div> : <div>Widget is not configured</div>;
+    }
+}

src/extensions/extendValoUi/customWidget/CustomWidgetConfig.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ConnectWidgetConfigurationComponent, ConnectWidgetConfigurationProps } from '@valo/extensibility/lib/models/connectWidget/';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+
+export interface ICustomWidgetConfig {
+    title: string;
+    text: string;
+}
+
+export interface ICustomWidgetState {
+    title: string;
+    text: string;
+}
+
+export class CustomWidgetConfigComponent extends ConnectWidgetConfigurationComponent<ICustomWidgetConfig, ICustomWidgetState> {
+
+    constructor(props: ConnectWidgetConfigurationProps<ICustomWidgetConfig>) {
+        super(props);
+        this.state = {
+            title: this.props.widgetConfiguration ? this.props.widgetConfiguration.title : '',
+            text: this.props.widgetConfiguration ? this.props.widgetConfiguration.text : ''
+        };
+    }
+
+    public render() {
+        return <div>
+            <TextField label="Title" value={this.state.title} onChange={this.titleChanged}></TextField>
+            <TextField multiline label="Text" value={this.state.text} onChange={this.textChanged}></TextField>
+        </div>;
+    }
+
+    private titleChanged = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string) => {
+        this.setState({title: newText}, () => this.props.onConfigurationUpdated(this.state));
+    }
+
+    private textChanged = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string) => {
+        this.setState({text: newText}, () => this.props.onConfigurationUpdated(this.state));
+    }
+}