Support A2p brands and campaigns

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Twilio Console Plus",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Add some secret saurce to Twilio console",
   "icons": {
     "48": "icons/icon-48.png"

src/components/InspectResourceButton.tsx

@@ -1,9 +1,12 @@
+import "react-tooltip/dist/react-tooltip.css";
+
 import React, { useState } from "react";
 import Popup from "reactjs-popup";
 import { CopyBlock, dracula } from "react-code-blocks";
 import { useQuery } from "@tanstack/react-query";
 import { TwilioResource } from "../twilio-resources";
 import styled from "styled-components";
+import { Tooltip } from "react-tooltip";
 
 const PopupContainer = styled.div`
   .close {
@@ -31,7 +34,12 @@ const InspectResourceButton: React.FC<InspectResourceButtonProps> = ({
   const openModal = () => setOpen(true);
   return (
     <>
-      <button onClick={openModal}>Inspect</button>
+      <button className={`inspect-${resource.sid}`} onClick={openModal}>
+        Inspect
+      </button>
+      <Tooltip anchorSelect={`.inspect-${resource.sid}`} place="top">
+        Click to inspect {resource.getName()}
+      </Tooltip>
       <Popup
         open={open}
         modal

src/twilio-request.ts

@@ -6,3 +6,14 @@ export const twilioGet = (apiUrl: string) => {
     },
   }).then((res) => res.json());
 };
+
+export async function* twilioGetPaged(
+  apiUrl: string,
+): AsyncGenerator<unknown, void, unknown> {
+  const response = await twilioGet(apiUrl);
+  yield response;
+  const next_url = response.meta?.next_page_url;
+  if (next_url) {
+    yield* await twilioGetPaged(next_url);
+  }
+}

src/twilio-resource-loaders.ts

@@ -1,4 +1,5 @@
 import {
+  TwilioA2pBrand,
   TwilioAddress,
   TwilioIncomingNumber,
   TwilioMessagingService,
@@ -29,6 +30,14 @@ export const LOADERS: Loader[] = [
     resourceUrl: /.+\/sms\/(\w+)\/messaging-service-properties(\?.*)$/,
     resourceCreator: (match: string[]) => new TwilioMessagingService(match[1]),
   },
+  {
+    resourceUrl: /.+\/sms\/services\/(\w+)\/[^/]+(\?.*)$/,
+    resourceCreator: (match: string[]) => new TwilioMessagingService(match[1]),
+  },
+  {
+    resourceUrl: /.+\/sms\/regulatory-compliance\/brands\/(\w+)$/,
+    resourceCreator: (match: string[]) => new TwilioA2pBrand(match[1]),
+  },
 ];
 
 export const createTwilioResourceFromUrl = (

src/twilio-resources.ts

@@ -1,4 +1,4 @@
-import { twilioGet } from "./twilio-request";
+import { twilioGet, twilioGetPaged } from "./twilio-request";
 
 interface Link {
   label: string;
@@ -94,13 +94,60 @@ export class TwilioRegulatorySupportingDocument extends TwilioResource {
 
 export class TwilioIncomingNumber extends TwilioResource {
   getName = () => `Incoming number: ${this.sid}`;
+  getFullName = async () => {
+    const object = await this.getObject();
+    return `${this.getName()} (${object.friendly_name}; ${object.phone_number})`;
+  };
   getRelatedResources = () => Promise.resolve([]);
   getApiUrl = () =>
     `https://api.twilio.com/2010-04-01/Accounts/${this._getAccountSid()}/IncomingPhoneNumbers/${this.sid}.json`;
 }
 
 export class TwilioMessagingService extends TwilioResource {
   getName = () => `Messaging service: ${this.sid}`;
-  getRelatedResources = () => Promise.resolve([]);
+  getRelatedResources = async () => {
+    const response = await twilioGet(
+      `https://messaging.twilio.com/v1/Services/${this.sid}/Compliance/Usa2p`,
+    );
+    const results = response.compliance.map(
+      (campaign: Record<string, string>) =>
+        new TwllioA2pCampaign(campaign.sid, this.sid),
+    );
+    for await (const response of twilioGetPaged(
+      `https://messaging.twilio.com/v1/Services/${this.sid}/PhoneNumbers`,
+    )) {
+      const phones = (
+        response as Record<string, Record<string, string>[]>
+      ).phone_numbers.map(
+        (phone: Record<string, string>) => new TwilioIncomingNumber(phone.sid),
+      );
+      results.push(...phones);
+    }
+
+    return results;
+  };
   getApiUrl = () => `https://messaging.twilio.com/v1/Services/${this.sid}`;
 }
+
+export class TwllioA2pCampaign extends TwilioResource {
+  messagingServiceSid: string;
+  constructor(sid: string, messagingServiceSid: string) {
+    super(sid);
+    this.sid = sid;
+    this.messagingServiceSid = messagingServiceSid;
+  }
+  getName = () => `A2p campaign: ${this.sid}`;
+  getRelatedResources = async () => {
+    const object = await this.getObject();
+    return [new TwilioA2pBrand(object.brand_registration_sid as string)];
+  };
+  getApiUrl = () =>
+    `https://messaging.twilio.com/v1/Services/${this.messagingServiceSid}/Compliance/Usa2p/${this.sid}`;
+}
+
+export class TwilioA2pBrand extends TwilioResource {
+  getName = () => `A2p brand: ${this.sid}`;
+  getRelatedResources = () => Promise.resolve([]);
+  getApiUrl = () =>
+    `https://messaging.twilio.com/v1/a2p/BrandRegistrations/${this.sid}`;
+}