Requested Changes Added

Author: fabianwolski

frontend-config.json

@@ -1,5 +1,6 @@
 {
   "backendUrl": "http://localhost:3000",
   "landscape": "LOCAL",
-  "documentationBaseUrl": "http://localhost:3000"
+  "documentationBaseUrl": "http://localhost:3000",
+  "githubBaseUrl": "http://localhost:3000"
 }

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -43,7 +43,7 @@ export default function MCPHealthPopoverButton({
     }
   };
 
-  const handleCopyStatusClick = () => {
+  const constructGithubIssuesLink = () => {
     const clusterDetails = `${projectName}/${workspaceName}/${mcpName}`;
 
     const statusDetails = mcpStatus?.conditions
@@ -61,17 +61,17 @@ export default function MCPHealthPopoverButton({
       : '';
 
     const params = new URLSearchParams({
-      template: t('MCPHealthPopoverButton.templateId'),
+      template: '1-mcp_issue.yml',
       title: `[${clusterDetails}]: ${
         mcpStatus?.status === ReadyStatus.NotReady
           ? t('MCPHealthPopoverButton.supportTicketTitle')
-          : t('MCPHealthPopoverButton.supportTicketIssues')
+          : t('MCPHealthPopoverButton.supportTicketTitleIssues')
       }`,
       'cluster-link': clusterDetails,
       'what-happened': statusDetails,
     });
 
-    window.open(`${links.COM_PAGE_SUPPORT_ISSUE}?${params}`, '_blank');
+    return `${links.COM_PAGE_SUPPORT_GITHUB_ISSUE}?${params}`;
   };
 
   const statusTableColumns: AnalyticalTableColumnDefinition[] = [
@@ -122,7 +122,7 @@ export default function MCPHealthPopoverButton({
           <StatusTable
             status={mcpStatus}
             tableColumns={statusTableColumns}
-            onCopyClick={handleCopyStatusClick}
+            githubIssuesLink={constructGithubIssuesLink()}
           />
         }
       </Popover>
@@ -133,16 +133,18 @@ export default function MCPHealthPopoverButton({
 function StatusTable({
   status,
   tableColumns,
-  onCopyClick,
+  githubIssuesLink,
 }: {
   status: ControlPlaneStatusType | undefined;
   tableColumns: AnalyticalTableColumnDefinition[];
-  onCopyClick: () => void;
+  githubIssuesLink: string;
 }) {
   const showSupportButton =
     status?.status === ReadyStatus.NotReady ||
     status?.status === ReadyStatus.InDeletion;
 
+  const { t } = useTranslation();
+
   return (
     <div style={{ width: 600 }}>
       <AnalyticalTable
@@ -159,7 +161,11 @@ function StatusTable({
           justifyContent={FlexBoxJustifyContent.End}
           style={{ marginTop: '0.5rem' }}
         >
-          <Button onClick={onCopyClick}>Create Support Ticket</Button>
+          <a href={githubIssuesLink} target="_blank" rel="noreferrer">
+            <Button>
+              {t('MCPHealthPopoverButton.createSupportTicketButton')}
+            </Button>
+          </a>
         </FlexBox>
       )}
     </div>

src/context/FrontendConfigContext.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, createContext, use } from 'react';
-import { DocLinkCreator } from '../lib/shared/links';
+import { LinkCreator } from '../lib/shared/links';
 
 export enum Landscape {
   Live = 'LIVE',
@@ -13,28 +13,33 @@ interface FrontendConfigContextProps {
   backendUrl: string;
   landscape?: Landscape;
   documentationBaseUrl: string;
-  links: DocLinkCreator;
+  githubBaseUrl: string;
+  links: LinkCreator;
 }
 
-export const FrontendConfigContext = createContext<FrontendConfigContextProps | null>(
-  null,
-);
-
+export const FrontendConfigContext =
+  createContext<FrontendConfigContextProps | null>(null);
 
 const fetchPromise = fetch('/frontend-config.json').then((res) => res.json());
 
 interface FrontendConfigProviderProps {
   children: ReactNode;
 }
 
-export function FrontendConfigProvider({ children }: FrontendConfigProviderProps) {
+export function FrontendConfigProvider({
+  children,
+}: FrontendConfigProviderProps) {
   const config = use(fetchPromise);
-  const docLinks = new DocLinkCreator(config.documentationBaseUrl);
+  const docLinks = new LinkCreator(
+    config.documentationBaseUrl,
+    config.githubBaseUrl,
+  );
   const value: FrontendConfigContextProps = {
     links: docLinks,
     backendUrl: config.backendUrl,
     landscape: config.landscape,
     documentationBaseUrl: config.documentationBaseUrl,
+    githubBaseUrl: config.githubBaseUrl,
   };
 
   return (

src/lib/shared/links.ts

@@ -1,13 +1,19 @@
-export class DocLinkCreator {
+export class LinkCreator {
   private baseUrl: string;
+  private githubBaseUrl: string;
 
-  constructor(baseUrl: string) {
+  constructor(baseUrl: string, githubBaseUrl: string) {
     this.baseUrl = baseUrl;
+    this.githubBaseUrl = githubBaseUrl;
   }
   private createLink(path: string) {
     return `${this.baseUrl}${path}`;
   }
 
+  private createGithubLink(path: string) {
+    return `${this.githubBaseUrl}${path}`;
+  }
+
   public get COMMUNITY_PAGE(): string {
     return this.createLink('/');
   }
@@ -26,7 +32,7 @@ export class DocLinkCreator {
       '/docs/managed-control-planes/get-started/get-started-mcp#5-create-managedcontrolplane',
     );
   }
-  public get COM_PAGE_SUPPORT_ISSUE(): string {
-    return this.createLink('/support/issues/new');
+  public get COM_PAGE_SUPPORT_GITHUB_ISSUE(): string {
+    return this.createGithubLink('/support/issues/new');
   }
 }

src/utils/testing.ts

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

src/views/ControlPlanes/ControlPlaneView.tsx

@@ -80,7 +80,12 @@ export default function ControlPlaneView() {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <MCPHealthPopoverButton mcpStatus={mcp.status} />
+                  <MCPHealthPopoverButton
+                    mcpStatus={mcp.status}
+                    projectName={projectName}
+                    workspaceName={workspaceName}
+                    mcpName={controlPlaneName}
+                  />
                   <CopyKubeconfigButton />
                 </div>
               }