From 7833da83658c873c4b01984aa94da8f6a8353719 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Thu, 7 Apr 2022 13:02:58 +0200
Subject: [PATCH] Added latest newsletters to dashboard 5.0

refs https://github.com/TryGhost/Team/issues/1488

- Includes a new component that fetches the latest X newsletters.
- Displays these newsletters using design from old dashboard.
- Currently shows 10 newsletters, but we'll want to change that later.
- Temporary CSS class added.
---
 .../app/components/dashboard/dashboard-v5.hbs |  1 +
 .../v5/resources/latest-newsletters.hbs       | 25 +++++++++++
 .../v5/resources/latest-newsletters.js        | 43 +++++++++++++++++++
 ghost/admin/app/helpers/set-query-params.js   | 34 +++++++++++++++
 ghost/admin/app/styles/layouts/dashboard.css  |  5 +++
 5 files changed, 108 insertions(+)
 create mode 100644 ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
 create mode 100644 ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.js
 create mode 100644 ghost/admin/app/helpers/set-query-params.js

diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
index 15ddf034e9..388d1613d7 100644
--- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs
+++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
@@ -90,6 +90,7 @@
         </section>
         
         <Dashboard::V5::Resources::WhatsNew />
+        <Dashboard::V5::Resources::LatestNewsletters />
     {{/if}}
     <Dashboard::V5::PrototypeControlPanel />
 </section>
diff --git a/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
new file mode 100644
index 0000000000..039132b879
--- /dev/null
+++ b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
@@ -0,0 +1,25 @@
+<div 
+    class="dashboard-prototype-newsletters"
+    {{did-insert this.load}}
+>
+    {{#if (not (or this.loading this.error))}}
+        {{#each this.newsletters as |entry|}}
+            <a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard-box blogpost">
+                    {{#if entry.feature_image}}
+                        <div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
+                    {{/if}}
+                    <div class="content">
+                        <h2>{{entry.title}}</h2>
+                        {{#if entry.custom_excerpt}}
+                            <p>{{entry.custom_excerpt}}</p>
+                        {{else if entry.excerpt}}
+                            <p>{{entry.excerpt}}</p>
+                        {{/if}}
+                        <div class="read-time">{{entry.reading_time}} MIN READ</div>
+                    </div>
+                </div>
+            </a>
+        {{/each}}
+    {{/if}}
+</div>
diff --git a/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.js b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.js
new file mode 100644
index 0000000000..b8101073f4
--- /dev/null
+++ b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.js
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import fetch from 'fetch';
+import {action} from '@ember/object';
+import {task} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
+
+const API_URL = 'https://resources.ghost.io/resources';
+const API_KEY = 'b30afc1721f5d8d021ec3450ef';
+const NEWSLETTER_COUNT = 10;
+
+export default class LatestNewsletters extends Component {
+    @tracked loading = null;
+    @tracked error = null;
+    @tracked newsletters = null;
+
+    @action
+    load() {
+        this.loading = true;
+        this.fetch.perform().then(() => {
+            this.loading = false;
+        }, (error) => {
+            this.error = error;
+            this.loading = false;
+        });
+    }
+
+    @task
+    *fetch() {
+        const order = encodeURIComponent('published_at DESC');
+        const key = encodeURIComponent(API_KEY);
+        const limit = encodeURIComponent(NEWSLETTER_COUNT);
+        let response = yield fetch(`${API_URL}/ghost/api/content/posts/?limit=${limit}&order=${order}&key=${key}&include=none`);
+        if (!response.ok) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch newsletters', {response});
+            this.error = 'Failed to fetch';
+            return;
+        }
+
+        let result = yield response.json();
+        this.newsletters = result.posts || [];
+    }
+}
diff --git a/ghost/admin/app/helpers/set-query-params.js b/ghost/admin/app/helpers/set-query-params.js
new file mode 100644
index 0000000000..cee3f6ebd4
--- /dev/null
+++ b/ghost/admin/app/helpers/set-query-params.js
@@ -0,0 +1,34 @@
+import {helper} from '@ember/component/helper';
+
+/**
+ * Usage:
+ * 
+ * ```hbs
+ * {{set-url-query 'https://myurl.com' utm_source='admin'}}
+ * ```
+ * 
+ * This example will return https://myurl.com?utm_source=admin
+ * 
+ * You can set every query/search parameter you want. It will override existing paramters if they are already set.
+ */
+export function setQueryParams([url], parameters) {
+    if (url) {
+        // Do some magic
+        try {
+            const parsed = new URL(url);
+            for (const key of Object.keys(parameters)) {
+                parsed.searchParams.set(key, parameters[key]);
+            }
+            return parsed.href;
+        } catch (e) {
+            // Invalid url. Just pass the original.
+            // eslint-disable-next-line no-console
+            console.error(e);
+            return url;
+        }
+    }
+
+    return '';
+}
+
+export default helper(setQueryParams);
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index cd12882edf..de04cb91d3 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -1579,6 +1579,11 @@ Dashboard v5 Section Anchor */
 /* --------------------------------- 
 Dashboard v5 Section Growth */
 
+/* Delete me */
+.dashboard-prototype-newsletters .gh-dashboard-container {
+    margin: 20px 0;
+}
+
 .gh-dashboard5-growth {
     display: flex;
     margin-top: -25px;