Include fix remove highlighted #1140 , included refresh method of FileList #1029 (#1151)

* Include fix remove highlighted #1140 , included refresh method of FileList #1029

* rename of refresh to reload.

* Removed focused when item is clicked

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

Yes agree method is already exist on filelist,  "reload" will be ok and no duplication of names.
Also agree with option to clear cache, already exist a method to clear the cache for fileList or should be included like in ticket #1029?

Co-authored-by: Nikola Metulev <[email protected]>

* Update Method reload with fileLists clear cache.

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

Co-authored-by: Nikola Metulev <[email protected]>

* Added Method clearFilesCache in graph.files.ts and used in  method reload on mgt-file-list when clearcache is selected

* added reload story

Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>

Author: aaclage

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

@@ -16,6 +16,7 @@ import { DriveItem } from '@microsoft/microsoft-graph-types';
 import { customElement, html, property, TemplateResult } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat';
 import {
+  clearFilesCache,
   fetchNextAndCacheForFilesPageIterator,
   getDriveFilesByIdIterator,
   getDriveFilesByPathIterator,
@@ -478,6 +479,7 @@ export class MgtFileList extends MgtTemplatedComponent {
           tabindex="0"
           @keydown="${this.onFileListKeyDown}"
           @keyup="${this.onFileListKeyUp}"
+          @blur="${this.onFileListOut}"
         >
           ${repeat(
             this.files,
@@ -558,13 +560,13 @@ export class MgtFileList extends MgtTemplatedComponent {
     if (event.code === 'Enter' || event.code === 'Space') {
       event.preventDefault();
 
-      focusedItem.classList.remove('selected');
-      focusedItem.classList.add('focused');
+      focusedItem?.classList.remove('selected');
+      focusedItem?.classList.add('focused');
     }
   }
 
   /**
-   * Handle accessibility keyboard keydown events (arrow up, arrow down, enter) on file list
+   * Handle accessibility keyboard keydown events (arrow up, arrow down, enter, tab) on file list
    *
    * @param event
    */
@@ -600,6 +602,21 @@ export class MgtFileList extends MgtTemplatedComponent {
 
       this.updateItemBackgroundColor(fileList, focusedItem, 'selected');
     }
+
+    if (event.code === 'Tab') {
+      focusedItem = fileList.children[this._focusedItemIndex];
+      focusedItem?.classList.remove('focused');
+    }
+  }
+
+  /**
+   * Remove accessibility keyboard focused when out of file list
+   *
+   */
+  private onFileListOut() {
+    const fileList = this.renderRoot.querySelector('.file-list');
+    const focusedItem = fileList.children[this._focusedItemIndex];
+    focusedItem?.classList.remove('focused');
   }
 
   /**
@@ -737,9 +754,10 @@ export class MgtFileList extends MgtTemplatedComponent {
       const li = event.target.closest('li');
       const index = nodes.indexOf(li);
       this._focusedItemIndex = index;
-      const focusedItem = fileList.children[this._focusedItemIndex];
 
-      this.updateItemBackgroundColor(fileList, focusedItem, 'focused');
+      for (let i = 0; i < fileList.children.length; i++) {
+        fileList.children[i].classList.remove('focused');
+      }
     }
   }
 
@@ -820,4 +838,18 @@ export class MgtFileList extends MgtTemplatedComponent {
       focusedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
     }
   }
+
+  /**
+   * Handle reload of File List and condition to clear cache
+   *
+   * @param clearCache boolean, if true clear cache
+   */
+  public reload(clearCache = false) {
+    if (clearCache) {
+      // clear cache File List
+      clearFilesCache();
+    }
+
+    this.requestStateUpdate(true);
+  }
 }

packages/mgt-components/src/graph/graph.files.ts

@@ -33,6 +33,15 @@ interface CacheFileList extends CacheItem {
   nextLink?: string;
 }
 
+/**
+ * Clear Cache of FileList
+ */
+export function clearFilesCache() {
+  let cache: CacheStore<CacheFileList>;
+  cache = CacheService.getCache<CacheFileList>(schemas.fileLists, schemas.fileLists.stores.fileLists);
+  cache.clearStore();
+}
+
 /**
  * Defines the time it takes for objects in the cache to expire
  */

stories/components/fileList/fileList.properties.js

@@ -108,4 +108,15 @@ export const fileListItemView = () => html`
     <mgt-file-list item-view="threeLines" page-size=3></mgt-file-list>
   `;
 
+export const clearCacheAndReload = () => html`
+  <button>Reload files!</button>
+  <mgt-file-list></mgt-file-list>
+  <script>
+    const fileList = document.querySelector('mgt-file-list');
+    document.querySelector('button').addEventListener('click', () => {
+      // passing true will clear file cache before reloading
+      fileList.reload(true);
+    })
+  </script>
+`;