fix(ui): remove invalid HTML nesting and add cache TTL to request access URL (#27014)

Author: SaaiAravindhRaja

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx

@@ -695,16 +695,14 @@ export const DataAssetsHeader = ({
                     </Tooltip>
                   )}
                   {requestAccessUrl && (
-                    <Typography.Link
+                    <Button
+                      className="font-semibold"
+                      data-testid="request-access-button"
                       href={requestAccessUrl}
                       rel="noopener noreferrer"
                       target="_blank">
-                      <Button
-                        className="font-semibold"
-                        data-testid="request-access-button">
-                        {t('label.request-access')}
-                      </Button>
-                    </Typography.Link>
+                      {t('label.request-access')}
+                    </Button>
                   )}
                   <ManageButton
                     isAsyncDelete

openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx

@@ -425,14 +425,14 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
           <Space className="explore-card-actions">
             {actionPopoverContent}
             {requestAccessUrl && (
-              <Typography.Link
+              <Button
+                data-testid="request-access-button"
                 href={requestAccessUrl}
                 rel="noopener noreferrer"
-                target="_blank">
-                <Button data-testid="request-access-button" type="link">
-                  {t('label.request-access')}
-                </Button>
-              </Typography.Link>
+                target="_blank"
+                type="link">
+                {t('label.request-access')}
+              </Button>
             )}
           </Space>
         )}

openmetadata-ui/src/main/resources/ui/src/hooks/useRequestAccessUrl.ts

@@ -18,7 +18,13 @@ import { getServiceByFQN } from '../rest/serviceAPI';
 import { getEntityDetailsPath } from '../utils/RouterUtils';
 import { getRequestAccessUrl } from '../utils/RequestAccessUtils';
 
-const connectionOptionsCache = new Map<string, Record<string, string> | undefined>();
+type CacheEntry = {
+  value: Record<string, string> | undefined;
+  timestamp: number;
+};
+
+const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+const connectionOptionsCache = new Map<string, CacheEntry>();
 
 const SUPPORTED_ENTITY_TYPES = new Set<EntityType>([
   EntityType.DATABASE,
@@ -79,15 +85,22 @@ export const useRequestAccessUrl = ({
         const cacheKey = `${serviceCategory}::${serviceName}`;
         let connectionOptions: Record<string, string> | undefined;
 
-        if (connectionOptionsCache.has(cacheKey)) {
-          connectionOptions = connectionOptionsCache.get(cacheKey);
+        const cachedEntry = connectionOptionsCache.get(cacheKey);
+        if (
+          cachedEntry &&
+          Date.now() - cachedEntry.timestamp < CACHE_TTL_MS
+        ) {
+          connectionOptions = cachedEntry.value;
         } else {
           const service = await getServiceByFQN(serviceCategory, serviceName);
           connectionOptions = get(
             service,
             'connection.config.connectionOptions'
           ) as Record<string, string> | undefined;
-          connectionOptionsCache.set(cacheKey, connectionOptions);
+          connectionOptionsCache.set(cacheKey, {
+            value: connectionOptions,
+            timestamp: Date.now(),
+          });
         }
         const entityUrl = `${window.location.origin}${getEntityDetailsPath(
           entityType,