Merge pull request #1245 from appknox/org-namespace-ts

Organization namespace typescript migration

app/components/organization-namespace/approval-status/index.hbs

@@ -1,6 +1,6 @@
 {{#if @namespace.isApproved}}
   <AkTypography @color='textSecondary' @tag='span'>
-    {{dayjs-from-now @namespace.approvedOn}}
+    {{this.approvedOnDate}}
   </AkTypography>
 
   {{#if @namespace.approvedBy}}

app/components/organization-namespace/approval-status/index.ts

@@ -0,0 +1,71 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import ENV from 'irene/config/environment';
+import triggerAnalytics from 'irene/utils/trigger-analytics';
+import { tracked } from '@glimmer/tracking';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import IntlService from 'ember-intl/services/intl';
+import MeService from 'irene/services/me';
+import OrganizationNamespaceModel from 'irene/models/organization-namespace';
+
+export interface OrganizationNamespaceApprovalStatusSignature {
+  Args: {
+    namespace: OrganizationNamespaceModel;
+    onRejectNamespace: (namespace: OrganizationNamespaceModel) => void;
+  };
+  Element: HTMLElement;
+}
+
+export default class OrganizationNamespaceApprovalStatus extends Component<OrganizationNamespaceApprovalStatusSignature> {
+  @service declare intl: IntlService;
+  @service declare me: MeService;
+  @service('notifications') declare notify: NotificationService;
+
+  @tracked isApprovingNamespace = false;
+
+  /* Approve namespace action */
+  approveNamespace = task(async () => {
+    try {
+      this.isApprovingNamespace = true;
+
+      const ns = this.args.namespace;
+      ns.set('isApproved', true);
+
+      await ns.save();
+
+      this.notify.success(this.intl.t('namespaceApproved'));
+
+      triggerAnalytics(
+        'feature',
+        ENV.csb['namespaceAdded'] as CsbAnalyticsFeatureData
+      );
+
+      this.isApprovingNamespace = false;
+    } catch (e) {
+      const err = e as AdapterError;
+      let errMsg = this.intl.t('pleaseTryAgain');
+
+      if (err.errors && err.errors.length) {
+        errMsg = err.errors[0]?.detail || errMsg;
+      } else if (err.message) {
+        errMsg = err.message;
+      }
+
+      this.notify.error(errMsg);
+      this.isApprovingNamespace = false;
+    }
+  });
+
+  get approvedOnDate() {
+    dayjs.extend(relativeTime);
+    return dayjs(this.args.namespace.approvedOn).fromNow();
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'OrganizationNamespace::ApprovalStatus': typeof OrganizationNamespaceApprovalStatus;
+  }
+}

app/components/organization-namespace/index.js → app/components/organization-namespace/index.ts

@@ -1,28 +1,53 @@
-import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
-
+import IntlService from 'ember-intl/services/intl';
+import StoreService from '@ember-data/store';
+import RouterService from '@ember/routing/router-service';
+import MeService from 'irene/services/me';
 import ENV from 'irene/config/environment';
 import triggerAnalytics from 'irene/utils/trigger-analytics';
+import OrganizationNamespaceModel from 'irene/models/organization-namespace';
+// eslint-disable-next-line ember/use-ember-data-rfc-395-imports
+import DS from 'ember-data';
 
-export default class OrganizationNamespaceComponent extends Component {
-  @service intl;
-  @service('notifications') notify;
-  @service me;
-  @service store;
-  @service router;
+export interface OrganizationNamespaceQueryParams {
+  namespaceLimit: number;
+  namespaceOffset: number;
+}
 
-  @tracked showRejectNamespaceConfirm = false;
-  @tracked selectedNamespace = null;
-  @tracked namespaceResponse = null;
+type NamespaceQueryResponse =
+  DS.AdapterPopulatedRecordArray<OrganizationNamespaceModel> & {
+    meta?: { count: number };
+  };
+
+export interface OrganizationNamespaceComponentSignature {
+  Args: {
+    queryParams: OrganizationNamespaceQueryParams;
+    limit?: number;
+    offset?: number;
+  };
+  Element: HTMLElement;
+}
 
-  tNamespaceRejected = this.intl.t('namespaceRejected');
-  tPleaseTryAgain = this.intl.t('pleaseTryAgain');
+export default class OrganizationNamespaceComponent extends Component<OrganizationNamespaceComponentSignature> {
+  @service declare intl: IntlService;
+  @service declare me: MeService;
+  @service('notifications') declare notify: NotificationService;
+  @service declare store: StoreService;
+  @service declare router: RouterService;
 
-  constructor() {
-    super(...arguments);
+  @tracked showRejectNamespaceConfirm = false;
+  @tracked selectedNamespace: OrganizationNamespaceModel | null = null;
+  @tracked namespaceResponse: NamespaceQueryResponse | null = null;
+
+  constructor(
+    owner: unknown,
+    args: OrganizationNamespaceComponentSignature['Args']
+  ) {
+    super(owner, args);
     const { namespaceLimit, namespaceOffset } = this.args.queryParams;
 
     this.fetchNamespace.perform(namespaceLimit, namespaceOffset);
@@ -59,7 +84,7 @@ export default class OrganizationNamespaceComponent extends Component {
 
   /* Open reject-namespace confirmation */
   @action
-  rejectNamespaceConfirm(namespace) {
+  rejectNamespaceConfirm(namespace: OrganizationNamespaceModel) {
     this.showRejectNamespaceConfirm = true;
     this.selectedNamespace = namespace;
   }
@@ -71,7 +96,7 @@ export default class OrganizationNamespaceComponent extends Component {
   }
 
   @action
-  handleNextAction({ limit, offset }) {
+  handleNextAction({ limit, offset }: { limit: number; offset: number }) {
     this.router.transitionTo({
       queryParams: { namespace_limit: limit, namespace_offset: offset },
     });
@@ -80,7 +105,7 @@ export default class OrganizationNamespaceComponent extends Component {
   }
 
   @action
-  handlePrevAction({ limit, offset }) {
+  handlePrevAction({ limit, offset }: { limit: number; offset: number }) {
     this.router.transitionTo({
       queryParams: { namespace_limit: limit, namespace_offset: offset },
     });
@@ -89,7 +114,7 @@ export default class OrganizationNamespaceComponent extends Component {
   }
 
   @action
-  handleItemPerPageChange({ limit }) {
+  handleItemPerPageChange({ limit }: { limit: number }) {
     this.router.transitionTo({
       queryParams: { namespace_limit: limit, namespace_offset: 0 },
     });
@@ -106,11 +131,12 @@ export default class OrganizationNamespaceComponent extends Component {
           offset,
         }
       );
-    } catch (err) {
-      let errMsg = this.tPleaseTryAgain;
+    } catch (e) {
+      const err = e as AdapterError;
+      let errMsg = this.intl.t('pleaseTryAgain');
 
       if (err.errors && err.errors.length) {
-        errMsg = err.errors[0].detail || errMsg;
+        errMsg = err.errors[0]?.detail || errMsg;
       } else if (err.message) {
         errMsg = err.message;
       }
@@ -124,18 +150,22 @@ export default class OrganizationNamespaceComponent extends Component {
     try {
       const namespace = this.selectedNamespace;
 
-      namespace.deleteRecord();
-      await namespace.save();
+      namespace?.deleteRecord();
+      await namespace?.save();
 
-      this.notify.success(this.tNamespaceRejected);
-      triggerAnalytics('feature', ENV.csb.namespaceRejected);
+      this.notify.success(this.intl.t('namespaceRejected'));
+      triggerAnalytics(
+        'feature',
+        ENV.csb['namespaceRejected'] as CsbAnalyticsFeatureData
+      );
 
       this.showRejectNamespaceConfirm = false;
-    } catch (err) {
-      let errMsg = this.tPleaseTryAgain;
+    } catch (e) {
+      const err = e as AdapterError;
+      let errMsg = this.intl.t('pleaseTryAgain');
 
       if (err.errors && err.errors.length) {
-        errMsg = err.errors[0].detail || errMsg;
+        errMsg = err.errors[0]?.detail || errMsg;
       } else if (err.message) {
         errMsg = err.message;
       }
@@ -144,3 +174,9 @@ export default class OrganizationNamespaceComponent extends Component {
     }
   });
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    OrganizationNamespace: typeof OrganizationNamespaceComponent;
+  }
+}

app/components/organization-namespace/namespace-value/index.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import OrganizationNamespaceModel from 'irene/models/organization-namespace';
+
+export interface OrganizationNamespaceComponentSignature {
+  Args: {
+    namespace: OrganizationNamespaceModel;
+  };
+  Element: HTMLElement;
+}
+
+export default class OrganizationNamespaceValueComponent extends Component<OrganizationNamespaceComponentSignature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'OrganizationNamespace::NamespaceValue': typeof OrganizationNamespaceValueComponent;
+  }
+}

app/components/organization-namespace/request-status/index.hbs

@@ -1,5 +1,5 @@
 <AkTypography @color='textSecondary' @tag='span'>
-  {{dayjs-from-now @namespace.createdOn}}
+  {{this.createdOnDate}}
 </AkTypography>
 
 {{#if @namespace.requestedBy}}

app/components/organization-namespace/request-status/index.ts

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import OrganizationNamespaceModel from 'irene/models/organization-namespace';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+export interface OrganizationNamespaceRequestStatusSignature {
+  Args: {
+    namespace: OrganizationNamespaceModel;
+  };
+  Element: HTMLElement;
+}
+
+export default class OrganizationNamespaceComponent extends Component<OrganizationNamespaceRequestStatusSignature> {
+  get createdOnDate() {
+    dayjs.extend(relativeTime);
+    return dayjs(this.args.namespace.createdOn).fromNow();
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'OrganizationNamespace::RequestStatus': typeof OrganizationNamespaceComponent;
+  }
+}

types/global.d.ts

@@ -117,7 +117,7 @@ declare module '@glint/environment-ember-loose/registry' {
 
     ConfirmBox: ComponentLike<{
       Args: {
-        title: string | null;
+        title?: string | null;
         confirmText?: string;
         cancelText?: string;
         key?: string;