[CP-3663] Refactored image preview (#2638)

Co-authored-by: slawomir-werner <[email protected]>

Author: mkurczewski

libs/core/__deprecated__/renderer/locales/default/en-US.json

@@ -1056,7 +1056,6 @@
   "module.genericViews.filesManager.preview.unknownError": "Failed to load photo.\nPlease try again.",
   "module.genericViews.filesManager.preview.backButton": "Back",
   "module.genericViews.filesManager.preview.retryButton": "Try again",
-
   "module.genericViews.appInstallation.progress.modalTitle": "Installing the App...",
   "module.genericViews.appInstallation.error.modalTitle": "Installation failed",
   "module.genericViews.appInstallation.error.globalMessage": "The installation process was interrupted.",

libs/core/core/components/root-wrapper.tsx

@@ -15,22 +15,28 @@ import localeEn from "Core/__deprecated__/renderer/locales/default/en-US.json"
 import { ModalProvider } from "Core/__deprecated__/renderer/components/core/modal/modal.service"
 import modalService from "Core/__deprecated__/renderer/components/core/modal/modal.service"
 import AppsSwitch from "Core/core/components/apps-switch"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const RootWrapper: FunctionComponent = () => {
+  const queryClient = new QueryClient()
   return (
-    <ThemeProvider theme={theme}>
-      <IntlProvider
-        defaultLocale={translationConfig.defaultLanguage}
-        locale={translationConfig.defaultLanguage}
-        messages={localeEn}
-      >
-        <ModalProvider service={modalService}>
-          <Normalize />
-          <GlobalStyle />
-          <AppsSwitch />
-        </ModalProvider>
-      </IntlProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <ThemeProvider theme={theme}>
+        <IntlProvider
+          defaultLocale={translationConfig.defaultLanguage}
+          locale={translationConfig.defaultLanguage}
+          messages={localeEn}
+        >
+          <ModalProvider service={modalService}>
+            <Normalize />
+            <GlobalStyle />
+            <AppsSwitch />
+          </ModalProvider>
+        </IntlProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
   )
 }
 

libs/generic-view/ui/src/lib/generated/mc-file-manager/file-export-button.ts

@@ -22,10 +22,10 @@ export const generateFilesExportButtonActions = (
   {
     singleEntityId,
     entityType,
-    exportActionId,
+    exportActionId = entityType + "Export",
   }: Pick<McFileManagerConfig["categories"][number], "entityType"> & {
     singleEntityId?: string
-    exportActionId: string
+    exportActionId?: string
   }
 ): ButtonTextConfig["actions"] => {
   return [
@@ -128,9 +128,17 @@ export const generateFileExportProcessButton: ComponentGenerator<
     "entityType" | "directoryPath"
   > & {
     singleEntityId?: string
-    exportActionId: string
+    exportActionId?: string
   }
-> = (key, { directoryPath, entityType, singleEntityId, exportActionId }) => {
+> = (
+  key,
+  {
+    directoryPath,
+    entityType,
+    singleEntityId,
+    exportActionId = entityType + "Export",
+  }
+) => {
   return {
     [generateFilesExportProcessButtonKey(key)]: {
       component: "button-text",

libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts

@@ -39,7 +39,9 @@ const generateFileList: ComponentGenerator<
     features,
   }
 ) => {
-  const isExportEnabled = features?.includes("export")
+  const isExportEnabled = Boolean(features?.includes("export"))
+  const isPreviewEnabled =
+    Boolean(features?.includes("preview")) && entityType === "imageFiles"
   return {
     [`${key}${id}fileListContainer`]: {
       component: "conditional-renderer",
@@ -297,7 +299,6 @@ const generateFileList: ComponentGenerator<
     ...generateFileExportProcessButton(`${key}${id}`, {
       directoryPath,
       entityType,
-      exportActionId: entityType + "Export",
     }),
     [`${key}${id}deleteButton`]: {
       component: "button-text",
@@ -355,7 +356,7 @@ const generateFileList: ComponentGenerator<
           allIdsFieldName: "allItems",
         },
         previewOptions: {
-          enabled: entityType === "imageFiles",
+          enabled: isPreviewEnabled,
           entitiesType: entityType,
           entityIdFieldName: "id",
           entityPathFieldName: "filePath",

libs/generic-view/ui/src/lib/predefined/file-preview/file-preview-error-types.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export enum FilePreviewErrorType {
+  UnsupportedFileType = "unsupported-file-type",
+  UnsupportedTransferMode = "unsupported-transfer-mode",
+  FileNotFound = "file-not-found",
+  Unknown = "unknown",
+}
+
+export type FilePreviewError = {
+  type: FilePreviewErrorType
+  details?: string
+}
+
+export const isFilePreviewError = (
+  error: unknown
+): error is FilePreviewError => {
+  return (
+    typeof error === "object" &&
+    "type" in (error as FilePreviewError) &&
+    Object.values(FilePreviewErrorType).includes(
+      (error as FilePreviewError).type
+    )
+  )
+}