Glimmerize old components (#24068)

* update transforms

* glimmer transform alphabet

* move alphabet edit

* license info and remove block error

* logo edition

* not found

* Update ui/app/components/logo-edition.js

Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com>

* ad js docs

---------

Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com>

ui/app/components/alphabet-edit.js

@@ -5,4 +5,4 @@
 
 import TransformBase from './transform-edit-base';
 
-export default TransformBase.extend({});
+export default class AlphabetEdit extends TransformBase {}

ui/app/components/logo-edition.js

@@ -6,7 +6,15 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
-export default Component.extend({
-  tagName: '',
-  version: service(),
-});
+/**
+ * @module LogoEdition
+ * LogoEdition shows the Vault logo with information about enterprise if applicable.
+ *
+ * @example
+ * ```js
+ * <LogoEdition />
+ */
+
+export default class LogoEdition extends Component {
+  @service version;
+}

ui/app/components/not-found.hbs

@@ -12,7 +12,7 @@
     </p.levelLeft>
   </PageHeader>
   <div class="box is-sideless has-background-white-bis has-text-grey has-text-centered">
-    <p>Sorry, we were unable to find any content at <code>{{or this.model.path this.path}}</code>.</p>
+    <p>Sorry, we were unable to find any content at <code>{{or @model.path this.path}}</code>.</p>
     <p>
       Double check the url or
       <ExternalLink @href="/" @sameTab={{true}}>go back home</ExternalLink>.

ui/app/components/not-found.js

@@ -4,14 +4,23 @@
  */
 
 import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  // public
-  model: null,
+/**
+ * @module NotFound
+ * NotFound components are used to show a message that the route was not found.
+ *
+ * @example
+ * ```js
+ * <NotFound @model={{this.model}} />
+ * ```
+ * @param {object} model - routes model passed into the component.
+ */
 
-  tagName: '',
-  router: service(),
-  path: alias('router.currentURL'),
-});
+export default class NotFound extends Component {
+  @service router;
+
+  get path() {
+    return this.router.currentURL;
+  }
+}

ui/app/models/transform/alphabet.js

@@ -4,32 +4,41 @@
  */
 
 import Model, { attr } from '@ember-data/model';
-import { computed } from '@ember/object';
 import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 
-export default Model.extend({
-  idPrefix: 'alphabet/',
-  idForNav: computed('id', 'idPrefix', function () {
+export default class Alphabet extends Model {
+  idPrefix = 'alphabet/';
+
+  get idForNav() {
     const modelId = this.id || '';
     return `${this.idPrefix}${modelId}`;
-  }),
+  }
 
-  name: attr('string', {
+  @attr('string', {
     readOnly: true,
     subText: 'The alphabet name. Keep in mind that spaces are not allowed and this cannot be edited later.',
-  }),
-  alphabet: attr('string', {
+  })
+  name;
+
+  @attr('string', {
     label: 'Alphabet',
     subText:
-      'Provide the set of valid UTF-8 characters contained within both the input and transformed value. Read more.',
-  }),
+      'Provide the set of valid UTF-8 characters contained within both the input and transformed value.',
+    docLink: '/vault/api-docs/secret/transform#create-update-alphabet',
+  })
+  alphabet;
 
-  attrs: computed(function () {
+  get attrs() {
     const keys = ['name', 'alphabet'];
     return expandAttributeMeta(this, keys);
-  }),
+  }
 
-  backend: attr('string', { readOnly: true }),
-  updatePath: lazyCapabilities(apiPath`${'backend'}/alphabet/${'id'}`, 'backend', 'id'),
-});
+  @attr('string', {
+    readOnly: true,
+  })
+  backend;
+
+  @lazyCapabilities(apiPath`${'backend'}/alphabet/${'id'}`, 'backend', 'id')
+  updatePath;
+}

ui/app/templates/components/block-error.hbs

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-~}}
-
-<div class="box is-sideless has-background-white-bis has-text-grey has-text-centered">
-  {{yield}}
-</div>

ui/app/transforms/array.js

@@ -10,19 +10,19 @@ import { isArray, A } from '@ember/array';
 
   DS.attr('array')
 */
-export default Transform.extend({
+export default class ArrayTransform extends Transform {
   deserialize(value) {
     if (isArray(value)) {
       return A(value);
     } else {
       return A();
     }
-  },
+  }
   serialize(value) {
     if (isArray(value)) {
       return A(value);
     } else {
       return A();
     }
-  },
-});
+  }
+}

ui/app/transforms/object.js

@@ -8,19 +8,19 @@ import { typeOf } from '@ember/utils';
 /*
   DS.attr('object')
 */
-export default Transform.extend({
-  deserialize: function (value) {
+export default class ObjectTransform extends Transform {
+  deserialize(value) {
     if (typeOf(value) !== 'object') {
       return {};
     } else {
       return value;
     }
-  },
-  serialize: function (value) {
+  }
+  serialize(value) {
     if (typeOf(value) !== 'object') {
       return {};
     } else {
       return value;
     }
-  },
-});
+  }
+}