[6.x] Add support link to header (#13889)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: duncanmcclean

config/cp.php

@@ -86,8 +86,7 @@
     | Support Link
     |--------------------------------------------------------------------------
     |
-    | Set the location of the support link in the "Useful Links" header
-    | dropdown. Use 'false' to remove it entirely.
+    | Set the location of the support link in the header.
     |
     */
 

resources/js/components/global-header/Header.vue

@@ -1,16 +1,12 @@
 <script setup>
-import { inject } from 'vue';
-import { Icon } from '@ui';
 import Logo from './Logo.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 import SiteSelector from './SiteSelector.vue';
 import Search from './Search.vue';
+import SupportButton from "@/components/global-header/SupportButton.vue";
+import MaxWidthButton from "@/components/global-header/MaxWidthButton.vue";
 import ViewSiteButton from './ViewSiteButton.vue';
 import UserDropdown from './UserDropdown.vue';
-
-const layout = inject('layout', {});
-const isMaxWidthEnabled = layout.isMaxWidthEnabled;
-const toggleMaxWidth = layout.toggleMaxWidth;
 </script>
 
 <template>
@@ -33,15 +29,8 @@ const toggleMaxWidth = layout.toggleMaxWidth;
             <div class="flex items-center">
                 <Search />
             </div>
-            <button
-                @click="toggleMaxWidth"
-                :aria-label="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
-                v-tooltip="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
-                class="hidden [@media(min-width:1800px)]:inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! will-change-transform"
-                data-expand-layout-control
-            >
-                <Icon :name="isMaxWidthEnabled ? 'zoom-fit-screen' : 'fit-screen'" class="animate-pulse-on-appearance" />
-            </button>
+	        <SupportButton />
+	        <MaxWidthButton />
             <ViewSiteButton />
             <UserDropdown />
         </div>

resources/js/components/global-header/MaxWidthButton.vue

@@ -0,0 +1,20 @@
+<script setup>
+import {Icon} from "@ui";
+import {inject} from "vue";
+
+const layout = inject('layout', {});
+const isMaxWidthEnabled = layout.isMaxWidthEnabled;
+const toggleMaxWidth = layout.toggleMaxWidth;
+</script>
+
+<template>
+	<button
+		@click="toggleMaxWidth"
+		:aria-label="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
+		v-tooltip="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
+		class="hidden [@media(min-width:1800px)]:inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! will-change-transform"
+		data-expand-layout-control
+	>
+		<Icon :name="isMaxWidthEnabled ? 'zoom-fit-screen' : 'fit-screen'" class="animate-pulse-on-appearance" />
+	</button>
+</template>

resources/js/components/global-header/SupportButton.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { Icon } from '@ui';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+const { supportUrl: url } = useStatamicPageProps();
+</script>
+
+<template>
+    <a
+        v-if="url"
+        :href="url"
+        :aria-label="__('Support')"
+        class="inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! v-popper--has-tooltip"
+        target="_blank"
+    >
+        <Icon name="support" />
+    </a>
+</template>

src/Http/Middleware/CP/HandleAuthenticatedInertiaRequests.php

@@ -58,6 +58,7 @@ private function protectedProps()
         }
 
         return [
+            'supportUrl' => config('statamic.cp.support_url'),
             'selectedSiteUrl' => Site::selected()->url(),
             'licensing' => $this->licensing(),
             'sessionExpiry' => $this->sessionExpiry(),