From 10b25f97ff9666bb9e0c0fadf5b453ced9da84fc Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Tue, 29 Aug 2023 07:13:51 -0700
Subject: [PATCH] fix: disable open on click behavior (#2685)

Adds the disable-open-on-click attibute to the mgt-file-list to allow developers to prevent items with a webUrl from opening in a new browser window. The provides backwards function compatibility to v2
Adds disable-open-on-click to events story
---
 .../src/components/mgt-file-list/mgt-file-list.ts          | 7 ++++++-
 packages/mgt-element/src/utils/version.ts                  | 2 +-
 packages/mgt-react/src/generated/react.ts                  | 1 +
 stories/components/fileList/fileList.properties.js         | 4 ++++
 stories/components/fileList/fileList.stories.js            | 2 +-
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
index a1c5dc1558..74d5e6a05a 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
@@ -403,6 +403,11 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
     void this.requestStateUpdate(true);
   }
 
+  @property({
+    attribute: 'disable-open-on-click',
+    type: Boolean
+  })
+  public disableOpenOnClick = false;
   /**
    * A boolean value indication if 'show-more' button should be disabled
    *
@@ -1007,7 +1012,7 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
   }
 
   private handleFileClick(file: DriveItem) {
-    if (file?.webUrl) {
+    if (file?.webUrl && !this.disableOpenOnClick) {
       window.open(file.webUrl, '_blank', 'noreferrer');
     }
   }
diff --git a/packages/mgt-element/src/utils/version.ts b/packages/mgt-element/src/utils/version.ts
index 47e7e300c1..37ce56a1d0 100644
--- a/packages/mgt-element/src/utils/version.ts
+++ b/packages/mgt-element/src/utils/version.ts
@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '3.0.1';
+export const PACKAGE_VERSION = '3.1.1';
diff --git a/packages/mgt-react/src/generated/react.ts b/packages/mgt-react/src/generated/react.ts
index ed046f2aa4..9c39d5d2c2 100644
--- a/packages/mgt-react/src/generated/react.ts
+++ b/packages/mgt-react/src/generated/react.ts
@@ -58,6 +58,7 @@ export type FileListProps = {
 	itemView?: ViewType;
 	fileExtensions?: string[];
 	pageSize?: number;
+	disableOpenOnClick?: boolean;
 	hideMoreFilesButton?: boolean;
 	maxFileSize?: number;
 	enableFileUpload?: boolean;
diff --git a/stories/components/fileList/fileList.properties.js b/stories/components/fileList/fileList.properties.js
index b8510778f2..c8dca32920 100644
--- a/stories/components/fileList/fileList.properties.js
+++ b/stories/components/fileList/fileList.properties.js
@@ -94,6 +94,10 @@ export const getFileListByExtensions = () => html`
     <mgt-file-list file-extensions="docx, xlsx"></mgt-file-list>
   `;
 
+export const disableOpenOnClick = () => html`
+<mgt-file-list disable-open-on-click></mgt-file-list>
+`;
+
 export const disableFileExpansion = () => html`
     <mgt-file-list hide-more-files-button></mgt-file-list>
   `;
diff --git a/stories/components/fileList/fileList.stories.js b/stories/components/fileList/fileList.stories.js
index faa4af61f7..ba005bdfa3 100644
--- a/stories/components/fileList/fileList.stories.js
+++ b/stories/components/fileList/fileList.stories.js
@@ -51,7 +51,7 @@ export const localization = () => html`
 export const events = () => html`
   <p>Clicked File:</p>
   <mgt-file></mgt-file>
-  <mgt-file-list></mgt-file-list>
+  <mgt-file-list disable-open-on-click></mgt-file-list>
   <script>
     document.querySelector('mgt-file-list').addEventListener('itemClick', e => {
       const file = document.querySelector('mgt-file');