Whether it's due to corrupted content, missing tags, caching issues, or other assorted reasons, post content can't be rendered. Currently, this results in an exception that crashes the entire forum and is hard to debug. Instead, we should log the error and show an indicator message that rendering has failed.
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: David Wheatley <hi@davwheat.dev>
https://github.com/flarum/core/pull/3068 accidentially broke the user discussions page, as up until this commit, `DiscussionListState`didn't accept any filter params.
* Add extra error handling for avatar file size & large payload
* Change error message to return 'upload failure' on most errors instead of 'no file' message
Extension admin pages are currently not working because of a JS error.
The settings record is never defined but directly used, it used to be defined as an empty object in oninit.
* Rewrite AdminPage.js into Typescript
* Export more interfaces and types
* Use Stream type
* Update js/src/admin/components/AdminPage.tsx
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* Move `HTMLInputTypes` type to global declarations
* Add missing app import
* Export options interface
* Remove unused method
* Add random element ID generator
* Add attrs for Page component
Full rewrite needed later
* Provide correct attrs
* Add missing a11y attributes for help text and labels
* Update TSDoc comment
* Allow Children to be passed for label/help text
* Extract setting types to arrays
* Make Page class abstract; fix incorrect Component generic call
* Mark AdminPage as abstract
* Mark `content` as abstract
* Revert "Move `HTMLInputTypes` type to global declarations"
This reverts commit c900cb3f6d.
* Restore TSDoc on HTMLInputTypes type
* Fix typo
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
* Rename Button file
* Convert to TS
* Add debug warning helper
Fires `console.warn`, but only when the forum is in debug mode. Can help to inform extension developers of possible issues with their JS code.
* Simplify button content template
* Rewrite Button component
- Prefer `aria-label` over `title`
- Don't duplicate button content to `title` attribute
- Warn in debug mode if button has no accessible content
- Use modern JS/TS syntax (`||=`, spread, etc)
* Update to work with new Button component
* Update warning
Co-authored-by: Matt Kilgore <tankerkiller125@gmail.com>
* Fire warning in `oncreate`
* Format
* Make Button have extensible Attributes type via generics
* Update args type
* Update js/src/common/components/Button.tsx
Co-authored-by: Matt Kilgore <tankerkiller125@gmail.com>
Co-authored-by: David Sevilla Martin <me@datitisev.me>
Co-authored-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
* Add extra feature to a11y focusring mixin
* Add visually hidden CSS class and mixin
* Visually hide checkboxes (keep in focus/a11y tree)
* Place checkbox focus ring around display element
* Improve mobile checkbox/switch accessibility
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr
Co-authored-by: David Wheatley <hi@davwheat.dev>
* Add `Post-footer--empty` class if the post footer contains no items
* Hide post footer when it has class `Post-footer--empty`
* Swap to `:empty` pseudoselector
* Prefer ternary operator
* Fix typo
In dd8323ee36, insertText was modified from the original to work with reply mentioning. This was done due to a misunderstanding of the API: the selection range isn't the selection to replace, but rather the final selection state after replacing the *current* selection with the text. This commit restores the original, correct implementation of insertText and instead adjusts the `insertBetween`method of BasicEditorDriver to set selection state before executing `insertText`.
Fixes https://github.com/flarum/core/issues/2877
The textarea in the CustomFooterModal was much larger than in the other appearance page modals, and did not use a monospaced font. Turns out the other 2 were explicitly specified in the less. This commit adds a class that can be applied to all these modals for simpler maintenance.
Fixes https://github.com/flarum/core/issues/2865
In b2d053f686, I tried to be clever and create a new KeyboardNavigatable object as a return value for `when`. My approach to cloning was incorrect, and caused the util to break entirely.
My original intent for having this "clone"-based behavior is that a single KeyboardNavigatable instance could be created with multiple listeners, and then "cloned" like this with different "activators" registered via "then" calls. In hindsight, this change introduces more issues than it solves: outside of just not working, the cloned "KeyboardNavigatable" instances have shared internal state (the set of callbacks), and each has write access to this internal state. This is a recipe for unpredictable behavior and confusing bugs, so best to keep things simple for now, and maybe introduce more functional behavior in later releases.
Fixes https://github.com/flarum/QualityAssurance/issues/25
This fixes an error where an empty notification list wouldn't show the "empty" text.
It also simplifies flow of logic and breaks the component up a bit for readability.
This naming is clearer as to the intended effect. Changes include:
- A migration to rename all permissions
- Updating the seed migration to use the original naming from the start
- Replacing usage of the old names with new names in code
- Throwing warnings when the old names are used.
- Convert KeyboardNavigatable to TypeScript, as that is used internally here.
- Convert search sources to TypeScript
- Convert Search component to TypeScript
- Convert Search States to Typescript
- Add `getInitialSearch` to `SearchState`
- Fix search disappearing on page reload / direct link
- Change index files to ts
- Remove deprecated EditUserModal from forum compat
- Remove b14-specific error
- Remove transChoice method (ICU should be used instead)
- Translator to TypeScript
- Small JS => TS cleanup
* Trivial js => ts change
Co-authored-by: David Wheatley <hi@davwheat.dev>
* Add Tooltip component to common
Will be used to provide backwards compatibility when we switch to CSS tooltips.
All other methods of creating tooltips are deprecated and this component-based method should be used instead.
* Modify direct child instead of using container element
Instead of using a container to house the tooltip, we'll now modify the
first direct child of the Tooltip component.
The Tooltip component will ensure that:
- children are passed to it
- only one child is present
- that child is an actual HTML Element and not a text node, or similar
- that child is currently present in the DOM
Only after all of the above are satisfied, will the tooltip be created
on that element. We store a reference to the DOM node that the tooltip
should be created on, then use this to perform tooltip actions via
jQuery. If this element gets changes (e.g. the tooltip content is
updated to another element) then the tooltip will be recreated.
If any of the first 3 requirements are not satisfied, an error will
be thrown to alert the developer to their misuse of this component.
To make this work, we do need to overwrite the title attribute of
the element with the tooltip, but this is the only solution other than
specifying `title` as an option when making the tooltip, but this is
not accessible by screenreaders unless they simulate a hover on the
element.
* Add warning about component overwriting `title` attr
* Update previous uses of Tooltip component
Frontend extenders exist in a weird state of limbo, where they are technically defined, but aren't used or tested at all. In da5db714c2, we shifted from passing `extension.extend` to `flattenDeep` to calling `flat` on `extension.extend`. If an extension doesn't define extenders (as is the case for most extensions), the change breaks the forum. All we do here is add a null check.
* Remove `lodash-es` dependency
* Replace `escapeRegExp` with home-made util
* Replace `throttle` with `throttle-debounce` library
* Use native browser methods for `deepFlatten`
We need a polyfill for iOS 11 and below. I think using a native method with this polyfill is better than having our own function instead, even if the bundle size is ~150B more.
* Save a few bytes in `escapeRegExp`
* Fix typo in comment
* Undo import re-organisation
* Use spread instead of slice
* Use smaller Array.flat polyfill from MDN
* Export new utils in `compat.js`
* Commit initial WIP code
* Fix squashed grid on mobile
* Add pagination support; rename to userList
* Improve grid sizing
* Improve grid row shading
* Move EditUserModal to common
* Add link to profile page in grid
* Use Less styling vars
* Move EditUserModal translations to lib
* Add edit user button to grid
* Fix incorrect profile link priority
* Update profile link translation key
* Add priorities to other columns
* Add group badges to grid
* Add username to profile link tooltip
* Organise imports
* Use variable for header border bottom color
* Fix broken export
* Add total user count to API payload's metadata
* Add new metadata to ApiPayload type
* Implement correct page number
* Remove debug code
* Use function to get the total pages
This allows us to use the raw count elsewhere in the component (pssst... check the next commit!)
* Center profile link in column
* Add profile link header
* Show total users above table
* Use ItemList's itemName property for column data attributes
* Add user email column, hidden by default
This column is hidden by default using a placeholder email and blur filter. These are then removed when the visibility toggle is pressed.
This prevents any over-the-shoulder accidental data leakage, as emails are classed as PII under GDPR.
* Fix incorrect tooltip translation keys
* Add extra padding between email and visibility toggle button
* Prevent selection of blurred email
* Fix incorrect icon state for email toggle
* Update API response type to include metadata (for now)
* Increase number of users per page to 50
* Update compat files with new locations
* Format
* Add @deprecated notices for forum compat export
* Use AdminPayload for user count instead of supplying as REST API metadata
* Make nav look less squashed using bottom margin
* Suppress TS warning
* StyleCI fixes
* Fix TS error
* Update based on review comments
* Rename user list -> users
* Rename internal instances of user_list to users
* Fix formatting
* Use CSS custom properties for the table column count
* Use .Button--icon instead of custom style
* Make fake email more realistic length
* Add a11y attributes
* Use padding bottom instead of margin bottom for page spacing
* Make compatible with new CSS LoadingIndicator
I won't let it break here! :P
* Integrate profile link into username column
* Don't force columns to be 300px
This made the grid look very bloated and intimidating -- lets instead increase the padding between items and make it only the width it needs to be.
* Center edit user button in column
* Increase spacing between email and visibility toggle button
* Rename `statistics` to `modelStatistics` in Admin payload
This prevents any possible conflicts with core and `flarum/statistics`. We might want to consider migrating the stats extension to extend this object in the future.
* Update comments, fix TS error
* Various translation key changes
* Change gmail.com -> example.com
* Stretch 'edit user' button to entire cell size
* Update translations
* Is the YAML formatted right this time? 🙈
* Remove email placeholder
Fixes an issue where the table would jump if an email was unhidden that was longer than the placeholder.
* Re-order lib translations
* Clicking blurred email now unblurs
* Correct header class
* Improve edit user button centring
* Improve vertical row item centering
* Fix incorrect column length in aria attribute
* Use .Button--text!
* Update Loading Indicator
- Fix mistake in LoadingIndicator Less
- Middle align the loading indicator when inline
- Fix Loading Indicator not correctly accepting container class names
- Add inline and block attributes
* Fix loading indicator in composer
* Fix loading indicator on notification list
* Fix loading indicator on discussion page
* Fix loading indicator on button
* Update more uses of loading indicator
* Fix loading indicator in Search box
* Fix AvatarEditor loading spinner
* Set default spinner props
* Replace "tiny" with "small" in Less
* Improve spinner vertical centring in buttons
* Reduce size specificity
* Use single attribute for block/inline
* Use new display attribute
* Use classes for different sizes
* Use `display=block` by default
Identified as a potential issue in https://github.com/flarum/core/pull/2650
When typing, the keyboard generally obstructs half the screen. However, when the keyboard is closed, search results don't expand to take up full space.
* Bump dependencies and add missing typing libraries
* Fix expose-loader breaking changes
* Expose jQuery using its own typings instead of ours
* Extend jQuery typings with our own custom $.fn helpers
* Use jQuery typings for Component's `this.$` attribute
* Format webpack config file
* Use Spin.js 3.1.0
Implement custom accessible dropdown toggle labels for forum components
Making the a11y label more specific to the specific action it performs is critical for good UX with assistive technologies.
When the composer is opened while scrolled to the absolute bottom of the page (via hitting the "reply" button, `window.scrollTop` has a value of ~600px greater than it should. This doesn't seem to be the composer element's height (which appears to be 0 at the time). This incorrect scrollTop positions the composer off screen, which causes Safari to freak out and shake the element violently as it tries to scroll to the cursor (which is now off screen).
We can get around this by calculating scrollTop ourselves.
Fixes https://github.com/flarum/core/issues/2683
