From 8feb37cf593a1b2c5db285e08daa18af7570665d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Wed, 10 Jul 2024 13:12:46 +0200
Subject: [PATCH] Changed button labels in Navigation modal (#20579)

Fixes
https://linear.app/tryghost/issue/DES-474/update-navigation-modal-to-use-close-and-save-buttons

We've changed buttons throughout the product to Close/Save, rather than
Cancel/OK. This applies the same pattern to the Navigation modal in the
Admin.
---
 .../src/components/settings/site/NavigationModal.tsx        | 3 ++-
 .../test/acceptance/site/navigation.test.ts                 | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/NavigationModal.tsx b/apps/admin-x-settings/src/components/settings/site/NavigationModal.tsx
index 2944be9f39..cbeefc68c4 100644
--- a/apps/admin-x-settings/src/components/settings/site/NavigationModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/NavigationModal.tsx
@@ -43,8 +43,9 @@ const NavigationModal = NiceModal.create(() => {
                 updateRoute('navigation');
             }}
             buttonsDisabled={saveState === 'saving'}
+            cancelLabel='Close'
             dirty={localSettings.some(setting => setting.dirty)}
-            okLabel={saveState === 'saving' ? 'Saving...' : 'OK'}
+            okLabel={saveState === 'saving' ? 'Saving...' : 'Save'}
             scrolling={true}
             size='lg'
             stickyFooter={true}
diff --git a/apps/admin-x-settings/test/acceptance/site/navigation.test.ts b/apps/admin-x-settings/test/acceptance/site/navigation.test.ts
index ac1ae2bb44..3fd83387a5 100644
--- a/apps/admin-x-settings/test/acceptance/site/navigation.test.ts
+++ b/apps/admin-x-settings/test/acceptance/site/navigation.test.ts
@@ -39,7 +39,7 @@ test.describe('Navigation settings', async () => {
         await secondaryNavigationTab.getByTestId('new-navigation-item').getByLabel('URL').fill('https://google.com');
         await secondaryNavigationTab.getByTestId('new-navigation-item').getByLabel('URL').blur();
 
-        await modal.getByRole('button', {name: 'OK'}).click();
+        await modal.getByRole('button', {name: 'Save'}).click();
 
         await expect(modal).not.toBeVisible();
 
@@ -68,7 +68,7 @@ test.describe('Navigation settings', async () => {
         await primaryItem.getByLabel('URL').press('Backspace');
         await primaryItem.getByLabel('URL').fill('google.com');
 
-        await modal.getByRole('button', {name: 'OK'}).click();
+        await modal.getByRole('button', {name: 'Save'}).click();
 
         await expect(primaryItem.getByText('You must specify a label')).toHaveCount(1);
         await expect(primaryItem.getByText('You must specify a valid URL or relative path')).toHaveCount(1);
@@ -149,7 +149,7 @@ test.describe('Navigation settings', async () => {
 
         await newItem.getByTestId('add-button').click();
 
-        await modal.getByRole('button', {name: 'Cancel'}).click();
+        await modal.getByRole('button', {name: 'Close'}).click();
 
         await expect(page.getByTestId('confirmation-modal')).toHaveText(/leave/i);