Merge pull request #2564 from porter-dev/feat/open-application-in-new-tab

[POR-809] feat: support opening app details in new tab

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -1,4 +1,10 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import styled from "styled-components";
 import { useHistory, useLocation, useRouteMatch } from "react-router";
 
@@ -21,6 +27,8 @@ import {
   MuiThemeProvider,
   withStyles,
 } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+import _ from "lodash";
 
 type Props = {
   chart: ChartType;
@@ -117,97 +125,114 @@ const Chart: React.FunctionComponent<Props> = ({
     timeStyle: "long",
   });
 
+  const getExpandedChartLinkURL = useCallback(() => {
+    const params = new Proxy(new URLSearchParams(window.location.search), {
+      get: (searchParams, prop: string) => searchParams.get(prop),
+    });
+
+    const cluster = context.currentCluster?.name;
+
+    const route = `${isJob ? "/jobs" : "/applications"}/${cluster}/${
+      chart.namespace
+    }/${chart.name}`;
+
+    const newParams = {
+      // @ts-ignore
+      project_id: params.project_id,
+      closeChartRedirectUrl,
+    };
+
+    const newURLSearchParams = new URLSearchParams(
+      _.omitBy(newParams, _.isNil)
+    );
+
+    return `${route}?${newURLSearchParams.toString()}`;
+  }, [chart, context.currentCluster, isJob, closeChartRedirectUrl]);
+
   return (
-    <StyledChart
-      onClick={() => {
-        const cluster = context.currentCluster?.name;
-        let route = `${isJob ? "/jobs" : "/applications"}/${cluster}/${
-          chart.namespace
-        }/${chart.name}`;
-        pushFiltered({ location, history }, route, ["project_id"], {
-          closeChartRedirectUrl,
-        });
-      }}
-    >
-      <Title>
-        <IconWrapper>{renderIcon()}</IconWrapper>
-        {chart.canonical_name === "" ? chart.name : chart.canonical_name}
-        {chart?.config?.description && (
-          <>
-            <Dot style={{ marginLeft: "9px", color: "#ffffff88" }}>•</Dot>
-            <MuiThemeProvider theme={theme}>
-              <Tooltip
-                TransitionComponent={Zoom}
-                placement={"bottom-start"}
-                title={
-                  <div
-                    style={{
-                      fontFamily: "Work Sans, sans-serif",
-                      fontSize: "12px",
-                      fontWeight: "normal",
-                      padding: "5px 6px",
-                      color: "#ffffffdd",
-                      lineHeight: "16px",
-                    }}
-                  >
-                    {chart.config.description as string}
-                  </div>
-                }
-              >
-                <Description>{chart.config.description}</Description>
-              </Tooltip>
-            </MuiThemeProvider>
-          </>
-        )}
-      </Title>
-
-      <BottomWrapper>
-        <InfoWrapper>
-          <StatusIndicator
-            controllers={filteredControllers}
-            status={chart.info.status}
-            margin_left={"17px"}
-          />
-          <LastDeployed>
-            {jobStatus?.status ? (
-              <>
-                <Dot>•</Dot>
-                <JobStatus status={jobStatus.status}>
-                  {jobStatus.status === JobStatusType.Running
-                    ? "Started running"
-                    : `Last run ${jobStatus.status}`}{" "}
-                  at {readableDate(jobStatus.start_time)}
-                </JobStatus>
-              </>
-            ) : (
-              <>
-                <Dot>•</Dot>
-                <JobStatus>
-                  Last deployed {readableDate(chart.info.last_deployed)}
-                </JobStatus>
-              </>
-            )}
-            {chart.config?.schedule?.enabled ? (
-              <>
-                <Dot style={{ marginLeft: "10px" }}>•</Dot>
-                <JobStatus>
-                  Next run {rtf.format(interval?.next().toDate() || new Date())}
-                </JobStatus>
-              </>
-            ) : null}
-          </LastDeployed>
-        </InfoWrapper>
-
-        <TagWrapper>
-          Namespace
-          <NamespaceTag>{chart.namespace}</NamespaceTag>
-        </TagWrapper>
-      </BottomWrapper>
-
-      <TopRightContainer>
-        <span>v{chart.version}</span>
-      </TopRightContainer>
-    </StyledChart>
+    <Link to={getExpandedChartLinkURL}>
+      <StyledChart>
+        <Title>
+          <IconWrapper>{renderIcon()}</IconWrapper>
+          {chart.canonical_name === "" ? chart.name : chart.canonical_name}
+          {chart?.config?.description && (
+            <>
+              <Dot style={{ marginLeft: "9px", color: "#ffffff88" }}>•</Dot>
+              <MuiThemeProvider theme={theme}>
+                <Tooltip
+                  TransitionComponent={Zoom}
+                  placement={"bottom-start"}
+                  title={
+                    <div
+                      style={{
+                        fontFamily: "Work Sans, sans-serif",
+                        fontSize: "12px",
+                        fontWeight: "normal",
+                        padding: "5px 6px",
+                        color: "#ffffffdd",
+                        lineHeight: "16px",
+                      }}
+                    >
+                      {chart.config.description as string}
+                    </div>
+                  }
+                >
+                  <Description>{chart.config.description}</Description>
+                </Tooltip>
+              </MuiThemeProvider>
+            </>
+          )}
+        </Title>
+
+        <BottomWrapper>
+          <InfoWrapper>
+            <StatusIndicator
+              controllers={filteredControllers}
+              status={chart.info.status}
+              margin_left={"17px"}
+            />
+            <LastDeployed>
+              {jobStatus?.status ? (
+                <>
+                  <Dot>•</Dot>
+                  <JobStatus status={jobStatus.status}>
+                    {jobStatus.status === JobStatusType.Running
+                      ? "Started running"
+                      : `Last run ${jobStatus.status}`}{" "}
+                    at {readableDate(jobStatus.start_time)}
+                  </JobStatus>
+                </>
+              ) : (
+                <>
+                  <Dot>•</Dot>
+                  <JobStatus>
+                    Last deployed {readableDate(chart.info.last_deployed)}
+                  </JobStatus>
+                </>
+              )}
+              {chart.config?.schedule?.enabled ? (
+                <>
+                  <Dot style={{ marginLeft: "10px" }}>•</Dot>
+                  <JobStatus>
+                    Next run{" "}
+                    {rtf.format(interval?.next().toDate() || new Date())}
+                  </JobStatus>
+                </>
+              ) : null}
+            </LastDeployed>
+          </InfoWrapper>
+
+          <TagWrapper>
+            Namespace
+            <NamespaceTag>{chart.namespace}</NamespaceTag>
+          </TagWrapper>
+        </BottomWrapper>
+
+        <TopRightContainer>
+          <span>v{chart.version}</span>
+        </TopRightContainer>
+      </StyledChart>
+    </Link>
   );
 };