ui: remove link to stmt details when already on the page

Previously, the insights on statement details for
index recommendation had a link for the statement details
page, which was not doing anything since the user was
already on the page. If they refresh using the link it
was showing wrong aggregation.
This commit removes the link when the insights is on
the statement page already, but keeps the link when
the insight is on the schema insights page.

Fixes #87752

Release note (ui change): Removal of the link on
insights pointing to Statement Details page when
it was already on the Statement Details page.

pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss

@@ -35,3 +35,7 @@
   flex: 0 0 auto;
   padding: 12px 24px 12px 0px;
 }
+
+.inline {
+  display: inline-flex;
+}

pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.tsx

@@ -17,6 +17,7 @@ import { StatementLink } from "../statementsTable";
 import IdxRecAction from "../insights/indexActionBtn";
 import {
   clusterSettings,
+  computeOrUseStmtSummary,
   Duration,
   performanceBestPractices,
   statementsRetries,
@@ -75,6 +76,7 @@ function typeCell(value: string): React.ReactElement {
 
 function descriptionCell(
   insightRec: InsightRecommendation,
+  disableStmtLink?: boolean,
 ): React.ReactElement {
   const clusterSettingsLink = (
     <>
@@ -85,6 +87,10 @@ function descriptionCell(
       {"."}
     </>
   );
+  const summary = computeOrUseStmtSummary(
+    insightRec.execution.statement,
+    insightRec.execution.summary,
+  );
   switch (insightRec.type) {
     case "CreateIndex":
     case "ReplaceIndex":
@@ -93,13 +99,25 @@ function descriptionCell(
         <>
           <div className={cx("description-item")}>
             <span className={cx("label-bold")}>Statement Fingerprint: </span>{" "}
-            <StatementLink
-              statementFingerprintID={insightRec.execution.fingerprintID}
-              statement={insightRec.execution.statement}
-              statementSummary={insightRec.execution.summary}
-              implicitTxn={insightRec.execution.implicit}
-              className={"inline"}
-            />
+            {disableStmtLink && (
+              <div className={cx("inline")}>
+                <Tooltip
+                  placement="bottom"
+                  content={insightRec.execution.statement}
+                >
+                  {summary}
+                </Tooltip>
+              </div>
+            )}
+            {!disableStmtLink && (
+              <StatementLink
+                statementFingerprintID={insightRec.execution.fingerprintID}
+                statement={insightRec.execution.statement}
+                statementSummary={insightRec.execution.summary}
+                implicitTxn={insightRec.execution.implicit}
+                className={"inline"}
+              />
+            )}
           </div>
           <div className={cx("description-item")}>
             <span className={cx("label-bold")}>Recommendation: </span>{" "}
@@ -265,6 +283,7 @@ function actionCell(
 
 export function makeInsightsColumns(
   isCockroachCloud: boolean,
+  disableStmtLink?: boolean,
 ): ColumnDescriptor<InsightRecommendation>[] {
   return [
     {
@@ -276,7 +295,8 @@ export function makeInsightsColumns(
     {
       name: "details",
       title: insightsTableTitles.details(),
-      cell: (item: InsightRecommendation) => descriptionCell(item),
+      cell: (item: InsightRecommendation) =>
+        descriptionCell(item, disableStmtLink),
       sort: (item: InsightRecommendation) => item.type,
     },
     {

pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/planDetails.tsx

@@ -210,7 +210,7 @@ function Insights({
   onChangeSortSetting,
 }: InsightsProps): React.ReactElement {
   const isCockroachCloud = useContext(CockroachCloudContext);
-  const insightsColumns = makeInsightsColumns(isCockroachCloud);
+  const insightsColumns = makeInsightsColumns(isCockroachCloud, true);
   const data = formatIdxRecommendations(
     idxRecommendations,
     plan,