Merge branch 'feat/ui-0.5.0' into 'test'

Feat/ui 0.5.0

See merge request opensource/answer!295

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

@@ -53,6 +53,7 @@ const General: FC = () => {
   const uiSchema: UISchema = {
     site_url: {
       'ui:options': {
+        type: 'url',
         validator: (value) => {
           let url: URL | undefined;
           try {
@@ -76,6 +77,7 @@ const General: FC = () => {
     },
     contact_email: {
       'ui:options': {
+        type: 'email',
         validator: (value) => {
           if (!Pattern.email.test(value)) {
             return t('contact_email.validate');
@@ -85,7 +87,9 @@ const General: FC = () => {
       },
     },
   };
-  const [formData, setFormData] = useState(initFormData(schema));
+  const [formData, setFormData] = useState<Type.FormDataType>(
+    initFormData(schema),
+  );
 
   const onSubmit = (evt) => {
     evt.preventDefault();

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

@@ -67,6 +67,11 @@ const Smtp: FC = () => {
     },
   };
   const uiSchema: UISchema = {
+    from_email: {
+      'ui:options': {
+        type: 'email',
+      },
+    },
     encryption: {
       'ui:widget': 'select',
     },
@@ -100,6 +105,7 @@ const Smtp: FC = () => {
     },
     smtp_port: {
       'ui:options': {
+        type: 'number',
         validator: (value) => {
           if (!/^[1-9][0-9]*$/.test(value) || Number(value) > 65535) {
             return t('smtp_port.msg');
@@ -110,6 +116,7 @@ const Smtp: FC = () => {
     },
     test_email_recipient: {
       'ui:options': {
+        type: 'email',
         validator: (value) => {
           if (value && !pattern.email.test(value)) {
             return t('test_email_recipient.msg');
@@ -162,18 +169,17 @@ const Smtp: FC = () => {
     if (!setting) {
       return;
     }
-    const formState = {};
-    Object.keys(formData).forEach((k) => {
-      let v = setting[k];
-      if (v === null || v === undefined) {
-        v = '';
-      }
-      formState[k] = { ...formData[k], value: v };
+    const formMeta = {};
+    Object.keys(setting).forEach((k) => {
+      formMeta[k] = { ...formData[k], value: setting[k] };
     });
-    setFormData(formState);
+    setFormData({ ...formData, ...formMeta });
   }, [setting]);
 
   useEffect(() => {
+    if (formData.smtp_authentication.value === '') {
+      return;
+    }
     if (formData.smtp_authentication.value) {
       setFormData({
         ...formData,
@@ -187,7 +193,7 @@ const Smtp: FC = () => {
         smtp_password: { ...formData.smtp_password, hidden: true },
       });
     }
-  }, [formData.smtp_authentication]);
+  }, [formData.smtp_authentication.value]);
 
   const handleOnChange = (data) => {
     setFormData(data);

ui/src/pages/Questions/EditAnswer/index.tsx

@@ -223,7 +223,7 @@ const Ask = () => {
                 {t('title', { keyPrefix: 'how_to_format' })}
               </Card.Header>
               <Card.Body
-                className="fmt"
+                className="fmt small"
                 dangerouslySetInnerHTML={{
                   __html: t('description', { keyPrefix: 'how_to_format' }),
                 }}

ui/src/pages/Tags/Edit/index.tsx

@@ -255,7 +255,7 @@ const Ask = () => {
                 {t('title', { keyPrefix: 'how_to_format' })}
               </Card.Header>
               <Card.Body
-                className="fmt"
+                className="fmt small"
                 dangerouslySetInnerHTML={{
                   __html: t('description', { keyPrefix: 'how_to_format' }),
                 }}