refactor: "Redirect To" links on the **Redirects** page are no longer relative, so they will work with non-standard Craft URL setups ([#341](#341))

Author: khalwat

buildchain/src/vue/RedirectToUrl.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <a
+      :href="fullRedirectDestUrl"
+      :title="redirectDestUrl"
+      class="go"
+      rel="noopener"
+      target="_blank"
+    >{{ redirectDestUrl }}</a>
+  </div>
+</template>
+
+<script>
+import DOMPurify from "dompurify";
+
+export default {
+  props: {
+    rowData: {
+      type: Object,
+      required: true
+    },
+    rowIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    redirectDestUrl: function () {
+      let value = this.rowData.redirectDestUrl;
+      if (value === '') {
+        return '';
+      }
+      value = DOMPurify.sanitize(value);
+      value = encodeURI(value);
+      return value;
+    },
+    fullRedirectDestUrl: function () {
+      let url = this.redirectDestUrl;
+      let absoluteUrl = new RegExp('^(?:[a-z]+:)?//', 'i');
+      if (!absoluteUrl.test(url) && !url.includes('$')) {
+        // If the incoming URL has a leading /, Craft won't try to make a full URL out of it
+        url = Craft.getUrl(url.replace(/^\/+/g, ''), null, this.rowData.siteBaseUrl);
+      }
+      return url;
+    }
+  }
+}
+</script>

buildchain/src/vue/RedirectsFieldDefs.js

@@ -14,12 +14,11 @@ export default [
     dataClass: 'center vuetable-td-redirectSrcUrl',
   },
   {
-    name: 'redirectDestUrl',
+    name: '__component:redirect-to-url',
     sortField: 'redirectDestUrl',
     title: Craft.t('retour', 'Redirect To'),
-    titleClass: 'center',
-    dataClass: 'center',
-    callback: 'urlFormatter'
+    titleClass: 'center vuetable-th-redirectDestUrl',
+    dataClass: 'center vuetable-td-redirectDestUrl',
   },
   {
     name: 'redirectMatchType',

buildchain/src/vue/RedirectsTable.vue

@@ -49,7 +49,7 @@
       :initial-filter-text="filterText"
     />
     <div class="vuetable-pagination clearafter">
-      <vuetable-pagination-info ref="paginationInfoTop" />
+      <vuetable-pagination-info ref="paginationInfoTop"/>
 
       <div class="floated left vuetable-pagination-info py-3">
         <div class="inline pl-3 text-gray-600">
@@ -99,7 +99,7 @@
       @vuetable:pagination-data="onPaginationData"
     />
     <div class="vuetable-pagination clearafter border-solid">
-      <vuetable-pagination-info ref="paginationInfo" />
+      <vuetable-pagination-info ref="paginationInfo"/>
       <vuetable-pagination
         ref="pagination"
         @vuetable-pagination:change-page="onChangePage"
@@ -111,17 +111,18 @@
 <script>
 import FieldDefs from '@/vue/RedirectsFieldDefs.js';
 import LegacyUrl from '@/vue/LegacyUrl.vue';
+import RedirectToUrl from '@/vue/RedirectToUrl.vue';
 import VueTable from 'vuetable-2/src/components/Vuetable.vue';
 import VueTablePagination from '@/vue/VuetablePagination.vue';
 import VueTablePaginationInfo from '@/vue/VuetablePaginationInfo.vue';
 import VueTableFilterBar from '@/vue/VuetableFilterBar.vue';
 import saveState from 'vue-save-state';
-import DOMPurify from 'dompurify';
 import PriorityValue from '@/vue/PriorityValue.vue';
 
 // Make the PriorityValue component globally available
 Vue.component('PriorityValue', PriorityValue);
 Vue.component('LegacyUrl', LegacyUrl);
+Vue.component('RedirectToUrl', RedirectToUrl);
 // Our component exports
 export default {
   components: {
@@ -194,7 +195,7 @@ export default {
   },
   methods: {
     getSaveStateConfig() {
-      const cacheKey = 'retour-redirects-state-v2-' + Craft.username + Craft.siteId;
+      const cacheKey = 'retour-redirects-state-v3-' + Craft.username + Craft.siteId;
       return {
         'cacheKey': cacheKey,
         'ignoreProperties': ['numSelected', 'selectedIds', 'moreParams'],
@@ -247,21 +248,6 @@ export default {
 
       return label;
     },
-    urlFormatter(value) {
-      if (value === '') {
-        return '';
-      }
-      value = DOMPurify.sanitize(value);
-      value = encodeURI(value);
-      let url = value;
-      let absoluteUrl = new RegExp('^(?:[a-z]+:)?//', 'i');
-      if (!absoluteUrl.test(url) && !url.includes('$')) {
-        url = Craft.getSiteUrl(url);
-      }
-      return `
-                <a class="go" href="${url}" title="${url}" target="_blank" rel="noopener">${value}</a>
-                `;
-    },
     deleteRedirectFormatter(value) {
       if (value === '') {
         return '';

src/controllers/TablesController.php

@@ -259,15 +259,20 @@ public function actionRedirects(
                     $redirect['redirectDestUrl'] = '';
                 }
             }
-            // Handle extracting the site name
+            // Handle extracting the site name and base URL
             $redirect['siteName'] = Craft::t('retour', 'All Sites');
+            $sites = Craft::$app->getSites();
+            $site = null;
             if ($redirect['siteId']) {
-                $sites = Craft::$app->getSites();
                 $site = $sites->getSiteById($redirect['siteId']);
                 if ($site) {
                     $redirect['siteName'] = $site->name;
                 }
             }
+            if (!$site) {
+                $site = $sites->getPrimarySite();
+            }
+            $redirect['siteBaseUrl'] = $site->getBaseUrl();
 
             $redirect['editLink'] = UrlHelper::cpUrl('retour/edit-redirect/' . $redirect['id']);
         }