fix: form optional translation field unification

i18n/en_US.yaml

@@ -324,7 +324,7 @@ ui:
             msg:
               empty: Code cannot be empty.
           language:
-            label: Language (optional)
+            label: Language
             placeholder: Automatic detection
       btn_cancel: Cancel
       btn_confirm: Add
@@ -360,7 +360,7 @@ ui:
               only_image: Only image files are allowed.
               max_size: File size cannot exceed 4MB.
           desc:
-            label: Description (optional)
+            label: Description
       tab_url: Image URL
       form_url:
         fields:
@@ -369,7 +369,7 @@ ui:
             msg:
               empty: Image URL cannot be empty.
           name:
-            label: Description (optional)
+            label: Description
       btn_cancel: Cancel
       btn_confirm: Add
       uploading: Uploading
@@ -389,7 +389,7 @@ ui:
             msg:
               empty: URL cannot be empty.
           name:
-            label: Description (optional)
+            label: Description
       btn_cancel: Cancel
       btn_confirm: Add
     ordered_list:
@@ -437,7 +437,7 @@ ui:
             range: URL slug up to 35 characters.
             character: URL slug contains unallowed character set.
         desc:
-          label: Description (optional)
+          label: Description
     btn_cancel: Cancel
     btn_submit: Submit
   tag_info:
@@ -705,13 +705,13 @@ ui:
         default: System
         msg: Please upload an avatar
       bio:
-        label: About Me (optional)
+        label: About Me
       website:
-        label: Website (optional)
+        label: Website
         placeholder: "https://example.com"
         msg: Website incorrect format
       location:
-        label: Location (optional)
+        label: Location
         placeholder: "City, Country"
     notification:
       heading: Notifications
@@ -1208,11 +1208,11 @@ ui:
         validate: Please enter a valid URL.
         text: The address of your site.
       short_desc:
-        label: Short Site Description (optional)
+        label: Short Site Description
         msg: Short site description cannot be empty.
         text: "Short description, as used in the title tag on homepage."
       desc:
-        label: Site Description (optional)
+        label: Site Description
         msg: Site description cannot be empty.
         text: "Describe this site in one sentence, as used in the meta description tag."
       contact_email:
@@ -1222,14 +1222,6 @@ ui:
         text: Email address of key contact responsible for this site.
     interface:
       page_title: Interface
-      logo:
-        label: Logo (optional)
-        msg: Site logo cannot be empty.
-        text: You can upload your image or <1>reset</1> it to the site title text.
-      theme:
-        label: Theme
-        msg: Theme cannot be empty.
-        text: Select an existing theme.
       language:
         label: Interface Language
         msg: Interface language cannot be empty.
@@ -1281,18 +1273,18 @@ ui:
     branding:
       page_title: Branding
       logo:
-        label: Logo (optional)
+        label: Logo
         msg: Logo cannot be empty.
         text: The logo image at the top left of your site. Use a wide rectangular image with a height of 56 and an aspect ratio greater than 3:1. If left blank, the site title text will be shown.
       mobile_logo:
-        label: Mobile Logo (optional)
+        label: Mobile Logo
         text: The logo used on mobile version of your site. Use a wide rectangular image with a height of 56. If left blank, the image from the "logo" setting will be used.
       square_icon:
-        label: Square Icon (optional)
+        label: Square Icon
         msg: Square icon cannot be empty.
         text: Image used as the base for metadata icons. Should ideally be larger than 512x512.
       favicon:
-        label: Favicon (optional)
+        label: Favicon
         text: A favicon for your site. To work correctly over a CDN it must be a png. Will be resized to 32x32. If left blank, "square icon" will be used.
     legal:
       page_title: Legal
@@ -1359,6 +1351,7 @@ ui:
         text: Only logged in users can access this community.
 
   form:
+    optional: (optional)
     empty: cannot be empty
     invalid: is invalid
     btn_submit: Save

ui/src/components/Editor/ToolBars/code.tsx

@@ -239,7 +239,12 @@ const Code: FC<IEditorContext> = ({ editor, wrapText }) => {
             )}
           </Form.Group>
           <Form.Group controlId="editor.codeLanguageType" className="mb-3">
-            <Form.Label>{t('code.form.fields.language.label')}</Form.Label>
+            <Form.Label>{`${t('code.form.fields.language.label')} ${t(
+              'optional',
+              {
+                keyPrefix: 'form',
+              },
+            )}`}</Form.Label>
             <Select
               options={codeLanguageType}
               value={lang}

ui/src/components/Editor/ToolBars/image.tsx

@@ -251,7 +251,12 @@ const Image: FC<IEditorContext> = ({ editor }) => {
 
                 <Form.Group controlId="editor.imgDescription" className="mb-3">
                   <Form.Label>
-                    {t('image.form_image.fields.desc.label')}
+                    {`${t('image.form_image.fields.desc.label')} ${t(
+                      'optional',
+                      {
+                        keyPrefix: 'form',
+                      },
+                    )}`}
                   </Form.Label>
                   <Form.Control
                     type="text"
@@ -285,7 +290,9 @@ const Image: FC<IEditorContext> = ({ editor }) => {
 
                 <Form.Group controlId="editor.imgName" className="mb-3">
                   <Form.Label>
-                    {t('image.form_url.fields.name.label')}
+                    {`${t('image.form_url.fields.name.label')} ${t('optional', {
+                      keyPrefix: 'form',
+                    })}`}
                   </Form.Label>
                   <Form.Control
                     type="text"

ui/src/components/Editor/ToolBars/link.tsx

@@ -88,7 +88,12 @@ const Link: FC<IEditorContext> = ({ editor }) => {
             </Form.Group>
 
             <Form.Group controlId="editor.internetSiteName" className="mb-3">
-              <Form.Label>{t('link.form.fields.name.label')}</Form.Label>
+              <Form.Label>{`${t('link.form.fields.name.label')} ${t(
+                'optional',
+                {
+                  keyPrefix: 'form',
+                },
+              )}`}</Form.Label>
               <Form.Control
                 type="text"
                 value={name.value}

ui/src/hooks/useTagModal/index.tsx

@@ -225,7 +225,9 @@ const useTagModal = (props: IProps = {}) => {
               </Form.Control.Feedback>
             </Form.Group>
             <Form.Group controlId="description">
-              <Form.Label>{t('form.fields.desc.label')}</Form.Label>
+              <Form.Label>{`${t('form.fields.desc.label')} ${t('optional', {
+                keyPrefix: 'form',
+              })}`}</Form.Label>
               <Form.Control
                 className="font-monospace"
                 value={formData.description.value}

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

@@ -44,22 +44,28 @@ const Index: FC = () => {
     properties: {
       logo: {
         type: 'string',
-        title: t('logo.label'),
+        title: `${t('logo.label')} ${t('optional', { keyPrefix: 'form' })}`,
         description: t('logo.text'),
       },
       mobile_logo: {
         type: 'string',
-        title: t('mobile_logo.label'),
+        title: `${t('mobile_logo.label')} ${t('optional', {
+          keyPrefix: 'form',
+        })}`,
         description: t('mobile_logo.text'),
       },
       square_icon: {
         type: 'string',
-        title: t('square_icon.label'),
+        title: `${t('square_icon.label')} ${t('optional', {
+          keyPrefix: 'form',
+        })}`,
         description: t('square_icon.text'),
       },
       favicon: {
         type: 'string',
-        title: t('favicon.label'),
+        title: `${t('favicon.label')} ${t('optional', {
+          keyPrefix: 'form',
+        })}`,
         description: t('favicon.text'),
       },
     },

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

@@ -33,12 +33,16 @@ const General: FC = () => {
       },
       short_description: {
         type: 'string',
-        title: t('short_desc.label'),
+        title: `${t('short_desc.label')} ${t('optional', {
+          keyPrefix: 'form',
+        })}`,
         description: t('short_desc.text'),
       },
       description: {
         type: 'string',
-        title: t('desc.label'),
+        title: `${t('desc.label')} ${t('optional', {
+          keyPrefix: 'form',
+        })}`,
         description: t('desc.text'),
       },
       contact_email: {

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -384,7 +384,11 @@ const Index: React.FC = () => {
         </Form.Group>
 
         <Form.Group controlId="bio" className="mb-3">
-          <Form.Label>{t('bio.label')}</Form.Label>
+          <Form.Label>
+            {`${t('bio.label')} ${t('optional', {
+              keyPrefix: 'form',
+            })}`}
+          </Form.Label>
           <Form.Control
             className="font-monospace"
             required
@@ -408,7 +412,9 @@ const Index: React.FC = () => {
         </Form.Group>
 
         <Form.Group controlId="website" className="mb-3">
-          <Form.Label>{t('website.label')}</Form.Label>
+          <Form.Label>{`${t('website.label')} ${t('optional', {
+            keyPrefix: 'form',
+          })}`}</Form.Label>
           <Form.Control
             required
             type="url"
@@ -431,7 +437,9 @@ const Index: React.FC = () => {
         </Form.Group>
 
         <Form.Group controlId="email" className="mb-3">
-          <Form.Label>{t('location.label')}</Form.Label>
+          <Form.Label>{`${t('location.label')} ${t('optional', {
+            keyPrefix: 'form',
+          })}`}</Form.Label>
           <Form.Control
             required
             type="text"