AC-2402 Migrate sponsoring org row component (#8894)

* AC-2402 Migrate sponsoring org row component

* AC-2402 Migrate Sponsoring Org Row Component

apps/web/src/app/admin-console/settings/sponsoring-org-row.component.html

@@ -1,50 +1,36 @@
-<td>
+<td bitCell>
   {{ sponsoringOrg.familySponsorshipFriendlyName }}
 </td>
-<td>{{ sponsoringOrg.name }}</td>
+<td bitCell>{{ sponsoringOrg.name }}</td>
-<td>
+<td bitCell>
   <span [ngClass]="statusClass">{{ statusMessage }}</span>
 </td>
-<td class="table-action-right">
+<td bitCell>
-  <div class="dropdown" appListDropdown>
+  <button
+    *ngIf="!sponsoringOrg.familySponsorshipToDelete"
+    type="button"
+    bitIconButton="bwi-ellipsis-v"
+    buttonType="main"
+    [bitMenuTriggerFor]="appListDropdown"
+    appA11yTitle="{{ 'options' | i18n }}"
+  ></button>
+  <bit-menu #appListDropdown>
     <button
-      *ngIf="!sponsoringOrg.familySponsorshipToDelete"
-      class="btn btn-outline-secondary dropdown-toggle"
       type="button"
-      id="dropdownMenuButton"
+      bitMenuItem
-      data-toggle="dropdown"
+      *ngIf="!isSelfHosted && !sponsoringOrg.familySponsorshipValidUntil"
-      aria-haspopup="true"
+      (click)="resendEmail()"
-      aria-expanded="false"
+      [attr.aria-label]="'resendEmailLabel' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
-      appA11yTitle="{{ 'options' | i18n }}"
     >
-      <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+      {{ "resendEmail" | i18n }}
     </button>
-    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+    <button
-      <button
+      type="button"
-        type="button"
+      bitMenuItem
-        #resendEmailBtn
+      (click)="revokeSponsorship()"
-        *ngIf="!isSelfHosted && !sponsoringOrg.familySponsorshipValidUntil"
+      [attr.aria-label]="'revokeAccount' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
-        [appApiAction]="resendEmailPromise"
+    >
-        class="dropdown-item btn-submit"
+      <span class="tw-text-danger">{{ "remove" | i18n }}</span>
-        [disabled]="$any(resendEmailBtn).loading"
+    </button>
-        (click)="resendEmail()"
+  </bit-menu>
-        [attr.aria-label]="'resendEmailLabel' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
-      >
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <span>{{ "resendEmail" | i18n }}</span>
-      </button>
-      <button
-        type="button"
-        #revokeSponsorshipBtn
-        [appApiAction]="revokeSponsorshipPromise"
-        class="dropdown-item text-danger btn-submit"
-        [disabled]="$any(revokeSponsorshipBtn).loading"
-        (click)="revokeSponsorship()"
-        [attr.aria-label]="'revokeAccount' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
-      >
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <span>{{ "remove" | i18n }}</span>
-      </button>
-    </div>
-  </div>
 </td>

apps/web/src/app/admin-console/settings/sponsoring-org-row.component.ts

@@ -20,10 +20,7 @@ export class SponsoringOrgRowComponent implements OnInit {
   @Output() sponsorshipRemoved = new EventEmitter();
 
   statusMessage = "loading";
-  statusClass: "text-success" | "text-danger" = "text-success";
+  statusClass: "tw-text-success" | "tw-text-danger" = "tw-text-success";
-
-  revokeSponsorshipPromise: Promise<any>;
-  resendEmailPromise: Promise<any>;
 
   private locale = "";
 
@@ -48,20 +45,15 @@ export class SponsoringOrgRowComponent implements OnInit {
 
   async revokeSponsorship() {
     try {
-      this.revokeSponsorshipPromise = this.doRevokeSponsorship();
+      await this.doRevokeSponsorship();
-      await this.revokeSponsorshipPromise;
     } catch (e) {
       this.logService.error(e);
     }
-
-    this.revokeSponsorshipPromise = null;
   }
 
   async resendEmail() {
-    this.resendEmailPromise = this.apiService.postResendSponsorshipOffer(this.sponsoringOrg.id);
+    await this.apiService.postResendSponsorshipOffer(this.sponsoringOrg.id);
-    await this.resendEmailPromise;
     this.platformUtilsService.showToast("success", null, this.i18nService.t("emailSent"));
-    this.resendEmailPromise = null;
   }
 
   get isSentAwaitingSync() {
@@ -106,31 +98,31 @@ export class SponsoringOrgRowComponent implements OnInit {
         "revokeWhenExpired",
         formatDate(validUntil, "MM/dd/yyyy", this.locale),
       );
-      this.statusClass = "text-danger";
+      this.statusClass = "tw-text-danger";
     } else if (toDelete) {
       // They want to delete and we don't have a valid until date so we can
       // this should only happen on a self-hosted install
       this.statusMessage = this.i18nService.t("requestRemoved");
-      this.statusClass = "text-danger";
+      this.statusClass = "tw-text-danger";
     } else if (validUntil) {
       // They don't want to delete and they have a valid until date
       // that means they are actively sponsoring someone
       this.statusMessage = this.i18nService.t("active");
-      this.statusClass = "text-success";
+      this.statusClass = "tw-text-success";
     } else if (selfHosted && lastSyncDate) {
       // We are on a self-hosted install and it has been synced but we have not gotten
       // a valid until date so we can't know if they are actively sponsoring someone
       this.statusMessage = this.i18nService.t("sent");
-      this.statusClass = "text-success";
+      this.statusClass = "tw-text-success";
     } else if (!selfHosted) {
       // We are in cloud and all other status checks have been false therefore we have
       // sent the request but it hasn't been accepted yet
       this.statusMessage = this.i18nService.t("sent");
-      this.statusClass = "text-success";
+      this.statusClass = "tw-text-success";
     } else {
       // We are on a self-hosted install and we have not synced yet
       this.statusMessage = this.i18nService.t("requested");
-      this.statusClass = "text-success";
+      this.statusClass = "tw-text-success";
     }
   }
 }