Update "Customize" link on Setup screen (#19686)

refs.
https://linear.app/tryghost/issue/DES-113/clicking-customize-design-on-setup-page-lands-you-on-top-level

On the setup screen 60% of people choose "Customize your site" which ATM
just take people to the top level Settings screen. This is very
confusing as with all the settings people don't know where to click to
actually get to customizing their site.

This PR fixes it by showing the design settings when clicking on
"Customize your site" and to the Dashboard after closing it.

apps/admin-x-settings/src/components/settings/site/DesignModal.tsx

@@ -2,6 +2,7 @@ import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettin
 import React, {useEffect, useState} from 'react';
 import ThemePreview from './designAndBranding/ThemePreview';
 import ThemeSettings from './designAndBranding/ThemeSettings';
+import useQueryParams from '../../../hooks/useQueryParams';
 import {CustomThemeSetting, useBrowseCustomThemeSettings, useEditCustomThemeSettings} from '@tryghost/admin-x-framework/api/customThemeSettings';
 import {Icon, PreviewModalContent, StickyFooter, Tab, TabView} from '@tryghost/admin-x-design-system';
 import {Setting, SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
@@ -30,6 +31,7 @@ const Sidebar: React.FC<{
     const {updateRoute} = useRouting();
     const [selectedTab, setSelectedTab] = useState('brand');
     const {data: {themes} = {}} = useBrowseThemes();
+    const refParam = useQueryParams().getParam('ref');
 
     const activeTheme = themes?.find(theme => theme.active);
 
@@ -60,7 +62,11 @@ const Sidebar: React.FC<{
                 <div className='w-full px-7'>
                     <button className='group flex w-full items-center justify-between text-sm font-medium opacity-80 transition-all hover:opacity-100' data-testid='change-theme' type='button' onClick={async () => {
                         await handleSave();
-                        updateRoute('design/change-theme');
+                        if (refParam) {
+                            updateRoute(`design/change-theme?ref=${refParam}`);
+                        } else {
+                            updateRoute('design/change-theme');
+                        }
                     }}>
                         <div className='text-left'>
                             <div className='font-semibold'>Change theme</div>
@@ -91,6 +97,8 @@ const DesignModal: React.FC = () => {
     const [selectedPreviewTab, setSelectedPreviewTab] = useState('homepage');
     const {updateRoute} = useRouting();
 
+    const refParam = useQueryParams().getParam('ref');
+
     const {
         formState,
         saveState,
@@ -209,7 +217,11 @@ const DesignModal: React.FC = () => {
 
     return <PreviewModalContent
         afterClose={() => {
-            updateRoute('design');
+            if (refParam === 'setup') {
+                window.location.hash = '/dashboard/';
+            } else {
+                updateRoute('design');
+            }
         }}
         buttonsDisabled={okProps.disabled}
         cancelLabel='Close'

apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -5,6 +5,7 @@ import OfficialThemes from './theme/OfficialThemes';
 import React, {useEffect, useState} from 'react';
 import ThemeInstalledModal from './theme/ThemeInstalledModal';
 import ThemePreview from './theme/ThemePreview';
+import useQueryParams from '../../../hooks/useQueryParams';
 import {Breadcrumbs, Button, ConfirmationModal, FileUpload, LimitModal, Modal, PageHeader, TabView, showToast} from '@tryghost/admin-x-design-system';
 import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
 import {InstalledTheme, Theme, ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
@@ -57,6 +58,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
     const {mutateAsync: uploadTheme} = useUploadTheme();
     const limiter = useLimiter();
     const handleError = useHandleError();
+    const refParam = useQueryParams().getParam('ref');
 
     const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>();
 
@@ -78,7 +80,11 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
     }, [limiter]);
 
     const onClose = () => {
-        updateRoute('design/edit');
+        if (refParam) {
+            updateRoute(`design/edit?ref=${refParam}`);
+        } else {
+            updateRoute('design/edit');
+        }
     };
 
     const onThemeUpload = async (file: File) => {
@@ -293,6 +299,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
     const [isInstalling, setInstalling] = useState(false);
     const [installedFromMarketplace, setInstalledFromMarketplace] = useState(false);
     const {updateRoute} = useRouting();
+    const refParam = useQueryParams().getParam('ref');
 
     const modal = useModal();
     const {data: {themes} = {}} = useBrowseThemes();
@@ -349,7 +356,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                             });
                         }
                         confirmModal?.remove();
-                        updateRoute('design/edit');
+                        if (refParam) {
+                            updateRoute(`design/edit?ref=${refParam}`);
+                        } else {
+                            updateRoute('design/edit');
+                        }
                     } catch (e) {
                         handleError(e);
                     }
@@ -359,7 +370,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                 }
             });
         }
-    }, [themeRef, source, installTheme, handleError, activateTheme, updateRoute, themes, installedFromMarketplace]);
+    }, [themeRef, source, installTheme, handleError, activateTheme, updateRoute, themes, installedFromMarketplace, refParam]);
 
     if (!themes) {
         return;
@@ -430,7 +441,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                 prompt,
                 installedTheme: installedTheme!,
                 onActivate: () => {
-                    updateRoute('design/edit');
+                    if (refParam) {
+                        updateRoute(`design/edit?ref=${refParam}`);
+                    } else {
+                        updateRoute('design/edit');
+                    }
                 }
             });
         };
@@ -439,7 +454,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
     return (
         <Modal
             afterClose={() => {
-                updateRoute('design/edit');
+                if (refParam) {
+                    updateRoute(`design/edit?ref=${refParam}`);
+                } else {
+                    updateRoute('design/edit');
+                }
             }}
             animate={false}
             cancelLabel=''

ghost/admin/app/templates/setup/done.hbs

@@ -16,7 +16,7 @@
                                     <h6>Write your first post</h6>
                                     <p>Test out the editor and get a feel for creating content inside Ghost.</p>
                                 </LinkTo>
-                                <LinkTo class="gh-done-green" @route="settings-x">
+                                <LinkTo class="gh-done-green" @route="settings-x.settings-x" @model="design/edit?ref=setup">
                                     <span>{{svg-jar "paint-palette"}}</span>
                                     <h6>Customize your site</h6>
                                     <p>Review your settings and tweak the design to make your site just right.</p>
@@ -27,7 +27,7 @@
                                     <p>Move your audience over to Ghost with our migration tools and guides.</p>
                                 </LinkTo>
                                 <LinkTo class="gh-done-pink" @route="dashboard">
-                                   <span>{{svg-jar "house"}}</span>
+                                    <span>{{svg-jar "house"}}</span>
                                     <h6>Explore Ghost admin</h6>
                                     <p>View the dashboard, click around, and explore Ghost for yourself.</p>
                                 </LinkTo>