Merge branch 'feat/fluent-v9-upgrade' of https://github.com/microsoftgraph/microsoft-graph-explorer-v4 into feat/fluent-v9-upgrade

Author: musale

src/app/views/authentication/profile/ProfileV9.tsx

@@ -4,6 +4,7 @@ import {
   CardFooter,
   CardHeader,
   Divider,
+  Link,
   makeStyles,
   Persona,
   PersonaProps,
@@ -22,6 +23,7 @@ import { signOut } from '../../../services/slices/auth.slice';
 import { getProfileInfo } from '../../../services/slices/profile.slice';
 import { translateMessage } from '../../../utils/translate-messages';
 import { useHeaderStyles } from '../../main-header/utils';
+import { usePopups } from '../../../services/hooks/usePopups';
 
 const useProfileStyles = makeStyles({
   card: {
@@ -81,14 +83,25 @@ const PersonaLayout = ({profile}: {profile: IProfileState}) => {
 const PopoverContent: React.FC<Partial<PersonaProps> & ProfileProps> = (props) => {
   const dispatch = useAppDispatch();
   const styles = useProfileStyles();
-  const {signInWithOther, profile} = props
-  const user = profile.user
-  const tenant = user && user.tenant ? user.tenant : 'Sample'
+  const {signInWithOther, profile} = props;
+  const user = profile.user;
+  const tenant = user && user.tenant ? user.tenant : 'Sample';
+  const { show: showPermissions } = usePopups('full-permissions', 'panel');
 
   const handleSignOut = () => {
     dispatch(signOut());
   };
 
+
+  const changePanelState = () => {
+    showPermissions({
+      settings: {
+        title: translateMessage('Permissions'),
+        width: 'lg'
+      }
+    })
+  };
+
   return (
     <div className={styles.card}>
       <CardHeader
@@ -110,6 +123,10 @@ const PopoverContent: React.FC<Partial<PersonaProps> & ProfileProps> = (props) =
       />
       <Divider/>
       <PersonaLayout profile={profile}/>
+      <Link key={'view-all-permissions'}
+        onClick={() => changePanelState()}>
+        {translateMessage('view all permissions')}
+      </Link>
       <CardFooter>
         <Button
           className={styles.footerButton}

src/app/views/common/lazy-loader/component-registry/popups.tsx

@@ -4,7 +4,7 @@ export const popups = new Map<string, any>([
   ['share-query', lazy(() => import('../../../query-runner/query-input/share-query/ShareQuery'))],
   ['theme-chooser', lazy(() => import('../../../main-header/settings/ThemeChooserV9'))],
   ['preview-collection', lazy(() => import('../../../sidebar/resource-explorer/collection/APICollection'))],
-  ['full-permissions', lazy(() => import('../../../query-runner/request/permissions/Permissions.Full'))],
+  ['full-permissions', lazy(() => import('../../../query-runner/request/permissions/Permissions.FullV9'))],
   ['collection-permissions', lazy(() => import('../../../sidebar/resource-explorer/collection/CollectionPermissions'))],
   ['edit-collection-panel', lazy(() => import('../../../sidebar/resource-explorer/collection/EditCollectionPanel'))],
   ['edit-scope-panel', lazy(() => import('../../../sidebar/resource-explorer/collection/EditScopePanel'))]

src/app/views/common/popups/PanelWrapper.tsx

@@ -1,109 +1,96 @@
-import { getTheme, IconButton, IOverlayProps, Panel, PanelType, Spinner } from '@fluentui/react';
+import * as React from 'react';
 import { Suspense } from 'react';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerHeaderTitle,
+  Button,
+  Spinner
+} from '@fluentui/react-components';
+import { ArrowLeft24Regular, Dismiss24Regular } from '@fluentui/react-icons';
 
-import { useAppSelector } from '../../../../store';
 import { translateMessage } from '../../../utils/translate-messages';
 import { WrapperProps } from './popups.types';
 
-export function PanelWrapper(props: WrapperProps) {
-  const appTheme  = useAppSelector((state) => state.theme);
-  const theme = getTheme();
-  const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
-  const { title, renderFooter } = popupsProps.settings;
-
-  const isCurrentThemeDark = (): boolean => {
-    return (appTheme === 'dark' || appTheme === 'high-contrast');
-  }
 
-  const panelOverlayProps: IOverlayProps = {
-    styles: {
-      root: {
-        backgroundColor: isCurrentThemeDark() ? theme.palette.blackTranslucent40 :
-          theme.palette.whiteTranslucent40
-      }
-    }
-  }
-
-  const headerText = title ? title : '';
+export function DrawerWrapper(props: WrapperProps) {
+  const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
+  const { title, renderFooter, width } = popupsProps.settings;
 
-  const getPanelType = () => {
-    switch (popupsProps.settings.width) {
+  const getDrawerSize = () => {
+    switch (width) {
     case 'sm':
-      return PanelType.smallFluid;
+      return 'small';
     case 'md':
-      return PanelType.medium;
+      return 'medium';
     case 'lg':
-      return PanelType.largeFixed;
+      return 'large';
     case 'xl':
-      return PanelType.large;
+      return 'full';
+    default:
+      return 'medium';
     }
-    return PanelType.medium;
-  }
+  };
 
-  const panelType = getPanelType();
+  const showBackButton =
+    title === 'Edit Scope' ||
+    title === 'Edit Collection' ||
+    title === 'Preview Permissions';
 
-  const onRenderFooterContent = (): JSX.Element | null => {
-    return renderFooter ? renderFooter() : null;
-  }
-
-  const showBackButton = title === 'Edit Scope' || title === 'Edit Collection' || title === 'Preview Permissions';
-
-  const onRenderHeader = (): JSX.Element => (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <IconButton
-        iconProps={{ iconName: 'Back' }}
-        ariaLabel={translateMessage('Back')}
-        onClick={() => dismissPopup()}
-        styles={{ root: { marginRight: 8 } }}
-      />
-      <span style={{ fontSize: theme.fonts.xLarge.fontSize, fontWeight: theme.fonts.xLarge.fontWeight }}>
-        {title}
-      </span>
-    </div>
-  );
+  const onOpenChange = (_ev: unknown, data: { open: boolean }) => {
+    if (!data.open) {
+      dismissPopup();
+    }
+  };
 
   return (
-    <div>
-      <Panel
-        isOpen={isOpen}
-        hasCloseButton={false}
-        type={panelType}
-        headerText={headerText.toString()}
-        isFooterAtBottom={true}
-        isBlocking={true}
-        isLightDismiss={false}
-        closeButtonAriaLabel='Close'
-        overlayProps={panelOverlayProps}
-        onRenderFooterContent={onRenderFooterContent}
-        onRenderHeader={showBackButton ? onRenderHeader: undefined}
-      >
-        <IconButton
-          styles={{
-            root: {
-              float: 'right',
-              zIndex: 1,
-              marginTop: -30
-            }
-          }}
-          iconProps={{ iconName: 'Cancel' }}
-          ariaLabel={translateMessage('Close')}
-          onClick={() => dismissPopup()}
-        />
-        <div>
-          {
-            <Suspense fallback={<Spinner />}>
-              <Component
-                {...popupsProps}
-                data={popupsProps.data || {}}
+    <Drawer
+      open={isOpen}
+      onOpenChange={onOpenChange}
+      position='end'
+      type='overlay'
+      size={getDrawerSize()}
+    >
+      <DrawerHeader>
+        {showBackButton && (
+          <Button
+            icon={<ArrowLeft24Regular />}
+            appearance='subtle'
+            onClick={() => dismissPopup()}
+            aria-label={translateMessage('Back')}
+          />
+        )}
+        <DrawerHeaderTitle action={
+          <Button
+            icon={<Dismiss24Regular />}
+            appearance='subtle'
+            onClick={() => dismissPopup()}
+            aria-label={translateMessage('Close')}
+          />
+
+        }>
+          {title || ''}
+        </DrawerHeaderTitle>
+      </DrawerHeader>
 
-                dismissPopup={() => dismissPopup()}
-                closePopup={(e: any) => closePopup(e)}
-              />
-            </Suspense>
-          }
-        </div>
+      <DrawerBody>
+        <Suspense fallback={<Spinner />}>
+          <Component
+            {...popupsProps}
+            data={popupsProps.data || {}}
+            dismissPopup={() => dismissPopup()}
+            closePopup={(e: any) => closePopup(e)}
+          />
+        </Suspense>
+      </DrawerBody>
 
-      </Panel>
-    </div>
+      {renderFooter && (
+        <DrawerFooter>
+          {renderFooter()}
+        </DrawerFooter>
+      )}
+    </Drawer>
   );
 }

src/app/views/common/popups/PopupsWrapper.tsx

@@ -5,7 +5,7 @@ import {
 import ErrorBoundary from '../error-boundary/ErrorBoundary';
 import { DialogWrapper } from './DialogWrapper';
 import { ModalWrapper } from './ModalWrapper';
-import { PanelWrapper } from './PanelWrapper';
+import { DrawerWrapper } from './PanelWrapper';
 
 const PopupWrapper = () => {
 
@@ -30,7 +30,7 @@ const PopupWrapper = () => {
       {popups && popups.map((popup: Popup) => {
         const { component, type, popupsProps, isOpen } = popup;
         if (type === 'panel') {
-          return component && <PanelWrapper
+          return component && <DrawerWrapper
             isOpen={!!isOpen}
             key={popup.id}
             dismissPopup={() => dismiss(popup)}

src/app/views/query-runner/request/permissions/Permission.stylesV9.ts

@@ -48,6 +48,20 @@ const permissionStyles = makeStyles({
   },
   headerText: {
     marginLeft: '8px'
+  },
+  permissionContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    padding: '1rem'
+  },
+  controlsRow: {
+    display: 'flex',
+    gap: '0.5rem',
+    alignItems: 'center'
+  },
+  searchBar: {
+    width: '100%'
   }
 });
 

src/app/views/query-runner/request/permissions/PermissionItemV9.tsx

@@ -103,6 +103,7 @@ const PermissionItem = (props: PermissionItemProps): JSX.Element | null => {
     );
   };
 
+
   if (column) {
     const content = item[column.fieldName as keyof IPermission] as string;
     switch (column.key) {