From d466721cf2c318b53febf71db8267675c963ca32 Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Mon, 27 Mar 2023 12:10:28 +0000
Subject: [PATCH] ui: drop index with space

Previously, if the index had a space on its name,
it would fail to drop.
This commit adds quotes so it can be executed.

Fixes #97988

Release note (bug fix): Index recommendation to DROP an index
that have a space on its name can now be properly executed.
---
 pkg/ui/workspaces/cluster-ui/src/api/safesql.ts            | 2 +-
 pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts  | 7 ++++++-
 .../cluster-ui/src/databaseTablePage/databaseTablePage.tsx | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts b/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts
index 3e560dbf10aa..6166c91786d7 100644
--- a/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/api/safesql.ts
@@ -83,7 +83,7 @@ export class SQL implements SQLStringer {
 // case sensitive when used in a query.  If the input string contains a zero
 // byte, the result will be truncated immediately before it.
 // Cribbed from https://github.com/lib/pq and Typescript-ified.
-function QuoteIdentifier(name: string): string {
+export function QuoteIdentifier(name: string): string {
   // Use a search regex to replace all occurrences instead of just the first occurrence.
   const search = /"/g;
   return `"` + name.replace(search, `""`) + `"`;
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts
index 64794d20bd33..b44eadf9d7a5 100644
--- a/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/api/schemaInsightsApi.ts
@@ -24,6 +24,7 @@ import {
   recommendDropUnusedIndex,
 } from "../insights";
 import { HexStringToInt64String } from "../util";
+import { QuoteIdentifier } from "./safesql";
 
 // Export for db-console import from clusterUiApi.
 export type { InsightRecommendation } from "../insights";
@@ -72,7 +73,11 @@ function clusterIndexUsageStatsToSchemaInsight(
         results[key] = {
           type: "DropIndex",
           database: row.database_name,
-          query: `DROP INDEX ${row.schema_name}.${row.table_name}@${row.index_name};`,
+          query: `DROP INDEX ${QuoteIdentifier(
+            row.schema_name,
+          )}.${QuoteIdentifier(row.table_name)}@${QuoteIdentifier(
+            row.index_name,
+          )};`,
           indexDetails: {
             table: row.table_name,
             indexID: row.index_id,
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
index 596b07bebe99..4b0bef8dad98 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -60,6 +60,7 @@ import { RecommendationType } from "../indexDetailsPage";
 import LoadingError from "../sqlActivity/errorComponent";
 import { Loading } from "../loading";
 import { UIConfigState } from "../store";
+import { QuoteIdentifier } from "../api/safesql";
 
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
@@ -375,7 +376,9 @@ export class DatabaseTablePage extends React.Component<
     const query = indexStat.indexRecommendations.map(recommendation => {
       switch (recommendation.type) {
         case "DROP_UNUSED":
-          return `DROP INDEX ${this.props.name}@${indexStat.indexName};`;
+          return `DROP INDEX ${QuoteIdentifier(
+            this.props.name,
+          )}@${QuoteIdentifier(indexStat.indexName)};`;
       }
     });
     if (query.length === 0) {