Fix bugs. Remove usage of PnP.

Author: Piotr Siatka

src/common/utilities/GeneralHelper.ts

@@ -242,10 +242,12 @@ export class GeneralHelper {
     }
 
     public static getFileNameWithoutExtension(itemUrl : string) {
-      const tokens = itemUrl.split("/");
+      const urlTokens = itemUrl.split("?");
+      const url = urlTokens[0];
+      const tokens = url.split("/");
       const fileNameWithExtension = tokens[tokens.length - 1];
       const fileNameTokens = fileNameWithExtension.split(".");
-      const fileName = fileNameTokens[fileNameTokens.length - 1];
+      const fileName = fileNameTokens[0];
 
       return fileName;
     }

src/controls/filePicker/FilePicker.tsx

@@ -102,6 +102,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
             {
               this.state.selectedTab === "keyLink" &&
               <LinkFilePickerTab
+                fileSearchService={this.fileSearchService}
                 allowExternalTenantLinks={true}
                 {...linkTabProps}
               />

src/controls/filePicker/LinkFilePickerTab/ILinkFilePickerTabProps.ts

@@ -1,5 +1,7 @@
 import { IFilePickerTab } from "../FilePicker.types";
+import { FilesSearchService } from "../../../services/FilesSearchService";
 
 export interface ILinkFilePickerTabProps extends IFilePickerTab {
   allowExternalTenantLinks: boolean;
+  fileSearchService: FilesSearchService;
 }

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -10,10 +10,6 @@ import { ILinkFilePickerTabProps, ILinkFilePickerTabState } from '.';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
-// PnP
-//TODO: Remove pnp
-import { FetchClient } from "@pnp/common";
-
 // Localized strings
 import * as strings from 'ControlStrings';
 import { GeneralHelper } from '../../../Utilities';
@@ -50,9 +46,11 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
             validateOnFocusOut={false}
             validateOnLoad={true}
             value={fileUrl}
-            onChanged={(_event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => this._handleChange(newValue)}
+            onChanged={(newValue: string) => this._handleChange(newValue)}
           />
+
         </div>
+
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
@@ -68,12 +66,12 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
   /**
    * Called as user types in a new value
    */
-  private _handleChange = (fileUrl?: string) => {
-    const filePickerResult: IFilePickerResult = {
+  private _handleChange = (fileUrl: string) => {
+    const filePickerResult: IFilePickerResult = fileUrl && this._isUrl(fileUrl) ? {
       file: null,
       fileAbsoluteUrl: fileUrl,
       fileTitle: GeneralHelper.getFileNameWithoutExtension(fileUrl)
-    }
+    } : null;
     this.setState({
       filePickerResult
     });
@@ -83,55 +81,30 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
    * Verifies the url that was typed in
    * @param value
    */
-  private _getErrorMessagePromise(value: string): Promise<string> {
-    return new Promise(resolve => {
-
-      // DOn't give an error for blank or placeholder value, but don't make it a valid entry either
-      if (value === undefined || value === 'https://') {
-        this.setState({ isValid: false });
-        resolve('');
-        return;
-      }
-
-      // Make sure that user is typing a valid URL format
-      if (!this._isUrl(value)) {
-        this.setState({ isValid: false });
-        resolve('');
-        return;
-      }
-
-      // If we don't allow external links, verify that we're in the same domain
-      if (!this.props.allowExternalTenantLinks && !this._isSameDomain(value)) {
-        this.setState({ isValid: false });
-        resolve(strings.NoExternalLinksValidationMessage);
-        return;
-      }
-
-      // Verify the file exists by actually getting the item
-      try {
-        const client = new FetchClient();
-        client.fetch(value, { method: "HEAD" }).then((response) => {
-          if (!response.ok) {
-            this.setState({ isValid: false });
-            resolve(strings.CantValidateValidationMessage);
-            return;
-          }
-          // the file exists
-          this.setState({ isValid: true });
-          resolve('');
-        }, () => {
-          this.setState({ isValid: false });
-          resolve(strings.CantValidateValidationMessage);
-        }).catch(() => {
-          this.setState({ isValid: false });
-          resolve(strings.CantValidateValidationMessage);
-        });
-      } catch (error) {
-        console.log("Error verifying file", error);
-        this.setState({ isValid: false });
-        resolve(strings.CantValidateValidationMessage);
-      }
-    });
+  private _getErrorMessagePromise = async (value: string): Promise<string> => {
+    // DOn't give an error for blank or placeholder value, but don't make it a valid entry either
+    if (value === undefined || value === 'https://') {
+      this.setState({ isValid: false });
+      return '';
+    }
+
+    // Make sure that user is typing a valid URL format
+    if (!this._isUrl(value)) {
+      this.setState({ isValid: false });
+      return '';
+    }
+
+    // If we don't allow external links, verify that we're in the same domain
+    if (!this.props.allowExternalTenantLinks && !this._isSameDomain(value)) {
+      this.setState({ isValid: false });
+      return strings.NoExternalLinksValidationMessage;
+    }
+
+    const fileExists = await this.props.fileSearchService.fetchFile(value);
+    this.setState({ isValid: fileExists });
+
+    const strResult = fileExists ? '' : strings.ProvidedValueIsInvalid;
+    return strResult;
   }
 
   /**

src/loc/en-us.ts

@@ -266,6 +266,7 @@ define([], () => {
     ModifiedField: "Date Modified",
     NameField: "Name",
     No: "No",
+    ProvidedValueIsInvalid: "Provided value is invalid",
     NoExternalLinksValidationMessage: "We only support linking to files in your own organization.",
     NoImageValidationMessage: "This isn't a link to a file type we support. You can only link to an image.",
     NoRecentFiles: "No recent files",

src/loc/mystrings.d.ts

@@ -241,6 +241,7 @@ declare interface IControlStrings {
   NameField: string;
   No: string;
   NoExternalLinksValidationMessage: string;
+  ProvidedValueIsInvalid: string,
   NoImageValidationMessage: string;
   NoRecentFiles: string;
   NoRecentFilesDescription: string;

src/services/FilesSearchService.ts

@@ -22,6 +22,25 @@ export class FilesSearchService {
     this.bingAPIKey = bingAPIKey;
   }
 
+  public fetchFile = async (fileUrl: string): Promise<boolean> => {
+    try {
+      const fetchFileResult = await this.context.httpClient.fetch(fileUrl, SPHttpClient.configurations.v1, {
+        headers: new Headers(),
+        method: 'HEAD',
+        mode: 'cors'
+      });
+
+      if (!fetchFileResult || !fetchFileResult.ok) {
+        throw new Error(`Something went wrong when executing search query. Status='${fetchFileResult.status}'`);
+      }
+
+      return true;
+    } catch (err) {
+      console.error(`[BingFilesService.fetchFile]: Err='${err.message}'`);
+      return false;
+    }
+  }
+
   public executeRecentSearch = async (accepts?: string) => {
     try {
       const webId = this.context.pageContext.web.id.toString();