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/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -2,15 +2,28 @@ 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 { Animated } from '@/ui/elements/Animated';
 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 +34,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 +228,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}
@@ -264,43 +298,45 @@ const EnableOrganizationsPromptInternal = ({
             `}
           />
 
-          <Flex
-            direction='col'
-            justify='center'
-            sx={t => ({
-              padding: `${t.sizes.$4} ${t.sizes.$6}`,
-              gap: t.sizes.$3,
-            })}
-          >
-            {isEnabled ? (
-              <PromptButton
-                variant='outline'
-                onClick={() => onSuccess?.()}
-              >
-                Continue
-              </PromptButton>
-            ) : (
-              <>
-                <PromptButton
-                  variant='solid'
-                  onClick={handleEnableOrganizations}
-                  disabled={isLoading}
-                >
-                  Enable Organizations
-                </PromptButton>
-
+          <Animated asChild>
+            <Flex
+              direction='col'
+              justify='center'
+              sx={t => ({
+                padding: `${t.sizes.$4} ${t.sizes.$6}`,
+                gap: t.sizes.$3,
+              })}
+            >
+              {isEnabled ? (
                 <PromptButton
                   variant='outline'
-                  onClick={() => {
-                    clerk?.__internal_closeEnableOrganizationsPrompt?.();
-                    onClose?.();
-                  }}
+                  onClick={() => onSuccess?.()}
                 >
-                  I&apos;ll remove it myself
+                  Continue
                 </PromptButton>
-              </>
-            )}
-          </Flex>
+              ) : (
+                <>
+                  <PromptButton
+                    variant='solid'
+                    onClick={handleEnableOrganizations}
+                    disabled={isLoading}
+                  >
+                    Enable Organizations
+                  </PromptButton>
+
+                  <PromptButton
+                    variant='outline'
+                    onClick={() => {
+                      clerk?.__internal_closeEnableOrganizationsPrompt?.();
+                      onClose?.();
+                    }}
+                  >
+                    I&apos;ll remove it myself
+                  </PromptButton>
+                </>
+              )}
+            </Flex>
+          </Animated>
         </PromptContainer>
       </Modal>
     </Portal>

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

@@ -8,7 +8,13 @@ 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,
+  handleDashboardUrlParsing,
+  PromptContainer,
+  PromptSuccessIcon,
+} from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -34,25 +40,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]);
 }