fix: show refresh notification on failed dynamic import

* Implemented e2e approach to handle failed fetching of dynamically imported module

* Several dynamically imported modules wrapped with new error boundary

* Removed unused MonacoDiffEditor

* fix: notification wording

* Fixed styles and content of ModuleFetchingErrorDialog

* Style of DialogTitle has been aligned to mockups everywhere

* Styles for DialogContent, DialogContentText have been aligned to mockups. Fixed test id

Author: JayLim2

packages/editor/src/components/ConfirmationDialog.tsx

@@ -56,15 +56,12 @@ export const ConfirmationDialog: FC<ConfirmationDialogProps> = memo<Confirmation
           sx={{ position: 'absolute', right: 8, top: 8, color: '#353C4E' }}
           onClick={onCancel}
         >
-          <CloseOutlinedIcon fontSize="small"/>
+          <CloseOutlinedIcon fontSize="small" />
         </IconButton>
       </DialogTitle>
 
       <DialogContent>
-        <DialogContentText
-          variant="body2"
-          sx={{ color: 'black' }}
-        >
+        <DialogContentText variant="body2">
           {message}
         </DialogContentText>
       </DialogContent>
@@ -95,5 +92,5 @@ function useCloseOnLoadingFinish(
   enabled?: boolean,
 ): void {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {enabled && !loading && onClose?.()}, [enabled, loading])
+  useEffect(() => { enabled && !loading && onClose?.() }, [enabled, loading])
 }

packages/editor/src/components/MonacoDiffEditor/MonacoDiffEditor.tsx

@@ -26,6 +26,7 @@ import { FilesModeBody } from './FilesModeBody/FilesModeBody'
 import { PublishModeBody } from './PublishModeBody/PublishModeBody'
 import { ChangesModeBody } from './ChangesModeBody/ChangesModeBody'
 import { SettingsModeBody } from './SettingsModeBody/SettingsModeBody'
+import { ModuleFetchingErrorBoundary } from '@netcracker/qubership-apihub-ui-shared/components/ModuleFetchingErrorBoundary/ModuleFetchingErrorBoundary'
 
 export const ProjectEditorBody: FC = memo(() => {
   const isFilesEditorPageMode = useIsFilesProjectEditorMode()
@@ -35,7 +36,9 @@ export const ProjectEditorBody: FC = memo(() => {
 
   if (isFilesEditorPageMode) {
     return (
-      <FilesModeBody/>
+      <ModuleFetchingErrorBoundary>
+        <FilesModeBody/>
+      </ModuleFetchingErrorBoundary>
     )
   }
 

packages/editor/src/components/MonacoDiffEditor/MonacoDiffEditorElement.tsx

@@ -30,7 +30,7 @@ import { waitForSocketEvent } from '@netcracker/qubership-apihub-ui-shared/utils
 export const BwcPublishProjectVersionDialog: FC = memo(() => (
   <PopupDelegate
     type={SHOW_BWC_PUBLISH_PROJECT_VERSION_DIALOG}
-    render={props => <BwcPublishProjectVersionPopup {...props}/>}
+    render={props => <BwcPublishProjectVersionPopup {...props} />}
   />
 ))
 
@@ -61,10 +61,7 @@ const BwcPublishProjectVersionPopup: FC<PopupProps> = memo<PopupProps>(({ open,
       </DialogTitle>
 
       <DialogContent sx={{ width: 440 }}>
-        <DialogContentText
-          variant="body2"
-          sx={{ color: 'black' }}
-        >
+        <DialogContentText variant="body2">
           There are breaking changes in current version. Do you want to publish it anyway?
         </DialogContentText>
       </DialogContent>

packages/editor/src/components/MonacoDiffEditor/useMonacoDiffEditorElement.ts

@@ -14,18 +14,19 @@
  * limitations under the License.
  */
 
-import type { FC, ReactNode } from 'react'
-import React, { memo } from 'react'
-import { Box } from '@mui/material'
-import { Resizable } from 're-resizable'
+import { Examples } from '@apihub/routes/root/PortalPage/VersionPage/OperationContent/Playground/Examples/Examples'
+import { Playground } from '@apihub/routes/root/PortalPage/VersionPage/OperationContent/Playground/Playground'
 import {
   usePlaygroundEvents,
 } from '@apihub/routes/root/PortalPage/VersionPage/OperationContent/Playground/usePlaygroundEvents'
-import { Playground } from '@apihub/routes/root/PortalPage/VersionPage/OperationContent/Playground/Playground'
-import { Examples } from '@apihub/routes/root/PortalPage/VersionPage/OperationContent/Playground/Examples/Examples'
+import { Box } from '@mui/material'
+import { ModuleFetchingErrorBoundary } from '@netcracker/qubership-apihub-ui-shared/components/ModuleFetchingErrorBoundary/ModuleFetchingErrorBoundary'
+import { NAVIGATION_MAX_WIDTH } from '@netcracker/qubership-apihub-ui-shared/utils/page-layouts'
+import { Resizable } from 're-resizable'
+import type { FC, ReactNode } from 'react'
+import { memo } from 'react'
 import { CreateCustomServerDialog } from './Playground/CreateCustomServerDialog'
 import { ExamplesDialog } from './Playground/Examples/ExamplesDialog'
-import { NAVIGATION_MAX_WIDTH } from '@netcracker/qubership-apihub-ui-shared/utils/page-layouts'
 
 export type OperationWithPlaygroundProps = {
   changedOperationContent: string
@@ -61,7 +62,6 @@ export const OperationWithPlayground: FC<OperationWithPlaygroundProps> = memo<Op
             backgroundColor: '#FFFFFF',
             paddingRight: '24px',
           }}
-
           enable={{
             top: false,
             right: false,
@@ -77,13 +77,15 @@ export const OperationWithPlayground: FC<OperationWithPlaygroundProps> = memo<Op
           maxWidth={PLAYGROUND_MAX_WIDTH}
           minWidth="300px"
         >
-          {isPlaygroundMode && <Playground document={changedOperationContent} customServers={customServers}/>}
-          {isExamplesMode && <Examples document={changedOperationContent}/>}
+          <ModuleFetchingErrorBoundary>
+            {isPlaygroundMode && <Playground document={changedOperationContent} customServers={customServers} />}
+            {isExamplesMode && <Examples document={changedOperationContent} />}
+          </ModuleFetchingErrorBoundary>
         </Resizable>
       )}
 
-      <CreateCustomServerDialog/>
-      <ExamplesDialog document={changedOperationContent}/>
+      <CreateCustomServerDialog />
+      <ExamplesDialog document={changedOperationContent} />
     </Box>
   )
 })

packages/editor/src/routes/root/EditorPage/ProjectEditorPage/ProjectEditorBody/ProjectEditorBody.tsx

@@ -29,18 +29,17 @@ export type PlaygroundProps = PropsWithChildren<{
 const PlaygroundElement: FC<PlaygroundElementProps> = lazy(() => import('./PlaygroundElement'))
 
 export const Playground: FC<PlaygroundProps> = memo<PlaygroundProps>(({ document, customServers }) => {
-    return (
-      <Suspense fallback={<LoadingIndicator/>}>
-        <Box lineHeight={1.5} height="100%" width="100%" data-testid="PlaygroundPanel">
-          <PlaygroundElement
-            key={crypto.randomUUID()}
-            document={document}
-            customServers={customServers}
-            token={getToken()}
-            origin={window.location.origin}
-          />
-        </Box>
-      </Suspense>
-    )
-  },
-)
+  return (
+    <Suspense fallback={<LoadingIndicator />}>
+      <Box lineHeight={1.5} height="100%" width="100%" data-testid="PlaygroundPanel">
+        <PlaygroundElement
+          key={crypto.randomUUID()}
+          document={document}
+          customServers={customServers}
+          token={getToken()}
+          origin={window.location.origin}
+        />
+      </Box>
+    </Suspense>
+  )
+})

packages/editor/src/routes/root/EditorPage/ProjectEditorPage/ProjectEditorSidebar/PublishTabPanel/BwcPublishProjectVersionDialog.tsx

@@ -49,14 +49,13 @@ export const ConfirmationDialog: FC<ConfirmationDialogProps> = memo<Confirmation
       open={open}
       onClose={onCancel}
     >
-      <DialogTitle sx={{ fontSize: 15, fontWeight: 600, color: 'black' }}>
+      <DialogTitle>
         {title}
       </DialogTitle>
 
       <DialogContent>
         <DialogContentText
           variant="body2"
-          sx={{ color: 'black' }}
           data-testid="ConfirmationDialogContent"
         >
           {message}