120 show description on form fields

README.md

@@ -478,6 +478,7 @@ Copy content of _/build_ folder in your web server
 	title?: string,
 	description?: string,
 	fieldsEndpoint?: string,
+	descriptionTooltip: boolean,
 	prefix?: string,
 }
 ```
@@ -489,6 +490,7 @@ Copy content of _/build_ folder in your web server
 	title: "lorem ipsum dolor sit amet",
 	description: "lorem ipsum dolor sit amet",
 	fieldsEndpoint: "/lorem/ipsum",
+	descriptionTooltip: true,
 	prefix: "filtersCompositions",
 }
 ```

public/config/config.json

@@ -1,9 +1,9 @@
 {
   "api": {
-    "AUTHN_API_BASE_URL": "http://4.207.39.182:8082",
-    "BFF_API_BASE_URL": "http://4.207.39.183:8081",
-    "EVENTS_API_BASE_URL": "http://172.205.78.36:8083",
-    "EVENTS_PUSH_API_BASE_URL": "http://172.205.78.36:8083",
+    "AUTHN_API_BASE_URL": "http://135.236.145.79:8082",
+    "BFF_API_BASE_URL": "http://135.236.149.62:8081",
+    "EVENTS_API_BASE_URL": "http://48.209.179.60:8083",
+    "EVENTS_PUSH_API_BASE_URL": "http://48.209.179.60:8083",
     "TERMINAL_SOCKET_URL": "http://localhost:8084"
   },
   "params": {

src/components/Widgets/FormGenerator/FormGenerator.tsx

@@ -13,14 +13,15 @@ import SelectWithFilters from "./SelectWithFilters";
 type FormGeneratorType = {
 	title?: string,
 	description?: string,
+	descriptionTooltip: boolean,
 	fieldsEndpoint?: string,
 	form: FormInstance<any>,
 	prefix?: string,
 	onClose: () => void,
 	disableButtons: (value: boolean) => void
 }
 
-const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClose, disableButtons }: FormGeneratorType) => {
+const FormGenerator = ({title, description, descriptionTooltip = false, fieldsEndpoint, form, prefix, onClose, disableButtons }: FormGeneratorType) => {
 
 	const [postContent, { data: postData, isLoading: postLoading, isSuccess: isPostSuccess, isError: isPostError, error: postError }] = usePostContentMutation();
 	const { message } = App.useApp();
@@ -48,17 +49,21 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 	}, [data, isSuccess])
 
 	const parseData = (node, name) => {
-		return Object.keys(node.properties).map(k => {
-			const currentName = name ? `${name}.${k}` : k;
-			if (node.properties[k].type === "object") {
-				return parseData(node.properties[k], currentName)
-			} else {
-				// return field
-				const required = Array.isArray(node?.required) && node.required.indexOf(k) > -1;
-				fieldsData.push({type: node.properties[k].type, name: currentName});
-				return renderField(k, currentName, node.properties[k], required);
-			}
-		})
+		if (node.properties) {
+			return Object.keys(node.properties).map(k => {
+				const currentName = name ? `${name}.${k}` : k;
+				if (node.properties[k].type === "object") {
+					return parseData(node.properties[k], currentName)
+				} else {
+					// return field
+					const required = Array.isArray(node?.required) && node.required.indexOf(k) > -1;
+					fieldsData.push({type: node.properties[k].type, name: currentName});
+					return renderField(k, currentName, node.properties[k], required);
+				}
+			})
+		} else {
+			return []
+		}
 	}
 
 	const renderMetadataFields = () => {
@@ -77,17 +82,21 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 
 	const generateInitialValues = () => {
 		const parseData = (node, name) => {
-			return Object.keys(node.properties).map(k => {
-				const currentName = name ? `${name}.${k}` : k;
-				if (node.properties[k].type === "object") {
-					return parseData(node.properties[k], currentName)
-				} else {
-					// set default value
-					if (node.properties[k].default) {
-						form.setFieldValue(currentName.split("."), node.properties[k].default);
+			if (node.properties) {
+				return Object.keys(node.properties).map(k => {
+					const currentName = name ? `${name}.${k}` : k;
+					if (node.properties[k].type === "object") {
+						return parseData(node.properties[k], currentName)
+					} else {
+						// set default value
+						if (node.properties[k].default) {
+							form.setFieldValue(currentName.split("."), node.properties[k].default);
+						}
 					}
-				}
-			})
+				})
+			} else {
+				return []
+			}
 		}
 		if (formData.spec) parseData(formData.spec, "");
 	}
@@ -138,21 +147,20 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 							label={renderLabel(name, label)}
 							name={name.split(".")}
 							rules={rules}
+							tooltip={descriptionTooltip && node.description ? node.description : undefined}
+							extra={!descriptionTooltip && node.description ? node.description : undefined}
 						>
 							{node.enum ? (
 								node.enum.length > 4 ? (
 									<Select
-										placeholder={node.description ? node.description : undefined}
 										options={node.enum.map(opt => ({value: opt, label: opt}))}
 										allowClear
 									/>
 								)
 									:
 									<Radio.Group>{node.enum.map((el) => <Radio key={`radio_${el}`} value={el}>{el}</Radio>)}</Radio.Group>
 								) : 
-								<Input
-									placeholder={node.description ? node.description : undefined}
-								/>
+								<Input />
 							}
 						</Form.Item>
 					</div>
@@ -169,6 +177,8 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 								name={name.split(".")}
 								valuePropName="checked"
 								rules={rules}
+								tooltip={descriptionTooltip && node.description ? node.description : undefined}
+								extra={!descriptionTooltip && node.description ? node.description : undefined}
 							>
 								<Switch />
 							</Form.Item>
@@ -184,6 +194,8 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 							label={renderLabel(name, label)}
 							name={name.split(".")}
 							rules={rules}
+							tooltip={descriptionTooltip && node.description ? node.description : undefined}
+							extra={!descriptionTooltip && node.description ? node.description : undefined}
 						>
 							<ListEditor onChange={(values) => {form.setFieldValue(name, values)}} />
 						</Form.Item>
@@ -201,6 +213,8 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 							label={renderLabel(name, label)}
 							name={name.split(".")}
 							rules={rules}
+							tooltip={descriptionTooltip && node.description ? node.description : undefined}
+							extra={!descriptionTooltip && node.description ? node.description : undefined}
 						>
 							{
 								min && max && (max - min < 100) ?
@@ -220,6 +234,8 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 							label={renderLabel(name, label)}
 							name={name.split(".")}
 							rules={rules}
+							tooltip={descriptionTooltip && node.description ? node.description : undefined}
+							extra={!descriptionTooltip && node.description ? node.description : undefined}
 						>
 							<SelectWithFilters node={node} />
 						</Form.Item>
@@ -230,26 +246,30 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 
 	const getAnchorList = () => {
 		const parseData = (node, name) => {
-			return Object.keys(node.properties).map(k => {
-								const currentName = name ? `${name}.${k}` : k;
-				if (node.properties[k].type === "object") {
-					// create children
-					return {
-						key: currentName,
-						title: <span className={styles.anchorObjectLabel}>{k}</span>,
-						children: parseData(node.properties[k], currentName),
-					}
-				} else {
-					// return obj
-					return {
-						key: currentName,
-						href: `#${currentName}`,
-						title: k
+			if (node.properties) {
+				return Object.keys(node.properties).map(k => {
+									const currentName = name ? `${name}.${k}` : k;
+					if (node.properties[k].type === "object") {
+						// create children
+						return {
+							key: currentName,
+							title: <span className={styles.anchorObjectLabel}>{k}</span>,
+							children: parseData(node.properties[k], currentName),
+						}
+					} else {
+						// return obj
+						return {
+							key: currentName,
+							href: `#${currentName}`,
+							title: k
+						}
 					}
-				}
-			})
+				})
+			} else {
+				return []
+			}
 		}
-		return [...parseData(formData.spec, "")];
+		if (formData.spec) return [...parseData(formData.spec, "")];
 	}
 
 	const onSubmit = async (values: object) => {
@@ -335,12 +355,6 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 		}
 	}, [message, isPostSuccess, postData]);
 
-	useEffect(() => {
-    if (isLoading) {
-      message.loading('Receiving data...');
-    }
-  }, [isLoading, message]);
-
 	useEffect(() => {
     if (postLoading) {
 			disableButtons(true)

src/utils/useCatchError.tsx

@@ -1,6 +1,8 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { App, Result } from "antd";
+import { useAppDispatch } from "../redux/hooks";
+import { logout } from "../features/auth/authSlice";
 
 const useCatchError = () => {
   const { notification } = App.useApp();
@@ -11,6 +13,7 @@ const useCatchError = () => {
     // Adjust to account for potentially nested error structure
     let actualErrorCode: number;
     let actualErrorMessage: string = "";
+    const dispatch = useAppDispatch();
 
     if (error?.message && JSON.parse(error.message).data?.code) {
       // error from API with status 200
@@ -19,8 +22,15 @@ const useCatchError = () => {
 
       const clientErrorRegex = /^4\d{2}$/; // Regex for 4xx client errors
       if (clientErrorRegex.test(String(actualErrorCode))) {
-        message = actualErrorMessage;
-        description = "There was an error processing your request. Please check your input or permissions.";
+        if (actualErrorCode === 401) {
+          // not authorized
+          dispatch(logout());
+          message = "Your session has expired";
+          description = "Sign in again"
+        } else {
+          message = actualErrorMessage;
+          description = "There was an error processing your request. Please check your input or permissions.";
+        }
       } else {
         switch (actualErrorCode) {
           // Handle other specific codes if necessary
@@ -47,7 +57,7 @@ const useCatchError = () => {
         notification.error({
           description: description,
           message: message,
-          duration: 2,
+          duration: 4,
         });
     }
   }