fix: cross-cutting SDK fixes

web/sdk/react/contexts/FrontierProvider.tsx

@@ -6,16 +6,17 @@ import { withMaxAllowedInstancesGuard } from './useMaxAllowedInstancesGuard';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TransportProvider } from '@connectrpc/connect-query';
 import { createConnectTransport } from '@connectrpc/connect-web';
-import { useMemo } from 'react';
+import { ComponentType, ReactNode, useMemo } from 'react';
 import { createFetchWithCreds } from '../utils/fetch';
+import { Toast } from '@raystack/apsara-v1';
 
 export const multipleFrontierProvidersError =
   "Frontier: You've added multiple <FrontierProvider> components in your React component tree. Wrap your components in a single <FrontierProvider>.";
 
 export const queryClient = new QueryClient();
 
 export const FrontierProvider = (props: FrontierProviderProps) => {
-  const { children, initialState, config, theme, customHeaders, ...options } =
+  const { children, initialState, config, theme, customHeaders, renderThemeProvider = true, renderToastProvider = true, ...options } =
     props;
 
   const transport = useMemo(
@@ -36,7 +37,11 @@ export const FrontierProvider = (props: FrontierProviderProps) => {
             config={config}
             {...options}
           >
-            <ThemeProvider {...theme}>{children}</ThemeProvider>
+            <OptionalProvider provider={ThemeProvider} shouldRender={renderThemeProvider} providerProps={theme}>
+              <OptionalProvider provider={Toast.Provider} shouldRender={renderToastProvider}>
+                {children}
+              </OptionalProvider>
+            </OptionalProvider>
           </FrontierContextProvider>
         </CustomizationProvider>
       </TransportProvider>
@@ -51,3 +56,18 @@ export const FrontierProviderGaurd =
     'FrontierProvider',
     multipleFrontierProvidersError
   );
+
+export const OptionalProvider = <T extends { children?: ReactNode }>({
+  children,
+  provider: Provider,
+  shouldRender = true,
+  providerProps
+}: {
+  children?: ReactNode;
+  provider: ComponentType<T>;
+  shouldRender?: boolean;
+  providerProps?: Omit<T, 'children'>;
+}) => {
+  if (shouldRender) return <Provider {...(providerProps as T)}>{children}</Provider>;
+  return children
+};

web/sdk/react/views-new/billing/components/billing-details-card.tsx

@@ -24,7 +24,8 @@ export function BillingDetailsCard({
 }: BillingDetailsCardProps) {
   const btnText =
     billingAccount?.email || billingAccount?.name ? 'Update' : 'Add details';
-  const isButtonDisabled = isLoading || disabled || isActionLoading;
+  const isRestricted = isLoading || disabled;
+  const isButtonDisabled = isRestricted || isActionLoading;
 
   const address = convertBillingAddressToString(billingAccount?.address);
 
@@ -37,7 +38,7 @@ export function BillingDetailsCard({
         {!isLoading && isAllowed ? (
           <Tooltip>
             <Tooltip.Trigger
-              disabled={!isButtonDisabled}
+              disabled={!isRestricted}
               render={<span />}
             >
               <Button
@@ -53,7 +54,7 @@ export function BillingDetailsCard({
                 {btnText}
               </Button>
             </Tooltip.Trigger>
-            {isButtonDisabled && (
+            {isRestricted && (
               <Tooltip.Content>
                 Contact support to update your billing address.
               </Tooltip.Content>

web/sdk/react/views-new/billing/components/invoices.tsx

@@ -234,7 +234,9 @@ export function Invoices() {
           <DataTable.DisplayControls
           />
         </Flex>
-        <DataTable.Content
+        <DataTable.VirtualizedContent
+          rowHeight={48}
+          groupHeaderHeight={48}
           emptyState={isError ? <ErrorState /> : <NoInvoices />}
         />
       </Flex>

web/sdk/react/views-new/members/components/member-columns.tsx

@@ -111,7 +111,8 @@ export const getColumns = ({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '48px' }
+        cell: { width: '48px' },
+        header: { width: '48px' }
       },
       cell: ({ row }) => {
         const member = row.original;

web/sdk/react/views-new/members/members-view.module.css

@@ -8,6 +8,9 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
 
 .menuContent {
   min-width: 180px;

web/sdk/react/views-new/members/members-view.tsx

@@ -188,7 +188,8 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>

web/sdk/react/views-new/preferences/preferences-view.tsx

@@ -17,7 +17,6 @@ export function PreferencesView({ children }: PreferencesViewProps) {
   const { theme, setTheme } = useTheme();
   const { preferences, isLoading, isFetching, updatePreferences } =
     usePreferences({});
-  console.log(theme);
 
   const newsletterValue =
     preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value ?? 'false';

web/sdk/react/views-new/projects/components/member-columns.tsx

@@ -75,6 +75,10 @@ export function getColumns({
     {
       header: 'Role',
       accessorKey: 'email',
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const member = row.original;
         const roleList = member.isTeam
@@ -95,7 +99,8 @@ export function getColumns({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '32px' }
+        cell: { width: '32px' },
+        header: { width: '32px' }
       },
       cell: ({ row }) => {
         if (!canUpdateProject) return null;

web/sdk/react/views-new/projects/components/project-columns.tsx

@@ -57,6 +57,10 @@ export const getColumns = ({
       header: 'Members',
       accessorKey: 'membersCount',
       enableSorting: false,
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const project = row.original as Project;
         return <MembersCell projectId={project.id || ''} />;
@@ -67,7 +71,8 @@ export const getColumns = ({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '48px' }
+        cell: { width: '48px' },
+        header: { width: '48px' }
       },
       cell: ({ row }) => {
         const project = row.original as Project;

web/sdk/react/views-new/projects/project-details-view.module.css

@@ -8,6 +8,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 160px;
 }

web/sdk/react/views-new/projects/project-details-view.tsx

@@ -413,7 +413,8 @@ export function ProjectDetailsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>

web/sdk/react/views-new/projects/projects-view.module.css

@@ -2,6 +2,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 6;
 }

web/sdk/react/views-new/projects/projects-view.tsx

@@ -211,7 +211,8 @@ export function ProjectsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>

web/sdk/react/views-new/teams/components/member-columns.tsx

@@ -65,6 +65,10 @@ export function getColumns({
     {
       header: 'Role',
       accessorKey: 'email',
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const member = row.original;
         const roleList =
@@ -84,7 +88,8 @@ export function getColumns({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '32px' }
+        cell: { width: '32px' },
+        header: { width: '32px' }
       },
       cell: ({ row }) => {
         if (!canUpdateGroup) return null;

web/sdk/react/views-new/teams/team-details-view.module.css

@@ -2,6 +2,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 160px;
 }

web/sdk/react/views-new/teams/team-details-view.tsx

@@ -362,7 +362,8 @@ export function TeamDetailsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>

web/sdk/react/views-new/tokens/tokens-view.tsx

@@ -132,6 +132,7 @@ export function TokensView() {
   );
 
   const isLoading =
+    !activeOrganization?.id ||
     isActiveOrganizationLoading ||
     isBillingAccountLoading ||
     isTokensLoading ||

web/sdk/shared/types.ts

@@ -60,4 +60,6 @@ export interface FrontierProviderProps {
   initialState?: InitialState;
   customHeaders?: Record<string, CustomHeaderValue>;
   theme?: ThemeProviderProps;
+  renderToastProvider?: boolean;
+  renderThemeProvider?: boolean;
 }