Add switch to toggle the use of custom branding

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - 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 [#4503](https://github.com/wazuh/wazuh-kibana-app/pull/4503)
 - Added new plugin settings to customize the header and footer on the PDF reports [#4505](https://github.com/wazuh/wazuh-kibana-app/pull/4505)
+- Add a new plugin setting to enable or disable the customization [#4507](https://github.com/wazuh/wazuh-kibana-app/pull/4507)
 
 ### Changed
 

common/constants.ts

@@ -933,6 +933,31 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
 			return schema.boolean();
 		},
   },
+  "customization.enabled": {
+		title: "Status",
+		description: "Enable or disable the customization.",
+		category: SettingCategory.CUSTOMIZATION,
+		type: EpluginSettingType.switch,
+		defaultValue: true,
+		isConfigurableFromFile: true,
+		isConfigurableFromUI: true,
+    requiresReloadingBrowserTab: true,
+		options: {
+			switch: {
+				values: {
+					disabled: {label: 'false', value: false},
+					enabled: {label: 'true', value: true},
+				}
+			}
+		},
+		uiFormTransformChangedInputValue: function(value: boolean | string): boolean{
+			return Boolean(value);
+		},
+		validate: SettingsValidator.isBoolean,
+		validateBackend: function(schema){
+			return schema.boolean();
+		},
+	},
   "customization.logo.app": {
     title: "App main logo",
     description: `This logo is used in the app main menu, at the top left corner.`,
@@ -1088,7 +1113,7 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
 		category: SettingCategory.CUSTOMIZATION,
 		type: EpluginSettingType.textarea,
 		defaultValue: "",
-    	defaultValueIfNotSet: REPORTS_PAGE_FOOTER_TEXT,
+    defaultValueIfNotSet: REPORTS_PAGE_FOOTER_TEXT,
 		isConfigurableFromFile: true,
 		isConfigurableFromUI: true,
     options: { rowsSize: 2, maxLength: 30 },
@@ -1119,7 +1144,7 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
       })(value)
     },
 		validateBackend: function(schema){
-			return schema.string({validate: this.validate?.bind(this)});
+			return schema.string({validate: this.validate.bind(this)});
 		},
 	},
   "disabled_roles": {

common/plugin-settings.test.ts

@@ -93,6 +93,7 @@ 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.enabled'}          | ${true}                                    | ${undefined}
     ${'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}

common/services/settings.test.ts

@@ -1,6 +1,7 @@
 import {
 	formatLabelValuePair,
-	formatSettingValueToFile
+	formatSettingValueToFile,
+	getCustomizationSetting
 } from "./settings";
 
 describe('[settings] Methods', () => {
@@ -31,4 +32,29 @@ describe('[settings] Methods', () => {
 			expect(formatSettingValueToFile(input)).toBe(expected);
 		});
 	});
+
+	describe('getCustomizationSetting: Get the value for the "customization." settings depending on the "customization.enabled" setting', () => {
+		it.only.each`
+		customizationEnabled | settingKey | configValue | expected
+		${true} | ${'customization.logo.app'} | ${'custom-image-app.png'} | ${'custom-image-app.png'} 
+		${true} | ${'customization.logo.app'} | ${''} | ${''}
+		${false} | ${'customization.logo.app'} | ${'custom-image-app.png'} | ${''} 
+		${false} | ${'customization.logo.app'} | ${''} | ${''}
+		${true} | ${'customization.reports.footer'} | ${'Custom footer'} | ${'Custom footer'}
+		${true} | ${'customization.reports.footer'} | ${''} | ${''}
+		${false} | ${'customization.reports.footer'} | ${'Custom footer'} | ${'Copyright © 2022 Wazuh, Inc.'}
+		${false} | ${'customization.reports.footer'} | ${''} | ${'Copyright © 2022 Wazuh, Inc.'}
+		${false} | ${'customization.reports.footer'} | ${''} | ${'Copyright © 2022 Wazuh, Inc.'}
+		${true} | ${'customization.reports.header'} | ${'Custom header'} | ${'Custom header'}
+		${true} | ${'customization.reports.header'} | ${''} | ${''}
+		${false} | ${'customization.reports.header'} | ${'Custom header'} | ${'[email protected]\nhttps://wazuh.com'}
+		${false} | ${'customization.reports.header'} | ${''} | ${'[email protected]\nhttps://wazuh.com'}
+		`(`customizationEnabled: $customizationEnabled | settingKey: $settingKey | configValue: $configValue | expected: $expected`, ({ configValue, customizationEnabled, expected, settingKey }) => {
+			const configuration = {
+				'customization.enabled': customizationEnabled,
+				[settingKey]: configValue
+			};
+			expect(getCustomizationSetting(configuration, settingKey)).toBe(expected);
+		});
+	});
 });

common/services/settings.ts

@@ -130,3 +130,34 @@ export function formatLabelValuePair(label, value){
 		? `${value} (${label})`
 		: `${value}`
 };
+
+/**
+ * Get the configuration value if the customization is enabled.
+ * @param configuration JSON object from `wazuh.yml`
+ * @param settingKey key of the setting
+ * @returns 
+ */
+export function getCustomizationSetting(configuration: {[key: string]: any }, settingKey: string): any {
+  const isCustomizationEnabled = typeof configuration['customization.enabled'] === 'undefined'
+    ? getSettingDefaultValue('customization.enabled')
+    : configuration['customization.enabled'];
+  const defaultValue = getSettingDefaultValue(settingKey);
+
+	if ( isCustomizationEnabled && settingKey.startsWith('customization') && settingKey !== 'customization.enabled'){
+		return (typeof configuration[settingKey] !== 'undefined' ? resolveEmptySetting(settingKey, configuration[settingKey]) : defaultValue);
+	}else{
+		return defaultValue;
+	};
+};
+
+/**
+ * Returns the default value if not set when the setting is an empty string
+ * @param settingKey plugin setting
+ * @param value value of the plugin setting
+ * @returns 
+ */
+function resolveEmptySetting(settingKey: string, value : unknown){
+	return typeof value === 'string' && value.length === 0 && PLUGIN_SETTINGS[settingKey].defaultValueIfNotSet
+		? getSettingDefaultValue(settingKey)
+		: value;
+};

public/components/common/form/index.tsx

@@ -59,9 +59,9 @@ export const InputForm = ({
 const Input = {
   switch: InputFormSwitch,
   editor: InputFormEditor,
+  filepicker: InputFormFilePicker,
   number: InputFormNumber,
   select: InputFormSelect,
   text: InputFormText,
   textarea: InputFormTextArea,
-  filepicker: InputFormFilePicker
 };

public/components/common/hocs/withUserLogged.tsx

@@ -17,8 +17,8 @@ import { getHttp } from '../../../kibana-services';
 import { getAssetURL, getThemeAssetURL  } from "../../../utils/assets";
 
 export const withUserLogged = (WrappedComponent) => (props) => {
-    const withUserLogged = useSelector((state)=> state.appStateReducers.withUserLogged);
-    const customAppLogo = useSelector((state)=> state?.appConfig?.data?.['customization.logo.app']);
+    const withUserLogged = useSelector((state) => state.appStateReducers.withUserLogged);
+    const customAppLogo = useSelector((state) => state?.appConfig?.data?.['customization.enabled'] && state?.appConfig?.data?.['customization.logo.app']);
 
     return withUserLogged ? <WrappedComponent {...props}/> : (
       <div className="withUserLogged">

public/components/health-check/container/health-check.container.tsx

@@ -53,7 +53,7 @@ import { compose } from 'redux';
 import { getThemeAssetURL, getAssetURL } from '../../../utils/assets';
 
 const checks = {
-  api: {    
+  api: {
     title: 'Check Wazuh API connection',
     label: 'API connection',
     validator: checkApiService,
@@ -107,18 +107,21 @@ const checks = {
   timeFilter: {
     title: `Check ${PLUGIN_PLATFORM_SETTING_NAME_TIME_FILTER} setting`,
     label: `${PLUGIN_PLATFORM_SETTING_NAME_TIME_FILTER} setting`,
-    validator: checkPluginPlatformSettings(PLUGIN_PLATFORM_SETTING_NAME_TIME_FILTER, JSON.stringify(WAZUH_PLUGIN_PLATFORM_SETTING_TIME_FILTER), (checkLogger: CheckLogger, options: {defaultAppValue: any}) => {
-      getDataPlugin().query.timefilter.timefilter.setTime(WAZUH_PLUGIN_PLATFORM_SETTING_TIME_FILTER)
-        && checkLogger.action(`Timefilter set to ${JSON.stringify(options.defaultAppValue)}`);
-    }),
+    validator: checkPluginPlatformSettings(
+      PLUGIN_PLATFORM_SETTING_NAME_TIME_FILTER,
+      JSON.stringify(WAZUH_PLUGIN_PLATFORM_SETTING_TIME_FILTER),
+      (checkLogger: CheckLogger, options: { defaultAppValue: any }) => {
+        getDataPlugin().query.timefilter.timefilter.setTime(WAZUH_PLUGIN_PLATFORM_SETTING_TIME_FILTER)
+          && checkLogger.action(`Timefilter set to ${JSON.stringify(options.defaultAppValue)}`);
+      }),
     awaitFor: [],
     canRetry: true,
   }
 };
 
 function HealthCheckComponent() {
-  const [checkErrors, setCheckErrors] = useState<{[key:string]: []}>({});
-  const [checksReady, setChecksReady] = useState<{[key: string]: boolean}>({});
+  const [checkErrors, setCheckErrors] = useState<{ [key: string]: [] }>({});
+  const [checksReady, setChecksReady] = useState<{ [key: string]: boolean }>({});
   const [isDebugMode, setIsDebugMode] = useState<boolean>(false);
   const appConfig = useAppConfig();
   const checksInitiated = useRef(false);
@@ -142,35 +145,39 @@ function HealthCheckComponent() {
     // Redirect to app when all checks are ready
     Object.keys(checks)
       .every(check => checksReady[check])
-    && !isDebugMode && (() => setTimeout(redirectionPassHealthcheck, HEALTH_CHECK_REDIRECTION_TIME)
+      && !isDebugMode && (() => setTimeout(redirectionPassHealthcheck, HEALTH_CHECK_REDIRECTION_TIME)
       )()
   }, [checksReady]);
 
   useEffect(() => {
     // Check if Health should not redirect automatically (Debug mode)
     setIsDebugMode(window.location.href.includes('debug'));
-  },[]);
+  }, []);
 
   const handleErrors = (checkID, errors, parsed) => {
     const newErrors = parsed
       ? errors.map((error) =>
-          ErrorHandler.handle(error, 'Health Check', { warning: false, silent: true })
-        )
+        ErrorHandler.handle(error, 'Health Check', { warning: false, silent: true })
+      )
       : errors;
-    setCheckErrors((prev) => ({...prev, [checkID]: newErrors}));
+    setCheckErrors((prev) => ({ ...prev, [checkID]: newErrors }));
   };
 
   const cleanErrors = (checkID: string) => {
     delete checkErrors[checkID];
-    setCheckErrors({...checkErrors});
+    setCheckErrors({ ...checkErrors });
   }
 
-  const handleCheckReady = (checkID, isReady) => {    
-    setChecksReady(prev =>  ({...prev, [checkID]: isReady}));
+  const handleCheckReady = (checkID, isReady) => {
+    setChecksReady(prev => ({ ...prev, [checkID]: isReady }));
   }
 
 
-  const logoUrl = getHttp().basePath.prepend(appConfig.data['customization.logo.healthcheck'] ? getAssetURL(appConfig.data['customization.logo.healthcheck']) : getThemeAssetURL('logo.svg'));
+  const logoUrl = getHttp().basePath.prepend(
+    appConfig.data['customization.enabled'] && appConfig.data['customization.logo.healthcheck'] ?
+      getAssetURL(appConfig.data['customization.logo.healthcheck']) :
+      getThemeAssetURL('logo.svg')
+  );
   const thereAreErrors = Object.keys(checkErrors).length > 0;
 
   const renderChecks = () => {
@@ -188,7 +195,7 @@ function HealthCheckComponent() {
           handleErrors={handleErrors}
           cleanErrors={cleanErrors}
           isLoading={appConfig.isLoading}
-          handleCheckReady= {handleCheckReady}
+          handleCheckReady={handleCheckReady}
           checksReady={checksReady}
           canRetry={checks[check].canRetry}
         />
@@ -220,7 +227,7 @@ function HealthCheckComponent() {
   };
 
   const renderErrors = () => {
-    return Object.keys(checkErrors).map((checkID) => 
+    return Object.keys(checkErrors).map((checkID) =>
       checkErrors[checkID].map((error, index) => (
         <Fragment key={index}>
           <EuiCallOut
@@ -233,7 +240,7 @@ function HealthCheckComponent() {
           <EuiSpacer size="xs" />
         </Fragment>
       ))
-    ) 
+    )
   };
 
   return (
@@ -277,7 +284,7 @@ function HealthCheckComponent() {
   );
 }
 
-export const HealthCheck = compose (withErrorBoundary,withReduxProvider) (HealthCheckComponent);
+export const HealthCheck = compose(withErrorBoundary, withReduxProvider)(HealthCheckComponent);
 
 export const HealthCheckTest = HealthCheckComponent;
 

public/components/settings/configuration/components/categories/components/category/category.tsx

@@ -179,7 +179,7 @@ const InputFormFilePickerPreInput = ({image, field}: {image: string, field: any}
               try{
                 const response = await WzRequest.genericReq('DELETE', `/utils/configuration/files/${field.key}`);
                 dispatch(updateAppConfig(response.data.data.updatedConfiguration));
-                
+
                 // Show the toasts if necessary
                 const { requiresRunningHealthCheck, requiresReloadingBrowserTab, requiresRestartingPluginPlatform } = response.data.data;
                 requiresRunningHealthCheck && toastRequiresRunningHealthcheck();

public/components/settings/configuration/configuration.tsx

@@ -36,7 +36,6 @@ import { Category } from './components/categories/components';
 import { WzRequest } from '../../../react-services';
 import { UIErrorLog, UIErrorSeverity, UILogLevel, UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
 import { getErrorOrchestrator } from '../../../react-services/common-services';
-import { getToasts } from '../../../kibana-services';
 import { updateAppConfig } from '../../../redux/actions/appConfigActions';
 import path from 'path';
 import { toastRequiresReloadingBrowserTab, toastRequiresRestartingPluginPlatform, toastRequiresRunningHealthcheck, toastSuccessUpdateConfiguration } from './components/categories/components/show-toasts';
@@ -172,14 +171,15 @@ const WzConfigurationSettingsProvider = (props) => {
       responses.some(({data: { data: {requiresRestartingPluginPlatform}}}) => requiresRestartingPluginPlatform) && toastRequiresRestartingPluginPlatform();
 
       // Update the app configuration frontend-cached setting in memory with the new values
-      dispatch(updateAppConfig({
+      const updatedConfiguration = {
         ...responses.reduce((accum, {data: {data}}) => {
           return {
             ...accum,
             ...(data.updatedConfiguration ? {...data.updatedConfiguration} : {}),
           }
         },{})
-      }));
+      };
+      dispatch(updateAppConfig(updatedConfiguration));
 
       // Remove the selected files on the file picker inputs
       if(Object.keys(settingsToUpdate.fileUpload).length){

public/components/wz-menu/wz-menu.js

@@ -17,9 +17,7 @@ import {
   EuiPopover,
   EuiIcon,
   EuiButtonEmpty,
-  EuiText,
   EuiCallOut,
-  EuiPageHeader,
   EuiToolTip,
   EuiLoadingSpinner,
   EuiFormRow,
@@ -904,7 +902,7 @@ export const WzMenu = withWindowSize(class WzMenu extends Component {
     );
 
 
-    const logotypeURL = getHttp().basePath.prepend(this.wazuhConfig.getConfig()['customization.logo.app'] ? getAssetURL(this.wazuhConfig.getConfig()['customization.logo.app']) : getThemeAssetURL('logo.svg'));
+    const logotypeURL = getHttp().basePath.prepend(this.wazuhConfig.getConfig()['customization.enabled'] && this.wazuhConfig.getConfig()['customization.logo.app'] ? getAssetURL(this.wazuhConfig.getConfig()['customization.logo.app']) : getThemeAssetURL('logo.svg'));
     const mainButton = (
       <button data-test-subj='menuWazuhButton' className="eui" onClick={() => this.switchMenuOpened()}>
         <EuiFlexGroup

public/plugin.ts

@@ -43,7 +43,7 @@ export class WazuhPlugin implements Plugin<WazuhSetup, WazuhStart, WazuhSetupPlu
   private hideTelemetryBanner?: () => void;
   public async setup(core: CoreSetup, plugins: WazuhSetupPlugins): WazuhSetup {
     const UI_THEME = core.uiSettings.get('theme:darkMode') ? 'dark' : 'light';
-    
+
     // Get custom logos configuration to start up the app with the correct logos
     let logosInitialState={};
     try{
@@ -166,4 +166,4 @@ export class WazuhPlugin implements Plugin<WazuhSetup, WazuhStart, WazuhSetupPlu
     setErrorOrchestrator(ErrorOrchestratorService);
     return {};
   }
-}
+}

server/controllers/wazuh-api.ts

@@ -18,6 +18,7 @@ import { KeyEquivalence } from '../../common/csv-key-equivalence';
 import { ApiErrorEquivalence } from '../lib/api-errors-equivalence';
 import apiRequestList from '../../common/api-info/endpoints';
 import { HTTP_STATUS_CODES } from '../../common/constants';
+import { getCustomizationSetting } from '../../common/services/settings';
 import { addJobToQueue } from '../start/queue';
 import fs from 'fs';
 import { ManageHosts } from '../lib/manage-hosts';
@@ -1108,14 +1109,14 @@ export class WazuhApiCtrl {
       const APP_LOGO = 'customization.logo.app';
       const HEALTHCHECK_LOGO = 'customization.logo.healthcheck';
 
+      const logos= {
+        [SIDEBAR_LOGO]: getCustomizationSetting(configuration, SIDEBAR_LOGO),
+        [APP_LOGO]: getCustomizationSetting(configuration, APP_LOGO),
+        [HEALTHCHECK_LOGO]: getCustomizationSetting(configuration, HEALTHCHECK_LOGO),
+      }
+
       return response.ok({
-        body: {
-          logos: {
-            [SIDEBAR_LOGO]: configuration[SIDEBAR_LOGO],
-            [APP_LOGO]: configuration[APP_LOGO],
-            [HEALTHCHECK_LOGO]: configuration[HEALTHCHECK_LOGO],
-          }
-        }
+        body: { logos }
       });
     } catch (error) {
       log('wazuh-api:getAppLogos', error.message || error);