Implement URL link and injected chart to url link component

dashboard/src/components/porter-form/FormDebugger.tsx

@@ -11,6 +11,7 @@ import "ace-builds/src-noconflict/mode-text";
 
 import Heading from "../form-components/Heading";
 import Helper from "../form-components/Helper";
+import { ChartType } from "shared/types";
 
 type PropsType = {
   goBack: () => void;
@@ -170,6 +171,13 @@ export default class FormDebugger extends Component<PropsType, StateType> {
           rightTabOptions={this.state.showBonusTabs ? tabOptions : []}
           renderTabContents={this.renderTabContents}
           saveButtonText={"Test Submit"}
+          injectedProps={{
+            "url-link": {
+              chart: {
+                name: "something",
+              } as ChartType,
+            },
+          }}
         />
       </StyledFormDebugger>
     );

dashboard/src/components/porter-form/field-components/UrlLink.tsx

@@ -1,22 +1,57 @@
+import { get } from "lodash";
 import React from "react";
 import styled from "styled-components";
 import { UrlLinkField } from "../types";
 import { hasSetValue } from "../utils";
 
+const populate = (str: string, obj: unknown) => {
+  return str.replace(/{.+}/g, (match) => {
+    const key = match.replace("{", "").replace("}", "");
+    let value;
+    if (key[0] === ".") {
+      value = get(obj, key.substring(1));
+    } else {
+      value = get(obj, key);
+    }
+
+    if (typeof value !== "string") {
+      return "Couldn't find value " + key;
+    }
+
+    return value;
+  });
+};
+
 const UrlLink = (props: UrlLinkField) => {
-  const { value, label } = props;
+  const { value, label, injectedProps } = props;
 
   if (!hasSetValue(props)) {
     return null;
   }
 
+  let val = value;
+
+  if (Array.isArray(value)) {
+    val = value[0];
+  }
+
+  if (typeof val !== "string") {
+    return null;
+  }
+
+  if (!injectedProps?.chart) {
+    return null;
+  }
+
+  const populatedUrl = populate(value[0], injectedProps.chart);
+
   return (
     <>
       <Label>{label}</Label>
       <StyledServiceRow>
-        <a href={value[0]} target="_blank">
+        <a href={populatedUrl} target="_blank">
           <i className="material-icons-outlined">link</i>
-          {value[0]}
+          {populatedUrl}
         </a>
       </StyledServiceRow>
     </>

dashboard/src/components/porter-form/types.ts

@@ -5,7 +5,7 @@
 
 // YAML Field interfaces
 
-import { ContextProps } from "../../shared/types";
+import { ChartType, ContextProps } from "../../shared/types";
 
 export interface GenericField {
   id: string;
@@ -149,6 +149,9 @@ export interface TextAreaField extends GenericInputField {
 export interface UrlLinkField extends GenericInputField {
   type: "url-link";
   label: string;
+  injectedProps: {
+    chart: ChartType;
+  };
 }
 
 export type FormField =

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -866,6 +866,9 @@ const ExpandedChart: React.FC<Props> = (props) => {
                                 ? stackEnvGroups
                                 : undefined,
                           },
+                          "url-link": {
+                            chart: currentChart,
+                          },
                         }}
                       />
                     </BodyWrapper>

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -395,6 +395,9 @@ export const ExpandedJobChartFC: React.FC<{
                   availableSyncEnvGroups:
                     isStack && !disableForm ? stackEnvGroups : undefined,
                 },
+                "url-link": {
+                  chart: chart,
+                },
               }}
             />
           )}