Refactor: Rework DocLinkCreator class

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -17,7 +17,7 @@ import {
 import ReactTimeAgo from 'react-time-ago';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import { useTranslation } from 'react-i18next';
-import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
+import { useLink } from '../../lib/shared/links.ts';
 export default function MCPHealthPopoverButton({
   mcpStatus,
   projectName,
@@ -31,7 +31,7 @@ export default function MCPHealthPopoverButton({
 }) {
   const popoverRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const { links } = useFrontendConfig();
+  const { githubIssuesSupportTicket } = useLink();
 
   const { t } = useTranslation();
 
@@ -82,7 +82,7 @@ export default function MCPHealthPopoverButton({
       'what-happened': statusDetails,
     });
 
-    return `${links.COM_PAGE_SUPPORT_GITHUB_ISSUE}?${params}`;
+    return `${githubIssuesSupportTicket}?${params}`;
   };
 
   const statusTableColumns: AnalyticalTableColumnDefinition[] = [

src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx

@@ -8,15 +8,15 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { ControlPlaneListWorkspaceGridTile } from './ControlPlaneListWorkspaceGridTile.tsx';
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
 import { ListWorkspaces } from '../../../lib/api/types/crate/listWorkspaces.ts';
-import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
+import { useLink } from '../../../lib/shared/links.ts';
 import { useTranslation } from 'react-i18next';
 
 interface Props {
   projectName: string;
 }
 
 export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {
-  const { links } = useFrontendConfig();
+  const { workspaceCreationGuide } = useLink();
   const { data: allWorkspaces, error } = useApiResource(
     ListWorkspaces(projectName),
   );
@@ -45,7 +45,7 @@ export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {
             design={ButtonDesign.Emphasized}
             icon="sap-icon://question-mark"
             onClick={() => {
-              window.open(links.COM_PAGE_GETTING_STARTED_WORKSPACE, '_blank');
+              window.open(workspaceCreationGuide, '_blank');
             }}
           >
             Help

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -35,7 +35,7 @@ import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
 import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
-import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
+import { useLink } from '../../../lib/shared/links.ts';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 interface Props {
@@ -65,7 +65,7 @@ export function ControlPlaneListWorkspaceGridTile({
     DeleteWorkspaceResource(projectNamespace, workspaceName),
   );
 
-  const { links } = useFrontendConfig();
+  const { mcpCreationGuide } = useLink();
   const errorView = createErrorView(cpsError);
 
   function createErrorView(error: APIError) {
@@ -155,7 +155,7 @@ export function ControlPlaneListWorkspaceGridTile({
               subtitle={t('IllustratedBanner.subtitleMessage')}
               illustrationName={IllustrationMessageType.NoData}
               help={{
-                link: links.COM_PAGE_GETTING_STARTED_MCP,
+                link: mcpCreationGuide,
                 buttonText: t('IllustratedBanner.helpButton'),
               }}
             />

src/components/Dialogs/KubectlCommandInfo/KubectlBaseDialog.tsx

@@ -14,7 +14,7 @@ import {
 import { KubectlTerminal } from './KubectlTerminal';
 import { useState, useEffect, ReactNode } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
+import { useLink } from '../../../lib/shared/links';
 
 export interface FormField {
   id: string;
@@ -47,7 +47,7 @@ export const KubectlBaseDialog = ({
   customCommands,
 }: KubectlBaseDialogProps) => {
   const { t } = useTranslation();
-  const { links } = useFrontendConfig();
+  const { gettingStartedGuide } = useLink();
   const [formValues, setFormValues] = useState<Record<string, string>>({});
 
   useEffect(() => {
@@ -165,9 +165,7 @@ export const KubectlBaseDialog = ({
           <Trans
             i18nKey="KubectlBaseDialog.onboardingGuide"
             components={{
-              link1: (
-                <Link href={links.COM_PAGE_GETTING_STARTED} target="_blank" />
-              ),
+              link1: <Link href={gettingStartedGuide} target="_blank" />,
             }}
           />
         </MessageStrip>

src/context/FrontendConfigContext.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, createContext, use } from 'react';
-import { LinkCreator } from '../lib/shared/links';
 import { z } from 'zod';
 
 export enum Landscape {
@@ -10,12 +9,7 @@ export enum Landscape {
   Local = 'LOCAL',
 }
 
-interface FrontendConfigContextType extends FrontendConfig {
-  links: LinkCreator;
-}
-
-export const FrontendConfigContext =
-  createContext<FrontendConfigContextType | null>(null);
+export const FrontendConfigContext = createContext<FrontendConfig | null>(null);
 
 const fetchPromise = fetch('/frontend-config.json')
   .then((res) => res.json())
@@ -29,16 +23,10 @@ export function FrontendConfigProvider({
   children,
 }: FrontendConfigProviderProps) {
   const config = use(fetchPromise);
-  const docLinks = new LinkCreator(
-    config.documentationBaseUrl,
-    config.githubBaseUrl,
-  );
-  const value: FrontendConfigContextType = {
-    links: docLinks,
-    ...config,
-  };
   return (
-    <FrontendConfigContext value={value}>{children}</FrontendConfigContext>
+    <FrontendConfigContext.Provider value={config}>
+      {children}
+    </FrontendConfigContext.Provider>
   );
 }
 

src/lib/shared/links.ts

@@ -1,38 +1,25 @@
-export class LinkCreator {
-  private baseUrl: string;
-  private githubBaseUrl: string;
+import { useFrontendConfig } from '../../context/FrontendConfigContext';
 
-  constructor(baseUrl: string, githubBaseUrl?: string) {
-    this.baseUrl = baseUrl;
-    this.githubBaseUrl = githubBaseUrl || baseUrl;
-  }
-  private createLink(path: string) {
-    return `${this.baseUrl}${path}`;
-  }
+export function useLink() {
+  const { documentationBaseUrl, githubBaseUrl } = useFrontendConfig();
 
-  private createGithubLink(path: string) {
-    return `${this.githubBaseUrl}${path}`;
+  if (!documentationBaseUrl || !githubBaseUrl) {
+    throw new Error('useLink must be used within a FrontendConfigProvider');
   }
+  const createLink = (path: string) => `${documentationBaseUrl}${path}`;
+  const createGithubLink = (path: string) => `${githubBaseUrl}${path}`;
 
-  public get COMMUNITY_PAGE(): string {
-    return this.createLink('/');
-  }
-  public get COM_PAGE_GETTING_STARTED(): string {
-    return this.createLink(
+  return {
+    documentationHomepage: createLink('/'),
+    gettingStartedGuide: createLink(
       '/docs/managed-control-planes/get-started/get-started-mcp',
-    );
-  }
-  public get COM_PAGE_GETTING_STARTED_WORKSPACE(): string {
-    return this.createLink(
+    ),
+    workspaceCreationGuide: createLink(
       '/docs/managed-control-planes/get-started/get-started-mcp#4-create-workspace',
-    );
-  }
-  public get COM_PAGE_GETTING_STARTED_MCP(): string {
-    return this.createLink(
+    ),
+    mcpCreationGuide: createLink(
       '/docs/managed-control-planes/get-started/get-started-mcp#5-create-managedcontrolplane',
-    );
-  }
-  public get COM_PAGE_SUPPORT_GITHUB_ISSUE(): string {
-    return this.createGithubLink('/support/issues/new');
-  }
+    ),
+    githubIssuesSupportTicket: createGithubLink('/support/issues/new'),
+  };
 }

src/utils/testing.ts

@@ -1,11 +1,12 @@
-import { LinkCreator } from '../lib/shared/links.ts';
 import { Landscape } from '../context/FrontendConfigContext.tsx';
 
 export const isInTestingMode: boolean = !!window.Cypress;
 const documentationBaseUrl = 'http://localhost:3000';
+const githubBaseUrl = 'https://github.com/example/repo';
+
 export const mockedFrontendConfig = {
   backendUrl: 'http://localhost:3000',
   landscape: Landscape.Local,
-  documentationBaseUrl: 'http://localhost:3000',
-  links: new LinkCreator(documentationBaseUrl),
+  documentationBaseUrl: documentationBaseUrl,
+  githubBaseUrl: githubBaseUrl,
 };

src/views/Login.tsx

@@ -3,12 +3,12 @@ import { Button, Card, FlexBox, Text } from '@ui5/webcomponents-react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import './login.css';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { useFrontendConfig } from '../context/FrontendConfigContext';
+import { useLink } from '../lib/shared/links';
 import { useTranslation } from 'react-i18next';
 
 export default function LoginView() {
   const auth = useAuth();
-  const { links } = useFrontendConfig();
+  const { documentationHomepage } = useLink();
   const { t } = useTranslation();
 
   return (
@@ -26,7 +26,7 @@ export default function LoginView() {
           <Text>{t('Login.description')}</Text>
           <Text>
             <p>
-              <a href={links.COMMUNITY_PAGE} target="_blank" rel="noreferrer">
+              <a href={documentationHomepage} target="_blank" rel="noreferrer">
                 {t('Login.learnMore')}
               </a>
             </p>