From ba9b695626a925ec4cca4a1aa7c8c466a5c2a430 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Tue, 13 Feb 2024 11:16:01 +0100
Subject: [PATCH] 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.
---
 .../components/settings/site/DesignModal.tsx  | 16 ++++++++--
 .../components/settings/site/ThemeModal.tsx   | 29 +++++++++++++++----
 ghost/admin/app/templates/setup/done.hbs      |  4 +--
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
index 3ff5ed8aaa..3449dc87aa 100644
--- a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
+++ b/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'
diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index 926359f2cc..1684e3a925 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/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=''
diff --git a/ghost/admin/app/templates/setup/done.hbs b/ghost/admin/app/templates/setup/done.hbs
index f197f071cc..5dd1e9e805 100644
--- a/ghost/admin/app/templates/setup/done.hbs
+++ b/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>