Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into disableV1
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeraldJF
JeraldJF committed Oct 29, 2024
2 parents a82b3db + ce67be9 commit 01f4e44
Show file tree
Hide file tree
Showing 28 changed files with 763 additions and 930 deletions.
143 changes: 71 additions & 72 deletions web-console-v2/src/components/Form/DynamicForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export interface Schema {
}

interface DynamicFormProps {
schemas: Schema[];
schema: Schema;
formData: FormData;
setFormData: React.Dispatch<React.SetStateAction<FormData>>;
onChange: (formData: FormData, errors?: unknown[] | null) => void;
Expand All @@ -40,7 +40,7 @@ interface DynamicFormProps {
}

const DynamicForm = ({
schemas,
schema,
formData,
setFormData,
onChange,
Expand All @@ -49,6 +49,7 @@ const DynamicForm = ({
extraErrors = {},
handleClick
}: DynamicFormProps) => {

const customErrors = (errors: null | ErrorObject[] = []) => {
if (_.isEmpty(errors)) return;

Expand All @@ -61,102 +62,100 @@ const DynamicForm = ({
};

const keyword = _.get(error, 'keyword', '');

const customMessage = _.get(errorMessage, [keyword], '');

const defaultMessage = _.get(error, 'message', '');

error.message = customMessage || defaultMessage;
});
};

const validator = customizeValidator({}, customErrors);

const handleFormDataChange = (index: number, data: FormData, sectionKey: string) => {
const validate = ajv.compile(schemas[index].schema);

const valid = validate(data);
const handleFormDataChange = (data: FormData) => {

const valid = ajv.validate(schema, data);

if (valid) {
setFormData((prevData: FormData) => {
const updatedData = { ...prevData, [`section${index}`]: data };

const updatedData = { ...prevData, ...data };
onChange(updatedData, null);

return updatedData;
});
} else {
const errors = validate.errors?.map((error) => error.message) || [];

const updatedData = { ...formData, [`section${index}`]: data };

const errors = ajv.errors?.map((error) => error.message) || [];
const updatedData = { ...formData, ...data };
onChange(updatedData, errors);
}
};

const getSchema = (sectionKey: string, sectionValue: any) => {
const fieldSchema = {
type: "object",
properties: {
[sectionKey]: sectionValue as RJSFSchema
},
required: schema.schema.required && schema.schema.required.includes(sectionKey) ? [sectionKey] : []
}
return fieldSchema;
}

return (
<Box
className={customClassNames?.container || styles.container}
style={customStyles?.container}
>
{_.map(schemas, (schema, index) => (
<Box
key={index}
className={customClassNames?.sectionContainer || styles.sectionContainer}
style={customStyles?.sectionContainer}
<Box
className={customClassNames?.sectionContainer || styles.sectionContainer}
style={customStyles?.sectionContainer}
>
<Typography
variant="h1"
className={customClassNames?.connectorName || styles.connectorName}
style={customStyles?.connectorName}
>
<Typography
variant="h1"
className={customClassNames?.connectorName || styles.connectorName}
style={customStyles?.connectorName}
>
{schema.title}
</Typography>
{schema.schema.properties &&
_.entries(schema.schema.properties).map(([sectionKey, sectionValue]) => {
return (
<Box
key={sectionKey}
className={
customClassNames?.sectionContainers ||
styles.sectionContainers
}
style={customStyles?.sectionContainers}
>
<CustomForm
schema={{
type: 'object',
properties: {
[sectionKey]: sectionValue as RJSFSchema
}
}}
uiSchema={{
[sectionKey]: {
...schema.uiSchema[sectionKey]
}
}}
formData={formData[`section${index}`] as FormData}
validator={validator}
showErrorList={false}
onChange={(e) => {
handleClick?.(sectionKey);
handleFormDataChange(index, e.formData, sectionKey);
}}
liveValidate={true}
templates={{
ButtonTemplates: {
SubmitButton: () => null
}
}}
extraErrors={extraErrors}
/>
</Box>
);
})}
</Box>
))}
{schema.title}
</Typography>
{schema.schema.properties &&
_.entries(schema.schema.properties).map(([sectionKey, sectionValue]) => {
return (
<Box
key={sectionKey}
className={
customClassNames?.sectionContainers ||
styles.sectionContainers
}
style={customStyles?.sectionContainers}
onClick={() => handleClick?.(sectionKey)}
>
<CustomForm
schema={getSchema(sectionKey, sectionValue) as RJSFSchema}
uiSchema={{
[sectionKey]: {
...schema.uiSchema[sectionKey]
}
}}
formData={formData as FormData}
validator={validator}
showErrorList={false}
onChange={(e) => {
handleClick?.(sectionKey);
handleFormDataChange(e.formData);
}}
liveValidate={true}
templates={{
ButtonTemplates: {
SubmitButton: () => null
}
}}
extraErrors={extraErrors}
onBlur={() => handleClick?.(sectionKey)}
/>
</Box>
);
})}
</Box>

</Box>
);
};

export default DynamicForm;
export default DynamicForm;
112 changes: 38 additions & 74 deletions web-console-v2/src/components/HelpSection/HelpSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,56 +20,24 @@ interface Props {
}
let highlightedSection = "";
const HelpSection: React.FC<Props> = ({ helpSection, helpText, highlightSection, onExpandToggle, expand }) => {

const generateDynamicStyles = (): Record<string, any> => {
if(highlightSection === highlightedSection) {
if (highlightSection === highlightedSection) {
return {};
}
highlightedSection = highlightSection || helpSection.defaultHighlight;
const styles: Record<string, any> = {};
if(helpText) {
const sections = document.getElementsByTagName('section');
Array.from(sections).forEach(section => {
section.classList.remove("highlighted");
const sections = document.getElementsByTagName('section');
Array.from(sections).forEach(section => {
section.classList.remove("highlighted");
});
setTimeout(() => {
document.getElementById(highlightedSection)?.classList.add("highlighted");
document.getElementById(highlightedSection)?.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
setTimeout(() => {
document.getElementById(highlightedSection)?.classList.add("highlighted");

document.getElementById(highlightedSection)?.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 100);
} else {
const contentSections = helpSection.contents?.match(/id="([^"]+)"|section\d+/g) || [];
if (contentSections) {
contentSections.forEach((section) => {
const sectionId =
section.match(/section\d+/)?.[0] || section.match(/id="([^"]+)"/)?.[1];

if (sectionId) {
const isHighlighted = highlightedSection === sectionId;

styles[`#${sectionId}`] = {
color: isHighlighted ? 'orange' : 'inherit',
opacity: isHighlighted ? 1 : 0.1
};

styles[`.displayContent #${sectionId}`] = {
opacity: isHighlighted ? 1 : 0.1
};

if (isHighlighted) {
document.getElementById(sectionId)?.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
}
}

}, 100);

return styles;
};
Expand All @@ -78,13 +46,9 @@ const HelpSection: React.FC<Props> = ({ helpSection, helpText, highlightSection,

return (
<div>
<div
className={`${styles.helpSectionContainer} ${expand ? styles.expanded : styles.collapsed}`}
>
<div className={`${styles.helpSectionContainer} ${expand ? styles.expanded : styles.collapsed}`}>
<div className={styles.toggleButton} onClick={onExpandToggle}>
<div
className={`${styles.buttonIcon} ${expand ? styles.expanded : styles.collapsed}`}
>
<div className={`${styles.buttonIcon} ${expand ? styles.expanded : styles.collapsed}`}>
<KeyboardDoubleArrowRightOutlinedIcon
className={styles.arrowIcon}
sx={{ backgroundColor: theme.palette.secondary.main }}
Expand All @@ -95,31 +59,31 @@ const HelpSection: React.FC<Props> = ({ helpSection, helpText, highlightSection,
<>
<Box className={styles.tabContainer}>
<Box className={styles.tabMenus}>
<Box
sx={{
position: 'relative',
'::after': {
content: '""',
display: 'block',
width: '50%',
borderBottom:`2px solid ${theme.palette.primary.main}`,
position: 'absolute',
bottom: 0,
left: '25%'
}
}}
>
<Box className={styles.menusNames}>
<Typography
variant={'h2'}
sx={{
color: 'primary.main'
}}
>
{helpSection.title || "Setup Guide"}
</Typography>
</Box>
<Box
sx={{
position: 'relative',
'::after': {
content: '""',
display: 'block',
width: '50%',
borderBottom: `2px solid ${theme.palette.primary.main}`,
position: 'absolute',
bottom: 0,
left: '25%'
}
}}
>
<Box className={styles.menusNames}>
<Typography
variant={'h2'}
sx={{
color: 'primary.main'
}}
>
{helpSection.title || "Setup Guide"}
</Typography>
</Box>
</Box>
</Box>
</Box>
<Box className={styles.contentContainer}>
Expand Down
1 change: 1 addition & 0 deletions web-console-v2/src/components/TableWithCustomHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable */
import { useEffect, useMemo, useState } from 'react';
import { Stack, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import { useTable, useFilters, useGlobalFilter, useExpanded } from 'react-table';
Expand Down
1 change: 1 addition & 0 deletions web-console-v2/src/data/notificationChannels/email.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable */
import _ from 'lodash';
import * as yup from 'yup';
import en from 'utils/locales/en.json'
Expand Down
Loading

0 comments on commit 01f4e44

Please sign in to comment.