Refactor "org teams" page and help new users to "add member" to an org (#37051)

* Fix #22054
* Replace #34593, #27800
* And refactor legacy code, fix various problems

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/comp/ConfirmModal.ts

@@ -2,6 +2,7 @@ import {svg} from '../../svg.ts';
 import {html, htmlRaw} from '../../utils/html.ts';
 import {createElementFromHTML} from '../../utils/dom.ts';
 import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {hideToastsAll} from '../../modules/toast.ts';
 
 const {i18n} = window.config;
 
@@ -27,6 +28,9 @@ export function createConfirmModal({header = '', content = '', confirmButtonColo
 
 export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
   if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
+  // hide existing toasts when we need to show a new modal, otherwise the toasts only interfere the UI
+  // it's fine to do so because the modal is triggered by user's explicit action, so the user should already have read the toast messages
+  hideToastsAll();
   return new Promise((resolve) => {
     const $modal = fomanticQuery(modal);
     $modal.modal({