feat: migrate wrappers (#3556)

Author: Mnickii

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

@@ -1,4 +1,12 @@
-import { Dialog, DialogType, Spinner } from '@fluentui/react';
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  Spinner
+} from '@fluentui/react-components';
 import { Suspense } from 'react';
 
 import { WrapperProps } from './popups.types';
@@ -7,43 +15,25 @@ export function DialogWrapper(props: WrapperProps) {
   const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
   const { settings: { title, subtitle } } = popupsProps;
 
-  const getDialogType = () => {
-    switch (popupsProps.settings.width) {
-    case 'md':
-      return DialogType.normal;
-    case 'lg':
-      return DialogType.largeHeader;
-    }
-    return DialogType.normal;
-  }
-
-  const type = getDialogType();
-
   return (
-    <Dialog
-      hidden={!isOpen}
-      onDismiss={() => dismissPopup()}
-      dialogContentProps={{
-        type,
-        title: title?.toString(),
-        isMultiline: false,
-        subText: subtitle?.toString()
-      }}
-    >
-      {
-        <Suspense fallback={<Spinner />}>
-
-          <Component
-            {...popupsProps}
-            data={popupsProps.data || {}}
-            dismissPopup={() => dismissPopup()}
-            closePopup={(e: any) => closePopup(e)}
-          />
-          {
-            popupsProps.settings.renderFooter && popupsProps.settings.renderFooter()
-          }
-        </Suspense>
-      }
+    <Dialog open={isOpen} onOpenChange={(_, data) => !data.open && dismissPopup()}>
+      <DialogSurface>
+        <DialogBody>
+          <DialogTitle>{title?.toString()}</DialogTitle>
+          <DialogContent>{subtitle?.toString()}</DialogContent>
+          <Suspense fallback={<Spinner />}>
+            <Component
+              {...popupsProps}
+              data={popupsProps.data || {}}
+              dismissPopup={() => dismissPopup()}
+              closePopup={(e: any) => closePopup(e)}
+            />
+            {popupsProps.settings.renderFooter && (
+              <DialogActions>{popupsProps.settings.renderFooter()}</DialogActions>
+            )}
+          </Suspense>
+        </DialogBody>
+      </DialogSurface>
     </Dialog>
   );
 }

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

@@ -1,4 +1,14 @@
-import { IconButton, Modal, Spinner } from '@fluentui/react';
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Spinner
+} from '@fluentui/react-components';
+import { Dismiss20Regular } from '@fluentui/react-icons';
 import { Suspense } from 'react';
 
 import { translateMessage } from '../../../utils/translate-messages';
@@ -8,37 +18,36 @@ export function ModalWrapper(props: WrapperProps) {
   const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onDismiss={() => dismissPopup()}
-      layerProps={{ eventBubblingEnabled: true }}
-    >
-      <IconButton
-        styles={{
-          root: {
-            float: 'right',
-            zIndex: 1
-          }
-        }}
-        iconProps={{ iconName: 'Cancel' }}
-        ariaLabel={translateMessage('Close expanded response area')}
-        onClick={() => closePopup()}
-      />
-      {
-        <Suspense fallback={<Spinner />}>
-          <Component
-            {...popupsProps}
-            data={popupsProps.data || {}}
-            dismissPopup={() => dismissPopup()}
-            closePopup={(e: any) => closePopup(e)}
-          />
-          {
-            popupsProps.settings.renderFooter && popupsProps.settings.renderFooter()
-          }
-        </Suspense>
-      }
-    </Modal>
+    <Dialog open={isOpen} onOpenChange={(_, data) => !data.open && dismissPopup()}>
+      <DialogSurface>
+        <DialogBody>
+          <DialogTitle
+            action={
+              <DialogTrigger>
+                <Dismiss20Regular
+                  aria-label={translateMessage('Close expanded response area')}
+                  onClick={() => closePopup()}
+                />
+              </DialogTrigger>
+            }
+          >
+            {popupsProps.settings.title?.toString()}
+          </DialogTitle>
+          <DialogContent>
+            <Suspense fallback={<Spinner />}>
+              <Component
+                {...popupsProps}
+                data={popupsProps.data || {}}
+                dismissPopup={() => dismissPopup()}
+                closePopup={(e: any) => closePopup(e)}
+              />
+              {popupsProps.settings.renderFooter && (
+                <DialogActions>{popupsProps.settings.renderFooter()}</DialogActions>
+              )}
+            </Suspense>
+          </DialogContent>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
   );
-}
-
-
+}