Upload file for `customization.logo.*` settings #4504

Desvelao · 2022-09-13T09:53:12Z

Description

This PR improves and facilitates how the user can customize the logos through the ability to upload and remove files from Settings/Configuration. Moreover, it extends the setting description with properties related to files.

Changes

customization.logo.* settings definition

Key	Description	Values	Extensions	File size (maximum)
`customization.logo.app`	Set the custom logo for the menu and other sections	String	`jpeg`, `jpg`, `png`, `svg`	1 MB
`customization.logo.healthcheck`	Set the custom logo for the app's health check	String	`jpeg`, `jpg`, `png`, `svg`	1 MB
`customization.logo.reports`	Set the custom logo for the PDF reports	String	`jpeg`, `jpg`, `png`	1 MB
`customization.logo.sidebar`	Set the custom logo for the category in the navigation drawer	String.	`jpeg`, `jpg`, `png`, `svg`	1 MB

Add endpoints to manage the file upload/deletion
- Upload: PUT /utils/configuration/files/{key}
  - Maximum request body is 1MB
  - File extensions and request body size restrictions
  - File extension is detected through the file buffer. The .jpeg files will be saved as .jpg.
  - Store the file in the file system and save the setting with a relative URL to the exposed asset.
  - The customization.logo.* files are stored in:
    - file system: <WAZUH_PLUGIN>/public/assets/custom/images/<key><extension>
    - exposed URL: <PLUGIN_PLATFORM_ADDRESS>/plugins/wazuh/assets/custom/images/<key><extension>
- Deletion: DELETE /utils/configuration/files/{key}
  - Remove the file from the file system
  - Set the setting to a empty string ""
Add plugin setting type: filepicker
Add file picker form input component
If some customization.logo.* is set, then:
- Display the customized image in Settings/Configuration
- Add a button to remove the customized image
Create a function to convert bytes to a meaningful unit.
Extend the setting description with:
- Supported file extensions
- Recommended image dimensions
- File size restrictions
Tests
- Add test for the InputForm component of type filepicker
- Add test for the new endpoints:
  - PUT /utils/configuration/files/{key
    - Validate the received file: max size
  - DELETE /utils/configuration/files/{key}
    - Validate the setting: known and unknown

Closes #4434

Screenshots

Setting configuration using a file picker
When there is a custom image set
Hovering the remove icon
Confirmation to remove the custom image

Tests

Manual tests

Scenario: Select a file with the suggested extension for each customization.logo.* setting in Settings/Configuration
When the user drag-and-drops or selects a file in the file picker of Settings/Configuration
Then the file picker should suggest files with the supported extensions

This scenario should be done with all the customization.logo.* settings.

Scenario: Upload the configuration for a customization.logo.* setting in Settings/Configuration
When the user navigates to Settings/Configuration, selects a valid file and clicks on the Save button
Then the file should be saved in the expected path of the file system: WAZUH_PLUGIN_PATH/public/assets/custom/images whose filename is the setting key and the extension is the same as the uploaded file. (jpeg files will be saved as jpg)
And the image should be displayed on the UI depending on the setting customized. Keep in mind that currently, the customization.logo.sidebar requires reloading the browser tab.
And the configuration file should be modified to include the setting and its value is a relative URL that should be exposed.

This scenario should be done with all the customization.logo.* settings.

Scenario: Select a file that exceeds the size limit displays a validation error in Settings/Configuration
When the user navigates to Settings/Configuration and selects a file that exceeds the size limit. Above 1 MB.
Then a validation error should be displayed

This scenario should be done with all the customization.logo.* settings.

Scenario: Delete the customization of each customization.logo.* setting in Settings/Configuration
Given the setting is customized
When the user navigates to Settings/Configuration and clicks on the button to remove the file
Then the file should be removed from the file system: WAZUH_PLUGIN_PATH/public/assets/custom/images
And the UI should display the default image. Keep in mind that currently the customization.logo.sidebar setting requires reloading the browser tab
And the configuration file for the setting should be cleaned. This means that its value is an empty string ""

This scenario should be done with all the customization.logo.* settings.

Scenario: Update the plugin configuration from Settings/Configuration by modifying multiple settings at the same time
Given the user navigates to Settings/Configuration and modifies some setting that is not a customization.logo.* and one of customization.logo.* setting
When the user clicks on the button to save
Then the file should be saved in the expected path of the file system: WAZUH_PLUGIN_PATH/public/assets/custom/images whose filename is the setting key and the extension is the same as the uploaded file. (jpeg files will be saved as jpg)
And the image should be displayed depending on the setting customized. Currently, the customization.logo.sidebar requires reloading the browser tab
And the configuration file should be modified to include the setting and its value is a relative URL that should be exposed
And all the modified settings should be saved in the configuration file

Scenario: Update the plugin configuration from Settings/Configuration modifying multiple settings at the same time with 2 or more customization.logo.* settings
Given the user navigates to Settings/Configuration and modifies some setting that is not a customization.logo.* and 2 or more of customization.logo.* settings
When the user clicks on the button to save
Then the files should be saved in the expected path of the file system: WAZUH_PLUGIN_PATH/public/assets/custom/images whose filename is the setting key and the extension is the same as the uploaded file. (jpeg files will be saved as jpg)
And the images should be displayed depending on the setting customized. Keep in mind that currently, the customization.logo.sidebar requires reloading the browser tab.
And the configuration should be modified to include the settings and its value is a relative URL that should be exposed.
And all the modified settings should be saved in the configuration file

Scenario: Select a valid file for each customization.logo.* setting in Settings/Configuration with different aspect ratio
When the user navigates to Settings/Configuration and drag-and-drops or selects a file
Then the file picker should suggest the supported file extensions
And renders properly the uploaded custom logo, without visual glitches or styling issues

This scenario should be done with all the customization.logo.* settings.

Automatic tests

common/services/file-size.test.ts
public/components/common/form/index.test.tsx
server/routes/wazuh-utils/wazuh-utils.test.ts
common/plugin-settings.test.ts
common/services/file-extension.test.ts

Run all PR tests

yarn test:jest common/services/file-size.test.ts public/components/common/form/index.test.tsx server/routes/wazuh-utils/wazuh-utils.test.ts common/plugin-settings.test.ts common/services/file-extension.test.ts

Create the plugin setting schema Define the current plugin settings Remove refactored code

…onstants

Use dynamically the definition of the plugin settings

Add new hooks to manage when a input value or form has changed Add new inputs components

Refactor Header, BottomBar, Configuration components Remove deprecated files

Changed the endpoint that updating the plugin setting to support multiple settings at the same time Refactor the getConfiguration service. Split the logic to: - Read the file and transform to JSON - Obfuscate the password key of the host configuration

Create services to validate Add the validation to the plugin settings

endpoint

`Settings/Configuration`

…wazuh/wazuh-kibana-app into feat/settings-validation

Add endpoints - `PUT /utils/configuration/files/{key}` - `DELETE /utils/configuration/files/{key}` Add plugin setting type: filepicker Add filepicker input form Display the customized image in `Settings/Configuration` Add button to remove the customized image

…tion.logo.*` settings

…wazuh/wazuh-kibana-app into feat/settings-validation

…azuh-kibana-app into feat/settings-upload-file

Add logic to do request to the expected endpoint Add function to transform the filepicker input form

Mayons95

TR: ✔️
LGTM

…hen these do not have `width` and `height`

Desvelao · 2022-10-28T08:59:07Z

Some problems found by @AlexRuiz7

Environment: Kibana 7.10.2 development mode.

The endpoint to remove the configuration for the `customization.logo.*` setting doesn't work.

Endpoint: DELETE /utils/configuration/files/{key}

We were researching and saw that could be caused by the development proxy (not using the --no-base-path when starting the server) and accessing using the 5601 port instead of the mentioned port 5603 in the logs of the platform. We do not know the reason for the problem.

Others requests with the same HTTP verb (DELETE) fail too.

Some custom logos are not visible when using SVG images.

This problem happens in:

custom image preview in Settings/Configuration
plugin menu

This is caused because the SVG image has not defined the height and width properties.
Read more here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

If these properties are added, the problem disappears.

@AlexRuiz7 reported that by using the same SVG for other settings as customization.logo.healthcheck and customization.logo.sidebar, the images are displayed correctly. This means that some styles could be affecting how the browser should render the image.

Research - Custom image preview in `Settings/Configuration`

I found that if the width: auto CSS property is removed from the element style, the image is displayed correctly. This property is set by the EuiImage component when the size property is defined as a number https://github.com/elastic/eui/blob/v29.3.2/src/components/image/image.tsx#L140.

EDIT: I pushed a commit to solve this problem.

Research - Plugin menu

EDIT: I pushed a commit to solve this problem.

Desvelao · 2022-10-28T09:02:48Z

In a meeting with @asteriscos , we saw a problem related to the browser cache and the customization.logo.* settings used in the frontend UI.

How to replicate:

Upload an image with some extension (jpg, png, svg)
Upload another image with the same extension as step 1. The UI display doesn't change and displays the image of step one. Cleaning the browser cache solves the problem.

We want to research a solution that does not implicate cleaning the browser cache and minimizes the users.

Desvelao · 2022-10-28T09:23:11Z

In a meeting with @asteriscos , we saw a problem related to the browser cache and the customization.logo.* settings used in the frontend UI.

How to replicate:

Upload an image with some extension (jpg, png, svg)

Upload another image with the same extension as step 1. The UI display doesn't change and displays the image of step one. Cleaning the browser cache solves the problem.

We want to research a solution that does not implicate cleaning the browser cache and minimizes the users.

Solved in ccd57ca.

asteriscos · 2022-10-28T09:35:16Z

In a meeting with @asteriscos , we saw a problem related to the browser cache and the customization.logo.* settings used in the frontend UI.
How to replicate:

Upload an image with some extension (jpg, png, svg)

Upload another image with the same extension as step 1. The UI display doesn't change and displays the image of step one. Cleaning the browser cache solves the problem.

We want to research a solution that does not implicate cleaning the browser cache and minimizes the users.

Solved in ccd57ca.

Now when an image is uploaded, the path saved in the configuration includes a version number to handle browser cache issues.
Eg.
customization.logo.app: "custom/images/customization.logo.app.png?v=1666948554416"

github-actions · 2022-10-28T09:39:33Z

Code coverage (Jest)	%	values
Statements	8.1%	( 2966 / 36623 )
Branches	3.71%	( 1045 / 28192 )
Functions	7.01%	( 636 / 9073 )
Lines	8.15%	( 2858 / 35054 )

AlexRuiz7

Code review: ✔️
Test: ✔️

Mayons95

LGTM
TR: ✔️
Test with the last implemented changes

github-actions · 2022-10-28T10:00:35Z

The backport to 4.4-7.16 failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-4.4-7.16 4.4-7.16
# Navigate to the new working tree
cd .worktrees/backport-4.4-7.16
# Create a new branch
git switch --create backport-4504-to-4.4-7.16
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 bc51482632ace29a9c174a31cd34ec0c12a88d47
# Push it to GitHub
git push --set-upstream origin backport-4504-to-4.4-7.16
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-4.4-7.16

Then, create a pull request where the base branch is 4.4-7.16 and the compare/head branch is backport-4504-to-4.4-7.16.

github-actions · 2022-10-28T10:00:36Z

The backport to 4.4-2.3-wzd failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-4.4-2.3-wzd 4.4-2.3-wzd
# Navigate to the new working tree
cd .worktrees/backport-4.4-2.3-wzd
# Create a new branch
git switch --create backport-4504-to-4.4-2.3-wzd
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 bc51482632ace29a9c174a31cd34ec0c12a88d47
# Push it to GitHub
git push --set-upstream origin backport-4504-to-4.4-2.3-wzd
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-4.4-2.3-wzd

Then, create a pull request where the base branch is 4.4-2.3-wzd and the compare/head branch is backport-4504-to-4.4-2.3-wzd.

* feat(settings): centralize the plugin settings Create the plugin setting schema Define the current plugin settings Remove refactored code * feat(settings): add setting services and replaced the references to constants * feat(settings): refactor the content of the default configuration file Use dynamically the definition of the plugin settings * feat(inputs): create new inputs components Add new hooks to manage when a input value or form has changed Add new inputs components * feat(configuration): refactor the form of Settings/Configuration Refactor Header, BottomBar, Configuration components Remove deprecated files * feat(settings): support updating multiple setting at the same time Changed the endpoint that updating the plugin setting to support multiple settings at the same time Refactor the getConfiguration service. Split the logic to: - Read the file and transform to JSON - Obfuscate the password key of the host configuration * feat: add validation to the plugin settings Create services to validate Add the validation to the plugin settings * feat(validation): add validation to the `PUT /utils/configuration` endpoint * feat(validation): add validation to the configuration form in `Settings/Configuration` * feat(validatio): remove no used import * clean: remove not used code * feat(settings): upload file for `customization.logo` settigs Add endpoints - `PUT /utils/configuration/files/{key}` - `DELETE /utils/configuration/files/{key}` Add plugin setting type: filepicker Add filepicker input form Display the customized image in `Settings/Configuration` Add button to remove the customized image * feat(settings): Add validation for extensions of files for `customization.logo.*` settings * fix: fixed category name in `Settings/Configuration` * fix(settings): Fix accessing to `validate` of undefined error * fix(settings): fixed error due to missing service * fix(settings): fixed problems setting a custom logo. Add logic to do request to the expected endpoint Add function to transform the filepicker input form * Made upload file mkdir recursive * Fixed configuration image preview ratios * Fixed logo aspect ratio in wz-menu * Fix file input Remove button error * fix(settings): refactor the form and inputs of `Settings/Configuration` to control the global state of the form * fix: add value transformation for the form inputs and output of fields changed * fix: Fixed some settings validation * fix(settings): fixed validation of literals * fix(settings): removed unused import * feat(settings): clean file picker inputs when there is a selected file and saving the configuration * fix(settings): get plugin setting description to display in Settings/Configuration * fix(settings): renamed properties related to transform the value of the input * feat(settings): add description to the plugin setting definition properties * fix(settings): fix getConfiguration service when the configuration file has no `hosts` entry * fix(settings): Fixed error when do changes of the `useForm` hook an rename methods of this * tests(settings): add test related to the plugin settings and its configuration from the UI * feat(settings): rename plugin setting options of type select to match its type * feat(settings): add plugin settings services and enhance the description of the plugin settings in default configuration file and UI * tests(input-form): update tests of InputForm component * test(configuration-file): add tests of the default configuration file * feat(settings): remove `extensions.mitre` plugin setting * test(settings): add test to validate the plugin setting when updating it through PUT /utils/configuration fix some plugin settings validation * feat(settings): add documentation to some setting services and test some of them * fix: fixed documentation of setting service * doc(settings): move the documentation of the plugin setting properties * fix(settings): rename some plugin setting properties because of request changes - Rename plugin setting properties: - `default` to `defaultValue` - `defaultHidden` to `defaultValueIfNotSet` - `configurableFile` to `isConfigurableFromFile` - configurableUI` to `isConfigurableFromUI` - `requireHealthCheck` to `requiresRunningHealthCheck` - `requireReload` to `requiresReloadingBrowserTab` - `requireRestart` to `requiresRestartingPluginPlatform` - Fix tests * tests: fix tests of InputForm component * fix: response properties when saving the configuration * fix(settings): fix validation plugin settings value in the UI * feat(settings): add validation of selected file size Frontend: - Validate the selected file size in the file picker Backend: - Validate the body payload. This is not the same than the file. So the file size should be lower than the total allowed * fix(settings): fix validation of numbers * fix(settings): fix validation of numbers * fix(settings): fix an issue when removing a file from a file picker that the form displayed there was some change. * fix(settings): fix error when deleting a custom image * feat(settings): format bytes to meaningful unit. Create service to format the bytes to meaningful unit. Add test to the service Replace similar method used in the frontend Add the validation to the settings related to files * test(settings): Add tests related to validation for the `useForm` hook and the `InputForm` component * test(settings): add test to upload and delete customization files Display configuration toast when removing a customization file if it is required * fix(settings): fix displaying toast to run the healthcheck when saving the configuration * feat(settings): add file size to the settings description * fix(settings): remove the selected files in the file pickers when clicks on the `Cancel changes` button * Added category sorting + description + docs link * Added settings sorting within their category * Fixed constant types definition * Checks if localCompare exists validation * fix(settings): fixed plugin setting description doesn't display the minimum number value when it is falsy (0) * fix(settings): fix setting type of `wazuh.monitoring.replicas` and limit the valid number for the number input * feat(settins): add plugin settings category description * fix(settings): fix a problem comparing the initial and current value for the plugin settings of the `number` type * fix(settings): fix wrong conflict resolution * fix(settings): fix typo in setting description * feat(settings): enhance the validation of plugin settings related to indices or index patterns taking in account the supported characters * feat(settings): add validation of setting values in the inputs * fix(tests): format tables of the tests * test(settings): add tests related to the `customization.logo.*` in the form inputs * Fix small typo * fix(settings): fix response when uploading custom files for `customization.logo.*` setting and fix URL in test * feat(upload-file): get the file extension from file buffer. - Add service to get the file extesion from file buffer - Add tests - Removed unnecessary `extension` field when uploading a file using `PUT /utils/configuration/files/{key}` * fix(settings): fix a typo in a toast related to modify the plugin settings from UI * Changed Custom Branding documentation link * Merge centralize plugin settings PR * Fix white-labeling documentation url * Code format * Delete unused imports * fix(settings): fix a problem with the useForm hook * fix(settings): refactor the settings validation function to a class and rename the file * feat(settings): add check for integer numbers and adapt the affected settings * Fix semi-colon error * changelog: add entries to changelog * fix(settings): fix some request changes - unused imports - change some toast texts * fix(settings): fix an unsupported attribute for the number inputs * fix(settings): fix a problem when removing the `customization.logo.reports` from Settings/Configuration * fix(settings): remove unused import * Change validation error for inputs that don't allow whitespaces Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> * Update file-extension.ts Add `3c73` SVG file signature * feat(settings): change the layout of the filepicker input plus logo and button to remove the configuration * test: update snapshots * test: fix tests and update snapshots * changelog: add PR entry * changelog:fix PR entries * fix(settings): fix a problem with SVG images that are not displayed when these do not have `width` and `height` * fix: remove comment * Fix logo image cache on upload * Added a comment describing image versioning Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com> Co-authored-by: Álex <alejandro.ruiz.becerra@wazuh.com> (cherry picked from commit bc51482)

…4773) * Upload file for `customization.logo.*` settings (#4504) * feat(settings): centralize the plugin settings Create the plugin setting schema Define the current plugin settings Remove refactored code * feat(settings): add setting services and replaced the references to constants * feat(settings): refactor the content of the default configuration file Use dynamically the definition of the plugin settings * feat(inputs): create new inputs components Add new hooks to manage when a input value or form has changed Add new inputs components * feat(configuration): refactor the form of Settings/Configuration Refactor Header, BottomBar, Configuration components Remove deprecated files * feat(settings): support updating multiple setting at the same time Changed the endpoint that updating the plugin setting to support multiple settings at the same time Refactor the getConfiguration service. Split the logic to: - Read the file and transform to JSON - Obfuscate the password key of the host configuration * feat: add validation to the plugin settings Create services to validate Add the validation to the plugin settings * feat(validation): add validation to the `PUT /utils/configuration` endpoint * feat(validation): add validation to the configuration form in `Settings/Configuration` * feat(validatio): remove no used import * clean: remove not used code * feat(settings): upload file for `customization.logo` settigs Add endpoints - `PUT /utils/configuration/files/{key}` - `DELETE /utils/configuration/files/{key}` Add plugin setting type: filepicker Add filepicker input form Display the customized image in `Settings/Configuration` Add button to remove the customized image * feat(settings): Add validation for extensions of files for `customization.logo.*` settings * fix: fixed category name in `Settings/Configuration` * fix(settings): Fix accessing to `validate` of undefined error * fix(settings): fixed error due to missing service * fix(settings): fixed problems setting a custom logo. Add logic to do request to the expected endpoint Add function to transform the filepicker input form * Made upload file mkdir recursive * Fixed configuration image preview ratios * Fixed logo aspect ratio in wz-menu * Fix file input Remove button error * fix(settings): refactor the form and inputs of `Settings/Configuration` to control the global state of the form * fix: add value transformation for the form inputs and output of fields changed * fix: Fixed some settings validation * fix(settings): fixed validation of literals * fix(settings): removed unused import * feat(settings): clean file picker inputs when there is a selected file and saving the configuration * fix(settings): get plugin setting description to display in Settings/Configuration * fix(settings): renamed properties related to transform the value of the input * feat(settings): add description to the plugin setting definition properties * fix(settings): fix getConfiguration service when the configuration file has no `hosts` entry * fix(settings): Fixed error when do changes of the `useForm` hook an rename methods of this * tests(settings): add test related to the plugin settings and its configuration from the UI * feat(settings): rename plugin setting options of type select to match its type * feat(settings): add plugin settings services and enhance the description of the plugin settings in default configuration file and UI * tests(input-form): update tests of InputForm component * test(configuration-file): add tests of the default configuration file * feat(settings): remove `extensions.mitre` plugin setting * test(settings): add test to validate the plugin setting when updating it through PUT /utils/configuration fix some plugin settings validation * feat(settings): add documentation to some setting services and test some of them * fix: fixed documentation of setting service * doc(settings): move the documentation of the plugin setting properties * fix(settings): rename some plugin setting properties because of request changes - Rename plugin setting properties: - `default` to `defaultValue` - `defaultHidden` to `defaultValueIfNotSet` - `configurableFile` to `isConfigurableFromFile` - configurableUI` to `isConfigurableFromUI` - `requireHealthCheck` to `requiresRunningHealthCheck` - `requireReload` to `requiresReloadingBrowserTab` - `requireRestart` to `requiresRestartingPluginPlatform` - Fix tests * tests: fix tests of InputForm component * fix: response properties when saving the configuration * fix(settings): fix validation plugin settings value in the UI * feat(settings): add validation of selected file size Frontend: - Validate the selected file size in the file picker Backend: - Validate the body payload. This is not the same than the file. So the file size should be lower than the total allowed * fix(settings): fix validation of numbers * fix(settings): fix validation of numbers * fix(settings): fix an issue when removing a file from a file picker that the form displayed there was some change. * fix(settings): fix error when deleting a custom image * feat(settings): format bytes to meaningful unit. Create service to format the bytes to meaningful unit. Add test to the service Replace similar method used in the frontend Add the validation to the settings related to files * test(settings): Add tests related to validation for the `useForm` hook and the `InputForm` component * test(settings): add test to upload and delete customization files Display configuration toast when removing a customization file if it is required * fix(settings): fix displaying toast to run the healthcheck when saving the configuration * feat(settings): add file size to the settings description * fix(settings): remove the selected files in the file pickers when clicks on the `Cancel changes` button * Added category sorting + description + docs link * Added settings sorting within their category * Fixed constant types definition * Checks if localCompare exists validation * fix(settings): fixed plugin setting description doesn't display the minimum number value when it is falsy (0) * fix(settings): fix setting type of `wazuh.monitoring.replicas` and limit the valid number for the number input * feat(settins): add plugin settings category description * fix(settings): fix a problem comparing the initial and current value for the plugin settings of the `number` type * fix(settings): fix wrong conflict resolution * fix(settings): fix typo in setting description * feat(settings): enhance the validation of plugin settings related to indices or index patterns taking in account the supported characters * feat(settings): add validation of setting values in the inputs * fix(tests): format tables of the tests * test(settings): add tests related to the `customization.logo.*` in the form inputs * Fix small typo * fix(settings): fix response when uploading custom files for `customization.logo.*` setting and fix URL in test * feat(upload-file): get the file extension from file buffer. - Add service to get the file extesion from file buffer - Add tests - Removed unnecessary `extension` field when uploading a file using `PUT /utils/configuration/files/{key}` * fix(settings): fix a typo in a toast related to modify the plugin settings from UI * Changed Custom Branding documentation link * Merge centralize plugin settings PR * Fix white-labeling documentation url * Code format * Delete unused imports * fix(settings): fix a problem with the useForm hook * fix(settings): refactor the settings validation function to a class and rename the file * feat(settings): add check for integer numbers and adapt the affected settings * Fix semi-colon error * changelog: add entries to changelog * fix(settings): fix some request changes - unused imports - change some toast texts * fix(settings): fix an unsupported attribute for the number inputs * fix(settings): fix a problem when removing the `customization.logo.reports` from Settings/Configuration * fix(settings): remove unused import * Change validation error for inputs that don't allow whitespaces Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> * Update file-extension.ts Add `3c73` SVG file signature * feat(settings): change the layout of the filepicker input plus logo and button to remove the configuration * test: update snapshots * test: fix tests and update snapshots * changelog: add PR entry * changelog:fix PR entries * fix(settings): fix a problem with SVG images that are not displayed when these do not have `width` and `height` * fix: remove comment * Fix logo image cache on upload * Added a comment describing image versioning Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com> Co-authored-by: Álex <alejandro.ruiz.becerra@wazuh.com> (cherry picked from commit bc51482) * Update snapshots Co-authored-by: Antonio <34042064+Desvelao@users.noreply.github.com>

#4774) * Upload file for `customization.logo.*` settings (#4504) * feat(settings): centralize the plugin settings Create the plugin setting schema Define the current plugin settings Remove refactored code * feat(settings): add setting services and replaced the references to constants * feat(settings): refactor the content of the default configuration file Use dynamically the definition of the plugin settings * feat(inputs): create new inputs components Add new hooks to manage when a input value or form has changed Add new inputs components * feat(configuration): refactor the form of Settings/Configuration Refactor Header, BottomBar, Configuration components Remove deprecated files * feat(settings): support updating multiple setting at the same time Changed the endpoint that updating the plugin setting to support multiple settings at the same time Refactor the getConfiguration service. Split the logic to: - Read the file and transform to JSON - Obfuscate the password key of the host configuration * feat: add validation to the plugin settings Create services to validate Add the validation to the plugin settings * feat(validation): add validation to the `PUT /utils/configuration` endpoint * feat(validation): add validation to the configuration form in `Settings/Configuration` * feat(validatio): remove no used import * clean: remove not used code * feat(settings): upload file for `customization.logo` settigs Add endpoints - `PUT /utils/configuration/files/{key}` - `DELETE /utils/configuration/files/{key}` Add plugin setting type: filepicker Add filepicker input form Display the customized image in `Settings/Configuration` Add button to remove the customized image * feat(settings): Add validation for extensions of files for `customization.logo.*` settings * fix: fixed category name in `Settings/Configuration` * fix(settings): Fix accessing to `validate` of undefined error * fix(settings): fixed error due to missing service * fix(settings): fixed problems setting a custom logo. Add logic to do request to the expected endpoint Add function to transform the filepicker input form * Made upload file mkdir recursive * Fixed configuration image preview ratios * Fixed logo aspect ratio in wz-menu * Fix file input Remove button error * fix(settings): refactor the form and inputs of `Settings/Configuration` to control the global state of the form * fix: add value transformation for the form inputs and output of fields changed * fix: Fixed some settings validation * fix(settings): fixed validation of literals * fix(settings): removed unused import * feat(settings): clean file picker inputs when there is a selected file and saving the configuration * fix(settings): get plugin setting description to display in Settings/Configuration * fix(settings): renamed properties related to transform the value of the input * feat(settings): add description to the plugin setting definition properties * fix(settings): fix getConfiguration service when the configuration file has no `hosts` entry * fix(settings): Fixed error when do changes of the `useForm` hook an rename methods of this * tests(settings): add test related to the plugin settings and its configuration from the UI * feat(settings): rename plugin setting options of type select to match its type * feat(settings): add plugin settings services and enhance the description of the plugin settings in default configuration file and UI * tests(input-form): update tests of InputForm component * test(configuration-file): add tests of the default configuration file * feat(settings): remove `extensions.mitre` plugin setting * test(settings): add test to validate the plugin setting when updating it through PUT /utils/configuration fix some plugin settings validation * feat(settings): add documentation to some setting services and test some of them * fix: fixed documentation of setting service * doc(settings): move the documentation of the plugin setting properties * fix(settings): rename some plugin setting properties because of request changes - Rename plugin setting properties: - `default` to `defaultValue` - `defaultHidden` to `defaultValueIfNotSet` - `configurableFile` to `isConfigurableFromFile` - configurableUI` to `isConfigurableFromUI` - `requireHealthCheck` to `requiresRunningHealthCheck` - `requireReload` to `requiresReloadingBrowserTab` - `requireRestart` to `requiresRestartingPluginPlatform` - Fix tests * tests: fix tests of InputForm component * fix: response properties when saving the configuration * fix(settings): fix validation plugin settings value in the UI * feat(settings): add validation of selected file size Frontend: - Validate the selected file size in the file picker Backend: - Validate the body payload. This is not the same than the file. So the file size should be lower than the total allowed * fix(settings): fix validation of numbers * fix(settings): fix validation of numbers * fix(settings): fix an issue when removing a file from a file picker that the form displayed there was some change. * fix(settings): fix error when deleting a custom image * feat(settings): format bytes to meaningful unit. Create service to format the bytes to meaningful unit. Add test to the service Replace similar method used in the frontend Add the validation to the settings related to files * test(settings): Add tests related to validation for the `useForm` hook and the `InputForm` component * test(settings): add test to upload and delete customization files Display configuration toast when removing a customization file if it is required * fix(settings): fix displaying toast to run the healthcheck when saving the configuration * feat(settings): add file size to the settings description * fix(settings): remove the selected files in the file pickers when clicks on the `Cancel changes` button * Added category sorting + description + docs link * Added settings sorting within their category * Fixed constant types definition * Checks if localCompare exists validation * fix(settings): fixed plugin setting description doesn't display the minimum number value when it is falsy (0) * fix(settings): fix setting type of `wazuh.monitoring.replicas` and limit the valid number for the number input * feat(settins): add plugin settings category description * fix(settings): fix a problem comparing the initial and current value for the plugin settings of the `number` type * fix(settings): fix wrong conflict resolution * fix(settings): fix typo in setting description * feat(settings): enhance the validation of plugin settings related to indices or index patterns taking in account the supported characters * feat(settings): add validation of setting values in the inputs * fix(tests): format tables of the tests * test(settings): add tests related to the `customization.logo.*` in the form inputs * Fix small typo * fix(settings): fix response when uploading custom files for `customization.logo.*` setting and fix URL in test * feat(upload-file): get the file extension from file buffer. - Add service to get the file extesion from file buffer - Add tests - Removed unnecessary `extension` field when uploading a file using `PUT /utils/configuration/files/{key}` * fix(settings): fix a typo in a toast related to modify the plugin settings from UI * Changed Custom Branding documentation link * Merge centralize plugin settings PR * Fix white-labeling documentation url * Code format * Delete unused imports * fix(settings): fix a problem with the useForm hook * fix(settings): refactor the settings validation function to a class and rename the file * feat(settings): add check for integer numbers and adapt the affected settings * Fix semi-colon error * changelog: add entries to changelog * fix(settings): fix some request changes - unused imports - change some toast texts * fix(settings): fix an unsupported attribute for the number inputs * fix(settings): fix a problem when removing the `customization.logo.reports` from Settings/Configuration * fix(settings): remove unused import * Change validation error for inputs that don't allow whitespaces Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> * Update file-extension.ts Add `3c73` SVG file signature * feat(settings): change the layout of the filepicker input plus logo and button to remove the configuration * test: update snapshots * test: fix tests and update snapshots * changelog: add PR entry * changelog:fix PR entries * fix(settings): fix a problem with SVG images that are not displayed when these do not have `width` and `height` * fix: remove comment * Fix logo image cache on upload * Added a comment describing image versioning Signed-off-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com> Co-authored-by: Álex <alejandro.ruiz.becerra@wazuh.com> (cherry picked from commit bc51482) * Update index.test.tsx.snap Co-authored-by: Antonio <34042064+Desvelao@users.noreply.github.com> Co-authored-by: Álex <alejandro.ruiz.becerra@wazuh.com>

Desvelao added 13 commits September 13, 2022 08:08

feat(settings): centralize the plugin settings

918418f

Create the plugin setting schema Define the current plugin settings Remove refactored code

feat(settings): add setting services and replaced the references to c…

de48a49

…onstants

feat(settings): refactor the content of the default configuration file

c25a1a0

Use dynamically the definition of the plugin settings

feat(inputs): create new inputs components

ffdb2d7

Add new hooks to manage when a input value or form has changed Add new inputs components

feat(configuration): refactor the form of Settings/Configuration

e7cd9b0

Refactor Header, BottomBar, Configuration components Remove deprecated files

feat: add validation to the plugin settings

9a2b9ba

Create services to validate Add the validation to the plugin settings

feat(validation): add validation to the PUT /utils/configuration

f530d7a

endpoint

feat(validation): add validation to the configuration form in

b6a7220

`Settings/Configuration`

feat(validatio): remove no used import

134ffd8

clean: remove not used code

9b977e6

Merge branch 'feat/centralize-plugin-settings' of https://github.com/…

a984a7c

…wazuh/wazuh-kibana-app into feat/settings-validation

Desvelao added the type/enhancement Enhancement issue label Sep 13, 2022

Desvelao linked an issue Sep 13, 2022 that may be closed by this pull request

Custom branding: PDF reports #4426

Closed

4 tasks

Desvelao self-assigned this Sep 13, 2022

Desvelao added 6 commits September 13, 2022 12:36

feat(settings): Add validation for extensions of files for `customiza…

f3a7b71

…tion.logo.*` settings

fix: fixed category name in Settings/Configuration

17ad2e8

fix(settings): Fix accessing to validate of undefined error

ce4652e

Merge branch 'feat/centralize-plugin-settings' of https://github.com/…

23b925d

…wazuh/wazuh-kibana-app into feat/settings-validation

fix(settings): fixed error due to missing service

a454dd8

Merge branch 'feat/centralize-plugin-settings' of https://github.com/…

a56e9d1

…wazuh/wazuh-kibana-app into feat/settings-validation

Desvelao marked this pull request as draft September 13, 2022 12:03

Desvelao mentioned this pull request Sep 13, 2022

Define the plugin settings schema, add customization of reports #4461

Closed

Desvelao added 2 commits September 13, 2022 14:14

Merge branch 'feat/settings-validation' of https://github.com/wazuh/w…

c39e70e

…azuh-kibana-app into feat/settings-upload-file

fix(settings): fixed problems setting a custom logo.

ea8ae9b

Add logic to do request to the expected endpoint Add function to transform the filepicker input form

Desvelao linked an issue Sep 13, 2022 that may be closed by this pull request

Custom branding: assets upload #4434

Closed

2 tasks

Desvelao removed a link to an issue Sep 13, 2022

Custom branding: PDF reports #4426

Closed

4 tasks

asteriscos added 2 commits September 14, 2022 16:51

Made upload file mkdir recursive

1c9aee0

Fixed configuration image preview ratios

20ac021

Mayons95 previously approved these changes Oct 27, 2022

View reviewed changes

Desvelao added 2 commits October 28, 2022 10:55

fix(settings): fix a problem with SVG images that are not displayed w…

9edc9da

…hen these do not have `width` and `height`

fix: remove comment

88822ca

Desvelao dismissed stale reviews from Mayons95 and yenienserrano via 88822ca October 28, 2022 08:55

Fix logo image cache on upload

ccd57ca

Added a comment describing image versioning

60f9d79

Mayons95 self-requested a review October 28, 2022 09:58

AlexRuiz7 approved these changes Oct 28, 2022

View reviewed changes

Mayons95 approved these changes Oct 28, 2022

View reviewed changes

Desvelao merged commit bc51482 into 4.4-7.10 Oct 28, 2022

Desvelao deleted the feat/settings-upload-file branch October 28, 2022 10:00

This was referenced Oct 28, 2022

[Backport 4.4-7.16] Upload file for customization.logo.* settings #4773

Merged

[Backport 4.4-2.3-wzd] Upload file for customization.logo.* settings #4774

Merged

This was referenced Nov 3, 2022

Custom branding: 7.17 - QA test #4801

Closed

Custom branding: WzD - QA test #4802

Closed

Mayons95 mentioned this pull request Nov 21, 2022

Release 4.4.0 - Alpha 1 - Kibana UI regression testing #4895

Closed

7 tasks

Mayons95 mentioned this pull request Dec 7, 2022

Test the plugin in Wazuh Dashboard #4740

Closed

1 task

Desvelao mentioned this pull request Dec 20, 2022

Fix vulnerabilities in dependencies #5014

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upload file for `customization.logo.*` settings #4504

Upload file for `customization.logo.*` settings #4504

Desvelao commented Sep 13, 2022 •

edited

Loading

Mayons95 left a comment

Desvelao commented Oct 28, 2022 •

edited by AlexRuiz7

Loading

Desvelao commented Oct 28, 2022

Desvelao commented Oct 28, 2022

asteriscos commented Oct 28, 2022 •

edited

Loading

github-actions bot commented Oct 28, 2022

AlexRuiz7 left a comment

Mayons95 left a comment

github-actions bot commented Oct 28, 2022

github-actions bot commented Oct 28, 2022

Upload file for customization.logo.* settings #4504

Upload file for customization.logo.* settings #4504

Conversation

Desvelao commented Sep 13, 2022 • edited Loading

Description

Changes

Tests

Manual tests

Automatic tests

Mayons95 left a comment

Choose a reason for hiding this comment

Desvelao commented Oct 28, 2022 • edited by AlexRuiz7 Loading

The endpoint to remove the configuration for the customization.logo.* setting doesn't work.

Some custom logos are not visible when using SVG images.

Research - Custom image preview in Settings/Configuration

Research - Plugin menu

Desvelao commented Oct 28, 2022

Desvelao commented Oct 28, 2022

asteriscos commented Oct 28, 2022 • edited Loading

github-actions bot commented Oct 28, 2022

AlexRuiz7 left a comment

Choose a reason for hiding this comment

Mayons95 left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 28, 2022

github-actions bot commented Oct 28, 2022

Upload file for `customization.logo.*` settings #4504

Upload file for `customization.logo.*` settings #4504

Desvelao commented Sep 13, 2022 •

edited

Loading

Desvelao commented Oct 28, 2022 •

edited by AlexRuiz7

Loading

The endpoint to remove the configuration for the `customization.logo.*` setting doesn't work.

Research - Custom image preview in `Settings/Configuration`

asteriscos commented Oct 28, 2022 •

edited

Loading