Merge branch 'develop' into CP-3307

.gitignore

@@ -65,3 +65,4 @@ apps/mudita-center/static/sql-wasm*
 .nx
 
 matomo-to-gsheet-*.json
+scripts/manage-test-files/file-manager-test-files/*

libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts

@@ -10,7 +10,7 @@ export const contactsView: View = {
   main: {
     component: "mc-contacts-view",
     config: {
-      entityType: "contacts",
+      entityTypes: ["contacts"],
     },
     // @ts-ignore
     screenTitle: "Contacts",

libs/generic-view/feature/src/lib/use-dev-views/views/file-manager-view.ts

@@ -9,6 +9,14 @@ import { View } from "generic-view/utils"
 export const fileManagerView: View = {
   main: {
     component: "mc-file-manager-view",
+    config: {
+      entityTypes: [
+        "audioFiles",
+        "imageFiles",
+        "ebookFiles",
+        "applicationFiles",
+      ],
+    },
     // @ts-ignore
     screenTitle: "Manage Files",
   },

libs/generic-view/models/src/index.ts

@@ -60,7 +60,7 @@ import { mcDataMigration } from "./lib/mc-data-migration"
 import { mcFileManagerView } from "./lib/mc-file-manager-view"
 import { incomingFeatureInfo } from "./lib/incoming-feature-info"
 import { table } from "./lib/table"
-import { tableCell } from "./lib/table-cell"
+import { tableCell, tableHeaderCell } from "./lib/table-cell"
 import { entitiesLoader } from "./lib/entities-loader"
 import { conditionalRenderer } from "./lib/conditional-renderer"
 import { toast } from "./lib/toast"
@@ -196,6 +196,7 @@ export default {
   [incomingFeatureInfo.key]: incomingFeatureInfo,
   [table.key]: table,
   [tableCell.key]: tableCell,
+  [tableHeaderCell.key]: tableHeaderCell,
   [entitiesLoader.key]: entitiesLoader,
   [conditionalRenderer.key]: conditionalRenderer,
   [formatMessage.key]: formatMessage,

libs/generic-view/models/src/lib/common-text-validators.ts

@@ -10,10 +10,25 @@ const singleLineTextValidator = z.object({
   singleLine: z.boolean().optional(),
 })
 
+const textTransformTypes = z.enum([
+  "capitalize",
+  "uppercase",
+  "lowercase",
+  "capitalize-first-letter",
+  "format-bytes",
+])
+
+export type TextTransformTypes = z.infer<typeof textTransformTypes>
+
+const textTransformOptionsValidator = z.object({
+  minUnit: z.enum(["B", "KB", "MB", "GB", "TB"]).optional(),
+})
+
+export type TextTransformOptions = z.infer<typeof textTransformOptionsValidator>
+
 const textTransformValidator = z.object({
-  textTransform: z
-    .enum(["capitalize", "uppercase", "lowercase", "capitalize-first-letter"])
-    .optional(),
+  textTransform: textTransformTypes.optional(),
+  textTransformOptions: textTransformOptionsValidator.optional(),
 })
 
 const colorValidator = z.object({

libs/generic-view/models/src/lib/entities-loader.ts

@@ -8,7 +8,7 @@ import { z } from "zod"
 const dataValidator = z.undefined()
 
 const configValidator = z.object({
-  entitiesTypes: z.array(z.string()),
+  entityTypes: z.array(z.string()),
   text: z.string().optional(),
 })
 

libs/generic-view/models/src/lib/headers.ts

@@ -8,12 +8,19 @@ import { commonTextValidators } from "./common-text-validators"
 
 const dataValidator = z.undefined()
 
+const unboldValidator = z.object({
+  unbold: z.boolean().optional(),
+})
+
+export type UnboldValidator = z.infer<typeof unboldValidator>
+
 const configValidator = z
   .object({
-    text: z.string(),
-    unbold: z.boolean().optional(),
+    text: z.string().optional(),
   })
   .merge(commonTextValidators)
+  .merge(unboldValidator)
+  .optional()
 
 export type HeaderConfig = z.infer<typeof configValidator>
 

libs/generic-view/models/src/lib/mc-contacts-view.ts

@@ -8,7 +8,7 @@ import { z } from "zod"
 const dataValidator = z.undefined()
 
 const configValidator = z.object({
-  entityType: z.string().min(1),
+  entityTypes: z.array(z.string()).min(1),
 })
 
 export type McContactsView = z.infer<typeof configValidator>

libs/generic-view/models/src/lib/mc-file-manager-view.ts

@@ -7,7 +7,9 @@ import { z } from "zod"
 
 const dataValidator = z.undefined()
 
-const configValidator = z.undefined()
+const configValidator = z.object({
+  entityTypes: z.array(z.string()).min(1),
+})
 
 export type McFileManagerView = z.infer<typeof configValidator>
 

libs/generic-view/models/src/lib/table-cell.ts

@@ -20,3 +20,9 @@ export const tableCell = {
   dataValidator,
   configValidator,
 } as const
+
+export const tableHeaderCell = {
+  key: "table.headerCell",
+  dataValidator,
+  configValidator,
+} as const

libs/generic-view/models/src/lib/table.ts

@@ -16,7 +16,6 @@ const configValidator = z.object({
     selectedIdsFieldName: z.string().optional(),
     allIdsFieldName: z.string().optional(),
   }),
-  columnsNames: z.array(z.string()).optional(),
 })
 
 export type TableConfig = z.infer<typeof configValidator>

libs/generic-view/store/src/lib/features/get-generic-config.actions.ts

@@ -26,13 +26,21 @@ export const getGenericConfig = createAsyncThunk<
     const response = await getFeatureConfigRequest(deviceId, feature)
 
     if (response.ok) {
-      let fullView = transformGenericComponents(response.data)
+      let fullView
 
-      if (process.env.DEV_API_CONFIG === "1") {
+      if (process.env.DEV_API_CONFIG !== "1") {
+        fullView = transformGenericComponents(response.data)
+      } else {
         const devConfig =
           feature in devViews
             ? devViews[feature as keyof typeof devViews]
             : undefined
+
+        fullView = transformGenericComponents({
+          ...response.data,
+          ...devConfig,
+        })
+
         fullView = {
           ...fullView,
           ...devConfig,

libs/generic-view/ui/src/lib/entities/entities-loader.tsx

@@ -4,6 +4,9 @@
  */
 
 import React, { useCallback, useEffect, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import styled from "styled-components"
+import { sum } from "lodash"
 import { APIFC } from "generic-view/utils"
 import { EntitiesLoaderConfig } from "generic-view/models"
 import {
@@ -12,12 +15,9 @@ import {
   selectActiveApiDeviceId,
   selectEntitiesLoadingState,
 } from "generic-view/store"
-import { useDispatch, useSelector } from "react-redux"
 import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
-import styled from "styled-components"
 import { H3 } from "../texts/headers"
 import { ProgressBar } from "../interactive/progress-bar/progress-bar"
-import { sum } from "lodash"
 
 export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
   config,
@@ -30,7 +30,7 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
   const entitiesLoadingStates = useSelector((state: ReduxRootState) =>
     selectEntitiesLoadingState(state, { deviceId })
   )
-  const allLoaded = config.entitiesTypes.every(
+  const allLoaded = config.entityTypes.every(
     (entitiesType) => entitiesLoadingStates[entitiesType]?.state === "loaded"
   )
   const [showProgress, setShowProgress] = useState(!allLoaded)
@@ -45,13 +45,13 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
   )
 
   useEffect(() => {
-    const progress = config.entitiesTypes.reduce((acc, entitiesType) => {
-      acc[entitiesType] = 0
-      const entity = entitiesLoadingStates[entitiesType]
+    const progress = config.entityTypes.reduce((acc, entityType) => {
+      acc[entityType] = 0
+      const entity = entitiesLoadingStates[entityType]
       if (entity?.state === "idle") {
-        void fetchEntityData(entitiesType)
+        void fetchEntityData(entityType)
       } else if (entity?.state === "loading" || entity?.state === "loaded") {
-        acc[entitiesType] = entity.progress
+        acc[entityType] = entity.progress
       }
       return acc
     }, {} as Record<string, number>)
@@ -61,12 +61,7 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
         ? sum(Object.values(progress)) / Object.keys(progress).length
         : 0
     setTotalProgress(totalProgress)
-  }, [
-    config.entitiesTypes,
-    dispatch,
-    entitiesLoadingStates,
-    fetchEntityData,
-  ])
+  }, [config.entityTypes, dispatch, entitiesLoadingStates, fetchEntityData])
 
   useEffect(() => {
     let timeout: NodeJS.Timeout

libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts

@@ -47,7 +47,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
     contactsLoader: {
       component: "entities-loader",
       config: {
-        entitiesTypes: [config.entityType],
+        entityTypes: config.entityTypes,
         text: "Loading contacts, please wait...",
       },
       layout: {

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

@@ -9,14 +9,50 @@ interface CategoryListItemConfig {
   id: string
   name: string
   markerColor: string
+  entitiesType: string
   icon: IconType
 }
 
+const CONFIG_MAP: Record<string, Omit<CategoryListItemConfig, "id">> = {
+  audioFiles: {
+    name: "Music",
+    icon: IconType.MusicNote,
+    markerColor: "#E38577",
+    entitiesType: "audioFiles",
+  },
+  imageFiles: {
+    name: "Photos",
+    icon: IconType.PhotoCatalog,
+    markerColor: "#0E7490",
+    entitiesType: "imageFiles",
+  },
+  ebookFiles: {
+    name: "Ebooks",
+    icon: IconType.Book,
+    markerColor: "#A8DADC",
+    entitiesType: "ebookFiles",
+  },
+  applicationFiles: {
+    name: "Apps",
+    icon: IconType.Grid,
+    markerColor: "#AEBEC9",
+    entitiesType: "applicationFiles",
+  },
+}
+
+function getConfigByEntityType(
+  entityType: string,
+  id: string
+): CategoryListItemConfig | undefined {
+  return { ...CONFIG_MAP[entityType], id } || undefined
+}
+
 const generateFileCategoryListItem = ({
   id,
   name,
   icon,
   markerColor,
+  entitiesType,
 }: CategoryListItemConfig): Subview => {
   return {
     [`${id}CategoryListItem`]: {
@@ -52,7 +88,7 @@ const generateFileCategoryListItem = ({
       childrenKeys: [
         `${id}CategoryListItemName`,
         `${id}CategoryListItemStorage`,
-        `${id}CategoryListItemCountText`,
+        `${id}CategoryListItemCountTextWrapper`,
       ],
     },
     [`${id}CategoryListItemName`]: {
@@ -127,7 +163,7 @@ const generateFileCategoryListItem = ({
         color: markerColor,
       },
     },
-    [`${id}CategoryListItemCountText`]: {
+    [`${id}CategoryListItemCountTextWrapper`]: {
       component: "p3-component",
       layout: {
         margin: "8px 0 0 0",
@@ -138,18 +174,29 @@ const generateFileCategoryListItem = ({
           height: 1,
         },
       },
+      childrenKeys: [`${id}CategoryListItemCountText`],
+    },
+    [`${id}CategoryListItemCountText`]: {
+      component: "format-message",
       config: {
-        text: "0 files",
+        messageTemplate:
+          "{totalEntities} {totalEntities, plural, one {file} other {files}}",
+      },
+      dataProvider: {
+        source: "entities-metadata",
+        entitiesType,
+        fields: [
+          {
+            providerField: "totalEntities",
+            componentField: "data.fields.totalEntities",
+          },
+        ],
       },
     },
   }
 }
 
-export const generateFileCategoryList = ({
-  configs,
-}: {
-  configs: CategoryListItemConfig[]
-}): Subview => {
+export const generateFileCategoryList = (entitiesTypes: string[]): Subview => {
   const initialListConfig: Subview = {
     fileCategoryList: {
       component: "block-plain",
@@ -162,7 +209,11 @@ export const generateFileCategoryList = ({
     },
   }
 
-  return configs.reduce((previousValue, config) => {
+  return entitiesTypes.reduce((previousValue, entitiesType, index) => {
+    const config = getConfigByEntityType(entitiesType, String(index))
+    if (!config) {
+      return previousValue
+    }
     const categoryItemKey = `${config.id}CategoryListItem`
     previousValue["fileCategoryList"]?.childrenKeys?.push(categoryItemKey)
     previousValue = {