Merge branch 'main' into main

web_src/css/index.css

@@ -37,7 +37,6 @@
 
 @import "./shared/flex-list.css";
 @import "./shared/milestone.css";
-@import "./shared/repoorg.css";
 @import "./shared/settings.css";
 
 @import "./features/dropzone.css";

web_src/css/org.css

@@ -1,23 +1,3 @@
-.organization .head .ui.header .ui.right {
-  margin-top: 5px;
-}
-
-.page-content.organization .org-avatar {
-  margin-right: 15px;
-}
-
-.page-content.organization #org-info .ui.header {
-  display: flex;
-  align-items: center;
-  font-size: 36px;
-  margin-bottom: 0;
-}
-
-.page-content.organization #org-info .desc {
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-
 .page-content.organization .team-item-box > .team-item-header {
   min-height: 50px; /* the header sometimes contains a mini button, sometimes not, so we set a min-height to make sure the layout is consistent */
 }
@@ -30,20 +10,3 @@
   white-space: nowrap;
   color: var(--color-text-light-3);
 }
-
-.organization.invite .ui.avatar {
-  width: 100%;
-  height: 100%;
-}
-
-.organization.teams .detail .item {
-  padding: 10px 15px;
-}
-
-.organization.teams .detail .item:not(:last-child) {
-  border-bottom: 1px solid var(--color-secondary);
-}
-
-.org-team-navbar .active.item {
-  background: var(--color-box-body) !important;
-}

web_src/css/shared/repoorg.css

@@ -1,18 +0,0 @@
-.repository .head .ui.header .text,
-.organization .head .ui.header .text {
-  vertical-align: middle;
-  font-size: 1.6rem;
-  margin-left: 15px;
-}
-
-.repository .ui.tabs.container,
-.organization .ui.tabs.container {
-  margin-top: 14px;
-  margin-bottom: 0;
-}
-
-.repository .head .ui.header .org-visibility .label,
-.organization .head .ui.header .org-visibility .label {
-  margin-left: 5px;
-  margin-top: 5px;
-}

web_src/js/components/PullRequestMergeForm.vue

@@ -3,9 +3,11 @@ import {computed, onMounted, onUnmounted, shallowRef, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {toggleElem} from '../utils/dom.ts';
 
-const {pageData} = window.config;
+const props = defineProps<{
+  mergeFormProps: any, // TODO: this is a huge object, need to be refactored in the future
+}>();
 
-const mergeForm = pageData.pullRequestMergeForm!;
+const mergeForm = props.mergeFormProps;
 
 const mergeTitleFieldValue = shallowRef('');
 const mergeMessageFieldValue = shallowRef('');

web_src/js/features/repo-issue-pull.ts

@@ -63,27 +63,10 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
   const el = box.querySelector('#pull-request-merge-form');
   if (!el) return;
 
+  const data = JSON.parse(el.getAttribute('data-merge-form-props')!);
   const {default: PullRequestMergeForm} = await import('../components/PullRequestMergeForm.vue');
-  const view = createApp(PullRequestMergeForm);
-  view.mount(el);
-}
-
-function executeScripts(elem: Element) {
-  // find any existing nonce value from the current page and apply it to the new script
-  const scriptNonce = document.querySelector('script[nonce]')!.getAttribute('nonce')!;
-  for (const oldScript of elem.querySelectorAll('script')) {
-    // TODO: that's the only way to load the data for the merge form. In the future
-    //  we need to completely decouple the page data and embedded script
-    // eslint-disable-next-line github/no-dynamic-script-tag
-    const newScript = document.createElement('script');
-    for (const attr of oldScript.attributes) {
-      if (attr.name === 'type' && attr.value === 'module') continue;
-      newScript.setAttribute(attr.name, attr.value);
-    }
-    newScript.setAttribute('nonce', scriptNonce);
-    newScript.text = oldScript.text;
-    document.body.append(newScript);
-  }
+  const view = createApp(PullRequestMergeForm, {mergeFormProps: data});
+  view.mount(el); // TODO: can unmount when reloaded?
 }
 
 export function initRepoPullMergeBox(el: HTMLElement) {
@@ -124,7 +107,6 @@ export function initRepoPullMergeBox(el: HTMLElement) {
     }
     document.removeEventListener('visibilitychange', onVisibilityChange);
     const newElem = createElementFromHTML(await resp.text());
-    executeScripts(newElem);
     el.replaceWith(newElem);
   };
 

web_src/js/globals.d.ts

@@ -53,6 +53,7 @@ interface Window {
     enableTimeTracking: boolean,
     mermaidMaxSourceCharacters: number,
     i18n: Record<string, string>,
+    frontendInited: boolean,
   },
   $: JQueryStatic,
   jQuery: JQueryStatic,

web_src/js/index.ts

@@ -171,3 +171,5 @@ const initDur = performance.now() - initStartTime;
 if (initDur > 500) {
   console.error(`slow init functions took ${initDur.toFixed(3)}ms`);
 }
+
+window.config.frontendInited = true;

web_src/js/vitest.setup.ts

@@ -12,6 +12,7 @@ window.config = {
   enableTimeTracking: true,
   mermaidMaxSourceCharacters: 5000,
   i18n: {},
+  frontendInited: false,
 };
 
 window.testModules = {};