feat: migrate the history tab components to fluent UI v9

src/app/utils/dynamic-sort.spec.ts

@@ -1,6 +1,9 @@
-import { dynamicSort } from './dynamic-sort';
 import { SortOrder } from '../../types/enums';
-
+import { dynamicSort } from './dynamic-sort';
+interface INameAge {
+  name: string
+  age: number
+}
 describe('Dynamic Sort', () => {
 
   it('should sort an array of objects in ascending order', () => {
@@ -16,7 +19,7 @@ describe('Dynamic Sort', () => {
       { name: 'Lucy', age: 18 }
     ];
 
-    const sortedArray = arrayToSort.sort(dynamicSort('name', SortOrder.ASC));
+    const sortedArray = arrayToSort.sort(dynamicSort<INameAge>('name', SortOrder.ASC));
     expect(expected).toEqual(sortedArray);
   });
 
@@ -33,30 +36,7 @@ describe('Dynamic Sort', () => {
       { name: 'Ann', age: 14 }
     ];
 
-    const sortedArray = arrayToSort.sort(dynamicSort('name', SortOrder.DESC));
+    const sortedArray = arrayToSort.sort(dynamicSort<INameAge>('name', SortOrder.DESC));
     expect(expected).toEqual(sortedArray);
   });
-
-  it('should return unsorted object array when property does not exist', () => {
-    const arrayToSort = [
-      { name: 'Ann', age: 14 },
-      { name: 'Lucy', age: 18 },
-      { name: 'Diana', age: 11 }
-    ];
-
-    const sortedArray = arrayToSort.sort(dynamicSort('gender', SortOrder.DESC));
-    expect(arrayToSort).toEqual(sortedArray);
-  });
-
-  it('should return unsorted object array when property is empty', () => {
-    const arrayToSort = [
-      { name: 'Ann', age: 14 },
-      { name: 'Lucy', age: 18 },
-      { name: 'Diana', age: 11 }
-    ];
-
-    const sortedArray = arrayToSort.sort(dynamicSort('', SortOrder.DESC));
-    expect(arrayToSort).toEqual(sortedArray);
-  });
-
 });

src/app/utils/dynamic-sort.ts

@@ -5,18 +5,18 @@ import { SortOrder } from '../../types/enums';
  * @param {SortOrder} sortOrder the direction to follow Ascending / Descending
  * You pass this helper to the array sort function
  */
-export function dynamicSort(property: string | null, sortOrder: SortOrder) {
+export function dynamicSort<T>(property: keyof T, sortOrder: SortOrder) {
   let order = 1;
   if (sortOrder === SortOrder.DESC) {
     order = -1;
   }
   if (property) {
-    return (first: any, second: any) => {
+    return (first: T, second: T) => {
       const result = (first[property] < second[property]) ? -1 : (first[property] > second[property]) ? 1 : 0;
       return result * order;
     };
   }
-  return (first: any, second: any) => {
+  return (first: T, second: T) => {
     const result = (first < second) ? -1 : (first > second) ? 1 : 0;
     return result * order;
   };

src/app/views/query-runner/request/permissions/Permissions.Full.tsx

@@ -59,7 +59,7 @@ const FullPermissions: React.FC<PopupsComponent<null>> = (): JSX.Element => {
 
   const sortPermissions = (permissionsToSort: IPermission[]): IPermission[] => {
     try {
-      return [...permissionsToSort].sort(dynamicSort('value', SortOrder.ASC));
+      return [...permissionsToSort].sort(dynamicSort<IPermission>('value', SortOrder.ASC));
     } catch (error) {
       // ignore
     }

src/app/views/sidebar/SidebarV9.tsx

@@ -11,6 +11,7 @@ import { IDimensions } from '../../../types/dimensions';
 import { setDimensions } from '../../services/slices/dimensions.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import { History } from './history';
+import { HistoryV9 } from './history/HistoryV9';
 import ResourceExplorer from './resource-explorer';
 import { SampleQueriesV9 } from './sample-queries/SampleQueriesV9';
 
@@ -62,7 +63,7 @@ const SidebarV9 = ()=>{
   const tabItems: Record<string, JSX.Element> = {
     'sample-queries': <SampleQueriesV9 />,
     'resources': <ResourceExplorer />,
-    'history': <History />
+    'history': <HistoryV9 />
   }
   // TODO: Resizing is not showing/ hiding sidebar. Should be checked when
   // updated to v9
@@ -119,3 +120,4 @@ const getDimensions = (show: boolean, dimensions: IDimensions)=>{
 }
 
 export { SidebarV9 };
+

src/app/views/sidebar/history/History.tsx

@@ -57,7 +57,7 @@ const yesterday = formatDate(yesterdaysDate);
 yesterdaysDate.setDate(yesterdaysDate.getDate() - 1);
 
 const sortItems = (content: IHistoryItem[]) => {
-  content.sort(dynamicSort('createdAt', SortOrder.DESC));
+  content.sort(dynamicSort<IHistoryItem>('createdAt', SortOrder.DESC));
   content.forEach((value: any, index: number) => {
     value.index = index;
   });