Upload file for customization.logo.* settings

.gitignore

@@ -79,3 +79,6 @@ cypress/.idea/
 cypress/cypress.env.json
 cypress/report/
 cypress/cookies.json
+
+# Customization plugin assets
+public/assets/custom/*

CHANGELOG.md

@@ -10,7 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added agent synchronization status in the agent module. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874)
 - Redesign the SCA table from agent's dashboard [#4512](https://github.com/wazuh/wazuh-kibana-app/pull/4512)
 - Enhanced the plugin setting description displayed in the UI and the configuration file. [#4501](https://github.com/wazuh/wazuh-kibana-app/pull/4501)
-- Added validation to the plugin settings in the form of `Settings/Configuration` and the endpoint to update the plugin configuration [#4501](https://github.com/wazuh/wazuh-kibana-app/pull/4503)
+- Added validation to the plugin settings in the form of `Settings/Configuration` and the endpoint to update the plugin configuration [#4503](https://github.com/wazuh/wazuh-kibana-app/pull/4503)
 
 ### Changed
 
@@ -20,6 +20,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Made Agents Overview icons load independently [#4363](https://github.com/wazuh/wazuh-kibana-app/pull/4363)
 - Improved the message displayed when there is a versions mismatch between the Wazuh API and the Wazuh APP [#4529](https://github.com/wazuh/wazuh-kibana-app/pull/4529)
 - Changed the endpoint that updates the plugin configuration to support multiple settings. [#4501](https://github.com/wazuh/wazuh-kibana-app/pull/4501)
+- Allowed to upload an image for the `customization.logo.*` settings in `Settings/Configuration` [#4504](https://github.com/wazuh/wazuh-kibana-app/pull/4504)
 
 ### Fixed
 

common/constants.ts

@@ -342,6 +342,11 @@ export const DOCUMENTATION_WEB_BASE_URL = "https://documentation.wazuh.com";
 // Default Elasticsearch user name context
 export const ELASTIC_NAME = 'elastic';
 
+
+// Customization
+export const CUSTOMIZATION_ENDPOINT_PAYLOAD_UPLOAD_CUSTOM_FILE_MAXIMUM_BYTES = 1048576;
+
+
 // Plugin settings
 export enum SettingCategory {
   GENERAL,
@@ -357,6 +362,35 @@ type TPluginSettingOptionsSelect = {
   select: { text: string, value: any }[]
 };
 
+type TPluginSettingOptionsEditor = {
+	editor: {
+		language: string
+	}
+};
+
+type TPluginSettingOptionsFile = {
+	file: {
+		type: 'image'
+		extensions?: string[]
+		size?: {
+			maxBytes?: number
+			minBytes?: number
+		}
+		recommended?: {
+			dimensions?: {
+				width: number,
+				height: number,
+				unit: string
+			}
+		}
+		store?: {
+			relativePathFileSystem: string
+			filename: string
+			resolveStaticURL: (filename: string) => string
+		}
+	}
+};
+
 type TPluginSettingOptionsNumber = {
   number: {
     min?: number
@@ -365,12 +399,6 @@ type TPluginSettingOptionsNumber = {
   }
 };
 
-type TPluginSettingOptionsEditor = {
-  editor: {
-    language: string
-  }
-};
-
 type TPluginSettingOptionsSwitch = {
   switch: {
     values: {
@@ -387,6 +415,7 @@ export enum EpluginSettingType {
   number = 'number',
   editor = 'editor',
   select = 'select',
+  filepicker = 'filepicker'
 };
 
 export type TPluginSetting = {
@@ -413,14 +442,14 @@ export type TPluginSetting = {
   // Modify the setting requires restarting the plugin platform to take effect.
   requiresRestartingPluginPlatform?: boolean
   // Define options related to the `type`.
-  options?: TPluginSettingOptionsNumber | TPluginSettingOptionsEditor | TPluginSettingOptionsSelect | TPluginSettingOptionsSwitch
+  options?: TPluginSettingOptionsNumber | TPluginSettingOptionsEditor | TPluginSettingOptionsFile | TPluginSettingOptionsSelect | TPluginSettingOptionsSwitch
   // Transform the input value. The result is saved in the form global state of Settings/Configuration
   uiFormTransformChangedInputValue?: (value: any) => any
   // Transform the configuration value or default as initial value for the input in Settings/Configuration
   uiFormTransformConfigurationValueToInputValue?: (value: any) => any
   // Transform the input value changed in the form of Settings/Configuration and returned in the `changed` property of the hook useForm
   uiFormTransformInputValueToConfigurationValue?: (value: any) => any
-  // Validate the value in the form of Settings/Configuration. It returns a string if there is some validation error. 
+  // Validate the value in the form of Settings/Configuration. It returns a string if there is some validation error.
 	validate?: (value: any) => string | undefined
 	// Validate function creator to validate the setting in the backend. It uses `schema` of the `@kbn/config-schema` package.
 	validateBackend?: (schema: any) => (value: unknown) => string | undefined
@@ -898,39 +927,150 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
     title: "App main logo",
     description: `This logo is used in the app main menu, at the top left corner.`,
     category: SettingCategory.CUSTOMIZATION,
-    type: EpluginSettingType.text,
+    type: EpluginSettingType.filepicker,
     defaultValue: "",
     isConfigurableFromFile: true,
     isConfigurableFromUI: true,
+    options: {
+			file: {
+				type: 'image',
+				extensions: ['.jpeg', '.jpg', '.png', '.svg'],
+				size: {
+					maxBytes: CUSTOMIZATION_ENDPOINT_PAYLOAD_UPLOAD_CUSTOM_FILE_MAXIMUM_BYTES,
+				},
+				recommended: {
+					dimensions: {
+						width: 300,
+						height: 70,
+						unit: 'px'
+					}
+				},
+				store: {
+					relativePathFileSystem: 'public/assets/custom/images',
+					filename: 'customization.logo.app',
+					resolveStaticURL: (filename: string) => `custom/images/${filename}?v=${Date.now()}`
+          // ?v=${Date.now()} is used to force the browser to reload the image when a new file is uploaded
+				}
+			}
+		},
+		validate: function(value){
+			return SettingsValidator.compose(
+				SettingsValidator.filePickerFileSize({...this.options.file.size, meaningfulUnit: true}),
+				SettingsValidator.filePickerSupportedExtensions(this.options.file.extensions)
+			)(value)
+		},
   },
   "customization.logo.healthcheck": {
     title: "Healthcheck logo",
     description: `This logo is displayed during the Healthcheck routine of the app.`,
     category: SettingCategory.CUSTOMIZATION,
-    type: EpluginSettingType.text,
+    type: EpluginSettingType.filepicker,
     defaultValue: "",
     isConfigurableFromFile: true,
     isConfigurableFromUI: true,
+    options: {
+			file: {
+				type: 'image',
+				extensions: ['.jpeg', '.jpg', '.png', '.svg'],
+				size: {
+					maxBytes: CUSTOMIZATION_ENDPOINT_PAYLOAD_UPLOAD_CUSTOM_FILE_MAXIMUM_BYTES,
+				},
+				recommended: {
+					dimensions: {
+						width: 300,
+						height: 70,
+						unit: 'px'
+					}
+				},
+				store: {
+					relativePathFileSystem: 'public/assets/custom/images',
+					filename: 'customization.logo.healthcheck',
+					resolveStaticURL: (filename: string) => `custom/images/${filename}?v=${Date.now()}`
+          // ?v=${Date.now()} is used to force the browser to reload the image when a new file is uploaded
+				}
+			}
+		},
+		validate: function(value){
+			return SettingsValidator.compose(
+				SettingsValidator.filePickerFileSize({...this.options.file.size, meaningfulUnit: true}),
+				SettingsValidator.filePickerSupportedExtensions(this.options.file.extensions)
+			)(value)
+		},
   },
   "customization.logo.reports": {
     title: "PDF reports logo",
     description: `This logo is used in the PDF reports generated by the app. It's placed at the top left corner of every page of the PDF.`,
     category: SettingCategory.CUSTOMIZATION,
-    type: EpluginSettingType.text,
+    type: EpluginSettingType.filepicker,
     defaultValue: "",
     defaultValueIfNotSet: REPORTS_LOGO_IMAGE_ASSETS_RELATIVE_PATH,
     isConfigurableFromFile: true,
     isConfigurableFromUI: true,
+    options: {
+			file: {
+				type: 'image',
+				extensions: ['.jpeg', '.jpg', '.png'],
+				size: {
+					maxBytes: CUSTOMIZATION_ENDPOINT_PAYLOAD_UPLOAD_CUSTOM_FILE_MAXIMUM_BYTES,
+				},
+				recommended: {
+					dimensions: {
+						width: 190,
+						height: 40,
+						unit: 'px'
+					}
+				},
+				store: {
+					relativePathFileSystem: 'public/assets/custom/images',
+					filename: 'customization.logo.reports',
+					resolveStaticURL: (filename: string) => `custom/images/${filename}`
+				}
+			}
+		},
+		validate: function(value){
+			return SettingsValidator.compose(
+				SettingsValidator.filePickerFileSize({...this.options.file.size, meaningfulUnit: true}),
+				SettingsValidator.filePickerSupportedExtensions(this.options.file.extensions)
+			)(value)
+		},
   },
   "customization.logo.sidebar": {
     title: "Navigation drawer logo",
     description: `This is the logo for the app to display in the platform's navigation drawer, this is, the main sidebar collapsible menu.`,
     category: SettingCategory.CUSTOMIZATION,
-    type: EpluginSettingType.text,
+    type: EpluginSettingType.filepicker,
     defaultValue: "",
     isConfigurableFromFile: true,
     isConfigurableFromUI: true,
     requiresReloadingBrowserTab: true,
+    options: {
+			file: {
+				type: 'image',
+				extensions: ['.jpeg', '.jpg', '.png', '.svg'],
+				size: {
+					maxBytes: CUSTOMIZATION_ENDPOINT_PAYLOAD_UPLOAD_CUSTOM_FILE_MAXIMUM_BYTES,
+				},
+				recommended: {
+					dimensions: {
+						width: 80,
+						height: 80,
+						unit: 'px'
+					}
+				},
+				store: {
+					relativePathFileSystem: 'public/assets/custom/images',
+					filename: 'customization.logo.sidebar',
+					resolveStaticURL: (filename: string) => `custom/images/${filename}?v=${Date.now()}`
+          // ?v=${Date.now()} is used to force the browser to reload the image when a new file is uploaded
+				}
+			}
+		},
+		validate: function(value){
+			return SettingsValidator.compose(
+				SettingsValidator.filePickerFileSize({...this.options.file.size, meaningfulUnit: true}),
+				SettingsValidator.filePickerSupportedExtensions(this.options.file.extensions)
+			)(value)
+		},
   },
   "disabled_roles": {
     title: "Disable roles",
@@ -1361,7 +1501,7 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
         SettingsValidator.isString,
         SettingsValidator.isNotEmptyString,
         SettingsValidator.hasNoSpaces,
-        SettingsValidator.noLiteralString('.', '..'),        
+        SettingsValidator.noLiteralString('.', '..'),
         SettingsValidator.noStartsWithString('-', '_', '+', '.'),
         SettingsValidator.hasNotInvalidCharacters('\\', '/', '?', '"', '<', '>', '|', ',', '#')
       )),

common/plugin-settings.test.ts

@@ -93,6 +93,30 @@ describe('[settings] Input validation', () => {
     ${'cron.statistics.interval'}       | ${true}              | ${"Interval is not valid."}
     ${'cron.statistics.status'}         | ${true}              | ${undefined}
     ${'cron.statistics.status'}         | ${0}                 | ${'It should be a boolean. Allowed values: true or false.'}
+    ${'customization.logo.app'}         | ${{size: 124000, name: 'image.jpg'}}  | ${undefined}
+    ${'customization.logo.app'}         | ${{size: 124000, name: 'image.jpeg'}} | ${undefined}
+    ${'customization.logo.app'}         | ${{size: 124000, name: 'image.png'}}  | ${undefined}
+    ${'customization.logo.app'}         | ${{size: 124000, name: 'image.svg'}}  | ${undefined}
+    ${'customization.logo.app'}         | ${{size: 124000, name: 'image.txt'}}  | ${'File extension is invalid. Allowed file extensions: .jpeg, .jpg, .png, .svg.'}
+    ${'customization.logo.app'}         | ${{size: 1240000, name: 'image.txt'}} | ${'File size should be lower or equal than 1 MB.'}
+    ${'customization.logo.healthcheck'} | ${{size: 124000, name: 'image.jpg'}}  | ${undefined}
+    ${'customization.logo.healthcheck'} | ${{size: 124000, name: 'image.jpeg'}} | ${undefined}
+    ${'customization.logo.healthcheck'} | ${{size: 124000, name: 'image.png'}}  | ${undefined}
+    ${'customization.logo.healthcheck'} | ${{size: 124000, name: 'image.svg'}}  | ${undefined}
+    ${'customization.logo.healthcheck'} | ${{size: 124000, name: 'image.txt'}}  | ${'File extension is invalid. Allowed file extensions: .jpeg, .jpg, .png, .svg.'}
+    ${'customization.logo.healthcheck'} | ${{size: 1240000, name: 'image.txt'}} | ${'File size should be lower or equal than 1 MB.'}
+    ${'customization.logo.reports'}     | ${{size: 124000, name: 'image.jpg'}}  | ${undefined}
+    ${'customization.logo.reports'}     | ${{size: 124000, name: 'image.jpeg'}} | ${undefined}
+    ${'customization.logo.reports'}     | ${{size: 124000, name: 'image.png'}}  | ${undefined}
+    ${'customization.logo.reports'}     | ${{size: 124000, name: 'image.svg'}}  | ${'File extension is invalid. Allowed file extensions: .jpeg, .jpg, .png.'}
+    ${'customization.logo.reports'}     | ${{size: 124000, name: 'image.txt'}}  | ${'File extension is invalid. Allowed file extensions: .jpeg, .jpg, .png.'}
+    ${'customization.logo.reports'}     | ${{size: 1240000, name: 'image.txt'}} | ${'File size should be lower or equal than 1 MB.'}
+    ${'customization.logo.sidebar'}     | ${{size: 124000, name: 'image.jpg'}}  | ${undefined}
+    ${'customization.logo.sidebar'}     | ${{size: 124000, name: 'image.jpeg'}} | ${undefined}
+    ${'customization.logo.sidebar'}     | ${{size: 124000, name: 'image.png'}}  | ${undefined}
+    ${'customization.logo.sidebar'}     | ${{size: 124000, name: 'image.svg'}}  | ${undefined}
+    ${'customization.logo.sidebar'}     | ${{size: 124000, name: 'image.txt'}}  | ${'File extension is invalid. Allowed file extensions: .jpeg, .jpg, .png, .svg.'}
+    ${'customization.logo.sidebar'}     | ${{size: 1240000, name: 'image.txt'}} | ${'File size should be lower or equal than 1 MB.'}
     ${'disabled_roles'}                 | ${['test']}          | ${undefined}
     ${'disabled_roles'}                 | ${['']}              | ${'Value can not be empty.'}
     ${'disabled_roles'}                 | ${['test space']}    | ${"No whitespaces allowed."}

common/services/file-extension.test.ts

@@ -0,0 +1,17 @@
+import { getFileExtensionFromBuffer } from "./file-extension";
+import fs from 'fs';
+import path from 'path';
+
+describe('getFileExtensionFromBuffer', () => {
+	it.each`
+		filepath                                                              | extension
+		${'../../server/routes/wazuh-utils/fixtures/fixture_image_small.jpg'} | ${'jpg'}
+		${'../../server/routes/wazuh-utils/fixtures/fixture_image_small.png'} | ${'png'}
+		${'../../server/routes/wazuh-utils/fixtures/fixture_image_big.png'}   | ${'png'}
+		${'../../server/routes/wazuh-utils/fixtures/fixture_image_small.svg'} | ${'svg'}
+		${'../../server/routes/wazuh-utils/fixtures/fixture_file.txt'}        | ${'unknown'}
+		`(`filepath: $filepath expects to get extension: $extension`, ({ extension, filepath }) => {
+			const bufferFile = fs.readFileSync(path.join(__dirname, filepath));
+			expect(getFileExtensionFromBuffer(bufferFile)).toBe(extension);
+    });
+});

common/services/file-extension.ts

@@ -0,0 +1,23 @@
+/**
+ * Get the file extension from a file buffer. Calculates the image format by reading the first 4 bytes of the image (header)
+ * Supported types: jpeg, jpg, png, svg
+ * Additionally, this function allows checking gif images.
+ * @param buffer file buffer
+ * @returns the file extension. Example: jpg, png, svg. it Returns unknown if it can not find the extension.
+*/
+export function getFileExtensionFromBuffer(buffer: Buffer): string {
+	const imageFormat = buffer.toString('hex').substring(0, 4);
+	switch (imageFormat) {
+		case '4749':
+			return 'gif';
+		case 'ffd8':
+			return 'jpg'; // Also jpeg
+		case '8950':
+			return 'png';
+    case '3c73':
+    case '3c3f':
+			return 'svg';
+		default:
+			return 'unknown';
+	}
+};

common/services/file-size.test.ts

@@ -0,0 +1,20 @@
+import {formatBytes } from "./file-size";
+
+describe('formatBytes', () => {
+	it.each`
+		bytes | decimals | expected
+		${1024} | ${2} | ${'1 KB'}
+		${1023} | ${2} | ${'1023 Bytes'}
+        ${1500} | ${2} | ${'1.46 KB'}
+        ${1500} | ${1} | ${'1.5 KB'}
+        ${1500} | ${3} | ${'1.465 KB'}
+        ${1048576} | ${2} | ${'1 MB'}
+        ${1048577} | ${2} | ${'1 MB'}
+        ${1475487} | ${2} | ${'1.41 MB'}
+        ${1475487} | ${1} | ${'1.4 MB'}
+        ${1475487} | ${3} | ${'1.407 MB'}
+        ${1073741824} | ${2} | ${'1 GB'}
+		`(`bytes: $bytes | decimals: $decimals | expected: $expected`, ({ bytes, decimals, expected }) => {
+			expect(formatBytes(bytes, decimals)).toBe(expected);
+		});
+});

common/services/file-size.ts

@@ -0,0 +1,17 @@
+/**
+ * Format the number the bytes to the higher unit.
+ * @param bytes Bytes
+ * @param decimals Number of decimals
+ * @returns Formatted value with the unit
+ */
+export function formatBytes(bytes: number, decimals: number = 2): string {
+	if (!+bytes) return '0 Bytes';
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};