Extract Dashboard URL to display within anchor tag

Author: LauraBeatris

packages/clerk-js/src/core/clerk.ts

@@ -746,7 +746,7 @@ export class Clerk implements ClerkInterface {
   ): { status: 'enabled' | 'prompt-shown' } => {
     const { for: setting, caller } = params;
 
-    // If not in development instance, return enabled status in order to not open the in-app prompt
+    // If not in development instance, return enabled status in order to not open the prompt
     if (this.#instanceType !== 'development') {
       return { status: 'enabled' };
     }

packages/clerk-js/src/ui/Components.tsx

@@ -353,7 +353,7 @@ const Components = (props: ComponentsProps) => {
 
     componentsControls.openModal = (name, props) => {
       // Prevent opening enableOrganizations prompt if it's already open
-      // to avoid duplicate mounting when component is called multiple times
+      // It should open the first call and ignore the subsequent calls
       if (name === 'enableOrganizationsPrompt') {
         setState(prev => {
           // Modal is already open, don't update state

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -2,15 +2,27 @@ import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
+import type { Environment } from '../../../../core/resources/Environment';
 import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
-import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
+import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
+
+/**
+ * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
+ */
+function withLastActiveFallback(cb: () => string): string {
+  try {
+    return cb();
+  } catch {
+    return 'https://dashboard.clerk.com/last-active?path=organization-settings';
+  }
+}
 
 const EnableOrganizationsPromptInternal = ({
   caller,
@@ -21,6 +33,28 @@ const EnableOrganizationsPromptInternal = ({
   const [isLoading, setIsLoading] = useState(false);
   const [isEnabled, setIsEnabled] = useState(false);
 
+  // @ts-expect-error - __unstable__environment is not typed
+  const environment = clerk?.__unstable__environment as Environment | undefined;
+
+  const organizationSettingsUrl = useMemo(() => {
+    return withLastActiveFallback(() => {
+      const currentUrl = window.location.href;
+      try {
+        const redirectUrlParts = handleDashboardUrlParsing(currentUrl);
+        const url = new URL(
+          `${redirectUrlParts.baseDomain}/apps/${redirectUrlParts.appId}/instances/${redirectUrlParts.instanceId}/organization-settings`,
+        );
+        return url.href;
+      } catch {
+        if (!environment?.id) {
+          throw new Error('Cannot construct dashboard URL');
+        }
+
+        return 'https://dashboard.clerk.com/last-active?path=organization-settings';
+      }
+    });
+  }, [environment?.id]);
+
   const handleEnableOrganizations = () => {
     setIsLoading(true);
 
@@ -193,8 +227,7 @@ const EnableOrganizationsPromptInternal = ({
                         font-size: 0.8125rem;
                       `,
                     ]}
-                    /* TODO - Generate URL to Dashboard */
-                    href='https://clerk.com/docs/guides/organizations'
+                    href={organizationSettingsUrl}
                     target='_blank'
                     rel='noopener noreferrer'
                     tabIndex={-1}

packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx

@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import { Flex, Link } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { InternalThemeProvider } from '../../../styledSystem';
-import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
+import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -34,25 +34,6 @@ function withLastActiveFallback(cb: () => string): string {
   }
 }
 
-function handleDashboardUrlParsing(url: string) {
-  // make sure this is a valid url
-  const __url = new URL(url);
-  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
-
-  const match = __url.href.match(regex);
-
-  if (!match) {
-    throw new Error('invalid value dashboard url structure');
-  }
-
-  // Extracting base domain, app ID with prefix, and instanceId with prefix
-  return {
-    baseDomain: `https://${match[1]}`,
-    appId: `app_${match[2]}`,
-    instanceId: `ins_${match[3]}`,
-  };
-}
-
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);

packages/clerk-js/src/ui/components/devPrompts/shared.tsx

@@ -81,3 +81,22 @@ export function PromptSuccessIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
+
+export function handleDashboardUrlParsing(url: string) {
+  // make sure this is a valid url
+  const __url = new URL(url);
+  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
+
+  const match = __url.href.match(regex);
+
+  if (!match) {
+    throw new Error('invalid value dashboard url structure');
+  }
+
+  // Extracting base domain, app ID with prefix, and instanceId with prefix
+  return {
+    baseDomain: `https://${match[1]}`,
+    appId: `app_${match[2]}`,
+    instanceId: `ins_${match[3]}`,
+  };
+}

packages/shared/src/organization.ts

@@ -38,7 +38,6 @@ export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'use
     clerk.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller,
-      onSuccess: () => {},
     });
   }, [clerk, caller]);
 }