Add StockImages to FilePicker

Author: Piotr Siatka

docs/documentation/docs/controls/FilePicker.md

@@ -69,6 +69,7 @@ The FilePicker component can be configured with the following properties:
 | itemsCountQueryLimit | number | no | Number of items to obtain when executing REST queries. Default 100. |
 | hideRecentTab | boolean | no | Specifies if RecentTab should be hidden. |
 | hideWebSearchTab | boolean | no | Specifies if WebSearchTab should be hidden. |
+| hideStockImages | boolean | no | Specifies if StockImagesTab should be hidden. |
 | hideOrganisationalAssetTab | boolean | no | Specifies if OrganisationalAssetTab should be hidden. |
 | hideOneDriveTab | boolean | no | Specifies if OneDriveTab should be hidden. |
 | hideSiteFilesTab | boolean | no | Specifies if SiteFilesTab should be hidden. |

src/controls/filePicker/FilePicker.tsx

@@ -26,6 +26,7 @@ import { IFilePickerResult } from './FilePicker.types';
 import { FilesSearchService } from '../../services/FilesSearchService';
 
 import * as telemetry from '../../common/telemetry';
+import { StockImages } from './StockImagesTab/StockImages';
 
 export class FilePicker extends React.Component<IFilePickerProps, IFilePickerState> {
   private fileBrowserService: FileBrowserService;
@@ -170,7 +171,14 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
                 {...linkTabProps}
               />
             }
-
+            {
+              this.state.selectedTab === "keyStockImages" &&
+              <StockImages
+                language={this.props.context.pageContext.cultureInfo.currentCultureName}
+                fileSearchService={this.fileSearchService}
+                {...linkTabProps}
+              />
+            }
           </div>
         </Panel>
       </div >
@@ -235,6 +243,14 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
         key: 'keyRecent',
       });
     }
+    if (!this.props.hideStockImages) {
+      links.push({
+        name: strings.StockImagesLinkLabel,
+        url: addUrl ? '#stockImages' : undefined,
+        key: 'keyStockImages',
+        icon: 'ImageSearch',
+      });
+    }
     if (this.props.bingAPIKey && !this.props.hideWebSearchTab) {
       links.push({
         name: strings.WebSearchLinkLabel,

src/controls/filePicker/IFilePickerProps.ts

@@ -72,6 +72,11 @@ export interface IFilePickerProps {
    */
   hideRecentTab?: boolean;
 
+  /**
+   * Specifies if StockImagesTab should be hidden.
+   */
+  hideStockImages?: boolean;
+
   /**
    * Specifies if WebSearchTab should be hidden.
    */

src/controls/filePicker/StockImagesTab/IStockImagesProps.ts

@@ -0,0 +1,7 @@
+import { IFilePickerTab } from "..";
+import { FilesSearchService } from "../../../services/FilesSearchService";
+
+export interface IStockImagesProps extends IFilePickerTab {
+  language: string;
+  fileSearchService: FilesSearchService;
+}

src/controls/filePicker/StockImagesTab/StockImages.module.scss

@@ -0,0 +1,18 @@
+@import "../FilePicker.module.scss";
+
+.stockImagesPickerContainer {
+  width: 100%;
+  height: 100%;
+}
+.stockImagesPicker {
+  width: 100%;
+  height: 100%;
+
+  background-color: transparent;
+  border: 0px none transparent;
+  padding: 0px;
+  overflow: hidden;
+
+  margin-top:-30px;
+  margin-left: -35px;
+}

src/controls/filePicker/StockImagesTab/StockImages.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import styles from './StockImages.module.scss';
+import { StockImagesEvent, SubmitValue, IStockImagesProps } from '.';
+import { GeneralHelper } from '../../../Utilities';
+import { IFilePickerResult } from '..';
+
+export class StockImages extends React.Component<IStockImagesProps> {
+  public componentDidMount() {
+    window.addEventListener("message", this._handleImageIframeEvent);
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener("message", this._handleImageIframeEvent);
+  }
+
+  public render(): React.ReactElement<IStockImagesProps> {
+    const { language } = this.props;
+
+    const themesColor = `&themecolors=${encodeURIComponent(this.getCurrentThemeConfiguration())}`;
+    const contentPickerUrl = `https://hubblecontent.osi.office.net/contentsvc/external/m365contentpicker/index.html?p=3&app=1001&aud=prod&channel=devmain&setlang=${language}&msel=0&env=prod&premium=1${themesColor}`;
+
+    return (
+      <div className={styles.tabContainer}>
+        <div className={styles.tab}>
+          <div className={styles.stockImagesPickerContainer}>
+            <iframe className={styles.stockImagesPicker} role={"application"} id={"stockImagesIFrame"}
+            src={contentPickerUrl} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private _handleImageIframeEvent = (event) => {
+    if (!event || !event.origin || event.origin.indexOf("https://hubblecontent.osi.office.net") !== 0) {
+      return;
+    }
+
+    const eventData: StockImagesEvent = JSON.parse(event.data);
+
+    if (eventData.MessageId === "AddItem") {
+      this._handleSave(eventData);
+    } else if (eventData.MessageId === "CancelDialog") {
+      this._handleClose();
+    } 
+  }
+
+  /**
+   * Called when user saves
+   */
+  private _handleSave = (event: StockImagesEvent) => {
+    let filePickerResult: IFilePickerResult = null;
+    const cdnFileInfo: SubmitValue = event.Values && (event.Values as SubmitValue[]).length > 0 ? (event.Values as SubmitValue[])[0] : null;
+    if (cdnFileInfo) {
+      filePickerResult = {
+        downloadFileContent: () => { return this.props.fileSearchService.downloadBingContent(cdnFileInfo.sourceUrl, GeneralHelper.getFileNameFromUrl(GeneralHelper.getFileNameFromUrl(cdnFileInfo.sourceUrl))); },
+        fileAbsoluteUrl: cdnFileInfo.sourceUrl,
+        fileName: GeneralHelper.getFileNameFromUrl(cdnFileInfo.sourceUrl),
+        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(cdnFileInfo.sourceUrl)
+      };
+    }
+    
+    this.props.onSave(filePickerResult);
+  }
+
+  /**
+   * Called when user closes tab
+   */
+  private _handleClose = () => {
+    this.props.onClose();
+  }
+
+  private getCurrentThemeConfiguration() {
+    if (!window["__themeState__"] || !window["__themeState__"].theme) {
+      return "";
+    }
+
+    const primaryColor = window["__themeState__"].theme["themePrimary"];
+    const textColor = window["__themeState__"].theme["primaryText"];
+    const primaryBackground = window["__themeState__"].theme["bodyBackground"]; 
+    const neutralLighter = window["__themeState__"].theme["neutralLighter"]; 
+
+    const theme = `{"primaryColor":"${primaryColor}","textColor":"${textColor}","backgroundColor":"${primaryBackground}","neutralLighterColor":"${neutralLighter}"}`;
+    return theme;
+  }
+}

src/controls/filePicker/StockImagesTab/StockImagesModel.ts

@@ -0,0 +1,35 @@
+export interface EventFlags {
+  dataCategories: number;
+  diagnosticLevel: number;
+}
+
+export interface DataField {
+  name: string;
+  dataType: number;
+  value: string;
+  classification: number;
+}
+
+export interface TelemetryProperties {
+  ariaTenantToken: string;
+  nexusTenantToken: number;
+}
+
+export interface EventValue {
+  eventName: string;
+  eventFlags: EventFlags;
+  dataFields: DataField[];
+  telemetryProperties: TelemetryProperties;
+}
+export interface SubmitValue {
+  action: string;
+  contenttype: string;
+  sourceUrl: string;
+  caption: string;
+}
+
+export interface StockImagesEvent {
+  MessageId: string;
+  Values: EventValue | SubmitValue[];
+  SendTime: number;
+}

src/controls/filePicker/StockImagesTab/index.ts

@@ -0,0 +1,3 @@
+export * from "./StockImagesModel";
+export * from "./IStockImagesProps";
+export * from "./StockImages";

src/loc/en-us.ts

@@ -324,6 +324,8 @@ define([], () => {
     UploadImageHeader: "Upload image",
     UploadLinkLabel: "Upload",
     WebSearchLinkLabel: "Web search",
+    StockImagesLinkLabel: "Stock images",
+    StockImagesHeader: "Stock Images",
     Yes: "Yes",
 
     NewFolderNamePlaceholder: "Enter your folder name",

src/loc/mystrings.d.ts

@@ -289,6 +289,8 @@ declare interface IControlStrings {
   UploadImageHeader: string;
   UploadLinkLabel: string;
   WebSearchLinkLabel: string;
+  StockImagesLinkLabel: string;
+  StockImagesHeader: string;
   Yes: string;
 
   // folder explorer