chore(pr): Update to align with #97969

Author: leedongwei

static/app/types/hooks.tsx

@@ -330,9 +330,11 @@ type ReactHooks = {
   'react-hook:use-button-tracking': (props: ButtonProps) => () => void;
   'react-hook:use-get-max-retention-days': () => number | undefined;
   'react-hook:use-metric-detector-limit': () => {
-    isLimitExceeded: boolean;
-    limit: number;
-    numMetricMonitors: number;
+    detectorCount: number;
+    detectorLimit: number;
+    hasReachedLimit: boolean;
+    isError: boolean;
+    isLoading: boolean;
   } | null;
 };
 

static/gsApp/components/metricAlertQuotaMessage.spec.tsx

@@ -15,15 +15,15 @@ jest.mock('getsentry/actionCreators/modal', () => ({
   openUpsellModal: jest.fn(),
 }));
 
-const mockUseMetricDetectorLimit = useMetricDetectorLimit as unknown as jest.Mock;
+const mockuseMetricDetectorLimit = useMetricDetectorLimit as unknown as jest.Mock;
 
 describe('MetricAlertQuotaMessage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders nothing when hook returns null', () => {
-    mockUseMetricDetectorLimit.mockReturnValue(null);
+    mockuseMetricDetectorLimit.mockReturnValue(null);
 
     const {container} = render(<MetricAlertQuotaMessage />, {
       organization: OrganizationFixture(),
@@ -32,20 +32,18 @@ describe('MetricAlertQuotaMessage', () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it('renders approaching limit message with upgrade action', async () => {
-    mockUseMetricDetectorLimit.mockReturnValue({
-      isLimitExceeded: false,
-      limit: 11,
-      numMetricMonitors: 10,
+  it('renders approaching detectorLimit message with upgrade action', async () => {
+    mockuseMetricDetectorLimit.mockReturnValue({
+      hasReachedLimit: false,
+      detectorLimit: 11,
+      detectorCount: 10,
     });
 
     const organization = OrganizationFixture({slug: 'acme'});
 
     render(<MetricAlertQuotaMessage />, {organization});
 
-    expect(
-      await screen.findByText(/approaching the limit of 11 metric monitors/i)
-    ).toBeInTheDocument();
+    expect(await screen.findByText(/used 10 of 11 metric monitors/i)).toBeInTheDocument();
 
     const upgrade = screen.getByRole('button', {name: /upgrade your plan/i});
     await userEvent.click(upgrade);
@@ -56,11 +54,11 @@ describe('MetricAlertQuotaMessage', () => {
     });
   });
 
-  it('renders reached limit message with remove and upgrade actions when at limit', async () => {
-    mockUseMetricDetectorLimit.mockReturnValue({
-      isLimitExceeded: true,
-      limit: 20,
-      numMetricMonitors: 20,
+  it('renders reached detectorLimit message with remove and upgrade actions when at detectorLimit', async () => {
+    mockuseMetricDetectorLimit.mockReturnValue({
+      hasReachedLimit: true,
+      detectorLimit: 20,
+      detectorCount: 20,
     });
 
     const organization = OrganizationFixture({slug: 'acme'});

static/gsApp/components/metricAlertQuotaMessage.tsx

@@ -33,7 +33,7 @@ export function MetricAlertQuotaIcon() {
   const metricAlertQuota = useMetricDetectorLimit();
   const organization = useOrganization();
 
-  if (metricAlertQuota?.isLimitExceeded) {
+  if (metricAlertQuota?.hasReachedLimit) {
     return (
       <Tooltip
         isHoverable
@@ -57,13 +57,13 @@ export function MetricAlertQuotaMessage() {
   const organization = useOrganization();
   const metricAlertQuota = useMetricDetectorLimit();
 
-  if (metricAlertQuota?.isLimitExceeded) {
+  if (metricAlertQuota?.hasReachedLimit) {
     return (
       <DisabledAlertMessageContainer>
         {tct(
           "You have reached your plan's limit on metric monitors ([limit]). [removeLink:Remove existing monitors] or [upgradeLink:upgrade your plan].",
           {
-            limit: metricAlertQuota.limit.toLocaleString(),
+            limit: metricAlertQuota.detectorLimit.toLocaleString(),
             removeLink: <Link to={makeAlertsPathname({organization, path: '/rules/'})} />,
             upgradeLink: <UpgradeLink />,
           }
@@ -74,14 +74,15 @@ export function MetricAlertQuotaMessage() {
 
   if (
     metricAlertQuota &&
-    metricAlertQuota.limit === metricAlertQuota.numMetricMonitors + 1
+    metricAlertQuota.detectorLimit === metricAlertQuota.detectorCount + 1
   ) {
     return (
       <DisabledAlertMessageContainer>
         {tct(
-          'You are approaching the limit of [limit] metric monitors for your plan. To increase the limit, [upgradeLink:upgrade your plan].',
+          'You have used [count] of [limit] metric monitors for your plan. To increase the limit, [upgradeLink:upgrade your plan].',
           {
-            limit: metricAlertQuota.limit.toLocaleString(),
+            count: metricAlertQuota.detectorCount.toLocaleString(),
+            limit: metricAlertQuota.detectorLimit.toLocaleString(),
             upgradeLink: <UpgradeLink />,
           }
         )}

static/gsApp/hooks/useMetricDetectorLimit.tsx

@@ -1,10 +1,12 @@
 import useOrganization from 'sentry/utils/useOrganization';
 
 type MetricDetectorLimitResponse = {
-  isLimitExceeded: boolean;
-  limit: number;
-  numMetricMonitors: number;
-} | null; // null means there is no limit
+  detectorCount: number;
+  detectorLimit: number;
+  hasReachedLimit: boolean;
+  isError: boolean;
+  isLoading: boolean;
+} | null;
 
 // TODO: Replace with actual hook
 export function useMetricDetectorLimit(): MetricDetectorLimitResponse {
@@ -15,8 +17,10 @@ export function useMetricDetectorLimit(): MetricDetectorLimitResponse {
   }
 
   return {
-    isLimitExceeded: true,
-    numMetricMonitors: 20,
-    limit: 20,
+    hasReachedLimit: true,
+    detectorCount: 20,
+    detectorLimit: 20,
+    isError: false,
+    isLoading: false,
   };
 }