LinkCreator Implementation(will change later) with requested changes

Author: fabianwolski

public/locales/en.json

@@ -61,8 +61,9 @@
     "reasonHeader": "Reason",
     "transitionHeader": "Last transition time",
     "createSupportTicketButton": "Create Support Ticket",
-    "templateId": "1-mcp_issue.yml",
-    "supportTicketTitle": "Control Plane Not Ready",
+    "supportTicketTitleReady": "MCP Ready",
+    "supportTicketTitleNotReady": "MCP Not Ready",
+    "supportTicketTitleDeletion": "MCP in Deletion",
     "supportTicketTitleIssues": "Issues with Control Plane",
     "clusterIdentifierLabel": "cluster-link",
     "whatHappenedLabel": "what-happened",

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -25,9 +25,9 @@ export default function MCPHealthPopoverButton({
   mcpName,
 }: {
   mcpStatus: ControlPlaneStatusType | undefined;
-  projectName?: string;
-  workspaceName?: string;
-  mcpName?: string;
+  projectName: string;
+  workspaceName: string;
+  mcpName: string;
 }) {
   const popoverRef = useRef(null);
   const [open, setOpen] = useState(false);
@@ -45,6 +45,19 @@ export default function MCPHealthPopoverButton({
     }
   };
 
+  const getTicketTitle = () => {
+    switch (mcpStatus?.status) {
+      case ReadyStatus.Ready:
+        return t('MCPHealthPopoverButton.supportTicketTitleReady');
+      case ReadyStatus.NotReady:
+        return t('MCPHealthPopoverButton.supportTicketTitleNotReady');
+      case ReadyStatus.InDeletion:
+        return t('MCPHealthPopoverButton.supportTicketTitleDeletion');
+      default:
+        return t('MCPHealthPopoverButton.supportTicketTitleIssues');
+    }
+  };
+
   const constructGithubIssuesLink = () => {
     const clusterDetails = `${projectName}/${workspaceName}/${mcpName}`;
 
@@ -64,11 +77,7 @@ export default function MCPHealthPopoverButton({
 
     const params = new URLSearchParams({
       template: '1-mcp_issue.yml',
-      title: `[${clusterDetails}]: ${
-        mcpStatus?.status === ReadyStatus.NotReady
-          ? t('MCPHealthPopoverButton.supportTicketTitle')
-          : t('MCPHealthPopoverButton.supportTicketTitleIssues')
-      }`,
+      title: `[${clusterDetails}]: ${getTicketTitle()}`,
       'cluster-link': clusterDetails,
       'what-happened': statusDetails,
     });
@@ -143,10 +152,6 @@ function StatusTable({
   tableColumns: AnalyticalTableColumnDefinition[];
   githubIssuesLink: string;
 }) {
-  const showSupportButton =
-    status?.status === ReadyStatus.NotReady ||
-    status?.status === ReadyStatus.InDeletion;
-
   const { t } = useTranslation();
 
   return (
@@ -160,18 +165,16 @@ function StatusTable({
           }) ?? []
         }
       />
-      {showSupportButton && (
-        <FlexBox
-          justifyContent={FlexBoxJustifyContent.End}
-          style={{ marginTop: '0.5rem' }}
-        >
-          <a href={githubIssuesLink} target="_blank" rel="noreferrer">
-            <Button>
-              {t('MCPHealthPopoverButton.createSupportTicketButton')}
-            </Button>
-          </a>
-        </FlexBox>
-      )}
+      <FlexBox
+        justifyContent={FlexBoxJustifyContent.End}
+        style={{ marginTop: '0.5rem' }}
+      >
+        <a href={githubIssuesLink} target="_blank" rel="noreferrer">
+          <Button>
+            {t('MCPHealthPopoverButton.createSupportTicketButton')}
+          </Button>
+        </a>
+      </FlexBox>
     </div>
   );
 }

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -82,7 +82,12 @@ export function ControlPlaneCard({
               alignItems="Center"
               className={styles.row}
             >
-              <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
+              <MCPHealthPopoverButton
+                mcpStatus={controlPlane.status}
+                projectName={projectName}
+                workspaceName={workspace.metadata.name ?? ''}
+                mcpName={controlPlane.metadata.name}
+              />
               <FlexBox
                 direction="Row"
                 justifyContent="SpaceBetween"

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';
 import { z } from 'zod';
 
 export enum Landscape {
@@ -11,7 +11,7 @@ export enum Landscape {
 }
 
 interface FrontendConfigContextType extends FrontendConfig {
-  links: DocLinkCreator;
+  links: LinkCreator;
 }
 
 export const FrontendConfigContext =
@@ -29,7 +29,10 @@ 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: FrontendConfigContextType = {
     links: docLinks,
     ...config,
@@ -61,6 +64,7 @@ const FrontendConfigSchema = z.object({
   backendUrl: z.string(),
   gatewayUrl: z.string(),
   documentationBaseUrl: z.string(),
+  githubBaseUrl: z.string(),
   oidcConfig: OidcConfigSchema,
   landscape: z.optional(z.nativeEnum(Landscape)),
 });

src/lib/shared/links.ts

@@ -2,9 +2,9 @@ export class LinkCreator {
   private baseUrl: string;
   private githubBaseUrl: string;
 
-  constructor(baseUrl: string, githubBaseUrl: string) {
+  constructor(baseUrl: string, githubBaseUrl?: string) {
     this.baseUrl = baseUrl;
-    this.githubBaseUrl = githubBaseUrl;
+    this.githubBaseUrl = githubBaseUrl || baseUrl;
   }
   private createLink(path: string) {
     return `${this.baseUrl}${path}`;

src/utils/testing.ts

@@ -7,5 +7,5 @@ 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

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