Merge branch 'fix-undefined-bug' into 'develop'

Fix multiple bugs

See merge request soapbox-pub/soapbox!2142

app/soapbox/actions/notifications.ts

@@ -107,7 +107,10 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
 
     // Desktop notifications
     try {
-      if (showAlert && !filtered) {
+      // eslint-disable-next-line compat/compat
+      const isNotificationsEnabled = window.Notification?.permission === 'granted';
+
+      if (showAlert && !filtered && isNotificationsEnabled) {
         const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
         const body = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : unescapeHTML(notification.status ? notification.status.content : '');
 

app/soapbox/components/ui/form-group/form-group.tsx

@@ -27,7 +27,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
   if (React.isValidElement(inputChildren[0])) {
     firstChild = React.cloneElement(
       inputChildren[0],
-      { id: formFieldId, hasError },
+      { id: formFieldId },
     );
   }
   const isCheckboxFormGroup = firstChild?.type === Checkbox;

app/soapbox/components/ui/input/input.tsx

@@ -33,8 +33,6 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   value?: string | number,
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
-  /** Whether to display the input in red. */
-  hasError?: boolean,
   /** An element to display as prefix to input. Cannot be used with icon. */
   prepend?: React.ReactElement,
   /** An element to display as suffix to input. Cannot be used with password type. */
@@ -48,7 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, theme = 'normal', ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -91,7 +89,6 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
             'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
-            'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}

app/soapbox/features/auth-login/components/registration-form.tsx

@@ -238,7 +238,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
             pattern='^[a-zA-Z\d_-]+'
             onChange={onUsernameChange}
             value={params.get('username', '')}
-            hasError={usernameUnavailable}
             required
           />
         </FormGroup>

app/soapbox/features/soapbox-config/index.tsx

@@ -39,6 +39,7 @@ const messages = defineMessages({
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
   rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
   rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
+  rawJSONInvalid: { id: 'soapbox_config.raw_json_invalid', defaultMessage: 'is invalid' },
   verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
   displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
   greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
@@ -394,11 +395,13 @@ const SoapboxConfig: React.FC = () => {
             expanded={jsonEditorExpanded}
             onToggle={toggleJSONEditor}
           >
-            <FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
+            <FormGroup
+              hintText={intl.formatMessage(messages.rawJSONHint)}
+              errors={jsonValid ? undefined : [intl.formatMessage(messages.rawJSONInvalid)]}
+            >
               <Textarea
                 value={rawJSON}
                 onChange={handleEditJSON}
-                hasError={!jsonValid}
                 isCodeEditor
                 rows={12}
               />

app/soapbox/features/ui/components/link-footer.tsx

@@ -75,7 +75,7 @@ const LinkFooter: React.FC = (): JSX.Element => {
             defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
             values={{
               code_name: sourceCode.displayName,
-              code_link: <Text theme='subtle'><a className='underline' href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a></Text>,
+              code_link: <Text theme='subtle' tag='span'><a className='underline' href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a></Text>,
               code_version: sourceCode.version,
             }}
           />

app/soapbox/features/ui/index.tsx

@@ -472,7 +472,7 @@ const UI: React.FC = ({ children }) => {
       navigator.serviceWorker.addEventListener('message', handleServiceWorkerPostMessage);
     }
 
-    if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
+    if (window.Notification?.permission === 'default') {
       window.setTimeout(() => Notification.requestPermission(), 120 * 1000);
     }
 

app/soapbox/locales/en.json

@@ -1196,6 +1196,7 @@
   "soapbox_config.promo_panel.meta_fields.label_placeholder": "Label",
   "soapbox_config.promo_panel.meta_fields.url_placeholder": "URL",
   "soapbox_config.raw_json_hint": "Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click Save to apply your changes.",
+  "soapbox_config.raw_json_invalid": "is invalid",
   "soapbox_config.raw_json_label": "Advanced: Edit raw JSON data",
   "soapbox_config.save": "Save",
   "soapbox_config.saved": "Soapbox config saved!",