refs
https://www.notion.so/ghost/AdminX-feedback-27fc7f549bbf4a53bfa2e7b6e5643963?p=6a295239a38840f18b0a3b1710095074&pm=s
- There was an issue where an overwritten theme would be included in the
themes array twice when passed to the ThemeList component.
- We now remove the initial theme from the array when overwriting to
avoid duplications.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 1260615</samp>
This pull request refactors the theme problem view component to make it
reusable and fixes a bug with theme name display in the theme modal. It
affects the files `InvalidThemeModal.tsx` and `ThemeModal.tsx` in the
admin-x-settings app.
refs https://github.com/TryGhost/Product/issues/3938
- Updated "Recommendation received" email design
- Slightly improved how dark favicons show in dark mode
- Added TabView with counter variant to Storybook
refs
https://ghost.slack.com/archives/C0568LN2CGJ/p1695801433166809?thread_ts=1695741379.821479&cid=C0568LN2CGJ
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at f43070f</samp>
This pull request adds a new feature to show a modal with the errors of
an invalid theme when uploading a theme fails in the admin settings app.
It creates a new `InvalidThemeModal` component that uses the
`admin-x-ds` library and the `ThemeProblemView` component to display the
error details. It also updates the `handleError` function to handle JSON
errors for theme uploads.
refs https://github.com/TryGhost/Product/issues/3958
- Disabled automatic network retries for external site lookups (=> timed
out to 5s in every situation because it returned 404 when a site doesn't
implement the Ghost api)
- Disabled representing a modal when it is already present on hash
changes
- Added support for search params in modals
- Handle `?url` search param in the addRecommendationModal
refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695741379821479
- Fixes a bug in the preview renderer where a theme without styles
wouldn't be handled properly as it cannot inject new styles and cause an
empty page to be returned.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
copilot:summary
no issue
- Added a progress spinner to the theme upload button in AdminX for
better UX.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 68bfc1b</samp>
Improved user feedback for theme upload feature. Added a loading
indicator to the `ThemeModal` component to show the progress of the
`uploadTheme` function.
no issue
- added additional null safety checks to the actions utility in AdminX.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at e10aa52</samp>
Refactored `action.context` access in `actions.ts` to use optional
chaining. This makes the code more concise and robust.
refs https://github.com/TryGhost/Product/issues/3832
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at d434b20</samp>
This pull request refactors the error handling logic in various
components of the admin-x-settings app to use a custom hook called
`useHandleError`. This hook wraps the Sentry integration and provides a
consistent and reliable way of reporting and logging errors. This
improves the code quality, readability, and maintainability of the app.
The pull request also improves the Sentry initialization by passing the
DSN and the environment to the `ServicesProvider` component.
refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695716107796769
- The main culprit here was that now since we moved to using some model data from Ember as opposed to just the API, the errors key had to be renamed to gscan_errors as that's how it's named in the Ember theme model.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 4bca3ee</samp>
Updated the theme modal and the theme installed modal to use the new
`gscan_errors` property for theme validation. This improves the accuracy
and consistency of the feedback given to users when they upload or
activate themes.
refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695642553045059
- The previous commit didn't quite handle things as expected. This adds
more null handling.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 1a69211</samp>
This pull request improves the robustness and accuracy of the admin
settings API for actions. It adds checks and logic to handle missing or
invalid data and custom post types in `actions.ts`.
refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695642553045059
- this attempts to fix an undefined error on AdminX when accessing
history log.
- At the moment I only have it reproducible on staging, so if this doesn't fix it, it will potentially be reverted.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 818fa49</samp>
Improve context handling for action events in `actions.ts`. Use a
variable to simplify and customize the action name and title based on
the context.
no issue
- Fixed the Pintura hook not handling relative urls passed to it from the config.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 2be0e30</samp>
Fixed Pintura asset loading from subdirectories by using the admin root
path. Updated `usePinturaEditor` hook to import and use a helper
function for getting Ghost paths.
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at 7a91ba3</samp>
This pull request enables data synchronization between the Ember app and
the React app for the settings module. It passes `onUpdate` and
`onInvalidate` functions as props from the Ember app to the React app
through the `ReactApp` component and the `ServicesContext`. It also
removes unused code and adds some debugging logs in the `setting`
serializer and the `settings` service.
refs. https://github.com/TryGhost/Product/issues/3949
- some minor copy had to be updated
- we had a little bug in the small version of dropdowns
- the crash page was just a plain text without any way out (e.g. allowing navigating to dashboard)
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at e1d84b3</samp>
This pull request fixes pagination bugs and improves pagination features
in various components and hooks of the admin settings app. It uses the
`meta` object from the API responses to display and fetch the correct
number of items in the lists of newsletters, tiers, users and actions.
It also simplifies and refactors some of the code to avoid repetition
and unnecessary properties.
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at 0095d23</samp>
The pull request adds support for asynchronous and creatable select
inputs in various components, using the `react-select` and
`@tanstack/react-query` libraries. It also adds pagination features to
the newsletters and tiers lists, using a `Button` component and infinite
queries. It refactors and fixes the type and null handling of the select
inputs and their options, using the `SelectOption` type and the
`useFilterableApi` and `debounce` hooks. It removes some unnecessary
props from the browse queries, and adds a new custom hook
`useDefaultRecipientsOptions` for the default recipients component. It
updates the stories and modals to use the new select inputs and options.
refs. https://github.com/TryGhost/Product/issues/3349
- We've added a keyboard shortcut '/' to focus in on the searchfield in
AdminX. However this didn't handle the case when the focus is already in
a textfield and when tried to enter e.g. "https://", then at the '/'
character it focused on the searchfield.
---------
Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
no issue
- We didn't take Pintura settings into account have the url's passed in
via configs as opposed to the database entry.
- this checks for both now.
- We also now require less configuration to wire in the editor.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at a85c114</samp>
This pull request removes the dependency on the `pintura` setting value
for enabling the Pintura image editor in various components in the admin
settings app. It uses a custom hook, `usePinturaEditor`, to get the
editor configuration and availability from the global config and the
settings API. It also adds error reporting and refactors the hook code
for simplicity and consistency.
no issue
- The second initialisation inside the React app isn't needed since it's
being initialised by Ember and the required settings is being passed
correctly to the Ember library inside React.
- The second initialisation caused Admin X to not report issues
correctly.
- To test, add `"client_sentry": { "enabled": false, "dsn": "" }` to the
`config.development.json` and write some bad code to trigger issues.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 77bf93f</samp>
This change refactors the error handling and reporting logic in the
`admin-x-settings` app by removing the redundant Sentry initialization
from the `App` component and using the global instance instead. This
avoids potential conflicts and performance issues with multiple Sentry
instances.
no issue
- Adds Sentry to Admin X settings to be able to monitor uncaught errors, etc.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 76de125</samp>
Added Sentry integration to the admin-x-settings app to improve error
monitoring and reporting. Updated the `ErrorBoundary` and `HtmlEditor`
components, the `useFetchApi` hook, and the app component to use the
`@sentry/react` module. Passed the `sentryDSN` prop from the parent
component to the app component and the services context.
refs. https://github.com/TryGhost/Product/issues/3349
- the Tier detail modal is missing the "Welcome page" field which is a
regression
---------
Co-authored-by: Jono Mingard <reason.koan@gmail.com>
refs https://github.com/TryGhost/Product/issues/3832
- Added API error classes and a generic error handling function
- Added retry logic to API requests matching the old admin
- Added the error handler to all queries and mutations
closes https://github.com/TryGhost/Product/issues/3915
- when adding a recommendation, we now ping the pull path first to check
whether it's a Ghost site. This is the most common case and also helps
to cover Ghost sites that are hosted on a subdirectory.
- if needed, we ping the origin path to perform the same check. This
helps to cover the case where the recommended URL is a subpage or post
of a Ghost site
- we now have 4 networks calls in the worst case when adding a
recommendation: uniqueness validation, two checks to determine whether
it's a Ghost site, read metadata from oembed. Each of these have a
timeout of 5 seconds, so there's a max. waiting time of 20 sec in the
worst case
no issue
- wired up the pintura integration to facebook and twitter meta card editors
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at e01c851</samp>
This pull request adds the ability to edit images for Facebook and
Twitter cards in the general settings component using Pintura, a
web-based image editor. It introduces a custom hook to handle the
Pintura editor logic and settings, and modifies the `ImageInput`
component to accept a prop to enable or disable the feature. It affects
the files `Facebook.tsx` and `Twitter.tsx` in the
`apps/admin-x-settings/src/components/settings/general` directory.
no issue
- Copied over the Unsplash Component from Koenig to AdminX and converted
it to Typescript.
- Changed the business logic to follow a bit of dependency injection to
make it more testable and easier to maintain.
- Ideally we move this out of Admin X Settings and perhaps into it's own
library so we don't need to deal with a duplicate code between Koenig
and Admin X.
---
<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at a40bf5b</samp>
This pull request adds support for selecting images from Unsplash in the
admin settings UI. It introduces a new `UnsplashService` class that
handles the Unsplash API requests and a new `MasonryService` class that
handles the masonry layout of the images. It also adds several new
custom components, such as `UnsplashButton`, `UnsplashGallery`,
`UnsplashImage`, `UnsplashSelector`, `UnsplashZoomed`, and
`UnsplashSearchModal`, that render the Unsplash modal and its elements.
It modifies the existing `ImageUpload`, `App`, `ServicesProvider`, and
`BrandSettings` components to integrate the Unsplash feature and pass
the necessary props. It also adds some new types, constants, and assets
related to the Unsplash data and UI. Finally, it adds some unit tests
for the `UnsplashService` and `MasonryService` classes.
closes https://github.com/TryGhost/Product/issues/3903
- we do not update the route when opening "Edit a recommendation"
anymore. By doing so, we can pass the recommendation object to the edit
page, without having to refetch it from the database
closes https://github.com/TryGhost/Product/issues/3818
- instead of fetching all recommendations and matching URLs on the frontend, we now query the database directly to find an existing Recommendation by URL. When comparing URLs, we don't take into account the protocol, www, query parameters nor hash fragments
fixes https://github.com/TryGhost/Product/issues/3911
For now we decided that we don't want to enable one-click-subscribe in
case a site has a required checkbox (which isn't shown during the
one-click-subscribe flow)
refs. https://github.com/TryGhost/Product/issues/3349
- it's a bit cumbersome to always click in the searchfield to use it.
`/` is a standard keyboard shortcut to focus on a searchfield in
apps. Also, by auto-focusing on the searchfield it's even faster to find
settings.
refs. https://github.com/TryGhost/Product/issues/3349
- newsletter searchfield was showing a "Clear" button once it had content. It needed to be using standard React dropdown instead
- modals needed an option to make the header sticky so it's more versatile. It's now used in the History modal
---------
Co-authored-by: Jono Mingard <reason.koan@gmail.com>
refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695149803260239
refs 290bc71d6a
- previous versions of `@tryghost/limit-service` did a full import of
lodash, which would bloat the bundle size, especially when we only use
a few of its functions
- I've since fixed that and this commit bumps Ghost to the smaller
version
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at eaad533</samp>
Refactored the code for modal components in the admin-x-settings app to
improve performance, readability, type-safety, and compatibility. Used
dynamic import, default import, `import.meta.glob`, and type aliases to
simplify the logic of importing and rendering modal components. Applied
the type alias `RoutingModalProps` to all modal components to ensure
consistent and safe props.
refs. https://github.com/TryGhost/Product/issues/3349
- updated tiers archive/activate pattern to it less prominent
- update newsletter archive/activate pattern to it less prominent
- fixed react-select z-index bug
- fixed Stripe disconnect copy error bug
- set max-height to embeddable signup form sidebar to avoid jumping when color picker is visible
---------
Co-authored-by: Jono Mingard <reason.koan@gmail.com>
refs https://github.com/TryGhost/DevOps/issues/80
- as part of moving Admin-X-Setting towards GA, we want to change it from
loading the settings externally via a CDN, to bundling it in with
Admin
- the bulk of the changes here are removing the config in Ghost, setting
up the copy to the Admin assets dir, and loading the new path in Admin
- several other changes have come along the way as I've cleaned up
unneeded code
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at fd2a023</samp>
This pull request improves the UI and UX of the admin settings app by
fixing some bugs, enhancing some components, and adding some logic to
handle different feature states. It affects the `ColorPickerField`,
`Toggle`, `EnableNewsletters`, `TierDetailModal`, `Modal`, and
`DefaultRecipients` components, as well as the files
`ColorPickerField.tsx`, `Toggle.tsx`, `EnableNewsletters.tsx`,
`TierDetailModal.tsx`, `Modal.tsx`, and `DefaultRecipients.tsx`.
closes https://github.com/TryGhost/Product/issues/3881
We observe the height of the recommendation table, and keep it fixed between pages — so that the UX is smoother when navigating between pages.
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at adffb67</samp>
This file updates the global form select component to use a custom
`ReactSelect` component with better performance and style.
closes https://github.com/TryGhost/Product/issues/3896
- added a timeout option to the useFetchApi() helper, to abort a fetch request after x seconds
- when adding a recommendation, we make two network calls: 1) check whether it's a Ghost site or not, 2) if not, fetch site metadata via embed. Now both of these calls have a timeout of 5 sec, which means a total waiting time of 5 seconds max. for a Ghost site, 10 seconds max. for a non-Ghost site
refs https://github.com/TryGhost/Product/issues/3832
---
### <samp>🤖 Generated by Copilot at 60bbe0a</samp>
This pull request improves the performance and readability of the site
design and theme settings UI. It refactors the modal navigation logic,
the color picker field component, and the theme preview component. It
also removes unnecessary dependencies and props from the modal
components, and adds a new `DesignAndThemeModal` component to handle the
modal switching.
