UI: Glimmerize InfoTable, PageHeader, UpgradePage, NamespaceReminder, PageHeaderLevel Left,Right,Top (#19572)

ui/lib/core/addon/components/info-table.hbs

@@ -6,12 +6,12 @@
     <thead class="has-text-weight-semibold">
       <tr>
         <th scope="col">
-          {{this.header}}
+          {{@header}}
         </th>
       </tr>
     </thead>
     <tbody>
-      {{#each this.items as |item|}}
+      {{#each @items as |item|}}
         <tr>
           <td>
             <InfoTableRow @value={{item}} />

ui/lib/core/addon/components/info-table.js

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@ember/component';
-import layout from '../templates/components/info-table';
+import Component from '@glimmer/component';
 
 /**
  * @module InfoTable
@@ -23,10 +22,8 @@ import layout from '../templates/components/info-table';
  * @param {Array} items=null - An array of strings which will be used as the InfoTableRow value.
  */
 
-export default Component.extend({
-  layout,
-  tagName: '',
-  title: 'Info Table',
-  header: null,
-  items: null,
-});
+export default class InfoTable extends Component {
+  get title() {
+    return this.args.title || 'Info Table';
+  }
+}

ui/lib/core/addon/components/namespace-reminder.hbs

@@ -6,7 +6,7 @@
   {{else}}
     <p class="namespace-reminder">
       This
-      {{this.noun}}
+      {{@noun}}
       will be
       {{this.modeVerb}}
       in the

ui/lib/core/addon/components/namespace-reminder.js

@@ -3,24 +3,24 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { not } from '@ember/object/computed';
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../templates/components/namespace-reminder';
 
-export default Component.extend({
-  layout,
-  namespace: service(),
-  showMessage: not('namespace.inRootNamespace'),
-  //public API
-  noun: null,
-  mode: 'edit',
-  modeVerb: computed('mode', function () {
-    const mode = this.mode;
-    if (!mode) {
+export default class NamespaceReminder extends Component {
+  @service namespace;
+
+  get showMessage() {
+    return !this.namespace.inRootNamespace;
+  }
+
+  get mode() {
+    return this.args.mode || 'edit';
+  }
+
+  get modeVerb() {
+    if (!this.mode) {
       return '';
     }
-    return mode.endsWith('e') ? `${mode}d` : `${mode}ed`;
-  }),
-});
+    return this.mode.endsWith('e') ? `${this.mode}d` : `${this.mode}ed`;
+  }
+}

ui/lib/core/addon/components/page-header-level-left.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/lib/core/addon/components/page-header-level-right.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/lib/core/addon/components/page-header-level.hbs

@@ -0,0 +1,3 @@
+<div>
+  {{yield}}
+</div>

ui/lib/core/addon/components/page-header-top.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/lib/core/addon/components/page-header.hbs

@@ -0,0 +1,15 @@
+<header class="page-header">
+  {{#if this.hasLevel}}
+    {{yield (hash top=(component "page-header-level"))}}
+    <div class="level">
+      <div class="level-left">
+        {{yield (hash levelLeft=(component "page-header-level"))}}
+      </div>
+      <div class="level-right field is-grouped">
+        {{yield (hash levelRight=(component "page-header-level"))}}
+      </div>
+    </div>
+  {{else}}
+    {{yield (hash top=(component "page-header-level"))}}
+  {{/if}}
+</header>

ui/lib/core/addon/components/page-header.js

@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@ember/component';
-import layout from '../templates/components/page-header';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  layout,
-  tagName: '',
-  hasLevel: true,
-});
+export default class PageHeader extends Component {
+  get hasLevel() {
+    return this.args.hasLevel === undefined ? true : this.args.hasLevel;
+  }
+}

ui/lib/core/addon/components/upgrade-page.js

@@ -3,16 +3,17 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../templates/components/upgrade-page';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  layout,
-  title: 'Vault Enterprise',
-  featureName: computed('title', function () {
-    const title = this.title;
-    return title === 'Vault Enterprise' ? 'this feature' : title;
-  }),
-  minimumEdition: 'Vault Enterprise',
-});
+export default class UpgradePage extends Component {
+  get minimumEdition() {
+    return this.args.minimumEdition || 'Vault Enterprise';
+  }
+  get title() {
+    return this.args.title || 'Vault Enterprise';
+  }
+
+  get featureName() {
+    return this.title === 'Vault Enterprise' ? 'this feature' : this.title;
+  }
+}

ui/lib/core/addon/templates/components/page-header.hbs

@@ -1,15 +0,0 @@
-<header class="page-header">
-  {{#if this.hasLevel}}
-    {{yield (hash top=(component "page-header-top"))}}
-    <div class="level">
-      <div class="level-left">
-        {{yield (hash levelLeft=(component "page-header-level-left"))}}
-      </div>
-      <div class="level-right field is-grouped">
-        {{yield (hash levelRight=(component "page-header-level-right"))}}
-      </div>
-    </div>
-  {{else}}
-    {{yield (hash top=(component "page-header-top"))}}
-  {{/if}}
-</header>

ui/lib/core/app/components/page-header-level-left.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from 'core/components/page-header-level-left';

ui/lib/core/app/components/page-header-level-right.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from 'core/components/page-header-level-right';

ui/lib/core/app/components/page-header-level.js

@@ -0,0 +1 @@
+export { default } from 'core/components/page-header-level';

ui/lib/core/app/components/page-header-top.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from 'core/components/page-header-top';