Using Javascript to read and recalculate sizing is prone to causing 'forced reflows', which are very expensive, especially on slower devices. This PR refactors the slide-in menus so that all of the height calculation is done using CSS. This is made possible by the new dvh (dynamic view height) units and env(safe-area-inset-bottom), both of which are supported on all of our target browsers.
In tests on a moto g50, on a sidebar with 16 categories, 15 tags, and 2 chat channels, this improves the sidebar opening time by around 50ms (6%).
Since 359dc1c532, support for the old user
profile navigation menu has been dropped. This commit seeks to remove
code from the client side that still relies on the `currentUser.redesigned_user_page_nav_enabled` prop.
Since 359dc1c532, support for the old user
profile navigation menu has been dropped. This commit seeks to remove
code from the client side that still relies on the `currentUser.redesigned_user_page_nav_enabled` prop.
Why this change?
Prior to this change, we placed the identifier for the tag using
CSS classes like `sidebar-section-link-<tag name>`. However, we found that it wasn't obvious
that an identifier for the tag exists since it is first buried in
the CSS classes and second there isn't a way to describe what the
identifier is. Using data attributes, it makes it more obvious that an
identifier exists and what the identifier represents.
Follow-up to 53eb49de72
Why this change?
Prior to this change, we placed the identifier for the category using
CSS classes like `sidebar-section-link-<category slug>`. However, we found that it wasn't obvious
that an identifier for the category exists since it is first buried in
the CSS classes and second there isn't a way to describe what the
identifier is. Using data attributes, it makes it more obvious that an
identifier exists and what the identifier represents.
What does this change do?
This commit the client to override the navigation menu setting
configured by the site temporarily based on the value of the
`navigation_menu` query param. The new query param replaces the old
`enable_sidebar` query param.
Why do we need this change?
The motivation here is to allow theme maintainers to quickly preview
what the site will look like with the various navigation menu site
setting.
**This PR creates a new core reusable component wraps a character counter around any input.**
The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).
It can be used for example, like so:
```hbs
<CharCounter @max="50" @value={{this.charCounterContent}}>
<textarea
placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
{{on "input" (action (mut this.charCounterContent) value="target.value")}}
class="styleguide--char-counter"></textarea>
</CharCounter>
```
**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route
As of ba3f62f576, handlebars templates are colocated with js files so the path to hbs templates referenced by this rake task is no longer valid. This commit fixes the path to hbs templates and updates a couple of files that are generated by the rake task.
Fixes "`decorateCooked` should be supplied with an `id` option to avoid memory leaks in test mode. The id will be used to ensure the decorator is only applied once." warnings
Long-term, we may aim to remove the ability to have mobile-specific component templates. But for now, this commit will allow us to colocate a component's template, while keeping the mobile-specific-override functionality for core, plugins and themes.
When installing themes using the "Install this theme component" button
on meta.discourse.org, we pass the repo name and URL via query params.
However, these stick. So if a user cancels the installation, on the
next navigation to the same route, they'll see the modal again.
This PR clears the query params of the controller when dismissing the
modal.
We often have the need to use rich HTML in dialog messages (to show lists, icons, etc.). Previously, our only option was to wrap the message in an `htmlSafe()` call. This PR adds the ability to pass a component name and model to the dialog, which means that we can write the HTML in regular Ember components.
Example, whereas previously we would do this:
```
this.dialog.deleteConfirm({
message: htmlSafe(`<li>Some text</li>`),
});
```
instead we can now do this:
```javascript
import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase";
...
this.dialog.deleteConfirm({
title: I18n.t("user.second_factor.disable_confirm"),
bodyComponent: SecondFactorConfirmPhrase,
bodyComponentModel: model,
})
```
The model passed to the component is optional and will be available as `@model` in the Handlebars template.
Previously, all plugin connector templates would be rendered using the PluginConnector classic component definition. This commit introduces three key changes:
1. PluginOutlets can be passed `@defaultGlimmer={{true}}`, which will cause all connectors to be rendered as highly-performant 'template only glimmer components'. For now, to avoid breaking backwards compatibility, this is only intended for use on newly introduced PluginOutlets.
2. Connector js files can now directly export component definitions. This allows connectors on existing outlets to start using Glimmer components (template-only, or otherwise) straight away. It also makes it much more ergonomic to introduce custom logic to outlets. `shouldRender` continues to be supported (as a static class method).
3. Outlet arguments are now made available as `@outletArgs` in classic, glimmer and template-only-glimmer connectors. In glimmer and template-only-glimmer connectors, this is the only way to access the outlet's arguments. In classic connectors, the old methods still function - `@outletArgs` exists as a path for incremental migration
Previously after uploads completed post raw would drift.
If you autocompleted text after the upload stub got replaced it would
insert in the wrong position.
The `Composer - current time` test would sometimes fail due to a
1-second difference. We don't really need per-second fidelity here, the
key thing this needs to test is that the shortcut works and adds today's
date. I have updated the test to reflect that.
When a user pauses a youtube video and scrolls up high enough to load
new posts, the video either rewinds or restarts depending on the browser.
The problem is solved by patching virtual-dom to handle element prepends
without reordering old elements.
Long-term, Discourse intends to move away from the vdom/widget implementation, so this is intended as a short-term solution. More context at https://meta.discourse.org/t/57692
Co-authored-by: David Taylor <david@taylorhq.com>
Remove the per user groups based site setting in favor of a global site setting as we want to roll the glimmer topic timeline out to anon users as well as site users.
- Add `enable_experimental_topic_timeline` site setting
- Remove `enable_experimental_topic_timeline_groups` site setting
This is an alternative way to use `RenderGlimmer` which can be more ergonomic for iterative updates of a codebase. For documentation, see `widgets/render-glimmer.js`
Previously `helper.renderGlimmer()` would always create a new wrapper element. This is required when using `RenderGlimmer` within widgets, where there is no direct access to DOM elements. However, when using within `decorateCooked`, we have the ability to pass an existing element to `{{#in-element}}` and have the glimmer content appended with no additional wrappers.
This commit makes the `renderInto` accept an existing DOM node for this 'append' behavior. The previous 'new wrapper element' behaviour is still used when a string is passed.
`helper.renderGlimmer` will return an HTML element which can be added to a post's `cooked`
Example usage:
```
import { hbs } from "ember-cli-htmlbars";
api.decorateCookedElement((cooked, helper) => {
const glimmerElement = helper.renderGlimmer(
"div.my-wrapper-class",
hbs`<DButton @icon={{@data.param}} @translatedLabel="Hello world from Glimmer Component"/>`,
{ param: "user-plus" }
);
cooked.appendChild(glimmerElement);
}, { onlyStream: true, id: "my-id" });
```
See `widgets/render-glimmer.js` for more detailed usage information.
For a user whose username has an uppercase character, the new user menu
dropdown was not defaulting to "Inbox" because the Ember router uses
lowercased usernames which were not matching with the `username`
property. Switching to `username_lower` fixes the issue.
In a private plugin, we need to show an error message containing HTML
when the Grant Admin action fails. This change introduces a new flag
(`html_message: true`) that when used will allow the dialog to render
the HTML tags in the error message correctly.
1. What is the problem here?
When a user's reviewables count changes, the changes are published via
MessageBus in a background Sidekiq job which means there is a delay before the
client receives the MessageBus message with the updated count. During
the time the reviewables count for a user has been updated and the time
when the client receives the MessageBus message with the updated count,
a user may view the reviewables list in the user menu. When that happens, the number of
reviewables in the list may be out of sync with the count shown.
2. What is the fix?
Going forward, the response for the `ReviewablesController#user_menu_list` action will include the user's reviewables count as
the `reviewables_count` attribute. This is then used by the client side
to update the user's reviewables count to ensure that the reviewables
list and count are kept in sync.
This commit updates the PluginOutlet component so that it calculates the list of connectors in an autotracking context. Accessing arguments or any other `@tracked` values during `shouldRender` means that the set of connectors will be re-calculated whenever those tracked values change.
PluginConnector remains a Classic Component, so this commit does not require any changes from plugin/theme developers.
Two shims are introduced for backwards compatibility:
- The component variable passed to shouldRender is replaced with a helperContext instance which includes all the common injections (the new PluginOutlet component instance does not have any of these)
- A custom component manager is introduced so that parentView continues to work. Using parentView was never really intended as an API, so it's now deprecated and will print a warning to the console. Users should switch to using the outlet's explicit arguments, or data from a service (e.g. the Router service).
The presence service would retry `/presence/update` requests every second (or immediately in tests) in case where server returns 429 (rate limit) errors. That could lead to infinite spamming (until user refreshed tab/tabs)
Co-authored-by: David Taylor <david@taylorhq.com>
Currently `Topic#pm_topic_count` is a count of all personal messages tagged for a given tag. As a result, any user with access to PM tags can poll a sensitive tag to determine if a new personal message has been created using that tag even if the user does not have access to the personal message. We classify this as a minor leak in sensitive information.
With this commit, `Topic#pm_topic_count` is hidden from users by default unless the `display_personal_messages_tag_counts` site setting is enabled.
A while back the definition of TL was changed but many
areas in the codebase still use the term 'Regular user'
despite it having some implicit meaning (TL2).
See 20140905055251_rename_trust_level_badges.rb
Partial username or name matches were shown together with metadata
matched results. This created a bad user experience because results
that look unrelated were before even partial or exact group matches.
