🐛 Fixed members list not refreshing after adding yourself

no issue

- passed in the `refreshData` action to the `<GhMembersNoMembers>` component and called it after creating the member
- converted `<GhMembersNoMembers>` to a glimmer component

ghost/admin/app/components/gh-members-no-members.hbs

@@ -1,14 +1,14 @@
 <div class="flex flex-column items-stretch">
     {{!-- <p class="">Get started with one of the following options</p> --}}
-    <button class="gh-btn gh-btn-green" onclick={{action "addYourself"}}>
+    <button class="gh-btn gh-btn-green" {{on "click" this.addYourself}}>
         <span>Add yourself as a member to test</span>
     </button>
-    
+
     <div class="flex flex-column items-stretch mt8 pt8 pb10 bt b--lightgrey-d1">
         <LinkTo @route="member.new" class="gh-btn gh-btn-outline mb3">
             <span>Manually add a member</span>
         </LinkTo>
-        
+
         <LinkTo @route="members.import" class="gh-btn gh-btn-outline">
             <span>Import members from CSV</span>
         </LinkTo>

ghost/admin/app/components/gh-members-no-members.js

@@ -1,38 +1,45 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {task} from 'ember-concurrency';
+import {task} from 'ember-concurrency-decorators';
 
-export default Component.extend({
-    session: service(),
-    store: service(),
-    notifications: service(),
+export default class GhMembersNoMembersComponent extends Component {
+    @service session;
+    @service store;
+    @service notifications;
 
-    actions: {
-        addYourself() {
-            return this.add.perform();
-        }
-    },
+    @action
+    addYourself() {
+        return this.addTask.perform();
+    }
+
+    @task({drop: true})
+    *addTask() {
+        const user = yield this.session.user;
 
-    add: task(function* () {
         const member = this.store.createRecord('member', {
-            email: this.get('session.user.email'),
-            name: this.get('session.user.name')
+            email: user.get('email'),
+            name: user.get('name')
         });
 
         try {
-            // NOTE: has to be before member.save() is performed otherwise component is
-            //       destroyed before notification is shown
+            yield member.save();
+
+            if (this.args.afterCreate) {
+                this.args.afterCreate();
+            }
+
             this.notifications.showNotification('Member added'.htmlSafe(),
                 {
                     description: 'You\'ve successfully added yourself as a member.'
                 }
             );
 
-            return yield member.save();
+            return member;
         } catch (error) {
             if (error) {
                 this.notifications.showAPIError(error, {key: 'member.save'});
             }
         }
-    }).drop()
-});
+    }
+}

ghost/admin/app/controllers/members.js

@@ -172,7 +172,7 @@ export default class MembersController extends Controller {
         }
     }
 
-    @task
+    @task({restartable: true})
     *fetchMembersTask(params) {
         // params is undefined when called as a "refresh" of the model
         let {label, searchParam} = typeof params === 'undefined' ? this : params;

ghost/admin/app/templates/members.hbs

@@ -71,7 +71,7 @@
                                 {{svg-jar "members-placeholder" class="gh-members-placeholder"}}
                                 {{#if this.showingAll}}
                                     <h3>No members yet</h3>
-                                    <GhMembersNoMembers />
+                                    <GhMembersNoMembers @afterCreate={{this.refreshData}} />
                                 {{else}}
                                     <h3>No members match the current filter</h3>
                                 {{/if}}