UI: Convert pki component files to ts (#20533)

ui/lib/pki/addon/components/page/pki-certificate-details.ts

@@ -9,9 +9,9 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import errorMessage from 'vault/utils/error-message';
-import FlashMessageService from 'vault/services/flash-messages';
+import type FlashMessageService from 'vault/services/flash-messages';
-import DownloadService from 'vault/services/download';
+import type DownloadService from 'vault/services/download';
-import PkiCertificateBaseModel from 'vault/models/pki/certificate/base';
+import type PkiCertificateBaseModel from 'vault/models/pki/certificate/base';
 
 interface Args {
   model: PkiCertificateBaseModel;

ui/lib/pki/addon/components/page/pki-configuration-details.ts

@@ -4,16 +4,14 @@
  */
 
 import Component from '@glimmer/component';
-import errorMessage from 'vault/utils/error-message';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-
+import errorMessage from 'vault/utils/error-message';
-//TYPES
+import type RouterService from '@ember/routing/router-service';
-import RouterService from '@ember/routing/router-service';
+import type FlashMessageService from 'vault/services/flash-messages';
-import FlashMessageService from 'vault/services/flash-messages';
+import type Store from '@ember-data/store';
-import Store from '@ember-data/store';
+import type VersionService from 'vault/services/version';
-import VersionService from 'vault/services/version';
 
 interface Args {
   currentPath: string;

ui/lib/pki/addon/components/page/pki-configuration-edit.ts

@@ -9,13 +9,13 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
-import RouterService from '@ember/routing/router-service';
-import FlashMessageService from 'vault/services/flash-messages';
-import VersionService from 'vault/services/version';
-import { FormField, TtlEvent } from 'vault/app-types';
-import PkiCrlModel from 'vault/models/pki/crl';
-import PkiUrlsModel from 'vault/models/pki/urls';
 import errorMessage from 'vault/utils/error-message';
+import type RouterService from '@ember/routing/router-service';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type VersionService from 'vault/services/version';
+import type PkiCrlModel from 'vault/models/pki/crl';
+import type PkiUrlsModel from 'vault/models/pki/urls';
+import type { FormField, TtlEvent } from 'vault/app-types';
 
 interface Args {
   crl: PkiCrlModel;

ui/lib/pki/addon/components/page/pki-configure-create.ts

@@ -6,12 +6,11 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-// TYPES
+import type Store from '@ember-data/store';
-import Store from '@ember-data/store';
+import type Router from '@ember/routing/router';
-import Router from '@ember/routing/router';
+import type FlashMessageService from 'vault/services/flash-messages';
-import FlashMessageService from 'vault/services/flash-messages';
+import type PkiActionModel from 'vault/models/pki/action';
-import PkiActionModel from 'vault/models/pki/action';
+import type { Breadcrumb } from 'vault/vault/app-types';
-import { Breadcrumb } from 'vault/vault/app-types';
 
 interface Args {
   config: PkiActionModel;

ui/lib/pki/addon/components/page/pki-issuer-details.ts

@@ -5,7 +5,12 @@
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
 
-export default class PkiIssuerDetailsComponent extends Component {
+interface Args {
+  issuer: PkiIssuerModel;
+}
+
+export default class PkiIssuerDetailsComponent extends Component<Args> {
   @tracked showRotationModal = false;
 }

ui/lib/pki/addon/components/page/pki-issuer-edit.ts

@@ -10,9 +10,9 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import errorMessage from 'vault/utils/error-message';
-import RouterService from '@ember/routing/router-service';
+import type RouterService from '@ember/routing/router-service';
-import FlashMessageService from 'vault/services/flash-messages';
+import type FlashMessageService from 'vault/services/flash-messages';
-import PkiIssuerModel from 'vault/models/pki/issuer';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
 
 interface Args {
   model: PkiIssuerModel;

ui/lib/pki/addon/components/page/pki-issuer-generate-intermediate.ts

@@ -1,6 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import type PkiActionModel from 'vault/vault/models/pki/action';
 
-export default class PagePkiIssuerGenerateIntermediateComponent extends Component {
+interface Args {
+  model: PkiActionModel;
+}
+
+export default class PagePkiIssuerGenerateIntermediateComponent extends Component<Args> {
   @tracked title = 'Generate intermediate CSR';
 }

ui/lib/pki/addon/components/page/pki-issuer-generate-root.ts

@@ -1,6 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import type PkiActionModel from 'vault/vault/models/pki/action';
 
-export default class PagePkiIssuerGenerateRootComponent extends Component {
+interface Args {
+  model: PkiActionModel;
+}
+
+export default class PagePkiIssuerGenerateRootComponent extends Component<Args> {
   @tracked title = 'Generate root';
 }

ui/lib/pki/addon/components/page/pki-issuer-import.ts

@@ -1,6 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import type PkiActionModel from 'vault/vault/models/pki/action';
 
-export default class PagePkiIssuerImportComponent extends Component {
+interface Args {
+  model: PkiActionModel;
+}
+
+export default class PagePkiIssuerImportComponent extends Component<Args> {
   @tracked title = 'Import a CA';
 }

ui/lib/pki/addon/components/page/pki-issuer-rotate-root.ts

@@ -5,14 +5,13 @@ import { action } from '@ember/object';
 import { waitFor } from '@ember/test-waiters';
 import { task } from 'ember-concurrency';
 import errorMessage from 'vault/utils/error-message';
-// TYPES
+import type Store from '@ember-data/store';
-import Store from '@ember-data/store';
+import type Router from '@ember/routing/router';
-import Router from '@ember/routing/router';
+import type FlashMessageService from 'vault/services/flash-messages';
-import FlashMessageService from 'vault/services/flash-messages';
+import type SecretMountPath from 'vault/services/secret-mount-path';
-import SecretMountPath from 'vault/services/secret-mount-path';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
-import PkiIssuerModel from 'vault/models/pki/issuer';
+import type PkiActionModel from 'vault/vault/models/pki/action';
-import PkiActionModel from 'vault/vault/models/pki/action';
+import type { Breadcrumb, ValidationMap } from 'vault/vault/app-types';
-import { Breadcrumb, ValidationMap } from 'vault/vault/app-types';
 
 interface Args {
   oldRoot: PkiIssuerModel;

ui/lib/pki/addon/components/page/pki-key-details.ts

@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import RouterService from '@ember/routing/router-service';
+import { action } from '@ember/object';
-import FlashMessageService from 'vault/services/flash-messages';
 import { inject as service } from '@ember/service';
 import errorMessage from 'vault/utils/error-message';
-import PkiKeyModel from 'vault/models/pki/key';
+import type RouterService from '@ember/routing/router-service';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type PkiKeyModel from 'vault/models/pki/key';
 interface Args {
   key: PkiKeyModel;
 }

ui/lib/pki/addon/components/page/pki-overview.ts

@@ -3,15 +3,14 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
+import type Store from '@ember-data/store';
-// TYPES
+import type RouterService from '@ember/routing/router-service';
-import Store from '@ember-data/store';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
-import RouterService from '@ember/routing/router-service';
+import type PkiRoleModel from 'vault/models/pki/role';
-import PkiIssuerModel from 'vault/models/pki/issuer';
-import PkiRoleModel from 'vault/models/pki/role';
 
 interface Args {
   issuers: PkiIssuerModel | number;

ui/lib/pki/addon/components/page/pki-role-details.ts

@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { action } from '@ember/object';
-import RouterService from '@ember/routing/router-service';
 import Component from '@glimmer/component';
-import FlashMessageService from 'vault/services/flash-messages';
+import { action } from '@ember/object';
-import SecretMountPath from 'vault/services/secret-mount-path';
 import { inject as service } from '@ember/service';
 import errorMessage from 'vault/utils/error-message';
-import PkiRoleModel from 'vault/models/pki/role';
+import type SecretMountPath from 'vault/services/secret-mount-path';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type RouterService from '@ember/routing/router-service';
+import type PkiRoleModel from 'vault/models/pki/role';
 
 interface Args {
   role: PkiRoleModel;

ui/lib/pki/addon/components/page/pki-tidy-form.ts

@@ -4,15 +4,14 @@
  */
 
 import Component from '@glimmer/component';
-import errorMessage from 'vault/utils/error-message';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import { tracked } from '@glimmer/tracking';
-
+import errorMessage from 'vault/utils/error-message';
-import PkiTidyModel from 'vault/models/pki/tidy';
+import type PkiTidyModel from 'vault/models/pki/tidy';
-import RouterService from '@ember/routing/router-service';
+import type RouterService from '@ember/routing/router-service';
 
 interface Args {
   tidy: PkiTidyModel;

ui/lib/pki/addon/components/parsed-certificate-info-rows.ts

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { parsedParameterKeys } from 'vault/utils/parse-pki-cert-oids';
+import { ParsedCertificateData } from 'vault/vault/utils/parse-pki-cert';
 
 /**
  * @module ParsedCertificateInfoRowsComponent
@@ -13,11 +14,23 @@ import { parsedParameterKeys } from 'vault/utils/parse-pki-cert-oids';
  *
  * @param {object} model - object of parsed attributes from parse-pki-cert util
  */
-export default class ParsedCertificateInfoRowsComponent extends Component {
+
+interface AttrOptions {
+  [key: string]: {
+    label?: string;
+    formatDate?: string;
+  };
+}
+
+interface Args {
+  model: ParsedCertificateData;
+}
+
+export default class ParsedCertificateInfoRowsComponent extends Component<Args> {
   get possibleFields() {
     // We show common name elsewhere on the details view, so no need to render it here
     const fieldKeys = parsedParameterKeys.filter((k) => k !== 'common_name');
-    const attrsByKey = {
+    const attrsByKey: AttrOptions = {
       other_sans: { label: 'Other SANs' },
       alt_names: { label: 'Subject Alternative Names (SANs)' },
       uri_sans: { label: 'URI SANs' },

ui/lib/pki/addon/components/pki-generate-csr.ts

@@ -10,10 +10,10 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
-import FlashMessageService from 'vault/services/flash-messages';
-import PkiActionModel from 'vault/models/pki/action';
 import errorMessage from 'vault/utils/error-message';
-import { ValidationMap } from 'vault/vault/app-types';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type PkiActionModel from 'vault/models/pki/action';
+import type { ValidationMap } from 'vault/vault/app-types';
 
 interface Args {
   model: PkiActionModel;

ui/lib/pki/addon/components/pki-generate-root.ts

@@ -3,18 +3,18 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import RouterService from '@ember/routing/router-service';
 import { service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
-import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import PkiActionModel from 'vault/models/pki/action';
-import PkiUrlsModel from 'vault/models/pki/urls';
-import FlashMessageService from 'vault/services/flash-messages';
 import errorMessage from 'vault/utils/error-message';
-import { ValidationMap } from 'vault/vault/app-types';
+import type PkiActionModel from 'vault/models/pki/action';
+import type PkiUrlsModel from 'vault/models/pki/urls';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type RouterService from '@ember/routing/router-service';
+import type { ValidationMap } from 'vault/vault/app-types';
 
 interface AdapterOptions {
   actionType: string;

ui/lib/pki/addon/components/pki-generate-toggle-groups.ts

@@ -7,8 +7,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { keyParamsByType } from 'pki/utils/action-params';
-import PkiActionModel from 'vault/models/pki/action';
+import type PkiActionModel from 'vault/models/pki/action';
-import { ModelValidations } from 'vault/vault/app-types';
+import type { ModelValidations } from 'vault/vault/app-types';
 
 interface Args {
   model: PkiActionModel;

ui/lib/pki/addon/components/pki-import-pem-bundle.ts

@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import FlashMessageService from 'vault/services/flash-messages';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import errorMessage from 'vault/utils/error-message';
-import PkiActionModel from 'vault/models/pki/action';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type PkiActionModel from 'vault/models/pki/action';
 
 /**
  * @module PkiImportPemBundle

ui/lib/pki/addon/components/pki-key-form.ts

@@ -7,8 +7,11 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
-import errorMessage from 'vault/utils/error-message';
 import { waitFor } from '@ember/test-waiters';
+import errorMessage from 'vault/utils/error-message';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type PkiKeyModel from 'vault/models/pki/key';
+import type { ValidationMap } from 'vault/app-types';
 
 /**
  * @module PkiKeyForm
@@ -24,16 +27,21 @@ import { waitFor } from '@ember/test-waiters';
  * @callback onSave - Callback triggered on save success.
  */
 
-export default class PkiKeyForm extends Component {
+interface Args {
-  @service flashMessages;
+  model: PkiKeyModel;
+  onSave: CallableFunction;
+}
 
-  @tracked errorBanner;
+export default class PkiKeyForm extends Component<Args> {
-  @tracked invalidFormAlert;
+  @service declare readonly flashMessages: FlashMessageService;
-  @tracked modelValidations;
+
+  @tracked errorBanner = '';
+  @tracked invalidFormAlert = '';
+  @tracked modelValidations: ValidationMap | null = null;
 
   @task
   @waitFor
-  *save(event) {
+  *save(event: Event) {
     event.preventDefault();
     try {
       const { isNew, keyName } = this.args.model;

ui/lib/pki/addon/components/pki-key-import.ts

@@ -3,14 +3,16 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import errorMessage from 'vault/utils/error-message';
-import trimRight from 'vault/utils/trim-right';
 import { waitFor } from '@ember/test-waiters';
+import { inject as service } from '@ember/service';
+import trimRight from 'vault/utils/trim-right';
+import errorMessage from 'vault/utils/error-message';
+import type PkiKeyModel from 'vault/models/pki/key';
+import type FlashMessageService from 'vault/services/flash-messages';
 
 /**
  * @module PkiKeyImport
@@ -25,16 +27,21 @@ import { waitFor } from '@ember/test-waiters';
  * @callback onCancel - Callback triggered when cancel button is clicked.
  * @callback onSubmit - Callback triggered on submit success.
  */
+interface Args {
+  model: PkiKeyModel;
+  onSave: CallableFunction;
+  onCancel: CallableFunction;
+}
 
-export default class PkiKeyImport extends Component {
+export default class PkiKeyImport extends Component<Args> {
-  @service flashMessages;
+  @service declare readonly flashMessages: FlashMessageService;
 
-  @tracked errorBanner;
+  @tracked errorBanner = '';
-  @tracked invalidFormAlert;
+  @tracked invalidFormAlert = '';
 
   @task
   @waitFor
-  *submitForm(event) {
+  *submitForm(event: Event) {
     event.preventDefault();
     try {
       const { keyName } = this.args.model;
@@ -48,7 +55,7 @@ export default class PkiKeyImport extends Component {
   }
 
   @action
-  onFileUploaded({ value, filename }) {
+  onFileUploaded({ value, filename }: { value: string; filename: string }) {
     this.args.model.pemBundle = value;
     if (!this.args.model.keyName) {
       const trimmedFileName = trimRight(filename, ['.json', '.pem']);

ui/lib/pki/addon/components/pki-key-parameters.js

@@ -1,47 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-/**
- * @module PkiKeyParameters
- * PkiKeyParameters components are used to display a list of key bit options depending on the selected key type. The key bits field is disabled until a key type is selected.
- * If the component renders in a group, other attrs may be passed in and will be rendered using the <FormField> component
- * @example
- * ```js
- * <PkiKeyParameters @model={{@model}} @fields={{fields}}/>
- * ```
- * @param {class} model - The pki/role model.
- * @param {string} fields - Array of attributes from a formFieldGroup generated by the @withFormFields decorator ex: [{ name: 'attrName', type: 'string', options: {...} }]
- */
-
-// first value in array is the default bits for that key type
-const KEY_BITS_OPTIONS = {
-  rsa: ['2048', '3072', '4096', '0'],
-  ec: ['256', '224', '384', '521', '0'],
-  ed25519: ['0'],
-  any: ['0'],
-};
-
-export default class PkiKeyParameters extends Component {
-  get keyBitOptions() {
-    return KEY_BITS_OPTIONS[this.args.model.keyType];
-  }
-
-  @action handleSelection(name, selection) {
-    this.args.model[name] = selection;
-
-    if (name === 'keyType') {
-      this.args.model.keyBits = Object.keys(KEY_BITS_OPTIONS).includes(selection)
-        ? KEY_BITS_OPTIONS[selection][0]
-        : '';
-    }
-  }
-
-  @action onKeyBitsChange({ target }) {
-    this.handleSelection(target.name, target.value);
-  }
-}

ui/lib/pki/addon/components/pki-key-parameters.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import type PkiRoleModel from 'vault/models/pki/role';
+import type PkiKeyModel from 'vault/models/pki/key';
+import type PkiActionModel from 'vault/models/pki/action';
+import type { HTMLElementEvent } from 'forms';
+/**
+ * @module PkiKeyParameters
+ * PkiKeyParameters components are used to display a list of key bit options depending on the selected key type. The key bits field is disabled until a key type is selected.
+ * If the component renders in a group, other attrs may be passed in and will be rendered using the <FormField> component
+ * @example
+ * ```js
+ * <PkiKeyParameters @model={{@model}} @fields={{fields}}/>
+ * ```
+ * @param {class} model - The pki/role, pki/action, pki/key model.
+ * @param {string} fields - Array of attributes from a formFieldGroup generated by the @withFormFields decorator ex: [{ name: 'attrName', type: 'string', options: {...} }]
+ */
+interface Args {
+  model: PkiRoleModel | PkiKeyModel | PkiActionModel;
+}
+interface ModelAttributeName {
+  keyType: string;
+  keyBits: string;
+}
+interface TypeOptions {
+  rsa: string;
+  ec: string;
+  ed25519: string;
+  any: string;
+}
+interface BitOptions {
+  [key: string]: Array<string>;
+}
+
+// first value in array is the default bits for that key type
+const KEY_BITS_OPTIONS: BitOptions = {
+  rsa: ['2048', '3072', '4096', '0'],
+  ec: ['256', '224', '384', '521', '0'],
+  ed25519: ['0'],
+  any: ['0'],
+};
+
+export default class PkiKeyParameters extends Component<Args> {
+  get keyBitOptions() {
+    if (!this.args.model.keyType) return [];
+
+    return KEY_BITS_OPTIONS[this.args.model.keyType];
+  }
+
+  @action handleSelection(name: string, selection: string) {
+    this.args.model[name as keyof ModelAttributeName] = selection;
+
+    if (name === 'keyType' && Object.keys(KEY_BITS_OPTIONS)?.includes(selection)) {
+      const bitOptions = KEY_BITS_OPTIONS[selection as keyof TypeOptions];
+      this.args.model.keyBits = bitOptions?.firstObject;
+    }
+  }
+
+  @action onKeyBitsChange(event: HTMLElementEvent<HTMLInputElement>) {
+    this.handleSelection(event.target.name, event.target.value);
+  }
+}

ui/lib/pki/addon/components/pki-not-valid-after-form.ts

@@ -6,8 +6,8 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { HTMLElementEvent } from 'forms';
 import { format } from 'date-fns';
+import type { HTMLElementEvent } from 'forms';
 
 /**
  * <PkiNotValidAfterForm /> components are used to manage two mutually exclusive role options in the form.

ui/lib/pki/addon/components/pki-role-form.ts

@@ -8,6 +8,13 @@ import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import errorMessage from 'vault/utils/error-message';
+import type Store from '@ember-data/store';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type SecretMountPathService from 'vault/services/secret-mount-path';
+import type PkiRoleModel from 'vault/models/pki/role';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
+import type { ValidationMap } from 'vault/app-types';
 
 /**
  * @module PkiRoleForm
@@ -25,18 +32,24 @@ import { action } from '@ember/object';
  * @param {onSave} onSave - Callback triggered on save success.
  */
 
-export default class PkiRoleForm extends Component {
+interface Args {
-  @service store;
+  role: PkiRoleModel;
-  @service flashMessages;
+  issuers: PkiIssuerModel[];
-  @service secretMountPath;
+  onSave: CallableFunction;
+}
 
-  @tracked errorBanner;
+export default class PkiRoleForm extends Component<Args> {
-  @tracked invalidFormAlert;
+  @service declare readonly store: Store;
-  @tracked modelValidations;
+  @service declare readonly flashMessages: FlashMessageService;
+  @service declare readonly secretMountPath: SecretMountPathService;
+
+  @tracked errorBanner = '';
+  @tracked invalidFormAlert = '';
+  @tracked modelValidations: ValidationMap | null = null;
   @tracked showDefaultIssuer = true;
 
-  constructor() {
+  constructor(owner: unknown, args: Args) {
-    super(...arguments);
+    super(owner, args);
 
     this.showDefaultIssuer = this.args.role.issuerRef === 'default';
   }
@@ -47,20 +60,8 @@ export default class PkiRoleForm extends Component {
     });
   }
 
-  get breadcrumbs() {
-    const crumbs = [
-      { label: 'secrets', route: 'secrets', linkExternal: true },
-      { label: this.secretMountPath.currentPath, route: 'overview' },
-      { label: 'roles', route: 'roles.index' },
-    ];
-    if (!this.args.role.isNew) {
-      crumbs.push({ label: this.args.role.id, route: 'roles.role.details' }, { label: 'edit' });
-    }
-    return crumbs;
-  }
-
   @task
-  *save(event) {
+  *save(event: Event) {
     event.preventDefault();
     try {
       const { isValid, state, invalidFormMessage } = this.args.role.validate();
@@ -73,8 +74,7 @@ export default class PkiRoleForm extends Component {
         this.args.onSave();
       }
     } catch (error) {
-      const message = error.errors ? error.errors.join('. ') : error.message;
+      this.errorBanner = errorMessage(error);
-      this.errorBanner = message;
       this.invalidFormAlert = 'There was an error submitting this form.';
     }
   }

ui/lib/pki/addon/components/pki-role-generate.ts

@@ -7,14 +7,14 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { service } from '@ember/service';
-import Router from '@ember/routing/router';
-import Store from '@ember-data/store';
 import { tracked } from '@glimmer/tracking';
 import errorMessage from 'vault/utils/error-message';
-import FlashMessageService from 'vault/services/flash-messages';
+import type Router from '@ember/routing/router';
-import DownloadService from 'vault/services/download';
+import type Store from '@ember-data/store';
-import PkiCertificateGenerateModel from 'vault/models/pki/certificate/generate';
+import type FlashMessageService from 'vault/services/flash-messages';
-import PkiCertificateSignModel from 'vault/models/pki/certificate/sign';
+import type DownloadService from 'vault/services/download';
+import type PkiCertificateGenerateModel from 'vault/models/pki/certificate/generate';
+import type PkiCertificateSignModel from 'vault/models/pki/certificate/sign';
 
 interface Args {
   onSuccess: CallableFunction;

ui/lib/pki/addon/components/pki-sign-intermediate-form.ts

@@ -3,16 +3,16 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
-import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import PkiCertificateSignIntermediate from 'vault/models/pki/certificate/sign-intermediate';
-import FlashMessageService from 'vault/services/flash-messages';
 import errorMessage from 'vault/utils/error-message';
-import { ValidationMap } from 'vault/vault/app-types';
+import type PkiCertificateSignIntermediate from 'vault/models/pki/certificate/sign-intermediate';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type { ValidationMap } from 'vault/vault/app-types';
 
 interface Args {
   onCancel: CallableFunction;

ui/types/vault/models/pki/key.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Model from '@ember-data/model';
+import { ModelValidations } from 'vault/app-types';
+
+export default class PkiKeyModel extends Model {
+  secretMountPath: class;
+  keyId: string;
+  keyName: string;
+  type: string;
+  keyType: string;
+  keyBits: string;
+  pemBundle: string;
+  privateKey: string;
+  isNew: boolean;
+  get backend(): string;
+  get canRead(): boolean;
+  get canEdit(): boolean;
+  get canDelete(): boolean;
+  get canGenerateKey(): boolean;
+  get canImportKey(): boolean;
+  validate(): ModelValidations;
+}

ui/types/vault/models/pki/role.d.ts

@@ -0,0 +1,13 @@
+import Model from '@ember-data/model';
+import { FModelValidations } from 'vault/app-types';
+
+export default class PkiRoleModel extends Model {
+  get useOpenAPI(): boolean;
+  name: string;
+  issuerRef: string;
+  getHelpUrl(backendPath: string): string;
+  validate(): ModelValidations;
+  isNew: boolean;
+  keyType: string;
+  keyBits: string | undefined;
+}