Merge remote-tracking branch 'github/feat/ui-1.1.0' into beta/1.1.0

ui/src/components/SchemaForm/index.tsx

@@ -2,6 +2,7 @@ import {
   ForwardRefRenderFunction,
   forwardRef,
   useImperativeHandle,
+  useEffect,
 } from 'react';
 import { Form, Button, Stack } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
@@ -155,16 +156,10 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
    */
   const setDefaultValueAsDomBehaviour = () => {
     keys.forEach((k) => {
-      const formVal = formData[k]?.value;
+      const fieldVal = formData[k]?.value;
       const metaProp = properties[k];
       const uiCtrl = uiSchema[k]?.['ui:widget'];
-      if (
-        !metaProp ||
-        !uiCtrl ||
-        formVal ||
-        formVal === 0 ||
-        formVal === false
-      ) {
+      if (!metaProp || !uiCtrl || fieldVal !== undefined) {
         return;
       }
       if (uiCtrl === 'select' && metaProp.enum?.[0] !== undefined) {
@@ -176,7 +171,9 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
       }
     });
   };
-  setDefaultValueAsDomBehaviour();
+  useEffect(() => {
+    setDefaultValueAsDomBehaviour();
+  }, [formData]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -348,7 +345,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
   useImperativeHandle(ref, () => ({
     validator,
   }));
-  console.log('uiSchema: ', uiSchema);
   return (
     <Form noValidate onSubmit={handleSubmit}>
       {keys.map((key) => {
@@ -577,7 +573,6 @@ export const initFormData = (schema: JSONSchema): Type.FormDataType => {
   Object.keys(schema.properties).forEach((key) => {
     const prop = schema.properties[key];
     const defaultVal = prop?.default;
-
     formData[key] = {
       value: defaultVal,
       isInvalid: false,

ui/src/pages/Admin/Smtp/index.tsx

@@ -33,7 +33,7 @@ const Smtp: FC = () => {
         description: t('smtp_host.text'),
       },
       encryption: {
-        type: 'boolean',
+        type: 'string',
         title: t('encryption.label'),
         description: t('encryption.text'),
         enum: ['SSL', ''],
@@ -179,7 +179,7 @@ const Smtp: FC = () => {
   }, [setting]);
 
   useEffect(() => {
-    if (formData.smtp_authentication.value === '') {
+    if (!/true|false/.test(formData.smtp_authentication.value)) {
       return;
     }
     if (formData.smtp_authentication.value) {

ui/src/pages/Admin/index.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useMatch } from 'react-router-dom';
 
 import { cloneDeep } from 'lodash';
 
@@ -23,7 +23,9 @@ const g10Paths = [
 ];
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_title' });
-  const { pathname } = useLocation();
+  const pathMatch = useMatch('/admin/:path');
+  const curPath = pathMatch?.params.path || 'dashboard';
+
   const interfaceLang = interfaceStore((_) => _.interface.language);
   const { data: configurablePlugins, mutate: updateConfigurablePlugins } =
     useQueryPlugins({
@@ -78,7 +80,7 @@ const Index: FC = () => {
           <Col lg={2}>
             <AccordionNav menus={menus} path="/admin/" />
           </Col>
-          <Col lg={g10Paths.find((v) => pathname.includes(v)) ? 10 : 6}>
+          <Col lg={g10Paths.find((v) => curPath.includes(v)) ? 10 : 6}>
             <Outlet />
           </Col>
         </Row>