fix: display only a person's shared files in mgt-person-card (#3238)

* fix shared files in person-card

* remove inintended click events, apply review suggestions

* Update packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

Use a more desciptive name

Co-authored-by: Musale Martin <[email protected]>

* fix build

* remove unnecessary else

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -101,4 +101,55 @@ $progress-ring-size: var(--progress-ring-size, 24px);
       font-size: $show-more-button-font-size;
     }
   }
+
+  .shared_insight_file {
+    display: flex;
+    align-items: center;
+    padding: 11px 20px;
+
+    &:hover {
+      background-color: var(--file-item-background-color, var(--neutral-layer-1));
+      cursor: pointer;
+    }
+
+    &:last-child {
+      margin-bottom: unset;
+    }
+
+    .shared_insight_file__icon {
+      width: 28px;
+      min-width: 28px;
+      height: 28px;
+      margin-inline-end: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        height: 28px;
+        width: 28px;
+      }
+    }
+
+    .shared_insight_file__details {
+      min-width: 0;
+      margin-inline-end: 40px;
+
+      .shared_insight_file__name {
+        font-size: var(--file-line1-font-size, var(--size-font-size, #{$ms-font-size-12}));
+        color: var(--file-line1-color, var(--neutral-foreground-rest));
+      }
+
+      .shared_insight_file__last-modified {
+        font-size: var(--file-line3-font-size, var(--size-font-size, #{$ms-font-size-12}));
+        color: var(--file-line3-color, var(--secondary-text-color));
+      }
+
+      > div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
 }

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -10,9 +10,10 @@ import {
   Providers,
   ProviderState,
   mgtHtml,
-  MgtTemplatedTaskComponent
+  MgtTemplatedTaskComponent,
+  registerComponent
 } from '@microsoft/mgt-element';
-import { DriveItem } from '@microsoft/microsoft-graph-types';
+import { DriveItem, SharedInsight } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -46,7 +47,8 @@ import { MgtFileUploadConfig, registerMgtFileUploadComponent } from './mgt-file-
 import { fluentProgressRing } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { CardSection } from '../BasePersonCardSection';
-import { registerComponent } from '@microsoft/mgt-element';
+import { getRelativeDisplayDate } from '../../utils/Utils';
+import { getFileTypeIconUri } from '../../styles/fluent-icons';
 
 export const registerMgtFileListComponent = () => {
   registerFluentComponents(fluentProgressRing);
@@ -56,6 +58,10 @@ export const registerMgtFileListComponent = () => {
   registerComponent('file-list', MgtFileList);
 };
 
+const isSharedInsight = (sharedInsightFile: SharedInsight): sharedInsightFile is SharedInsight => {
+  return 'lastShared' in sharedInsightFile;
+};
+
 /**
  * The File List component displays a list of multiple folders and files by
  * using the file/folder name, an icon, and other properties specified by the developer.
@@ -96,6 +102,10 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
     return strings;
   }
 
+  // files from the person card component
+  @state()
+  private _personCardFiles: DriveItem[];
+
   /**
    * allows developer to provide query for a file list
    *
@@ -369,8 +379,9 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
 
   @state() private _isLoadingMore: boolean;
 
-  constructor() {
+  constructor(files?: DriveItem[]) {
     super();
+    this._personCardFiles = files;
   }
 
   /**
@@ -381,6 +392,7 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
   protected clearState(): void {
     super.clearState();
     this.files = null;
+    this._personCardFiles = null;
   }
 
   /**
@@ -440,6 +452,9 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
     if (!this.files || this.files.length === 0) {
       return this.renderNoData();
     }
+    if (this._personCardFiles) {
+      this.files = this._personCardFiles;
+    }
     return this._isCompact ? this.renderCompactView() : this.renderFullView();
   };
 
@@ -540,8 +555,12 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
    * @returns {TemplateResult}
    * @memberof mgtFileList
    */
-  protected renderFile(file: DriveItem): TemplateResult {
+  protected renderFile(file: DriveItem | SharedInsight): TemplateResult {
     const view = this.itemView;
+    // if file is type SharedInsight, render Shared Insight File
+    if (isSharedInsight(file)) {
+      return this.renderSharedInsightFile(file);
+    }
     return (
       this.renderTemplate('file', { file }, file.id) ||
       mgtHtml`
@@ -550,6 +569,40 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
     );
   }
 
+  /**
+   * Render a file item of Shared Insight Type
+   *
+   * @protected
+   * @param {IFile} file
+   * @returns {TemplateResult}
+   * @memberof MgtFileList
+   */
+  protected renderSharedInsightFile(file: SharedInsight): TemplateResult {
+    const lastModifiedTemplate = file.lastShared
+      ? html`
+          <div class="shared_insight_file__last-modified">
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+          </div>
+        `
+      : null;
+
+    return html`
+      <div class="shared_insight_file" @click=${(e: MouseEvent) => this.handleFileClick(file, e)} tabindex="0">
+        <div class="shared_insight_file__icon">
+          <img alt="${file.resourceVisualization.title}" src=${getFileTypeIconUri(
+            file.resourceVisualization.type,
+            48,
+            'svg'
+          )} />
+        </div>
+        <div class="shared_insight_file__details">
+          <div class="shared_insight_file__name">${file.resourceVisualization.title}</div>
+          ${lastModifiedTemplate}
+        </div>
+      </div>
+    `;
+  }
+
   /**
    * Render the button when clicked will show more files.
    *
@@ -841,11 +894,14 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
     this.requestUpdate();
   }
 
-  private handleFileClick(file: DriveItem) {
-    if (file?.webUrl && !this.disableOpenOnClick) {
+  private readonly handleFileClick = (file: DriveItem | SharedInsight, e?: MouseEvent) => {
+    if (e && isSharedInsight(file) && file.resourceReference?.webUrl && !this.disableOpenOnClick) {
+      e.preventDefault();
+      window.open(file.resourceReference.webUrl, '_blank', 'noreferrer');
+    } else if (!isSharedInsight(file) && file?.webUrl && !this.disableOpenOnClick) {
       window.open(file.webUrl, '_blank', 'noreferrer');
     }
-  }
+  };
 
   /**
    * Get file extension string from file name

packages/mgt-components/src/components/mgt-organization/mgt-organization.scss

@@ -138,6 +138,7 @@ $organization-direct-report-person-avatar-size: var(--organization-direct-report
 
       .direct-report {
         margin-right: 4px;
+        cursor: pointer;
       }
     }
 

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -1242,7 +1242,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
     }
 
     if (MgtPersonCardConfig.sections.files && files?.length) {
-      this.sections.push(new MgtFileList());
+      this.sections.push(new MgtFileList(files));
     }
 
     if (MgtPersonCardConfig.sections.profile && profile) {