From 9c586b6a31b5cc3e1ce64752a51832c677170c14 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Tue, 30 Aug 2022 13:13:33 -0700
Subject: [PATCH] Glimmerize ListView Component for future PKI work (#16940)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* first try

* 🤦🏻‍♀️

* fix

* double check on nulls for defaul

* meep
---
 .../{templates => }/components/list-view.hbs  |  8 ++--
 ui/lib/core/addon/components/list-view.js     | 42 +++++++++----------
 2 files changed, 24 insertions(+), 26 deletions(-)
 rename ui/lib/core/addon/{templates => }/components/list-view.hbs (69%)

diff --git a/ui/lib/core/addon/templates/components/list-view.hbs b/ui/lib/core/addon/components/list-view.hbs
similarity index 69%
rename from ui/lib/core/addon/templates/components/list-view.hbs
rename to ui/lib/core/addon/components/list-view.hbs
index 00f11889e2..09c1aa2769 100644
--- a/ui/lib/core/addon/templates/components/list-view.hbs
+++ b/ui/lib/core/addon/components/list-view.hbs
@@ -1,14 +1,14 @@
-{{#if (or (and this.items.meta this.items.meta.total) this.items.length)}}
+{{#if (or (and @items.meta @items.meta.total) @items.length)}}
   <div class="box is-fullwidth is-bottomless is-sideless is-paddingless" data-test-list-view-list>
-    {{#each this.items as |item|}}
+    {{#each @items as |item|}}
       {{yield (hash item=item)}}
     {{else}}
       {{yield}}
     {{/each}}
     {{#if this.showPagination}}
       <ListPagination
-        @page={{this.items.meta.currentPage}}
-        @lastPage={{this.items.meta.lastPage}}
+        @page={{@items.meta.currentPage}}
+        @lastPage={{@items.meta.lastPage}}
         @link={{@paginationRouteName}}
         data-test-list-view-pagination
       />
diff --git a/ui/lib/core/addon/components/list-view.js b/ui/lib/core/addon/components/list-view.js
index c0544856b1..e479e99fc3 100644
--- a/ui/lib/core/addon/components/list-view.js
+++ b/ui/lib/core/addon/components/list-view.js
@@ -1,7 +1,5 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 import { pluralize } from 'ember-inflector';
-import layout from '../templates/components/list-view';
 
 /**
  * @module ListView
@@ -20,10 +18,11 @@ import layout from '../templates/components/list-view';
  * </ListView>
  * ```
  *
- * @param items=null {Array} - An array of items to render as a list
- * @param [itemNoun=null {String}] - A noun to use in the empty state of message and title.
- * @param [message=null {String}] - The message to display within the banner.
- * @yields Object with `item` that is the current item in the loop.
+ * @param {array} [items=null] - An Ember array of items (objects) to render as a list. Because it's an Ember array it has properties like length an meta on it.
+ * @param {string} [itemNoun=item] - A noun to use in the empty state of message and title.
+ * @param {string} [message=null] - The message to display within the banner.
+ * @param {string} [paginationRouteName=''] - The link used in the ListPagination component.
+ * @yields {object} Yields the current item in the loop.
  * @yields If there are no objects in items, then `empty` will be yielded - this is an instance of
  * the EmptyState component.
  * @yields If `item` or `empty` isn't present on the object, the component can still yield a block - this is
@@ -31,24 +30,23 @@ import layout from '../templates/components/list-view';
  * empty set.
  *
  */
-export default Component.extend({
-  layout,
-  tagName: '',
-  items: null,
-  itemNoun: 'item',
-  paginationRouteName: '',
-  showPagination: computed('items.met.{lastPage,total}', 'items.meta', 'paginationRouteName', function () {
-    let meta = this.items.meta;
-    return this.paginationRouteName && meta && meta.lastPage > 1 && meta.total > 0;
-  }),
+export default class ListView extends Component {
+  get itemNoun() {
+    return this.args.itemNoun || 'item';
+  }
 
-  emptyTitle: computed('itemNoun', function () {
+  get showPagination() {
+    let meta = this.args.items.meta;
+    return this.args.paginationRouteName && meta && meta.lastPage > 1 && meta.total > 0;
+  }
+
+  get emptyTitle() {
     let items = pluralize(this.itemNoun);
     return `No ${items} yet`;
-  }),
+  }
 
-  emptyMessage: computed('itemNoun', function () {
+  get emptyMessage() {
     let items = pluralize(this.itemNoun);
     return `Your ${items} will be listed here. Add your first ${this.itemNoun} to get started.`;
-  }),
-});
+  }
+}