From f13ca06569c765fa189822dda41904304e9718cc Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Fri, 6 Jan 2023 11:08:38 -0500 Subject: [PATCH 01/21] Use human-readable message from the API as the default --- .../__tests__/registration.test.tsx | 25 ++++++++++++++++++- .../features/verification/registration.tsx | 8 +++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/verification/__tests__/registration.test.tsx b/app/soapbox/features/verification/__tests__/registration.test.tsx index fbde2fce3..130cefdd4 100644 --- a/app/soapbox/features/verification/__tests__/registration.test.tsx +++ b/app/soapbox/features/verification/__tests__/registration.test.tsx @@ -38,7 +38,11 @@ describe('', () => { describe('with invalid data', () => { it('handles 422 errors', async() => { __stub(mock => { - mock.onPost('/api/v1/pepe/accounts').reply(422, {}); + mock.onPost('/api/v1/pepe/accounts').reply( + 422, { + error: 'user_taken', + }, + ); }); render(); @@ -50,6 +54,25 @@ describe('', () => { expect(screen.getByTestId('toast')).toHaveTextContent(/this username has already been taken/i); }); + it('handles 422 errors with messages', async() => { + __stub(mock => { + mock.onPost('/api/v1/pepe/accounts').reply( + 422, { + error: 'user_vip', + message: 'This username is unavailable.', + }, + ); + }); + + render(); + + await waitFor(() => { + fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} }); + }); + + expect(screen.getByTestId('toast')).toHaveTextContent(/this username is unavailable/i); + }); + it('handles generic errors', async() => { __stub(mock => { mock.onPost('/api/v1/pepe/accounts').reply(500, {}); diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx index d5acb1fb2..1c23018a3 100644 --- a/app/soapbox/features/verification/registration.tsx +++ b/app/soapbox/features/verification/registration.tsx @@ -58,9 +58,11 @@ const Registration = () => { intl.formatMessage(messages.success, { siteTitle: instance.title }), ); }) - .catch((error: AxiosError) => { - if (error?.response?.status === 422) { - toast.error(intl.formatMessage(messages.usernameTaken)); + .catch((errorResponse: AxiosError<{ error: string, message: string }>) => { + const error = errorResponse.response?.data?.error; + + if (error) { + toast.error(errorResponse.response?.data?.message || intl.formatMessage(messages.usernameTaken)); } else { toast.error(intl.formatMessage(messages.error)); } From cfc03f9a3fa8980c56ca5ceea871e9d70eb8dd66 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 27 Dec 2022 10:06:28 -0500 Subject: [PATCH 02/21] Remove 'file-icon' in empty link preview --- app/soapbox/features/status/components/card.tsx | 6 +----- app/styles/components/status.scss | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index 18dd427a5..615aa5a95 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -241,11 +241,7 @@ const Card: React.FC = ({ ); } else { - embed = ( -
- -
- ); + embed = null; } return ( diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index aeab54646..b273c0e83 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -61,7 +61,7 @@ } .status-card { - @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 min-h-[150px] no-underline overflow-hidden; + @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 no-underline overflow-hidden; } a.status-card { @@ -95,10 +95,6 @@ a.status-card { stroke-width: 1px; } } - - &--empty { - flex: 0 0 80px; - } } .status-card.horizontal { From 0cc684d940db2eb9c7919ebca8ae26fecc576f2a Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Mon, 9 Jan 2023 12:49:22 -0500 Subject: [PATCH 03/21] Allow null --- app/soapbox/features/status/components/card.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index 615aa5a95..214b0f1f9 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -153,7 +153,7 @@ const Card: React.FC = ({ ); - let embed: React.ReactNode = ''; + let embed: React.ReactNode = null; const canvas = ( = ({ {thumbnail} ); - } else { - embed = null; } return ( From 197a373401078e344a1914aca6ba76d84b06e32e Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Mon, 9 Jan 2023 12:50:29 -0500 Subject: [PATCH 04/21] Add Changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ab6a4c244..231e660d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Posts: letterbox images to 19:6 again. - Status Info: moved context (repost, pinned) to improve UX. +- Posts: remove file icon from empty link previews. ### Fixed - Layout: use accent color for "floating action button" (mobile compose button). From fedb17ba24fdc006467bea44e3205e89e562846c Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 10 Jan 2023 13:17:57 -0500 Subject: [PATCH 05/21] Fix console error --- app/soapbox/features/ui/components/link-footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx index 20c04f1e6..333a01a21 100644 --- a/app/soapbox/features/ui/components/link-footer.tsx +++ b/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: {sourceCode.repository}, + code_link: {sourceCode.repository}, code_version: sourceCode.version, }} /> From 4a345d71272492cc41b78aa1584592f4aca0e7f1 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 10 Jan 2023 13:21:29 -0500 Subject: [PATCH 06/21] Ensure notifications are enabled --- app/soapbox/actions/notifications.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/soapbox/actions/notifications.ts b/app/soapbox/actions/notifications.ts index 6ac655143..e5ff47cbd 100644 --- a/app/soapbox/actions/notifications.ts +++ b/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 = typeof window.Notification !== 'undefined' && 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 : ''); From ca3f9f9d8cb4a0027014d33fbd9a15f84c9366e4 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 10 Jan 2023 13:41:32 -0500 Subject: [PATCH 07/21] Remove 'hasError' prop from FormGroup and Input --- app/soapbox/components/ui/form-group/form-group.tsx | 2 +- app/soapbox/components/ui/input/input.tsx | 5 +---- .../features/auth-login/components/registration-form.tsx | 1 - app/soapbox/features/soapbox-config/index.tsx | 7 +++++-- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx index d93ed6ea8..f2b60f6bd 100644 --- a/app/soapbox/components/ui/form-group/form-group.tsx +++ b/app/soapbox/components/ui/form-group/form-group.tsx @@ -27,7 +27,7 @@ const FormGroup: React.FC = (props) => { if (React.isValidElement(inputChildren[0])) { firstChild = React.cloneElement( inputChildren[0], - { id: formFieldId, hasError }, + { id: formFieldId }, ); } const isCheckboxFormGroup = firstChild?.type === Checkbox; diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx index 34473fc2c..9087943b6 100644 --- a/app/soapbox/components/ui/input/input.tsx +++ b/app/soapbox/components/ui/input/input.tsx @@ -33,8 +33,6 @@ interface IInput extends Pick, 'maxL value?: string | number, /** Change event handler for the input. */ onChange?: (event: React.ChangeEvent) => 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( (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( '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)} diff --git a/app/soapbox/features/auth-login/components/registration-form.tsx b/app/soapbox/features/auth-login/components/registration-form.tsx index 0f825ea8c..248f0b411 100644 --- a/app/soapbox/features/auth-login/components/registration-form.tsx +++ b/app/soapbox/features/auth-login/components/registration-form.tsx @@ -238,7 +238,6 @@ const RegistrationForm: React.FC = ({ inviteToken }) => { pattern='^[a-zA-Z\d_-]+' onChange={onUsernameChange} value={params.get('username', '')} - hasError={usernameUnavailable} required /> diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx index bb96fd6bc..ae224cf70 100644 --- a/app/soapbox/features/soapbox-config/index.tsx +++ b/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} > - +