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

@@ -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, `""`) + `"`;

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,

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) {