feat: fluent v9 upgrades feature branch

package.json

@@ -5,11 +5,12 @@
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
                 "@axe-core/webdriverjs": "4.10.0",
-                "@fluentui/react-components": "9.55.1",
                 "@azure/msal-browser": "3.26.1",
                 "@babel/core": "7.26.0",
                 "@babel/runtime": "7.26.0",
                 "@fluentui/react": "8.121.1",
+                "@fluentui/react-components": "9.56.1",
+                "@fluentui/react-icons": "2.0.265",
                 "@fluentui/react-icons-mdl2": "1.3.76",
                 "@microsoft/applicationinsights-react-js": "17.3.4",
                 "@microsoft/applicationinsights-web": "3.3.3",

src/app/services/actions/permissions-action-creator.spec.ts

@@ -301,7 +301,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking'),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageType: 0
+            messageBarType: 'info'
           }
         }
       ]
@@ -357,7 +357,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking '),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageType: 0
+            messageBarType: 'info'
           }
         }
       ]
@@ -416,7 +416,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking'),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageType: 0
+            messageBarType: 'info'
           }
         }
       ]

src/app/services/actions/query-status-action-creator.spec.ts

@@ -12,7 +12,7 @@ describe('Query Action Creators', () => {
       ok: false,
       statusText: 'Something worked!',
       status: 200,
-      messageType: 1,
+      messageBarType: 'success',
       hint: 'Something worked!'
     }
 

src/app/services/actions/revoke-scopes.action.ts

@@ -30,7 +30,7 @@ export const revokeScopes = createAsyncThunk(
     const requiredPermissions = REVOKING_PERMISSIONS_REQUIRED_SCOPES.split(' ');
     const defaultUserScopes = DEFAULT_USER_SCOPES.split(' ');
 
-    dispatchScopesStatus(dispatch, 'Please wait while we revoke this permission', 'Revoking ', 0);
+    dispatchScopesStatus(dispatch, 'Please wait while we revoke this permission', 'Revoking ', 'info');
     const revokePermissionUtil = await RevokePermissionsUtil.initialize(profile.user!.id!);
 
     if (!consentedScopes || consentedScopes.length === 0) {
@@ -62,7 +62,7 @@ export const revokeScopes = createAsyncThunk(
       const updatedScopes = await updatePermissions(permissionsUpdateObject);
 
       if (updatedScopes) {
-        dispatchScopesStatus(dispatch, 'Permission revoked', 'Success', 4);
+        dispatchScopesStatus(dispatch, 'Permission revoked', 'Success', 'success');
         dispatch(getConsentedScopesSuccess(updatedScopes));
         trackRevokeConsentEvent(REVOKE_STATUS.success, permissionToRevoke);
         return updatedScopes;
@@ -77,7 +77,7 @@ export const revokeScopes = createAsyncThunk(
     } catch (errorMessage: any) {
       if (errorMessage instanceof RevokeScopesError) {
         const { errorText, statusText, status, messageType } = errorMessage;
-        dispatchScopesStatus(dispatch, statusText, status, messageType);
+        dispatchScopesStatus(dispatch, statusText, status, 'error');
         const permissionObject = {
           permissionToRevoke,
           statusCode: statusText,
@@ -88,20 +88,20 @@ export const revokeScopes = createAsyncThunk(
       } else {
         const { code, message } = errorMessage;
         trackRevokeConsentEvent(REVOKE_STATUS.failure, 'Failed to revoke consent');
-        dispatchScopesStatus(dispatch, message ? message : 'Failed to revoke consent', code ? code : 'Failed', 1);
+        dispatchScopesStatus(dispatch, message ? message : 'Failed to revoke consent', code ? code : 'Failed', 'error');
         return rejectWithValue(errorMessage);
       }
     }
   }
 );
 
-const dispatchScopesStatus = (dispatch: Function, statusText: string, status: string, messageType: number) => {
+const dispatchScopesStatus = (dispatch: Function, statusText: string, status: string, messageBarType: string) => {
   dispatch(
     setQueryResponseStatus({
       statusText: translateMessage(status),
       status: translateMessage(statusText),
       ok: false,
-      messageType
+      messageBarType
     })
   )
 }
@@ -135,7 +135,7 @@ async function updatePermissions(permissionsUpdateObject: IPermissionUpdate): Pr
   }
   else if ((retryCount < maxRetryCount) && !isRevokeSuccessful) {
     await new Promise(resolve => setTimeout(resolve, retryDelay * 2));
-    dispatchScopesStatus(dispatch, 'We are retrying the revoking operation', 'Retrying', 5);
+    dispatchScopesStatus(dispatch, 'We are retrying the revoking operation', 'Retrying', 'info');
 
     permissionsUpdateObject.retryCount += 1;
     return updatePermissions(permissionsUpdateObject);

src/app/services/slices/auth.slice.ts

@@ -1,5 +1,5 @@
 import { BrowserAuthError } from '@azure/msal-browser';
-import { MessageBarType } from '@fluentui/react';
+
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { authenticationWrapper } from '../../../modules/authentication';
@@ -112,7 +112,7 @@ export const consentToScopes = createAsyncThunk(
             statusText: translateMessage('Success'),
             status: translateMessage('Scope consent successful'),
             ok: true,
-            messageType: MessageBarType.success
+            messageBarType: 'success'
           })
         );
         dispatch(fetchAllPrincipalGrants());
@@ -125,7 +125,7 @@ export const consentToScopes = createAsyncThunk(
           statusText: translateMessage('Scope consent failed'),
           status: errorCode,
           ok: false,
-          messageType: MessageBarType.error,
+          messageBarType: 'error',
           hint: getConsentAuthErrorHint(errorCode)
         })
       );

src/app/services/slices/graph-response.slice.ts

@@ -1,5 +1,5 @@
 import { BrowserAuthError } from '@azure/msal-browser';
-import { MessageBarType } from '@fluentui/react';
+
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { authenticationWrapper } from '../../../modules/authentication';
@@ -156,7 +156,7 @@ async function processResponse(response: Response, respHeaders: { [key: string]:
 
 const generateStatus = ({ duration, response }: { duration: number; response: Response }): IStatus => {
   const status: IStatus = {
-    messageType: MessageBarType.error,
+    messageBarType: 'error',
     ok: false,
     duration,
     status: response.status || 400,
@@ -171,7 +171,7 @@ const generateStatus = ({ duration, response }: { duration: number; response: Re
   if (response && response.ok) {
     CURRENT_RETRIES = 0;
     status.ok = true;
-    status.messageType = MessageBarType.success;
+    status.messageBarType = 'success';
   }
   return status;
 }
@@ -232,7 +232,7 @@ function generateHistoryItem(
 async function handleError(error: Error, query: IQuery) {
   let body = null;
   const status: IStatus = {
-    messageType: MessageBarType.error,
+    messageBarType: 'error',
     ok: false,
     status: 400,
     statusText: 'Bad Request'

src/app/services/slices/permission-grants.slice.ts

@@ -34,7 +34,7 @@ export const fetchAllPrincipalGrants = createAsyncThunk(
           statusText: translateMessage('Permissions'),
           status: translateMessage('You require the following permissions to read'),
           ok: false,
-          messageType: 0
+          messageBarType: 'error'
         }));
         throw new Error('Permission required');
       }

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/App.tsx

@@ -1,4 +1,4 @@
-import { Announced, getTheme, ITheme, styled } from '@fluentui/react';
+import { getTheme, ITheme, styled } from '@fluentui/react';
 import { FluentProvider, teamsHighContrastTheme, Theme, webDarkTheme, webLightTheme } from '@fluentui/react-components';
 import { bindActionCreators, Dispatch } from '@reduxjs/toolkit';
 import { Resizable } from 're-resizable';
@@ -27,20 +27,22 @@ import { toggleSidebar } from '../services/slices/sidebar-properties.slice';
 import { changeTheme } from '../services/slices/theme.slice';
 import { parseSampleUrl } from '../utils/sample-url-generation';
 import { substituteTokens } from '../utils/token-helpers';
+import { headerMessagingV9 } from './app-sections/HeaderMessagingV9';
 import { translateMessage } from '../utils/translate-messages';
-import { StatusMessages, TermsOfUseMessage } from './app-sections';
-import { headerMessaging } from './app-sections/HeaderMessaging';
+import { StatusMessagesV9, TermsOfUseMessageV9 } from './app-sections';
 import { appStyles } from './App.styles';
 import { classNames } from './classnames';
 import Notification from './common/banners/Notification';
 import { KeyboardCopyEvent } from './common/copy-button/KeyboardCopyEvent';
 import PopupsWrapper from './common/popups/PopupsWrapper';
 import { createShareLink } from './common/share';
-import { MainHeader } from './main-header/MainHeader';
+// import { MainHeader } from './main-header/MainHeader';
+import { MainHeaderV9 } from './main-header/MainHeaderV9';
 import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
-import { Sidebar } from './sidebar/Sidebar';
+// import { Sidebar } from './sidebar/Sidebar';
+import { SidebarV9 } from './sidebar/SidebarV9';
 export interface IAppProps {
   theme?: ITheme;
   styles?: object;
@@ -68,6 +70,13 @@ interface IAppState {
   sidebarTabSelection: string;
 }
 
+const getSystemTheme = (): string => {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  return 'light';
+};
+
 class App extends Component<IAppProps, IAppState> {
   private mediaQueryList = window.matchMedia('(max-width: 992px)');
   private currentTheme: ITheme = getTheme();
@@ -128,6 +137,12 @@ class App extends Component<IAppProps, IAppState> {
     // Listens for messages from host document
     window.addEventListener('message', this.receiveMessage, false);
     this.handleSharedQueries();
+
+    // Load the theme from local storage or use the system theme as the default
+    const savedTheme = localStorage.getItem('appTheme') ?? getSystemTheme();
+    // @ts-ignore
+    this.props.actions.changeTheme(savedTheme);
+    loadGETheme(savedTheme); // Remove when cleaning up
   };
 
   public handleSharedQueries() {
@@ -407,18 +422,19 @@ class App extends Component<IAppProps, IAppState> {
     this.removeFlexBasisProperty();
     this.removeSidebarHeightProperty();
 
-    const fluentV9Themes: Record<string, Theme>= {
+    const fluentV9Themes: Record<string, Theme> = {
       'light': webLightTheme,
       'dark': webDarkTheme,
       'high-contrast': teamsHighContrastTheme
     }
     return (
       // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
         <ThemeContext.Provider value={this.props.appTheme}>
           <PopupsProvider>
             <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft: mobileScreen && '15px' }}>
-              <MainHeader
+              {/* <MainHeader
                 toggleSidebar={this.toggleSidebar}
               />
               <Announced
@@ -427,7 +443,9 @@ class App extends Component<IAppProps, IAppState> {
                     ? translateMessage('Sidebar minimized')
                     : translateMessage('Sidebar maximized')
                 }
-              />
+              /> */}
+
+              <MainHeaderV9 />
               <div className={`ms-Grid-row ${classes.appRow}`} style={{
                 flexWrap: mobileScreen && 'wrap',
                 marginRight: showSidebar || (graphExplorerMode === Mode.TryIt) && '-20px',
@@ -455,14 +473,15 @@ class App extends Component<IAppProps, IAppState> {
                       height: ''
                     }}
                   >
-                    <Sidebar currentTab={this.state.sidebarTabSelection}
+                    {/* <Sidebar currentTab={this.state.sidebarTabSelection}
                       setSidebarTabSelection={this.setSidebarTabSelection} showSidebar={showSidebar}
                       toggleSidebar={this.toggleSidebar}
-                      mobileScreen={mobileScreen} />
+                      mobileScreen={mobileScreen} /> */}
+                    <SidebarV9/>
                   </Resizable>
                 )}
                 {graphExplorerMode === Mode.TryIt &&
-                headerMessaging(query)}
+                headerMessagingV9(query)}
 
                 {displayContent && (
                   <Resizable
@@ -496,7 +515,7 @@ class App extends Component<IAppProps, IAppState> {
                         display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
                       }}>
                         <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-                          <StatusMessages />
+                          <StatusMessagesV9 />
                         </div>
                         <QueryResponse />
                       </div>
@@ -505,7 +524,7 @@ class App extends Component<IAppProps, IAppState> {
                 )}
               </div>
               <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-                <TermsOfUseMessage />
+                <TermsOfUseMessageV9 />
               </div>
             </div>
             <CollectionPermissionsProvider>
@@ -557,4 +576,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 const StyledApp = styled(App, appStyles as any);
 
 //@ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps)(StyledApp);
+export default connect(mapStateToProps, mapDispatchToProps)(StyledApp);