update theme creation, export

opencti-platform/opencti-front/src/private/components/settings/themes/ThemeCreation.tsx

@@ -1,14 +1,15 @@
-import React, { FunctionComponent } from 'react';
-import { Formik, FormikHelpers } from 'formik';
-import { Disposable, graphql, RecordSourceSelectorProxy } from 'relay-runtime';
+import { ThemeManagerQuery$variables } from '@components/settings/themes/__generated__/ThemeManagerQuery.graphql';
 import ThemeForm from '@components/settings/themes/ThemeForm';
 import themeValidationSchema from '@components/settings/themes/themeValidation';
-import { ThemeManagerQuery$variables } from '@components/settings/themes/__generated__/ThemeManagerQuery.graphql';
-import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import { Formik, FormikHelpers } from 'formik';
+import { FunctionComponent } from 'react';
+import { Disposable, graphql, RecordSourceSelectorProxy } from 'relay-runtime';
 import { useFormatter } from '../../../../components/i18n';
+import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import { insertNode } from '../../../../utils/store';
 import Drawer from '../../common/drawer/Drawer';
 import { ThemeCreationCreateMutation } from './__generated__/ThemeCreationCreateMutation.graphql';
-import { insertNode } from '../../../../utils/store';
+import { LoginAsideType, ThemeCreationInput } from './ThemeType';
 
 export const createThemeMutation = graphql`
   mutation ThemeCreationCreateMutation($input: ThemeAddInput!) {
@@ -42,7 +43,7 @@ const ThemeCreation: FunctionComponent<ThemeCreationProps> = ({
 
   const validator = themeValidationSchema(t_i18n);
 
-  const initialValues = {
+  const initialValues: ThemeCreationInput = {
     name: '',
     theme_background: '',
     theme_paper: '',
@@ -54,11 +55,16 @@ const ThemeCreation: FunctionComponent<ThemeCreationProps> = ({
     theme_logo: '',
     theme_logo_collapsed: '',
     theme_logo_login: '',
+    theme_login_aside_type: '' as LoginAsideType,
+    theme_login_aside_color: '',
+    theme_login_aside_gradient_start: '',
+    theme_login_aside_gradient_end: '',
+    theme_login_aside_image: '',
   };
 
   const handleSubmit = async (
-    values: typeof initialValues,
-    { setSubmitting, resetForm }: FormikHelpers<typeof initialValues>,
+    values: ThemeCreationInput,
+    { setSubmitting, resetForm }: FormikHelpers<ThemeCreationInput>,
   ) => {
     try {
       await validator.validate(values);
@@ -76,6 +82,10 @@ const ThemeCreation: FunctionComponent<ThemeCreationProps> = ({
             theme_logo_collapsed: values.theme_logo_collapsed,
             theme_logo_login: values.theme_logo_login,
             theme_text_color: values.theme_text_color,
+            theme_login_aside_color: values.theme_login_aside_color || null,
+            theme_login_aside_gradient_start: values.theme_login_aside_gradient_start || null,
+            theme_login_aside_gradient_end: values.theme_login_aside_gradient_end || null,
+            theme_login_aside_image: values.theme_login_aside_image || null,
           },
         },
         updater: (store: RecordSourceSelectorProxy) => insertNode(
@@ -102,7 +112,7 @@ const ThemeCreation: FunctionComponent<ThemeCreationProps> = ({
       open={open}
       onClose={handleClose}
     >
-      <Formik
+      <Formik<ThemeCreationInput>
         onSubmit={handleSubmit}
         initialValues={initialValues}
         validationSchema={validator}

opencti-platform/opencti-front/src/private/components/settings/themes/ThemeEdition.tsx

@@ -105,7 +105,9 @@ const ThemeEdition: FunctionComponent<ThemeEditionProps> = ({
     resetForm: (nextState?: Partial<FormikState<ThemeType>>) => void,
   ) => {
     try {
-      await validator.validate(values);
+      await validator.validate(values, {
+        stripUnknown: true,
+      });
       await updateTheme(values);
       setSubmitting(false);
     } catch (error) {
@@ -144,7 +146,7 @@ const ThemeEdition: FunctionComponent<ThemeEditionProps> = ({
             themeId={theme.id}
             onSubmit={submitForm}
             onCancel={handleClose}
-            onChange={() => handleOnChange(values, setSubmitting, setErrors, resetForm)}
+            onChange={(updatedValues) => handleOnChange(updatedValues ?? values, setSubmitting, setErrors, resetForm)}
             withButtons={false}
           />
         )}

opencti-platform/opencti-front/src/private/components/settings/themes/ThemeExportHandler.tsx

@@ -21,7 +21,11 @@ const ThemeExportHandlerQuery = graphql`
       theme_text_color
       theme_logo
       theme_logo_collapsed
-      theme_logo_login      
+      theme_logo_login     
+      theme_login_aside_color
+      theme_login_aside_gradient_end
+      theme_login_aside_gradient_start
+      theme_login_aside_image 
     }
   }
 `;
@@ -34,6 +38,8 @@ const handleExportJson = async (theme: themeToExport) => {
 
   const themeData = { ...result.theme };
 
+  console.log('themeda', themeData);
+
   const jsonString = JSON.stringify(themeData, null, 2);
   const blob = new Blob([jsonString], { type: 'application/json' });
   const todayDate = new Date().toISOString().split('T')[0].replaceAll('-', '');

opencti-platform/opencti-front/src/private/components/settings/themes/ThemeForm.tsx

@@ -1,7 +1,7 @@
 import Button from '@common/button/Button';
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { Field, Form, useFormikContext } from 'formik';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useState } from 'react';
 import ColorPickerField from '../../../../components/ColorPickerField';
 import FormButtonContainer from '../../../../components/common/form/FormButtonContainer';
 import { useFormatter } from '../../../../components/i18n';
@@ -34,7 +34,7 @@ interface ThemeFormProps {
   themeId?: string;
   onSubmit: () => void;
   onCancel: () => void;
-  onChange?: () => void;
+  onChange?: (values?: ThemeType) => void;
   submitLabel?: string;
   withButtons?: boolean;
 }
@@ -54,26 +54,34 @@ const ThemeForm: FunctionComponent<ThemeFormProps> = ({
   const { t_i18n } = useFormatter();
   const { setFieldValue, values: formikValues } = useFormikContext<ThemeType>();
 
-  const loginAsideType = formikValues.theme_login_aside_type;
+  const [loginAsideType, setLoginAsideType] = useState(
+    formikValues.theme_login_aside_type || '',
+  );
 
   const handleFieldSubmit = () => {
-    onChange?.();
+    onChange?.(formikValues);
   };
 
-  const handleLoginAsideTypeChange = (
-    event: SelectChangeEvent<string>,
-  ) => {
-    const type = event.target.value as ThemeType['theme_login_aside_type'];
+  const handleLoginAsideTypeChange = (event: SelectChangeEvent<string>) => {
+    const type = event.target.value as '' | 'color' | 'gradient' | 'image';
+    setLoginAsideType(type);
 
-    // update formik source of truth
-    setFieldValue('theme_login_aside_type', type, true);
+    const clearedValues: ThemeType = {
+      ...formikValues,
+      theme_login_aside_type: type,
+      theme_login_aside_color: '',
+      theme_login_aside_gradient_start: '',
+      theme_login_aside_gradient_end: '',
+      theme_login_aside_image: '',
+    };
 
+    setFieldValue('theme_login_aside_type', type);
     setFieldValue('theme_login_aside_color', '');
     setFieldValue('theme_login_aside_gradient_start', '');
     setFieldValue('theme_login_aside_gradient_end', '');
     setFieldValue('theme_login_aside_image', '');
 
-    onChange?.();
+    onChange?.(clearedValues);
   };
 
   return (

opencti-platform/opencti-front/src/private/components/settings/themes/ThemeType.ts

@@ -20,6 +20,8 @@ interface ThemeType {
   theme_login_aside_type: LoginAsideType;
 }
 
+export type ThemeCreationInput = Omit<ThemeType, 'id' | 'system_default'>;
+
 export type LoginAsideType = '' | 'color' | 'gradient' | 'image';
 
 export default ThemeType;