chore(BM): query heavy calculation attribute on uniq object query

src/components/WarningDialog.tsx

@@ -13,6 +13,7 @@ interface WarningDialogProps extends Omit<DialogProps, 'actions'> {
   mode?: keyof typeof WarningDialogMode
   continueText: string
   forceOpen?: boolean
+  disableOnContinue?: boolean
 }
 
 export interface WarningDialogRef extends DialogRef {}
@@ -24,6 +25,7 @@ export const WarningDialog = forwardRef<DialogRef, WarningDialogProps>(
       continueText,
       mode = WarningDialogMode.danger,
       forceOpen = false,
+      disableOnContinue = false,
       ...props
     }: WarningDialogProps,
     ref,
@@ -41,6 +43,7 @@ export const WarningDialog = forwardRef<DialogRef, WarningDialogProps>(
               {translate('text_6244277fe0975300fe3fb94a')}
             </Button>
             <Button
+              disabled={disableOnContinue}
               data-test="warning-confirm"
               danger={mode === WarningDialogMode.danger}
               onClick={async () => {

src/components/billableMetrics/BillableMetricItem.tsx

@@ -39,7 +39,6 @@ gql`
     name
     code
     createdAt
-    ...DeleteBillableMetricDialog
   }
 
   ${DeleteBillableMetricDialogFragmentDoc}
@@ -120,7 +119,7 @@ export const BillableMetricItem = memo(
                     variant="quaternary"
                     align="left"
                     onClick={() => {
-                      deleteDialogRef.current?.openDialog(billableMetric)
+                      deleteDialogRef.current?.openDialog(billableMetric.id)
                       closePopper()
                     }}
                   >

src/components/billableMetrics/DeleteBillableMetricDialog.tsx

@@ -1,18 +1,27 @@
 import { gql } from '@apollo/client'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 
-import { DialogRef, Typography } from '~/components/designSystem'
+import { DialogRef, Skeleton, Typography } from '~/components/designSystem'
 import { WarningDialog } from '~/components/WarningDialog'
 import { addToast } from '~/core/apolloClient'
-import { BillableMetricItemFragment, useDeleteBillableMetricMutation } from '~/generated/graphql'
+import {
+  useDeleteBillableMetricMutation,
+  useGetBillableMetricToDeleteQuery,
+} from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
 gql`
   fragment DeleteBillableMetricDialog on BillableMetric {
     id
     name
-    draftInvoicesCount
-    activeSubscriptionsCount
+    draftInvoicesCount # This attribute is heavy computation, so this fragment should not be used in collection query
+    activeSubscriptionsCount # This attribute is heavy computation, so this fragment should not be used in collection query
+  }
+
+  query getBillableMetricToDelete($id: ID!) {
+    billableMetric(id: $id) {
+      ...DeleteBillableMetricDialog
+    }
   }
 
   mutation deleteBillableMetric($input: DestroyBillableMetricInput!) {
@@ -23,16 +32,20 @@ gql`
 `
 
 export interface DeleteBillableMetricDialogRef {
-  openDialog: (billableMetric: BillableMetricItemFragment) => unknown
+  openDialog: (billableMetricId: string) => unknown
   closeDialog: () => unknown
 }
 
 export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogRef>((_, ref) => {
   const dialogRef = useRef<DialogRef>(null)
   const { translate } = useInternationalization()
-  const [billableMetric, setBillableMetric] = useState<BillableMetricItemFragment | undefined>(
-    undefined,
-  )
+  const [billableMetricId, setBillableMetricId] = useState<string | undefined>(undefined)
+  const { data, loading } = useGetBillableMetricToDeleteQuery({
+    variables: { id: billableMetricId || '' },
+    skip: !billableMetricId,
+  })
+
+  const billableMetric = data?.billableMetric
 
   const {
     id = '',
@@ -42,18 +55,18 @@ export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogR
   } = billableMetric || {}
 
   const [deleteBillableMetric] = useDeleteBillableMetricMutation({
-    onCompleted(data) {
-      if (data && data.destroyBillableMetric) {
+    onCompleted({ destroyBillableMetric }) {
+      if (destroyBillableMetric) {
         addToast({
           message: translate('text_6256f9f1184d3301290c7299'),
           severity: 'success',
         })
       }
     },
-    update(cache, { data }) {
-      if (!data?.destroyBillableMetric) return
+    update(cache, { data: updateData }) {
+      if (!updateData?.destroyBillableMetric) return
       const cacheId = cache.identify({
-        id: data?.destroyBillableMetric.id,
+        id: updateData?.destroyBillableMetric.id,
         __typename: 'BillableMetric',
       })
 
@@ -63,7 +76,7 @@ export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogR
 
   useImperativeHandle(ref, () => ({
     openDialog: (infos) => {
-      setBillableMetric(infos)
+      setBillableMetricId(infos)
       dialogRef.current?.openDialog()
     },
     closeDialog: () => dialogRef.current?.closeDialog(),
@@ -72,13 +85,26 @@ export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogR
   return (
     <WarningDialog
       ref={dialogRef}
-      title={translate('text_6256f824b6368e01153caa47', {
-        billableMetricName: name,
-      })}
+      disableOnContinue={loading}
+      title={
+        loading ? (
+          <Skeleton variant="text" width="100%" height={16} marginBottom={20} />
+        ) : (
+          translate('text_6256f824b6368e01153caa47', {
+            billableMetricName: name,
+          })
+        )
+      }
       description={
-        (billableMetric?.draftInvoicesCount || 0) > 0 ||
-        billableMetric?.activeSubscriptionsCount ||
-        0 ? (
+        loading ? (
+          <>
+            <Skeleton variant="text" width="100%" marginBottom={16} />
+            <Skeleton variant="text" width="100%" marginBottom={16} />
+            <Skeleton variant="text" width="100%" />
+          </>
+        ) : (billableMetric?.draftInvoicesCount || 0) > 0 ||
+          billableMetric?.activeSubscriptionsCount ||
+          0 ? (
           translate(
             'text_63c842d84a91637c3acf0395',
             draftInvoicesCount > 0 && activeSubscriptionsCount > 0

src/generated/graphql.tsx

@@ -5287,10 +5287,17 @@ export type GetGoogleAuthUrlQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetGoogleAuthUrlQuery = { __typename?: 'Query', googleAuthUrl: { __typename?: 'AuthUrl', url: string } };
 
-export type BillableMetricItemFragment = { __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any, draftInvoicesCount: number, activeSubscriptionsCount: number };
+export type BillableMetricItemFragment = { __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any };
 
 export type DeleteBillableMetricDialogFragment = { __typename?: 'BillableMetric', id: string, name: string, draftInvoicesCount: number, activeSubscriptionsCount: number };
 
+export type GetBillableMetricToDeleteQueryVariables = Exact<{
+  id: Scalars['ID']['input'];
+}>;
+
+
+export type GetBillableMetricToDeleteQuery = { __typename?: 'Query', billableMetric?: { __typename?: 'BillableMetric', id: string, name: string, draftInvoicesCount: number, activeSubscriptionsCount: number } | null };
+
 export type DeleteBillableMetricMutationVariables = Exact<{
   input: DestroyBillableMetricInput;
 }>;
@@ -6830,7 +6837,7 @@ export type UpdateBillableMetricMutationVariables = Exact<{
 }>;
 
 
-export type UpdateBillableMetricMutation = { __typename?: 'Mutation', updateBillableMetric?: { __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any, draftInvoicesCount: number, activeSubscriptionsCount: number } | null };
+export type UpdateBillableMetricMutation = { __typename?: 'Mutation', updateBillableMetric?: { __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any } | null };
 
 export type EditCouponFragment = { __typename?: 'Coupon', id: string, amountCents?: any | null, amountCurrency?: CurrencyEnum | null, appliedCouponsCount: number, code?: string | null, couponType: CouponTypeEnum, description?: string | null, expiration: CouponExpiration, expirationAt?: any | null, frequency: CouponFrequency, frequencyDuration?: number | null, limitedBillableMetrics: boolean, limitedPlans: boolean, name: string, percentageRate?: number | null, reusable: boolean, plans?: Array<{ __typename?: 'Plan', id: string, name: string, code: string }> | null, billableMetrics?: Array<{ __typename?: 'BillableMetric', id: string, name: string, code: string }> | null };
 
@@ -6989,7 +6996,7 @@ export type BillableMetricsQueryVariables = Exact<{
 }>;
 
 
-export type BillableMetricsQuery = { __typename?: 'Query', billableMetrics: { __typename?: 'BillableMetricCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number }, collection: Array<{ __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any, draftInvoicesCount: number, activeSubscriptionsCount: number }> } };
+export type BillableMetricsQuery = { __typename?: 'Query', billableMetrics: { __typename?: 'BillableMetricCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number }, collection: Array<{ __typename?: 'BillableMetric', id: string, name: string, code: string, createdAt: any }> } };
 
 export type GetCouponForDetailsQueryVariables = Exact<{
   id: Scalars['ID']['input'];
@@ -7010,6 +7017,7 @@ export type CouponsQuery = { __typename?: 'Query', coupons: { __typename?: 'Coup
 export type GetTaxesForAddOnFormQueryVariables = Exact<{
   limit?: InputMaybe<Scalars['Int']['input']>;
   page?: InputMaybe<Scalars['Int']['input']>;
+  searchTerm?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
@@ -7607,6 +7615,14 @@ export const DeleteAddOnFragmentDoc = gql`
   name
 }
     `;
+export const BillableMetricItemFragmentDoc = gql`
+    fragment BillableMetricItem on BillableMetric {
+  id
+  name
+  code
+  createdAt
+}
+    `;
 export const DeleteBillableMetricDialogFragmentDoc = gql`
     fragment DeleteBillableMetricDialog on BillableMetric {
   id
@@ -7615,15 +7631,6 @@ export const DeleteBillableMetricDialogFragmentDoc = gql`
   activeSubscriptionsCount
 }
     `;
-export const BillableMetricItemFragmentDoc = gql`
-    fragment BillableMetricItem on BillableMetric {
-  id
-  name
-  code
-  createdAt
-  ...DeleteBillableMetricDialog
-}
-    ${DeleteBillableMetricDialogFragmentDoc}`;
 export const CouponCaptionFragmentDoc = gql`
     fragment CouponCaption on Coupon {
   id
@@ -10310,6 +10317,46 @@ export type GetGoogleAuthUrlQueryHookResult = ReturnType<typeof useGetGoogleAuth
 export type GetGoogleAuthUrlLazyQueryHookResult = ReturnType<typeof useGetGoogleAuthUrlLazyQuery>;
 export type GetGoogleAuthUrlSuspenseQueryHookResult = ReturnType<typeof useGetGoogleAuthUrlSuspenseQuery>;
 export type GetGoogleAuthUrlQueryResult = Apollo.QueryResult<GetGoogleAuthUrlQuery, GetGoogleAuthUrlQueryVariables>;
+export const GetBillableMetricToDeleteDocument = gql`
+    query getBillableMetricToDelete($id: ID!) {
+  billableMetric(id: $id) {
+    ...DeleteBillableMetricDialog
+  }
+}
+    ${DeleteBillableMetricDialogFragmentDoc}`;
+
+/**
+ * __useGetBillableMetricToDeleteQuery__
+ *
+ * To run a query within a React component, call `useGetBillableMetricToDeleteQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetBillableMetricToDeleteQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetBillableMetricToDeleteQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useGetBillableMetricToDeleteQuery(baseOptions: Apollo.QueryHookOptions<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>(GetBillableMetricToDeleteDocument, options);
+      }
+export function useGetBillableMetricToDeleteLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>(GetBillableMetricToDeleteDocument, options);
+        }
+export function useGetBillableMetricToDeleteSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>(GetBillableMetricToDeleteDocument, options);
+        }
+export type GetBillableMetricToDeleteQueryHookResult = ReturnType<typeof useGetBillableMetricToDeleteQuery>;
+export type GetBillableMetricToDeleteLazyQueryHookResult = ReturnType<typeof useGetBillableMetricToDeleteLazyQuery>;
+export type GetBillableMetricToDeleteSuspenseQueryHookResult = ReturnType<typeof useGetBillableMetricToDeleteSuspenseQuery>;
+export type GetBillableMetricToDeleteQueryResult = Apollo.QueryResult<GetBillableMetricToDeleteQuery, GetBillableMetricToDeleteQueryVariables>;
 export const DeleteBillableMetricDocument = gql`
     mutation deleteBillableMetric($input: DestroyBillableMetricInput!) {
   destroyBillableMetric(input: $input) {
@@ -16935,11 +16982,9 @@ export const UpdateBillableMetricDocument = gql`
     mutation updateBillableMetric($input: UpdateBillableMetricInput!) {
   updateBillableMetric(input: $input) {
     ...BillableMetricItem
-    ...DeleteBillableMetricDialog
   }
 }
-    ${BillableMetricItemFragmentDoc}
-${DeleteBillableMetricDialogFragmentDoc}`;
+    ${BillableMetricItemFragmentDoc}`;
 export type UpdateBillableMetricMutationFn = Apollo.MutationFunction<UpdateBillableMetricMutation, UpdateBillableMetricMutationVariables>;
 
 /**

src/hooks/useCreateEditBillableMetric.ts

@@ -9,7 +9,6 @@ import {
   AggregationTypeEnum,
   BillableMetricItemFragmentDoc,
   CreateBillableMetricInput,
-  DeleteBillableMetricDialogFragmentDoc,
   EditBillableMetricFragment,
   EditBillableMetricFragmentDoc,
   LagoApiError,
@@ -36,12 +35,10 @@ gql`
   mutation updateBillableMetric($input: UpdateBillableMetricInput!) {
     updateBillableMetric(input: $input) {
       ...BillableMetricItem
-      ...DeleteBillableMetricDialog
     }
   }
 
   ${BillableMetricItemFragmentDoc}
-  ${DeleteBillableMetricDialogFragmentDoc}
   ${EditBillableMetricFragmentDoc}
 `
 

src/styles/muiTheme.ts

@@ -614,7 +614,7 @@ export const theme = createTheme({
             '&:active': {
               backgroundColor: palette.error[300],
             },
-            '&$disabled': {
+            '&.Mui-disabled': {
               color: palette.grey[400],
               backgroundColor: palette.grey[100],
             },