Frontend refactor: move Vue related code from index.js to components dir, and remove unused codes. (#17301)

* frontend refactor

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Update templates/base/head.tmpl

Co-authored-by: delvh <dev.lh@web.de>

* Update docs/content/doc/developers/guidelines-frontend.md

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

* fix typo

* fix typo

* refactor PageData to pageData

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Simply for the visual difference.

Co-authored-by: delvh <dev.lh@web.de>

* Revert "Apply suggestions from code review"

This reverts commit 4d78ad9b0e.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>

web_src/js/components/ActivityHeatmap.vue

@@ -70,4 +70,3 @@ export default {
   },
 };
 </script>
-<style scoped/>

web_src/js/components/RepoActivityTopAuthors.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="activity-bar-graph" ref="style" style="width:0px;height:0px"/>
-    <div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"/>
+    <div class="activity-bar-graph" ref="style" style="width: 0; height: 0;"/>
+    <div class="activity-bar-graph-alt" ref="altStyle" style="width: 0; height: 0;"/>
     <vue-bar-graph
-      :points="graphData"
+      :points="graphPoints"
       :show-x-axis="true"
       :show-y-axis="false"
       :show-values="true"
@@ -15,9 +15,9 @@
       :label-height="20"
     >
       <template #label="opt">
-        <g v-for="(author, idx) in authors" :key="author.position">
+        <g v-for="(author, idx) in graphAuthors" :key="author.position">
           <a
-            v-if="opt.bar.index === idx && author.home_link !== ''"
+            v-if="opt.bar.index === idx && author.home_link"
             :href="author.home_link"
           >
             <image
@@ -39,7 +39,7 @@
         </g>
       </template>
       <template #title="opt">
-        <tspan v-for="(author, idx) in authors" :key="author.position">
+        <tspan v-for="(author, idx) in graphAuthors" :key="author.position">
           <tspan v-if="opt.bar.index === idx">
             {{ author.name }}
           </tspan>
@@ -48,32 +48,39 @@
     </vue-bar-graph>
   </div>
 </template>
+
 <script>
 import VueBarGraph from 'vue-bar-graph';
+import {initVueApp} from './VueComponentLoader.js';
 
-export default {
+const sfc = {
   components: {VueBarGraph},
-  props: {
-    data: {type: Array, default: () => []},
-  },
   data: () => ({
     colors: {
       barColor: 'green',
       textColor: 'black',
       textAltColor: 'white',
     },
+
+    // possible keys:
+    // * avatar_link: (...)
+    // * commits: (...)
+    // * home_link: (...)
+    // * login: (...)
+    // * name: (...)
+    activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [],
   }),
   computed: {
-    graphData() {
-      return this.data.map((item) => {
+    graphPoints() {
+      return this.activityTopAuthors.map((item) => {
         return {
           value: item.commits,
           label: item.name,
         };
       });
     },
-    authors() {
-      return this.data.map((item, idx) => {
+    graphAuthors() {
+      return this.activityTopAuthors.map((item, idx) => {
         return {
           position: idx + 1,
           ...item,
@@ -81,21 +88,23 @@ export default {
       });
     },
     graphWidth() {
-      return this.data.length * 40;
+      return this.activityTopAuthors.length * 40;
     },
   },
   mounted() {
-    const st = window.getComputedStyle(this.$refs.style);
-    const stalt = window.getComputedStyle(this.$refs.altStyle);
+    const refStyle = window.getComputedStyle(this.$refs.style);
+    const refAltStyle = window.getComputedStyle(this.$refs.altStyle);
 
-    this.colors.barColor = st.backgroundColor;
-    this.colors.textColor = st.color;
-    this.colors.textAltColor = stalt.color;
-  },
-  methods: {
-    hasHomeLink(i) {
-      return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
-    },
+    this.colors.barColor = refStyle.backgroundColor;
+    this.colors.textColor = refStyle.color;
+    this.colors.textAltColor = refAltStyle.color;
   }
 };
+
+function initRepoActivityTopAuthorsChart() {
+  initVueApp('#repo-activity-top-authors-chart', sfc);
+}
+
+export default sfc;
+export {initRepoActivityTopAuthorsChart};
 </script>

web_src/js/components/RepoBranchTagDropdown.js

@@ -0,0 +1,161 @@
+import Vue from 'vue';
+
+function initRepoBranchTagDropdown(selector) {
+  $(selector).each(function () {
+    const $dropdown = $(this);
+    const $data = $dropdown.find('.data');
+    const data = {
+      items: [],
+      mode: $data.data('mode'),
+      searchTerm: '',
+      noResults: '',
+      canCreateBranch: false,
+      menuVisible: false,
+      createTag: false,
+      active: 0
+    };
+    $data.find('.item').each(function () {
+      data.items.push({
+        name: $(this).text(),
+        url: $(this).data('url'),
+        branch: $(this).hasClass('branch'),
+        tag: $(this).hasClass('tag'),
+        selected: $(this).hasClass('selected')
+      });
+    });
+    $data.remove();
+    new Vue({
+      el: this,
+      delimiters: ['${', '}'],
+      data,
+      computed: {
+        filteredItems() {
+          const items = this.items.filter((item) => {
+            return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
+              (!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
+          });
+
+          // no idea how to fix this so linting rule is disabled instead
+          this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1); // eslint-disable-line vue/no-side-effects-in-computed-properties
+          return items;
+        },
+        showNoResults() {
+          return this.filteredItems.length === 0 && !this.showCreateNewBranch;
+        },
+        showCreateNewBranch() {
+          if (!this.canCreateBranch || !this.searchTerm) {
+            return false;
+          }
+
+          return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0;
+        }
+      },
+
+      watch: {
+        menuVisible(visible) {
+          if (visible) {
+            this.focusSearchField();
+          }
+        }
+      },
+
+      beforeMount() {
+        this.noResults = this.$el.getAttribute('data-no-results');
+        this.canCreateBranch = this.$el.getAttribute('data-can-create-branch') === 'true';
+
+        document.body.addEventListener('click', (event) => {
+          if (this.$el.contains(event.target)) return;
+          if (this.menuVisible) {
+            Vue.set(this, 'menuVisible', false);
+          }
+        });
+      },
+
+      methods: {
+        selectItem(item) {
+          const prev = this.getSelected();
+          if (prev !== null) {
+            prev.selected = false;
+          }
+          item.selected = true;
+          window.location.href = item.url;
+        },
+        createNewBranch() {
+          if (!this.showCreateNewBranch) return;
+          $(this.$refs.newBranchForm).trigger('submit');
+        },
+        focusSearchField() {
+          Vue.nextTick(() => {
+            this.$refs.searchField.focus();
+          });
+        },
+        getSelected() {
+          for (let i = 0, j = this.items.length; i < j; ++i) {
+            if (this.items[i].selected) return this.items[i];
+          }
+          return null;
+        },
+        getSelectedIndexInFiltered() {
+          for (let i = 0, j = this.filteredItems.length; i < j; ++i) {
+            if (this.filteredItems[i].selected) return i;
+          }
+          return -1;
+        },
+        scrollToActive() {
+          let el = this.$refs[`listItem${this.active}`];
+          if (!el || !el.length) return;
+          if (Array.isArray(el)) {
+            el = el[0];
+          }
+
+          const cont = this.$refs.scrollContainer;
+          if (el.offsetTop < cont.scrollTop) {
+            cont.scrollTop = el.offsetTop;
+          } else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) {
+            cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight;
+          }
+        },
+        keydown(event) {
+          if (event.keyCode === 40) { // arrow down
+            event.preventDefault();
+
+            if (this.active === -1) {
+              this.active = this.getSelectedIndexInFiltered();
+            }
+
+            if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) {
+              return;
+            }
+            this.active++;
+            this.scrollToActive();
+          } else if (event.keyCode === 38) { // arrow up
+            event.preventDefault();
+
+            if (this.active === -1) {
+              this.active = this.getSelectedIndexInFiltered();
+            }
+
+            if (this.active <= 0) {
+              return;
+            }
+            this.active--;
+            this.scrollToActive();
+          } else if (event.keyCode === 13) { // enter
+            event.preventDefault();
+
+            if (this.active >= this.filteredItems.length) {
+              this.createNewBranch();
+            } else if (this.active >= 0) {
+              this.selectItem(this.filteredItems[this.active]);
+            }
+          } else if (event.keyCode === 27) { // escape
+            event.preventDefault();
+            this.menuVisible = false;
+          }
+        }
+      }
+    });
+  });
+}
+
+export {initRepoBranchTagDropdown};

web_src/js/components/VueComponentLoader.js

@@ -0,0 +1,52 @@
+import Vue from 'vue';
+import {svgs} from '../svg.js';
+
+const vueDelimiters = ['${', '}'];
+
+let vueEnvInited = false;
+function initVueEnv() {
+  if (vueEnvInited) return;
+  vueEnvInited = true;
+
+  const isProd = window.config.IsProd;
+  Vue.config.productionTip = false;
+  Vue.config.devtools = !isProd;
+}
+
+let vueSvgInited = false;
+function initVueSvg() {
+  if (vueSvgInited) return;
+  vueSvgInited = true;
+
+  // register svg icon vue components, e.g. <octicon-repo size="16"/>
+  for (const [name, htmlString] of Object.entries(svgs)) {
+    const template = htmlString
+      .replace(/height="[0-9]+"/, 'v-bind:height="size"')
+      .replace(/width="[0-9]+"/, 'v-bind:width="size"');
+
+    Vue.component(name, {
+      props: {
+        size: {
+          type: String,
+          default: '16',
+        },
+      },
+      template,
+    });
+  }
+}
+
+
+function initVueApp(el, opts = {}) {
+  if (typeof el === 'string') {
+    el = document.querySelector(el);
+  }
+  if (!el) return null;
+
+  return new Vue(Object.assign({
+    el,
+    delimiters: vueDelimiters,
+  }, opts));
+}
+
+export {vueDelimiters, initVueEnv, initVueSvg, initVueApp};

web_src/js/features/admin-users.js

@@ -1,5 +1,5 @@
 export function initAdminUserListSearchForm() {
-  const searchForm = window.config.PageData.adminUserListSearchForm;
+  const searchForm = window.config.pageData.adminUserListSearchForm;
   if (!searchForm) return;
 
   const $form = $('#user-list-search-form');