Added staff picks component to dashboard 5.0

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

- Fetches the staff picks from the RSS feed
- Shows the first 5 staff picks (amount is adjustable)
- Adds utm_source=ghost to external links
- Includes a temporary CSS class to keep it a bit orderly

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -91,6 +91,9 @@
         
         <Dashboard::V5::Resources::WhatsNew />
         <Dashboard::V5::Resources::LatestNewsletters />
+        <article class="gh-dashboard5-box">
+            <Dashboard::V5::Resources::StaffPicks />
+        </article>
     {{/if}}
     <Dashboard::V5::PrototypeControlPanel />
 </section>

ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs

@@ -0,0 +1,25 @@
+<div class="gh-dashboard5-list" {{did-insert this.load}}>
+    {{#if (not (or this.loading this.error))}}
+    <div class="gh-dashboard5-list-header">
+        <Dashboard::v5::parts::ChartMetric @label="Staff picks" />
+    </div>
+    <div class="gh-dashboard5-list-body">
+        {{#each this.staffPicks as |entry|}}
+            <div class="gh-dashboard5-list-item">
+                <a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
+                    <span>{{entry.title}}</span><br>
+                    <span class="dashboard-prototype-staff-picks-author">{{entry.creator}}</span>
+                </a>
+            </div>
+        {{else}}
+            <div class="gh-dashboard5-list-empty">
+                {{svg-jar "no-data-list"}}
+                <p>No staff picks yet.</p>
+            </div>
+        {{/each}}
+    </div>
+    <div class="gh-dashboard5-list-footer">
+        <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
+    </div>
+    {{/if}}
+</div>

ghost/admin/app/components/dashboard/v5/resources/staff-picks.js

@@ -0,0 +1,57 @@
+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 RSS_FEED_URL = 'https://zapier.com/engine/rss/678920/ghoststaffpicks';
+const LIMIT = 5;
+
+export default class StaffPicks extends Component {
+    @tracked loading = null;
+    @tracked error = null;
+    @tracked staffPicks = null;
+
+    @action
+    load() {
+        this.loading = true;
+        this.fetch.perform().then(() => {
+            this.loading = false;
+        }, (error) => {
+            this.error = error;
+            this.loading = false;
+        });
+    }
+
+    @task
+    *fetch() {
+        let response = yield fetch(RSS_FEED_URL);
+        if (!response.ok) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch staff picks', {response});
+            this.error = 'Failed to fetch';
+            return;
+        }
+        
+        const str = yield response.text();
+        const document = new DOMParser().parseFromString(str, 'text/xml');
+
+        const items = document.querySelectorAll('channel > item');
+        this.staffPicks = [];
+        
+        for (let index = 0; index < items.length && index < LIMIT; index += 1) {
+            const item = items[index];
+            const title = item.getElementsByTagName('title')[0].textContent;
+            const link = item.getElementsByTagName('link')[0].textContent;
+            const creator = item.getElementsByTagName('dc:creator')[0].textContent;
+
+            const entry = {
+                title,
+                link,
+                creator
+            };
+            
+            this.staffPicks.push(entry);
+        }
+    }
+}

ghost/admin/app/styles/layouts/dashboard.css

@@ -1583,6 +1583,11 @@ Dashboard v5 Section Growth */
 .dashboard-prototype-newsletters .gh-dashboard-container {
     margin: 20px 0;
 }
+/* Delete me */
+.dashboard-prototype-staff-picks-author {
+    color: #7c8b9a;
+    font-weight: 400;
+}
 
 .gh-dashboard5-growth {
     display: flex;