We had our input elements for stream settings inside li tags
and their alignment was managed using CSS. We move away from
this HTML structure to have inputs and labels inside divs for
two reasons. First is that if we want to later refactor the HTML
to have some different design, then having them inside `ul`
requires complex changes to CSS and eventually we would have
to move away from using `li`s for the part that is changed to
have a different design. Second `li`s are generally not used
to organize input elements.
Above is an explanation of why this change is a preparatory
commit for shifting to have a tabbed design in the stream edit page.
So following changes are done to have a more consistent
HTML structure in stream types modal:
* Added modal-body and removed the non-standard
usage of the unordered list for settings header and inputs.
* Updated relevant CSS rules to have the same design during refactor.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
We had a lot of functions and click handlers that were only
involved with user profile modal and were not related to
popovers logic in any way. So we extract these functions
into a separate module `user_profile.js`.
It can happen that reactions are re-rendered while we are
in the process of showing tooltip for them. In that case,
we setup MutationObserver for an element not present in DOM
which results in weird behaviour. We avoid it by checking the
element again before setting up MutationObserver for it.
See https://chat.zulip.org/#narrow/stream/6-frontend/topic
/tippy.20bug/near/1206316 for details on the issue.
We used name parameter in tab component callback to handle our
custom logic when switching tabs in profile modal. Using name
here invites a posible bug as these name are tagged for
translation. So to avoid this we switch to use key (html id
for these tabs) for this as they are always constant.
We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
We show stream tab before user-group tab but in the template
this order was reversed that created confusion while editing
any one of them. So we correct their order in the template
to reflect the order we show in UI.
This refactor changes two things - position of the modal, as it
is moved up by some amount because of using confirm_dialog and
also loading spinner of confirm_dialog widget is used.
We turn off the eslint no-use-before-define for TypeScript files
because it does not work correctly for types. There is already
a typescript-eslint version of it that is enabled for TS.
We also update the error handler on window to use instanceof check
for ErrorEvent instead of checking the error property.
We also update the tippy.js mock in tests to expect a element
(zjquery FakeElement function) instead of zjquery instance, and get
rid of setting _tippy property itself to a noop function.
The plan for type annotating the page_params is to set it to
Record<string, unknown> for now and then annotate individual
properties on it as we use it in typescript modules.
We use a simpler approach here which is to let it be undefined if
nothing was passed and use that in the if condition. This has two
benefits. There is no edge case where the condition will evaluate to
false if 0 was passed and it is easier to type annotate.
The ‘t’ helper operates on text strings, not HTML. The ‘&’ works
fine, and is correctly escaped for output by Handlebars, like any text
string interpolated with ‘{{}}’.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Moved the `delete_message` user-confirmation modal to
the `confirm_dialog` folder and renamed the modal to `confirm_delete_message.hbs`
to follow the common naming convention.
Moved `revoke_invite` user-confirmation modal to the
`confirm_dialog` folder and renamed the modal to
`confirm_revoke_invite.hbs` to follow the common naming convention.
Moved `resend_invite` user-confirmation modal to the
`confirm_dialog` folder and renamed the modal to
to `confirm_resend_invite.hbs` to follow the common naming convention.
Moved `emoji_settings_warning` modal to the `confirm_dialog`
folder and renamed the modal to `confirm_emoji_settings_warning.hbs`
to follow the common naming convention.
Moved `deactivation_user` modal to the `confirm_dialog`
folder within `/static/templates` and renamed the modal to
to `confirm_deactivate_user.hbs` to follow the
common naming convention.
Moved `deactivation_stream` user-confirmation modal to
the `confirm_dialog` folder and renamed the modal to
`confirm_deactivate_stream.hbs` to follow the common naming convention.
Moved `deactivate_realm` modal to the `confirm_dialog` folder
within `/static/templates` and renamed the modal to
`confirm_deactivate_realm.hbs` to follow the naming convention.
Moved `delete_topic` modal to `confirm_dialog` folder and
renamed the modal to `confirm_delete_topic.hbs`
to follow the confirm_dialog naming conventions.
Moved `subscription_invites_warning` modal to `confirm_dialog`
folder and renamed the modal to `confirm_subscription_invites_warning.hbs`
to follow the naming convention.
Moved `unsubscribe_private_stream` modal to the newly created
`confirm_dialog` folder found within `static/templates`.
Later renamed the modal to `confirm_unsubscribe_private_stream.hbs`
to follow a common naming convention.
The user deactivate button is also present in the "Deactivated users"
tab, a sibling element of the current modal_parent, #admin-user-list.
Adding the confirm_dialog modal to #admin-user-list won't have any
effect in the "Deactivated users" tab.
Move it one level up, i.e. to the parent element of #admin-user-list
and #admin-deactivated-users-list.
Fixes#18928.
m-e-l-u-h-a-n
Riken Shah
Aman Agrawal
Anders Kaseorg
sahil839
Priyank Patel
Tim Abbott
aryanshridhar
Ganesh Pawar