diff --git a/src/components/ControlPlane/MCPHealthPopoverButton.tsx b/src/components/ControlPlane/MCPHealthPopoverButton.tsx index 373601f3..a44751ce 100644 --- a/src/components/ControlPlane/MCPHealthPopoverButton.tsx +++ b/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/useLink.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[] = [ diff --git a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx index 268e785b..a0ee6c31 100644 --- a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx +++ b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx @@ -8,7 +8,7 @@ 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/useLink.ts'; import { useTranslation } from 'react-i18next'; interface Props { @@ -16,7 +16,7 @@ interface Props { } 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 diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx index 5eee5d0d..f05a82ff 100644 --- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx +++ b/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/useLink.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'), }} /> diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlBaseDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlBaseDialog.tsx index a11037ce..0bc450ff 100644 --- a/src/components/Dialogs/KubectlCommandInfo/KubectlBaseDialog.tsx +++ b/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/useLink.ts'; 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>({}); useEffect(() => { @@ -165,9 +165,7 @@ export const KubectlBaseDialog = ({ - ), + link1: , }} /> diff --git a/src/context/FrontendConfigContext.tsx b/src/context/FrontendConfigContext.tsx index 567d8cd2..7d800b45 100644 --- a/src/context/FrontendConfigContext.tsx +++ b/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(null); +export const FrontendConfigContext = createContext(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 ( - {children} + + {children} + ); } diff --git a/src/lib/shared/links.ts b/src/lib/shared/links.ts deleted file mode 100644 index db3a9deb..00000000 --- a/src/lib/shared/links.ts +++ /dev/null @@ -1,38 +0,0 @@ -export class LinkCreator { - private baseUrl: string; - private githubBaseUrl: string; - - constructor(baseUrl: string, githubBaseUrl?: string) { - this.baseUrl = baseUrl; - this.githubBaseUrl = githubBaseUrl || baseUrl; - } - private createLink(path: string) { - return `${this.baseUrl}${path}`; - } - - private createGithubLink(path: string) { - return `${this.githubBaseUrl}${path}`; - } - - public get COMMUNITY_PAGE(): string { - return this.createLink('/'); - } - public get COM_PAGE_GETTING_STARTED(): string { - return this.createLink( - '/docs/managed-control-planes/get-started/get-started-mcp', - ); - } - public get COM_PAGE_GETTING_STARTED_WORKSPACE(): string { - return this.createLink( - '/docs/managed-control-planes/get-started/get-started-mcp#4-create-workspace', - ); - } - public get COM_PAGE_GETTING_STARTED_MCP(): string { - return this.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'); - } -} diff --git a/src/lib/shared/useLink.ts b/src/lib/shared/useLink.ts new file mode 100644 index 00000000..1d20e703 --- /dev/null +++ b/src/lib/shared/useLink.ts @@ -0,0 +1,22 @@ +import { useFrontendConfig } from '../../context/FrontendConfigContext'; + +export function useLink() { + const { documentationBaseUrl, githubBaseUrl } = useFrontendConfig(); + + const createLink = (path: string) => `${documentationBaseUrl}${path}`; + const createGithubLink = (path: string) => `${githubBaseUrl}${path}`; + + return { + documentationHomepage: createLink('/'), + gettingStartedGuide: createLink( + '/docs/managed-control-planes/get-started/get-started-mcp', + ), + workspaceCreationGuide: createLink( + '/docs/managed-control-planes/get-started/get-started-mcp#4-create-workspace', + ), + mcpCreationGuide: createLink( + '/docs/managed-control-planes/get-started/get-started-mcp#5-create-managedcontrolplane', + ), + githubIssuesSupportTicket: createGithubLink('/support/issues/new'), + }; +} diff --git a/src/utils/testing.ts b/src/utils/testing.ts index 4685b2f2..ab7c96ff 100644 --- a/src/utils/testing.ts +++ b/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, }; diff --git a/src/views/Login.tsx b/src/views/Login.tsx index c1860313..b78d3d83 100644 --- a/src/views/Login.tsx +++ b/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/useLink.ts'; 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() { {t('Login.description')}

- + {t('Login.learnMore')}